跳到主要内容

二、ES6

001 - let const var的区别​

区别主要体现在七个方面

  1. 是否有块级作用域：块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：

    • 内层变量可能覆盖外层变量
    • 用来计数的循环变量泄露为全局变量

  2. 是否存在变量提升

    • var存在变量提升
    • let、const不存在变量提升，即变量只能在声明之后使用，否在会报错

  3. 是否添加全局属性

    • 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。

  4. 能否重复声明变量

    • var可以重复声明变量，后声明的同名变量会覆盖之前声明的变量
    • const和let不允许重复声明变量

  5. 是否存在暂时性死区

    • 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区 let a = a/const a = a（会报错）
    • 使用var声明的变量不存在暂时性死区：var a = a（不会报错）

  6. 是否必须设置初始值

    • var和let不需要赋初始值，只声明就可以
    • const声明时必须赋初始值，否则会报错

  7. 能否改变指针指向（重复赋值）

    • let创建的变量是可以更改指针指向（可以重新赋值）
    • const声明的变量是不允许改变指针的指向

002 - const对象的属性可以修改吗​

const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量；但对于引用类型的数据（主要是对象和数组）来说，变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

003 - 如果new一个箭头函数的会怎么样​

箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数；new操作符的实现步骤如下：

  1. 创建一个对象
  2. 将构造函数的作用域赋给新对象（也就是将对象的proto属性指向构造函数的prototype属性）
  3. 指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）
  4. 返回新的对象 所以，上面的第二、三步，箭头函数都是没有办法执行的。

004 - 箭头函数与普通函数的区别​

普通函数：let fn = function(){} 或者 function fn(){}

箭头函数：let fn = () => {}

  • 箭头函数比普通函数更加简洁

    • 如果只有一个参数，可以省去参数的括号
    • 如果函数体的返回值只有一句，可以省略大括号，且必须省略return

  • 箭头函数没有自己的this

    • 箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

  • call()、apply()、bind()等方法不能改变箭头函数中this的指向

    • 箭头函数的this指向要么是window，要么是他的外层

  • 箭头函数不能作为构造函数使用

    • 箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数；new操作符的实现步骤如下：
  1. 创建一个对象
  2. 将构造函数的作用域赋给新对象（也就是将对象的proto属性指向构造函数的prototype属性）
  3. 指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）
  4. 返回新的对象 所以，上面的第二、三步，箭头函数都是没有办法执行的。

  • 箭头函数没有自己的arguments

    • 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。

  • 箭头函数没有prototype

  • 箭头函数不能用作Generator函数，不能使用yield关键字

005 - 箭头函数的this指向哪⾥？​

箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。箭头函数的this指向外层函数的this

006 - 扩展运算符的作用及使用场景​

对象扩展运算符

对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。扩展运算符对对象实例的拷贝属于浅拷贝

let obj = {...obj1，obj2}与Object.assign({}，{})类似，若后面的对象与前面的对象有同名属性，则后面的覆盖前面的

数组扩展运算符

数组的扩展运算符可以将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组。

使用Math函数获取数组中特定的值：

const numbers = [9, 4, 7, 1];

Math.min(...numbers); // 1

Math.max(...numbers); // 9

007 - 对对象与数组的解构的理解​

数组的解构

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

对象的解构

在解构对象时，是以属性的名称为匹配条件，来提取想要的数据的

008 - 如何提取高度嵌套的对象里的指定属性？​

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

009 - 对 rest 参数的理解​

扩展运算符（...args)被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组，便于使用数组的遍历等方法【与arguments类似，但是arguments是以对象形式】

010 - ES6中模板语法与字符串处理​

允许用${}的方式嵌入变量，优势有两个

  • 在模板字符串中，空格、缩进、换行都会被保留，可以识别html代码
  • 模板字符串完全支持“运算”式的表达式，可以在${}里完成一些计算