简介

ES6是一个泛指，含意是 5.1 版当前的 JavaScript 的下一代规范，涵盖了 ES2015、ES2016、ES2017语法规范。

ES6新个性目前只有在一些较新版本浏览器失去反对，老版本浏览器外面运行咱们须要将ES6转换为ES5。

Chrome：51 版起便能够反对 97% 的 ES6 新个性。

Firefox：53 版起便能够反对 97% 的 ES6 新个性。

Safari：10 版起便能够反对 99% 的 ES6 新个性。

IE：Edge 15能够反对 96% 的 ES6 新个性。Edge 14 能够反对 93% 的 ES6 新个性。（IE7~11 根本不反对 ES6）

Babel 转码器

它是一个宽泛应用的 ES6 转码器。

npm install --save-dev @babel/core

配置文件.babelrc

# 最新转码规定$ npm install --save-dev @babel/preset-env# react 转码规定$ npm install --save-dev @babel/preset-react
// `presets`字段设定转码规定，官网提供以下的规定集，你能够依据须要装置。  {    "presets": [      "@babel/env",      "@babel/preset-react"    ],    "plugins": []  }

polyfill

Babel默认只是对JavaScript新语法进行了转换，为了反对新API还须要应用polyfill为以后环境提供一个垫片（也就是以前的版本没有，打个补丁）。

比方：core-js和regenerator-runtime

$ npm install --save-dev core-js regenerator-runtime
import 'core-js';import 'regenerator-runtime/runtime';

let 和 const

let

就作用域来说，ES5 只有全局作用域和函数作用域。应用let申明的变量只在所在的代码块内无效。

if(true){ let a = 1; var b = 2 }console.log(a)// ReferenceError: a is not definedconsole.log(b)// 2

看上面的例子，咱们预期应该输入1，因为全局只有一个变量i，所以for执行完后，i=5，函数打印的值始终是5。

var funcs = [];for (var i = 0; i < 5; i++) {  funcs.push(function () {    console.log(i);  });}funcs[1](); // 5

修复，将每一次迭代的i变量应用local存储，并应用闭包将作用域关闭。

var funcs = [];for (var i = 0; i < 5; i++) {     (function () {            var local = i            funcs.push(function () {                console.log(local);            });        }    )()}funcs[1](); // 1

应用let申明变量i也能够达到同样的成果。

const

const用于申明一个只读的常量。必须初始化，一旦赋值后不能批改。const申明的变量同样具备块作用域。

if (true) { const PI = 3.141515926; PI = 66666 // TypeError: Assignment to constant variable.}console.log(PI) // ReferenceError: PI is not defined

const申明对象

const obj = {};// 为 obj 增加一个属性，能够胜利obj.name = 'hello';// 将 obj 指向另一个对象，就会报错obj = {}; // TypeError: "obj" is read-only

解构

解构字面了解是合成构造，即会突破原有构造。

对象解构

根本用法：

let { name, age } = { name: "hello", age: 12 };console.log(name, age) // hello 12

设置默认值

let { name = 'hi', age = 12 } = { name : 'hello' };console.log(name, age) // hello 12

rest参数（模式为...变量名）能够从一个对象中抉择任意数量的元素，也能够获取残余元素组成的对象。

let { name, ...remaining } = { name: "hello", age: 12, gender: '男' };console.log(name, remaining) // hello {age: 12, gender: '男'}

数组解构

rest参数（模式为...变量名）从数组中抉择任意数量的元素，也能够获取残余元素组成的一个数组。

let [a, ...remaining] = [1, 2, 3, 4];console.log(a, remaining) // 1 [2, 3, 4]

数组解构中疏忽某些成员。

let [a, , ...remaining] = [1, 2, 3, 4];console.log(a, remaining) // 1 [3, 4]

函数参数解构

数组参数

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

对象参数

function add({x, y} = { x: 0, y: 0 }) {  return x + y;}add({x:1 ,y : 2});

常见场景

在不应用第三个变量前提下，替换变量。

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

提取JSON数据。

let json = {  code: 0,  data: {name: 'hi'}};let { code, data: user } = json;console.log(code, user); // 0 {name: 'hi'}

遍历Map构造。

const map = new Map();map.set('name', 'hello');map.set('age', 12);for (let [key, value] of map) {  console.log(key + " is " + value);}

扩大

字符串扩大

模版字符串，这个很有用。应用反引号（`）标识。它能够当作一般字符串应用，也能够用来定义多行字符串，或者在字符串中嵌入变量。

`User ${user.name} is login...`);

函数扩大

ES6 容许为函数的参数设置默认值，即间接写在参数定义的前面。

一旦设置了参数的默认值，函数进行申明初始化时，参数会造成一个独自的作用域（context）。等到初始化完结，这个作用域就会隐没。这种语法行为，在不设置参数默认值时，是不会呈现的。
function add(x, y = 1) {    return x + y}

代替apply()写法。

// ES5 的写法Math.max.apply(null, [1, 3, 2])// ES6 的写法Math.max(...[1, 3, 2])

数组扩大

合并数组

// ES5 的写法var list = [1,2]list = list.concat([3])// ES6 的写法var list = [1,2]list = [...list, 3]

数组新API

Array.from()，Array.of()，find() 和 findIndex()等，参考MDN

https://developer.mozilla.org...

对象扩大

对象属性，办法简写。

data = [1,2]const resp = {data}; // 属性简写，等同于 {data: data}const obj = {  add(x, y) {        // 办法简写，等同于 add: function(x, y){...}    return x + y;  }};

扩大属性。

const point = {x: 1, y: 2}const pointD = {...point, z: 3}console.log(pointD) // {x: 1, y: 2, z: 3}// 当有反复属性时，留神程序问题。const point = {x: 1, y: 2}const pointD = {...point, x: 4, z: 3}console.log(pointD) // {x: 4, y: 2, z: 3}const point = {x: 1, y: 2}const pointD = {x: 4, z: 3, ...point}console.log(pointD) // {x: 1, z: 3, y: 2}

属性的形容对象

对象的每个属性都有一个形容对象（Descriptor），用来管制该属性的行为。

const point = {x: 1, y: 2}Object.getOwnPropertyDescriptor(point, 'x') /**{    configurable: true     enumerable: true // 示意可枚举    value: 1    writable: true   // 示意可写 }**/

属性的遍历

  • for...in循环：只遍历对象本身的和继承的可枚举的属性。
  • Object.keys()：返回对象本身的所有可枚举的属性的键名。
  • JSON.stringify()：只串行化对象本身的可枚举的属性。
  • Object.assign()： 疏忽enumerable为false的属性，只拷贝对象本身的可枚举的属性。
const point = {x: 1, y: 2}for(let key in point){  console.log(key)}

对象新增的一些办法：Object.assign()

Object.assign()办法履行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么指标对象拷贝失去的是这个对象的援用。常见用处：

克隆对象

function clone(origin) {  return Object.assign({}, origin);}

合并对象

const merge = (target, ...sources) => Object.assign(target, ...sources);

指定默认值

const DEFAULT_CONFIG = {  debug: true,};function process(options) {  options = Object.assign({}, DEFAULT_CONFIG, options);  console.log(options);  // ...}
https://developer.mozilla.org...

运算符扩大

指数运算符

2 ** 10 // 10242 ** 3 ** 2 // 512 相当于 2 ** (3 ** 2)let a=10; a **= 3; // 相当于 a = a * a * a

链判断运算符

obj?.prop判断对象属性是否存在，func?.(...args) 函数或对象办法是否存在。

const obj = {name: 'job', say(){console.log('hello')}}obj?.name  // 等于 obj == null ? undefined : obj.nameobj?.say() // 等于 obj == null ? undefined : obj.say()

空判断运算符

JavaScript里咱们用||运算符指定默认值。 当咱们心愿右边是null和undefined时才触发默认值时，应用??。

const obj = {name: ''}obj.name || 'hello' // 'hello'obj.name ?? 'hello' // ''

for...of

因为for...in循环次要是为遍历对象而设计的，因为数组的键名是数字，所以遍历数组时候它返回的是数字，很显著这不能满足开发需要，应用for...of能够解决这个问题。

const list = ['a', 'b', 'c']for (let v in list){  console.log(v) // 0,1,2}for (let v of list){  console.log(v) // a,b,c}

小结

本文要点回顾，欢送留言交换。

  • ES6介绍。
  • let和const变量。
  • 对象数组解构。
  • 一些新的扩大。