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

文章目录

ES6新特性

  • 定义变量let, const
  • 函数扩展
  • promise
  • 模板字符串
  • 延展操作符
  • 解构赋值
  • 模块化
  • 类
  • 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