JS----ES6

ES6

箭头函数

箭头函数和普通函数的区别

1. 外形不同
   箭头函数使用 => 定义。

// 普通函数
function demo(){
  ...
}

// 箭头函数
let demo = () => {
  ...
}

2. 箭头函数都是匿名函数
   普通函数可以有匿名函数，也可以有具名函数；箭头函数只有匿名函数。

// 具名函数
function demo(){
  ...
}

// 匿名函数
let func = function(){
  ...
}

// 箭头函数
let demo = () => {
  ...
}

3. 箭头函数不可以用于构造函数，不能使用new
4. 箭头函数中的this指向不同
   ①. 箭头函数本身不创建this
   在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。
   而箭头函数本身没有this，但它在声明时可以捕获其所在上下文的this供自己使用。

let success = "捕获成功"
let func = () => {
  console.log(this.success)
}

func()
// 打印：捕获成功

箭头函数在全局作用域声明，所以它捕获全局作用域中的this，this指向window对象

var name = "message1";
function wrap(){
  this.name="message2";
  let func=() => {
    console.log(this.name);
  }
  func();
}
let en=new wrap();
// 打印：message2

②. 结合call()、apply()方法使用
箭头函数结合call()、apply()方法调用一个函数时，只传入一个参数对this没有影响。

let obj2 = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
    
};
console.log(obj2.b(1));    // 11
console.log(obj2.c(1));    // 11

5. 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()。

let、const、var的区别

1. 块级作用域：块级作用域用{}包括，let和const具有块级作用域，var不具有。块级作用域解决了ES5的存在的两个问题：
   • 内层变量可能会覆盖外层变量
   • 用来计数的循环变量泄露为全局变量
2. 变量提升：变量提升就是把变量的声明提升到作用域的最上面去，而不会把赋值也提升上来。
3. var声明的变量为全局变量，并会将该变量添加为全局对象的属性。let和const不会
4. 初始值设置：var和let可以不设置初始值，const必须设置初始值
5. let创建的变量可以修改指针指向（可重新赋值）

const对象可以修改吗？

const保证的并不是值不变，而是const变量指向的内存地址不变，对于基本数据类型，其值就永远保存在变量指向的那个内存地址，因此等同于常量。但对于引用类型的数据（对象和数组），变量指向数据的内存地址，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

为什么箭头函数不能作为构造函数

构造函数需要this这个对象，用于接收参来的参数，以及在构造函数的最后将这个this返回。而箭头函数没有this，所以不能作为构造函数。

如果new一个箭头函数会怎么样

因为箭头函数相对于普通函数并没有自己的this指向，而构造函数需要由this，所以箭头函数不能new。
new操作符实现的步骤如下：

1. 创建一个对象
2. 将构造函数的作用域赋值给新对象（也就是将新对象的__proto__属性指向构造函数的prototype属性）
3. 构造函数中的this指向新对象（也就是为这个新对象添加属性和方法）
4. 返回新的对象

扩展运算符（…）

扩展运算符对对象实例的拷贝属于浅拷贝

数组运算符可以将数组用逗号分割为一个参数序列，且每次只能打开一层数组。

console.log(...[1, 2, 3]);  // 1 2 3
console.log(...[1, [2, 3, 4], 5]);   // 1 [ 2, 3, 4 ] 5
console.log(...[1, ...[2, 3, 4], 5]);   // 1 2 3 4 5

function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3

// 复制数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

对对象与数组的结构的理解

数组的结构

在解构数组时，以元素的位置为匹配条件来提取想要的数据：

const [a, b, c] = [1, 2, 3]

还可以使用空占位的方式，实现对数组中某几个元素的精准提取：

const [a, , c] = [1, 2, 3]
// a: 1, c: 3

对象的解构

const stu = {
  name: 'Bob',
  age: 24
}

const { name, age } = stu

提取高度嵌套的对象里的指定属性

const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}

可以在解构出来的变量名右侧，通过冒号+{目标属性名}这种形式，进一步解构它，一直解构到拿到目标数据为止。

const { classes: { stu: { name } } } = school
console.log(name);   // Bob