ES6语法及知识点梳理

变量与常量声明

let

ES6引入了let关键字，该关键字允许无法提升或重新声明的块范围变量(块儿级作用域)。

//变量提升---------------------
console.log(a);     //undefined
var a = 1;
console.log(a);    // 1

//重新声明---------------------
let x = 0;
x = 1;
console.log(x)    // 1

//块儿级作用域------------------
if(true){
	var a = 1;
}
console.log(a)  // 1

if(true){
	let a = 1;
}
console.log(a) // 报错：a未定义

const

ES6引入了const关键字，该关键字不能重新声明或重新分配，但不是不变的。

const b = 0;
b = 1; //重新赋值会报错

const b = {};
b.name = "foo"; //b所指向的内存地址没变
console.log(b) //  { name: "foo" }

解构

数组的解构

const arr = [1,2,3];
const [,,c] = arr;
console.log(c) //3

const [a,...bc] = arr;
console.log(bc) // [2,3]

const [x] = arr;
console.log(x) // 1

const [a,b,c,d = 4] = arr;
console.log(d) // 4

对象的解构

使用大括号将对象的属性分配给它们自己的变量。

//对象匹配
let obj = { a: 1, b: 2, c: 3 }
let { a, b, c } = obj
console.log(a,b,c) // 1,2,3

const obj = {name:"tom",age:22};
const name = "yami";
//const { name } = obj; //冲突
const { name: objName = "zhangsan"} = obj; //解决name冲突并赋初始值
console.log(objName) //tom

模板字符串

串联、字符串插值

表达式可以嵌入模板文字字符串中。

const date = "2020-10-20";
let str = `Release Date: ${date},${1 + 2}`;
console.log(str); // Release Date: 2020-10-20,3

多行字符串

使用模板文字语法，JavaScript字符串可以跨越多行而无需串联。

let str = `This text
            is on
            multiple lines`

带标签的模板字符串

使用模板文字语法，JavaScript字符串可以跨越多行而无需串联。

const name = "tom";
const gener = true;
function myTagFun(str,name,gener){
 const sex = gener ? "men" : "women";
 return str[0]+name+str[1]+sex+str[2];
}
const result = myTagFun`hi,${name} is a ${gener}.`;
console.log(result);

字符串的扩展方法

includes

const msg = "this is message";
console.log(msg.includes("is")) //true

startsWith

const msg = "this is message";
console.log(msg.startsWith("this")) //true

endsWith

const msg = "this is message";
console.log(msg.endsWith("message")) //true

参数默认值

可以使用默认参数初始化函数，仅当未通过函数调用参数时才使用默认参数。

function foo(a,b = 2){ 
console.log(a+b); //3
}
foo(1);

剩余参数

function foo(...args){ //args只能在左后且只能使用一次
console.log(args) //[1,2,3,4]
}
foo(1,2,3,4)

展开数组

const arr = ["a","b","c"];
console.log(arr[0],arr[1],arr[2]); // a b c
console.log.apply(console,arr);  // a b c
console.log(...arr); //展开数组方式 a b c

箭头功能

箭头函数

箭头函数表达式语法是创建函数表达式的一种较短方法。Arrow函数没有自己的函数this，没有原型，不能用于构造函数，也不应用作对象方法。

const func = (a, b, c) => {
console.log("result:")
return a+b+c;
}
console.log(func(1,2,3)); // 6

隐式收益

return如果使用不带块体的箭头功能，则暗指该关键字，可以将其省略。

let func = (a, b, c) => a + b + c;

箭头函数与this

箭头函数不会改变this的指向，他始终指向当前作用域。

const person = {
	name:"tom",
	say:function(){
	setTimeout(() => {
	console.log(this.name);
	},1000);
  }
};
console.log(person.say());

方法定义速记与字面量增强

function可分配一个对象的方法时，可以省略关键字。

let obj = {
  a(c, d) {
	console.log(c+d); //3
  },
  [1+2]: 3,
}
obj.a(1,2);
console.log(obj); // { 3: 3, a: a(c, d) }

对象扩展方法

assign

function func(obj){
const funcObj = Object.assign({},obj);
funcObj.name = "bbb";
console.log(funcObj);
}
const obj = {name:"aaa"};
func(obj);
console.log(obj);
//{ name: "bbb" }
//{ name: "aaa" }

is

console.log(NaN === NaN); //fasle
console.log(+0 === -0); //true
console.log(Object.is(NaN,NaN)); //false
console.log(Object.is(+0,-0)); //false

代理对象

Proxy

Proxy对比defineProperty

console.log(NaN === NaN); //fasle
console.log(+0 === -0); //true
console.log(Object.is(NaN,NaN)); //false
console.log(Object.is(+0,-0)); //false

数组迭代（循环）

为通过数组和其他可迭代对象进行迭代，引入了更简洁的语法。

let arr = ['a', 'b', 'c']
for (let i of arr) {
  console.log(i)
}

传播语法

传播语法可用于扩展数组。

let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

扩展语法可用于函数参数。

let arr1 = [1, 2, 3]
let func = (a, b, c) => a + b + c

console.log(func(...arr1)) // 6

类/构造函数

ES6 class在基于原型的构造函数之上引入了语法。

class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let x = new Func(3, 4)

x.getSum() // returns 7

遗产

该extends关键字创建一个子类。

class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}
class Inheritance extends Func {
  constructor(a, b, c) {
    super(a, b)

    this.c = c
  }

  getProduct() {
    return this.a * this.b * this.c
  }
}

let y = new Inheritance(3, 4, 5)

y.getProduct() // 60

模块导出导入

可以创建模块以在文件之间导出和导入代码。

export.js

let func = a => a + a
let obj = {}
let x = 0

export { func, obj, x }

import.js

import { func, obj, x } from './export.js'

console.log(func(3), obj, x)

承诺/回调

承诺表示异步功能的完成。它们可以用作链接功能的替代方法。

let doSecond = () => {
  console.log('Do second.')
}

let doFirst = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Do first.')

    resolve()
  }, 500)
})

doFirst.then(doSecond)