每天一道面试题(6) - 总结ES6, ES7,ES8的新特性

本文只做总结, 不做详细解释

ES6新特性

ES6新特性比较多, 可以将这个特性分为功能和语法糖两个类别.
在回答问题时也会比较有条理

定义变量let, const

ES6中可以使用let定义变量, const定义常量, 二者是块级作用域

这里说一下let和var的区别

• var在全局声明的变量可以通过window获取到, 成为了window的属性
• let的作用域只在代码块内，块外无效；var全局有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

那道经典的for循环中setTimeout打印0,1,2的面试题就是这个原因

详见 - 参考链接

• let不像var会有变量提升，所以变量一定要在声明后使用，否则报错 , var在声明前使用会是undefined

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

• let 有暂时性死区
  这样就导致typeof不安全了

typeof x; // ReferenceError
let x;

函数扩展

• 函数参数默认值
• 函数的rest参数

function add(...rest) {
  let sum = 0;

  for (var val of rest) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

• 箭头函数

箭头函数没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

• 尾调用优化

详见阮大大教程

promise

不详细说了, 参考

模板字符串

`Hello ${'World'}`

延展操作符

let objClone = { ...obj };

解构赋值

//数组
var a, b; //先声明变量

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

//对象
const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};

const {name,age,city} = student;

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

这里就有一个react的面试题出现了

为什么react hooks要返回数组而不是对象?

原因就是数组解构赋值时可以自定义名称, 而对象不可以. 但是在一个组件中会用到多个hooks, 为了方便自定义命名, 所以使用数组而不是对象

模块化

export和import 是ES6中

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

//其他文件中
import {firstName, lastName, year} from './profile.js'

模块的问题以后专门写一篇

类

ES6中引入了类class, 其实它是一个语法糖

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

//等同于
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

后面也会专门写一篇
看阮大大吧

ES7新特性

• 数组新方法 includes(), 之前的indexOf是通过判断是否返回-1来判断数组中是否包含某元素, 而includes直接返回布尔值

• 指数运算符**, 等效于Math.pow(..)

console.log(2**10);// 输出1024

ES8新特性

• async/await
• Object.values(): 返回的是Object自身属性的所有值，不包括继承的值
• Object.entries(): 函数返回一个给定对象自身可枚举属性的键值对的数组
• String.prototype.padStart和String.prototype.padEnd: 允许将空字符串或其他字符串添加到原始字符串的开头或结尾

const str1 = '5';
console.log(str1.padStart(10, '0'));
// 0000000005
console.log(str1.padEnd(10, '0'));
//5000000000