前端基础（六）：ES6

1）常量在声明时，必须同时赋值。

2）常量的值不能被修改。

3）块级作用域。

4）对于数组元素的修改，不算做对常量的修改，不会报错。

Const PERSONS=[“TOM”, “KATE”];

PERSONS.push(“SHERYL”);

成功！因为栈中存的是数组的首地址，改变里面的元素，不影响地址，所以成功。

但是要是把其他数组(的引用地址)重新赋给这个数组，地址变了，那就会失败。

6.4 解构赋值

（1）定义

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，称之为解构赋值。

即：通过一行的方法拿到多个属性。

1) 数组解构

const PERSONS=[“Tom”, “Kate”];

let[tom, kate] = PERSONS;

console.log(tom)

console.log(kate)

2） 对象解构

const PERSON ={

        name: ‘Sheryl,

        age: 18,

        sayName: function(){

console.log(this.name)

        }

}

let {name, age, sayName} = PERSON

（2）补充注意：

1）左右两边结构（属性名称）必须一样

2）右边是对象，数组…

3）声明和赋值不能分开（必须在一句话里完成）

（3）举例：

数组： let [a,b,c] = [1,2,3]

json: let {a,b,c} = {a:5,b:1,c:3}

混合： let[{a,b},[n1,n2],num,str] = [{a:12,b:3},[1,2],3,f]

6.5 模版字符串

（1）定义：

模版字符串是增强版的字符串，用反引号（’）标识。即 ESC键下的反引号 ` `。

（2）作用：

1）用来括字符串，字符串换行时没影响。

2）同一行上，原来需要+不断拼接的，用了反引号之后，也比较方便了。

3）反引号里，可以使用${xxx}形式或者/ 提取变量。

let name = `Kate`

let out = `I am ${name}` //用在传参，比如URL中传id等

console.log(out)

6.6 简化对象写法

（1）定义：

当属性和对应的属性值一样的时候，只需要写一个（省略冒号和冒号右边的值）。

即：如果对象的属性，方法和赋值的参数同名，可省略冒号和后面的参数。

对象的方法/函数中，function关键字和冒号可以省略。

（2）举例：

ES6允许在大括号里，直接写入变量和函数，作为对象的属性和方法。

let name = "Kate";

let age = 18;

const Person = {

name,

age

}

6.7 箭头函数

（1）定义：ES6中，允许使用箭头 => 来定义函数

旧写法：

let fun1 = function( ){

函数体；

}

新写法（声明函数如下，调用一样）：

let fun1 = ( ) => {

console.log(2); // 函数体

}

（2）注意

1）箭头函数使用call()转换this指向时失败，因为箭头函数的this始终指向声明这个箭头函数时函数所在的作用域下的this！！！（可用apply和bind ??）

2）箭头函数不能作为构造函数来实例化对象！！！

（3）箭头函数的简写：

1）如果只有一个参数时，小括号可以省略（只写这唯一的一个参数：参数 => { }）

2）如果方法体只有一条语句时，可以省略花括号，以及函数的返回值为该条语句的执行结果（必须去掉return？）

（4）举例：

()=>{

} lambda表达式，是模仿Python里边的。

1）如果只有一个参数，()可以省略。

2）如果只有一个return，{}可以省略

6.8 扩展运算符

（1）定义：

把一个完成的数组展开，将数组元素提出来。类似下文的rest参数，不过这里用在实参。

fun1(PERSON); //相当于一个参数

fun1(…PERSON); //相当于n个参数，n就是数组的长度

（2）作用：

1）用于数组的合并，功能类似concat

PERSON和PERSON2是两个数组，拼接的话，可如下，先提取出来然后放到一起：

Const PERSON_ALL = […PERSON, …PERSON2]

2）用于数组的克隆

Const ARR1=[x,c,v];

Const ARR2=[…ARR1];

6.9 rest 参数

（1）定义：

即：参数扩展/展开。通常是指形参。

（2）作用：

旧方式：

数组扩展：function show(a,b,...args){ }

展开数组：

let arr = [1,2,3]

show(...arr)，

新方式：在ES6中，用rest。

rest参数的形式，这里是指形参：…args

function f2(a,b…args){ //? rest Parameter必须是最后一个

console.log(args);

}

f2(1,2,3,4);

得出args是[3,4] //得到的是数组，并且args需要放在形参的最后

（3）注意：

args形参，可以用别的名字，不一定叫args，但是习惯了这么用。

前面提到的arguments，是指实参。

rest 参数跟arguments有点儿像，但typeof arguments得出的是一个object, 不是array。

（4）Rest参数和扩展运算符的区别：

Rest是定义在形参里。

扩展运算符用在实参。

（5）函数带默认参数的实例：

function show (a, b=4,c=12){ ...... }

show(99,12)

6.10 class类

（1）定义：

ES6提供了更接近传统语言的语法，引入了class类这个概念。

作为对象的模版，通过class关键字，可以定义类。

基本上，ES6的class可以看做一个语法糖，它的绝大部分功能，ES6都可以做到。

新的class写法，只是让对象原型的写法更加清晰，更像面向对象编程的语法而已。

（2）知识点:

class 声明类

constructor 定义构造函数初始化

extends 继承父类

super 调用父级构造方法

static 定义静态方法和属性

父类方法可以重写

类中的构造方法里的this, 和一般方法里的this是一样的

（3）举例：

//父类
class Phone{
        constructor(brand, color, price){ //构造方法
                this.band = band;
                this.color = color;
                this.price =  price;
        }
        call(){
                console.log('我可以打电话！！！')
        }
}

//子类
class SmartPhone extends Phone{
        constructor(brand, color, price, screen, pixel){ //构造方法
                super(brand, color, price);
                this.screen = screen;
                this.pixel = pixel;
        }
        call(){  //重写方法
                console.log('我可以进行视频通话！);        
        }
        static run(){  //静态方法
                console.log('我可以运行程序');
        }
        static connect(){  //静态方法
                console.log('我可以建立连接');
        }     
        photo(){  //子类方法
                console.log('我可以拍照');
        }
        playGame(){  //子类方法
                console.log('我可以玩游戏');
        }
}

//实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230)；
const iPhone = new SmartPhone('苹果','白色',6088，'4.7inch','500w')

//调用子类方法
iPhone.playGame();
iPhone.call();

//调用静态方法，通过类名可以直接调用
SmartPhone.run();