关于ECMAScript的学习

学习地址：https://es6.ruanyifeng.com/

let声明是可读写的变量；变量的作用域是块级作用域，只在声明的代码块中生效；let声明的变量必须先声明再使用，如果未声明就使用会报错。代码块中从开始到变量声明之前，变量都是不可用的，这被称为“暂时性死区”。（比如在代码块外面var了一个变量a，代码块中使用a，然后再let了一个变量a，这是就会报错，这就是暂时性死区）；let声明的变量不可以重复声明。

const声明的是只读常量，声明时就赋值；块级作用域；有暂时性死区；不可重复声明。const本质不是变量不能改动，而是变量指向的内存地址的数据不能改动。这样的话简单数据类型不能改，复杂的比如对象就可以改动。

var声明的变量名可重复声明，且存在变量提升，只要在后面声明了变量，不论作用域在哪里，未声明前使用不会报错，返回值是undefined。

块级作用域就是一对花括号括起来的区域，此外还有函数作用域和全局作用域。块级作用域中直接声明函数相当var处理，所以避免在块级作用域中直接声明函数，应该写成函数表达式的形式：let f = function () {}。

**变量的解构赋值**

解构赋值就是将按照一定的模式，从数组或对象中提取值，对变量进行赋值。

解构赋值的右边如果不是可遍历的结构会报错。

解构赋值的左边的变量允许赋默认值。

解构赋值用的最多的还是还是对象的解构赋值，如果有多个变量值都取自一个对象，那么一个个赋值就很麻烦，这样使用解构赋值就很方便：let {变量名1,变量名2,变量名3} = 对象，根据变量名和对象属性名一致来赋值。变量名和对象属性名不一致需要改写一下形式，let {属性名1:变量名1,属性名2:变量名2,属性名3:变量名3} = 对象。如果需要解构出对象中比较深嵌套的值，我感觉还是直接赋值比较简洁。解构赋值并不是解构一下右边的对象给左边的变量赋值而是遍历一遍左边的变量去右边的对象里面赋值。

解构赋值还有其他很多的用途：略

**字符串的扩展**

模板字符串，本质还是一个字符串，不过使用反引号（``）将字符串包裹起来，里面可以使用${}，在大括号里面可以填入变量名或js的表达式，这样我们就可以嵌入想嵌的东西，不用再使用+来拼接字符串了，比较方便。

**函数的扩展**

函数中的变量可以设置默认值，函数中的参数变量是默认声明的，函数体里面不能使用let和const再声明。函数参数可以与解构赋值结合使用，比如函数参数是传入一个对象，这样使用函数的时候传入一个对象就可以了。函数中有默认值的参数最好还是放在后面当尾参数，不然放在前面想触发默认值还需要用undefined占位。

函数的length属性返回没有指定默认值的参数个数。

rest参数（...变量名），这个参数只能放在函数参数的最后一位，作用就是接受可变个参数。这个变量会将多余的参数都放进数组里面，函数里面使用的话就可以用for...of来遍历。

箭头函数（=>），参数如果就一个放箭头左边就行，多个参数的话放在箭头前面用圆括号括起来，代码如果就一条语句，那么就被当成返回值return，如果代码部分有多条语句那么就需要用大括号括起来。注：箭头函数没有自己的this对象；不可以当做构造函数，也就是箭头函数不能new；不能使用arguments对象，可以使用rest参数代替；不可以使用yield命令。

箭头函数没有自己的this对象，内部的this是定义时上层作用域中的this。也就是说箭头函数的this指向是固定的，普通函数的this指向是可变的。有不使用的场景：一、对象中的一个属性值为箭头函数，箭头函数使用this来操作此对象的其他属性值。这样明显是错误的，因为对象不构成单独的作用域，箭头函数里面的this指的是全局作用域，操作不了对象中的属性值。二、需要动态this，比如获取一个dom元素，然后给这个元素添加一个监听器，事件触发执行箭头函数，箭头函数里面使用this操作元素，这样明显不能成功。因为监听函数是一个箭头函数，里面的this指的是全局对象。这样必须改成普通函数才可以，this才会动态地指向被点击的按钮对象。

**数组的扩展**

扩展运算符是三个点（...），好比rest参数的逆运算。作用就是将对象或是数组外面的括号去除，常用在函数调用；rest参数则是用于函数定义的时候，用来接受可变参数。

扩展运算符的运用：复制合并数组，复制合并对象；与解构赋值结合，用来生成数组，只能放在最后一位，这里更像是rest参数的使用；将字符串转为数组。

**对象的扩展**

在大括号里面直接写入变量和函数，作为对象的属性和方法。里面都是写成key:value的形式，属性名和属性值相同的话可以简写成一个，里面的方法也可以简写。

定义对象的属性有两种方法，第一种就是用标识符（obj.属性名），第二种就是用表达式，表达式要放在方括号里面（obj.[表达式]）。

对象的每个属性都有一个描述对象，用来控制该属性的行为。

 

补：

数组的解构赋值：如果函数返回值是一个数组或者模块导出的是一个数组，那么在解构赋值时是根据数组的索引来解构赋值。今天遇到一个数组解构，困惑属性名压根不一样怎么会解构赋值成功，后来看到是数组的结构赋值，不是对象的，对象是根据属性名来的，数组是根据索引，数组里面的是属性值，并不是属性名，被模块导出的数组里面的变量名整懵了。

function add(){
  const name = 'along'
  return [name]
}
const [ming] = add()
console.log(ming)

获取对象中的属性值，除了对象名.属性名，还可以使用对象名['属性名']

const person = {
  name:'along',
}
console.log(person.name,person['name'])