ECMAScript6语法使用

1.let的几种属性

+1.不能重复声明：

let a = 10;

let a = 20; //Identifier 'a' has already been declared

+2.let块级作用域

for (let i = 0; i < 10; i++) {

console.log(i);

}

console.log(i); //i is not defined(…)

+3.let 没有变量提升

console.log(a);

let a = 10;//i is not defined(…)

+4.let存在暂时性死区,即当当前作用域中已经声明了该变量，
则在该声明前不能查找到上层作用域是否有该变量的定义定义。

let a = 10;

{

console.log(a)//a is not defined(…)

let a = 20;

}

+5全局变量不再是window属性

let a = 10;

conaole.log(window.a);//undefine

2.const的使用和let大体一致

不同之处在于const定义的常量

const PI = 3.1415926;

console.log(PI * 3 * 3);

3. 数组解构赋值

+1.标准模式（完全解构）,通过特定的方式，将数组赋值给变量（按照一定的模式，
从数组和对象中提取值，然后对变量进行赋值）

let arr = [10,200,33,2];

let [a,b,c,d] = arr;

+2.部分解构

let arr = [10, 200, 33, 2];

let [a, , d] = arr;

console.log(a, d);

+3.特殊值

let [a, b, c] = [10, [20, 21, 22], { a: 1, b: 2 }];

console.log(a); // 10

console.log(b); // [ 20, 21, 22 ]

console.log(c); // {a: 1, b: 2}

+4深层解构

let [a, [b1, b2]] = [10, [20, 21, 22], 30];

console.log(a); // 10

console.log(b1); // 20

console.log(b2); // 21

+5解构缺失

let [a, b] = [10];

console.log(a); // 10

console.log(b); // undefined

+6 默认值

let [a = 'aa', b = 'bb'] = [10];

console.log(a); // 10

console.log(b); // bb

4.对象解构

-1.完全解构

只需要写对应的key就好，与顺序无关

let { a, b, c } = { a: 10, b: 20, c: 30 };

console.log(a); // 10

console.log(b); // 20

console.log(c); // 30

-2.其他解构与数组的解构一致

-3.重起变量名

let { a: myA } = { a: 10 };

console.log(myA); // 10

console.log(a); // ReferenceError

5.解构使用场景

-1.变量交换

let [a,b] = [b,a];

-2.提取对象中值

let ajaxResponseData = {

code: 200,

msg: '成功',

result: {

name: '车',

info: '各种车',

list: ['兰博基尼', '法拉利']

}

};

let { result: { info, list } } = ajaxResponseData;//语法格式： 深层解构。 对象：{属性}

console.log(info);

console.log(list);

6.``字符串

``字符串可进行运算，可进行拼接

let a = ``;

let b = [20, 10];

let c = {

cc: 20,

dd: 39

}

console.log(`${a}__${b[1] + c.cc}`);

7. ... 运算符

1.用来拼接两个数组

let arr1 = [10, 20, 3];

let arr2 = [3, 44, 22]

let arr = [...arr1, ...arr2];

console.log(arr);

2.用于形参定义 - 可获取剩余参数为数组

function fn(a, ...s) {

console.log(s);//2~6

}

fn(1, 2, 3, 4, 5, 6);

3.用于函数调用 - 可解开数组依次传递(替代apply)

let nums = [55, 33, 66, 11];

Math.min(nums)//NAN 参数不能为数组

console.log(Math.min.apply(null, nums)) // 11 获取数组的每一项，将其赋给min的参数。

console.log(Math.min(...nums)) // 11 解开数组

4.用于数组解构赋值 - 可用1个变量获取数组剩余值

let arr = [11, 22, 33, 44];

let [a, ...b] = arr;

console.log(a, b); // 11, [ 22, 33, 44 ]

8.函数

1.设置默认值（可给形参设置默认值）

function a(a = 10, b = 20) {

console.log(a + b);

}

a();//30

a(111);//131

a(2000, 21)//2021

2. ...形参语法使用...体态arguments

function total(...nums) {

return nums.reduce(function (prevResult, current) {

return prevResult + current;

});

}

total(11, 22, 33, 44); // 110

9.箭头函数

1.标准模式

let a = (a,b)=>{

//函数体

}
2.一参数模式， 可省略参数外的小括号

let a = a=>{

//函数体

}

3.无参数模式

let a = ()=>{

//函数体

}

4.函数体只有一条语句时 可省略大括号{},并返回表达式的值；

let a = (a,b)=> a+b;//a(10,22)值为32;

5.this固定指向上级this

function Tab() {

this.tabBtn = document;

this.tabBox = document.body;

}

Tab.prototype = {

on: function () {

this.tabBtn.onclick = () => {

console.log(this);

this.tabBox.style.backgroundColor = 'blue';

};

}

};

new Tab().on();

this指针指向tab

不能作为构造函数使用

es6函数语法中不能使用arguments对象

10.对象

1.属性方法简洁表示 当key和value的名字一样时，可省略 （：和value）

let a = 10;

let b = {

a: 10,

bb: 30

}

let obj = {

a,

b

}

console.log(obj);

2.方法定义 （改造闭包缓存例子）

let obj = {

fn1: function () {

console.log('传统写法');

},

fn2() {
console.log('简洁写法');
}

};

obj.fn1();

obj.fn2();

3.属性名支持表达式

引用变量值

let key = 'name';

let obj = {

[key]: '小美';

};

console.log(obj);

表达式计算值

let key = 'name';

let obj = {

['my' + key]: '小美',

};

console.log(obj);

类class

类的定义

class Person {    // 以前的构造函数    constructor(name, age, gender) {        this.name = name;        this.age = age;        this.gender = gender;    };    // 以前原型上的方法    say() {        console.log(`${ this.name }今年${ this.age }岁了`);    };};// 使用方式一样var xiaoming = new Person('小明', 14, '男');xiaoming.say();

静态方法 静态方法属于类自己,通过类名.方法名调用 注意这里static关键字只能作用于方法,不能作用于属性

class Person {    constructor() {        Person.total++ ||  (Person.total = 1);    };    // 统计总人口,    static getTotal() {        return Person.total;    };};var p1 = new Person;var p2 = new Person;console.log(Person.getTotal()); // 2

// 11.继承特性1 - 实例成员继承 通过extends关键字实现继承 如果子类有构造器, 必须添加super()调用父类构造器 继承后子类实例便可使用父类实例的属性与方法

class Animal {

constructor(name, age, gender) {

this.name = name;

this.age = age;

this.gender = gender;

};

eat() {

console.log('都得吃啊！');

};

};

class Person extends Animal {

constructor(name, age, gender) {

super(name, age);

this.gender = gender;

};

say() {

console.log(`${this.name}今年${this.age}岁了${this.gender}`);

};

};

var xiaoming = new Person('小明', 14, '男');

xiaoming.eat();

xiaoming.say();

继承特性2 - 静态成员继承

class Animal {    static test() {        console.log('来自父类的静态方法');    };};class Person extends Animal {};Person.test();

本质

类本质上还是一个函数

• class Person {};typeof Person; // function

• 类中的实例方法都定义在了原型中

• class Person {  eat() {      console.log('吃吃吃');  };};Person.prototype;

• 类中的静态方法都定义在了自身

• class Person {  static getTotal() {      console.log('70亿');  };};Person;

• 继承原理

class Animal {    eat() {        console.log('都得吃啊！');    }    static sleep() {        console.log('睡');    }};class Dog extends Animal {}
// 实现原理
Dog.prototype 继承 Animal.prototype,即子类原型 ==> 父类原型Dog 继承 Animal,即子类 ==> 父类