目录
【写在前面】
前文链接：前端基础（五）：JSON
6. ES6
6.1 定义
（1）ECMAScript = ES 是一套标准，类似于HTML5， JS是实现。
（2）ES6，IE10+，Chrome，FireFox，移动端，NodeJS 这些都是兼容的。
（3）编译、转换：在线转换 browser.js = babel，提前编译
（4）ES6都有啥变动？
变量，函数，数组，字符串，面向对象，模块化
Promise， 用来做串行化的异步请求
generator，把同步操作拆成异步操作
6.2 声明变量：var，let，const
6.2.1 var
（1）可以重复声明
（2）无法限制修改
（3）没有块级作用域
（4）有变量升级
6.2.2 let
（1）不能重复声明
（2）变量，可以修改
（3）块级作用域
（4）不存在变量升级
6.2.3 const
（1）不能重复声明
（2）用来声明常量，不可以修改
（3）块级作用域
（4）声明必须赋初始值
（5）标识符一般为大写
补充注意：
1）变量不能重复声明，会报错 （var可以重复声明）
2）块级作用域（if elseif else for while switch）：块外面不能使用在块里定义的变量（let声明）等
3）不存在变量提升 (变量提升，可理解为引用句在声明句前面)
4）不影响作用域链 （块里可以用块外let定义的变量）
5）var定义绑定在window下，有污染。尽量都使用let和const。
6.3 const 定义常量
（1）定义常量，名字常用大写和下划线：Const MY_NAME = “Mike”;
（2）注意：
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();
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
