本文已参与「新人创作礼」活动，一起开启掘金创作之路
本文记录项目中常用到的语法。可快速上手使用。欢迎访问我的 个人博客
let声明
新增的let类似于我们js常用的var，只是var只能在所声明的代码块内有效
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
- let声明的变量不能在代码块外访问。
- let声明的变量只能在声明之后才能使用。
- 不能再相同作用域内重复声明。
实战总结：现在项目基本上都有代码规范和代码检查，基本不会使用到var。
const声明
const声明的常量不可改变，这里指的是变量指向的内存地址不变。对数值、字符串、布尔值等常量不可修改。而对象、数字等变量指向的是指针，可以修改实际存储的属性值。
const a = 1
a = 2 // 失败报错
const b = {name: 'b'}
b.name = 'c'
b // {name: 'c'}
- const同let一样块作用域内作用。且声明后才可使用。
- const声明变量值类型不可修改，引用类型可以修改内部属性、结构，不可重新赋值。
实战总结：实际使用多数是基础数据类型，不允许修改。
解构赋值
1. 对象结构赋值
可以说是我用的最多也是最好用的语法了。声明变量并从对象或者数组中取某些值。
let {a, b = 2, c: d, e: {f}} = {a: 1, c: 3, e: {f:4}}
a // 1
b // 2 对象没有该属性时赋值默认值
d // 3
c // Uncaught ReferenceError: c is not defined
f //4
- 可以一次声明多个变量，直接从对象取值。
- c:d： 从对象取值c赋值给变量d
- f：可从嵌套的结构中取值
- b = 2：对象没有该属性时，即对应的属性值为undefined，赋值默认值
2. 数组解构赋值
解构赋值同样可用于数组，或者具有Iterator 接口的数据结构如 Set。
let [a, [b]] = [1, [2]]
a // 1
b // 2
let [x, y, z = 'c'] = new Set(['a', 'b'])
x // a
z // c
- 数据类似对象解构赋值，只是根据索引位置取赋值
- 对象和数组解构赋值都可以设置默认值，当匹配不到时，变量会赋值默认值
实战总结：实用性比较强，虽然只是取对象或者数组的属性值，但可以用地方很多。
let x = 1, y=2;
[x, y] = [y, x] // 用于交换属性值
x // 2
y // 1
let params = {a: 1, b: 2}
function test({a, b, c = 3}, d = 4) { // 方法参数的解构赋值
return {
a, // 1
b, // 2
c, // 3
d // 4
}
}
let {d} = test(params) // 解构赋值直接取值
模板字符串
这个也是比较常用的语法，比如使用echarts的tooltips经常会返回dom结构的字符串，内部拼接多个参数动态渲染。
let a = 'jack'
let b = `My name is ${a}` // 'My name is jack'
let c = `
<ul>
<li>text</li>
</ul>
`
- 模板字符串内可以做用变量、表达式、函数等。非常方便。
- 空格和换行会被保留。这种拼接结构会很清晰，不需要用 '+' 号做换行的拼接。
对象相关
1. Object.is() 比较两个值是否相等
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
- 与严格比较运算符（===）的行为基本一致。
- 不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
2. Object.assign()
用于将源对象可枚举属性复制到目标对象
let target = {a: 1, b: 2}
let source = {b: 3, c: {key: 'A'}}
Object.assign(target, source)
target // {a: 1, b: 3, c: {key: 'A'}} a，b覆盖，c新增
source // {b: 3, c: {key: 'A'}}
target.c.key = 'B'
source // {b: 3, c: {key: 'B'}} key也改变
- source的属性复制到target，如果没有属性，则新增c，如果有相同属性，则覆盖如b
- Object.assign属于浅拷贝，如c，target和source的c是相同的指针，指向相同的地址。
实战总结：给对象添加多个属性时可以使用，清晰简洁。取多属性给一个新对象时Object.assign({}, {a, b, c}, {d, e})
3.Object.keys()，Object.values()，Object.entries()
这几个用于将对象的key或value转数组
let Jack = {name: 'Jack', age: 18}
Object.keys(Jack) // ['name', 'age']
Object.values(Jack) // ['Jack', 18]
Object.entries(Jack) // [['name', 'Jack'], ['age', 18]]
... 更多知识点待补充
