ES6 小知识

2021-04-24 本文已影响0人婆娘漂亮生活安逸

let、var、const 之间的区别？

let：

1> 拥有块级作用域：声明的变量只在所在的代码块有效；
2> 不存在变量提升：声明的变量一定要在声明后使用，否则报错；
3> 不允许重复声明，但是可以重新赋值；
4> 存在暂时性死区：本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
var：

1> 是全局变量；
2> 存在变量提升过程，可以先使用在声明；
3> 可以重复声明
const：

1> 声明一个只读的常量。一旦声明，常量的值就不能改变。
2> 拥有块级作用域、不存在变量提升、存在暂时性死区

本质： const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const 只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

什么是解构？有什么用途？

定义：
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
用途：
（1）交换变量的值
（2）方便取出函数返回的多值
（3）函数参数的定义
（4）函数参数默认值
（5）提取 JSON 数据
（6）遍历 MAP 结构（任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。）
（7）输入模块的指定方法

使用解构赋值，实现两个变量的值的交换

  let x = 1;
  let y = 2;
  
  [x, y] = [y, x];

介绍模板字符串

定义：
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。模板字符串中嵌入变量，需要将变量名写在${}之中。

用法：

  // 普通字符串
  `In JavaScript '\n' is a line-feed.` 
  // 多行字符串
  `In JavaScript this 
  isnot legal.`
  // 字符串中嵌入变量
  var name = "Bob", time = "today";
  `Hello ${name}, how are you ${time}?` // Hello Bob, how are you today?

rest 参数和 arguments 对象有什么区别？

arguments对象：
（1）包含了传给函数的全部实参；
（2）它不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用 Array.prototype.slice.call 先将其转为数组。
rest 参数：
（1）只包含函数中未用形参定义的剩余实参；
（2）是一个真正的数组，数组特有的方法都可以使用。
注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

箭头函数特性

（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

Object.keys() 方法

语法：
Object.keys(obj)
参数：要返回其枚举自身属性的对象
返回值：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

处理对象，返回可枚举的属性数组

  let person = { name: "张三", age: 25, getName: function(){} }
  console.log(Object.keys(person));    // ["name", "age", "getName"]

处理数组，返回索引值数组

  let arr = ["aa", "bb", "cc"]
  console.log(Object.keys(arr));    //["0", "1", "2"]

处理字符串，返回索引值数组

  let str = 'abc'
  console.log(Object.keys(str));    //["0", "1", "2"]

设计一个对象，键名的类型至少包含一个 symbol 类型，并且实现遍历所有 key

实现

let name = Symbol('name');
 let product = {
    [name]:"洗衣机",    
    "price":799
  };
Reflect.ownKeys(product); // ["price", Symbol(name)]

需要了解的知识点：Reflect.ownKeys(obj) 和 Symbol
（1）Reflect.ownKeys(obj)
返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
（2）Symbol
表示独一无二的值。

介绍下 Set、Map 的区别？

Set：　
(1) 类似于数组，但是成员的值都是唯一的，没有重复的值。
(2) 实例操作方法：
- Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
- Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
- Set.prototype.clear()：清除所有成员，没有返回值。
(3) 实例遍历方法：
- Set.prototype.keys()：返回键名的遍历器
- Set.prototype.values()：返回键值的遍历器
- Set.prototype.entries()：返回键值对的遍历器
- Set.prototype.forEach()：使用回调函数遍历每个成员
(4) 应用：数组去重
Map:
(1) 本质上是健值对的集合，类似于对象，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
(2) 实例操作方法：
- Map.prototype.set(key, value)：设置键名key对应的键值为value，然后返回整个 Map 结构。
- Map.prototype.get(key)：读取key对应的键值，如果找不到key，返回undefined。
- Map.prototype.has(key)：返回一个布尔值，表示某个键是否在当前 Map 对象之中。
- Map.prototype.delete(key)：删除某个键，返回true。如果删除失败，返回false。
- Map.prototype.clear()：清除所有成员，没有返回值。
(3) 实例遍历方法：
- Map.prototype.keys()：返回键名的遍历器。
- Map.prototype.values()：返回键值的遍历器。
- Map.prototype.entries()：返回所有成员的遍历器。
- Map.prototype.forEach()：遍历 Map 的所有成员。
(4) 应用：与其他数据结构互相转换

如何使用Set去重？

  let arr = [12,43,23,43,68,12];
  let item = [...new Set(arr)];
  console.log(item);//[12, 43, 23, 68]

下面Set结构，打印出的size值是多少

let s = new Set();
s.add([1]);s.add([1]);
console.log(s.size);

答案：2
理由：
两个数组 [1] 并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值都能存储到Set结构中，所以 size 为2。

简单介绍一下 promise

ES6-Promise

谈谈你对 async/await 的理解

async...await 是基于 promise 的 generator 语法糖，它用来等待 promise 的执行结果，常规函数使用await没有效果；
async修饰的函数内部 return 不会得到预期的结果，会得到一个 promise 对象；
await 等待的 promise 结果是 resolve 状态的内容，await 可以阻塞后面代码的执行，reject 状态的内容需要使用 try...catch 获取；
await 关键字必须要出现在 async 修饰的函数中，否则报错。

Promise构造函数是同步执行还是异步执行，那么 then 方法呢？

promise 构造函数是同步执行的，then 方法是异步执行的

下面结果输出的值为多少？

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

答案：
1 2 4 3
理由：
Promise 新建后立即执行，所以会先输出 1，2，而 Promise.then()内部的代码在当次事件循环的结尾立刻执行，所以会继续输出4，最后输出3。

ECMAScript 6入门