2.1 let 关键字
- 不允许重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
应用场景：声明时候用let就对了
2.2 const 关键字
- 生命必须赋予初始值
- 标识符一般为大写
- 不允许重复声明
- 值不允许修改
- 块级作用域
注意：对象属性修改和数组值修改不会引发const报错
应用场景：声明对象类型使用const，非对象类型生命用let
2.3 变量的解构赋值
es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为解构赋值
如：
//--数组的解构赋值--
const arr = ['one','two','three','four'];
let [one ,two,three,four] = arr;
//相当于
let one = 'one';
let two = 'two';
let three = 'three';
let four = 'four';
//--对象的解构赋值--
const lin = {
name: '郭采洁',
tags: ['小时代1','小时代2','小时代3','演员','歌手']
}
let {name, tags} = lin;
//相当于
let name = '郭采洁';
let tags = ['小时代1','小时代2','小时代3','演员','歌手'];
//--复杂解构--
let jack = {
name: 'jack',
age: 18,
songs: ['song1','song2','song3','song4'],
history: [
{name: 'history1'},
{name: 'history2'},
{name: 'history3'},
]
};
let {songs: [one,two,three],history:[first,second,third]} = wangfei;
//相当于：
let one = 'song1';
let two = 'song2';
let three = 'song3';
let history = [
{name: 'history1'},
{name: 'history2'},
{name: 'history3'},
];
let first = {name: 'history1'};
let second = {name: 'history2'};
let third = {name: 'history3'};
注意：频繁使用对象方法、数组元素、就可以使用解构赋值形式
2.4 模板字符串（用反引号``标识）
特点：
- 字符串可以出现换行符
- 可以使用${}形式输出变量 如：
let name = '刘宇';
let str = `
<ul>
<li>周柯宇</li>
<li>米卡</li>
<li>赞多</li>
<li>${name}</li>
</ul>
`
注意：当遇到字符串与变量拼接的情况要使用模板字符串
2.5 简化对象写法
es6允许在大括号里面，直接写入变量和函数
如：
let name = "fairy";
let slogon = "永远的fairy";
let improve = function() {
console.log("可爱美丽有大方");
}
// 属性和方法简写
let fairy = {
name,
slogon,
improve,
change() {
console.log("永远的小姐姐");
}
}
console.log(fairy)
注意：对象简写形式简化了代码，所以以后简写
2.6 箭头函数
ES6 允许使用[箭头] (=>) 定义函数
/**
* 1、通用写法
*/
let fn = (arg1,arg2,arg3) => {
return arg1 + arg2 + arg3;
}
/**
* 2、省略小括号的情况
*/
let fn2 = num => {
return num + 2;
}
/**
* 3、省略花括号的情况
*/
let fn3 = score => score * 20;
/**
* 4、this指向声明时所在作用域中this的值
*/
let fn4 = () => {
console.log(this);
}
let school = {
name: 'fairy',
getName() {
let fn5 = () => {
console.log(this.name);
}
fn5();
}
}
注意：
- 如果形参只有一个，那么小括号可以省略
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
- 箭头函数的this指向声明时所在作用域下this的值
- 箭头函数不能作为构造函数实现实例化
- 5、不能使用arguments
注意：rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arguments
/**
* 作用与arguments类似
*/
function add(...args) {
console.log(args)
}
add(1,2,3,4,5);
/**
* rest参数必须是最后一个形参
*/
function minus(a,b, ...args) {
console.log(a,b,args);
}
minus(100,101,1,2,3,4,5,6);
注意：其中 args 为数组，代表 arguments和rest参数，都为数组 rest参数非常适合不定个数参数函数使用
2.8 spread扩展运算符
扩展运算符(spread)也是三个点（...）。好比rest参数的逆运算，将一个数组转为用逗号分割的序列，对数组进行解包。
/**
* spread展开数组
*/
let tfboys = ["fairy", "jack","race","lisa"]
function fn() {
console.log(arguments);
}
fn(...tfboys);
/**
* 展开对象
*/
let skillOne = {
fairy: 'FAIRY'
}
let skillTwo = {
jack: "JACK"
}
let skillThree = {
race: "RACE"
}
let skillFour = {
lisa: "LISA"
}
let gailun = {...skillOne,...skillThree,...skillTwo,...skillFour};
console.log(gailun)
2.9 Symbol
ES6引入了一种新的原始数据类型 Symbol，表示独一无二的值，是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol的特点
- Symbol的值是唯一的，用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for ...in循环遍历，但是可以使用 Reflect.ownKeys来获取对象的所有键名 如：
let s1 = Symbol();
console.log(s1, typeof s1);//Symbol() "symbol"
// 添加标识的 symbol
let s2 = Symbol('fairy');
let s2_2 = Symbol('fairy');
console.log(s2 == s2_2)//false
// 使用Symbol for定义
let s3 = Symbol.for('fairy');
let s3_2 = Symbol.for('fairy');
console.log(s3 == s3_2);//true
注意：遇到唯一性的场景时要想到 Symbol
2.10 迭代器
遍历器（Iterator）就是一种机制，它是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作。
1、ES6创造了一种新的遍历命令for ...of循环，Iterator接口主要供for ...of消费
2、原生具备iterator接口的数据（可用for of 遍历）
- Array
- arguments
- set
- map
- string
- typedArray
- NodeList
注意：需要自定义遍历数据的时候，要想到迭代器
2.11 生成器 如：
function * gen() {
yieId : '一直没有耳朵';
yieId : '一直没有尾巴';
return '真奇怪';
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
2.12 Promise
是ES6引入的异步编程的新解决方案，promise是一个构造函数 用来封装异步操作并可以获取其失败或成功的记过，
promise构造函数：promise(excutor){}
promise.prototype.then方法
promise.prototype.catch方法
2.13 Set
数据结构（set）,类似数组，成员的值都是唯一的，集合实现了 iterator接口，可使用[扩展运算符]和[for...of...]进行遍历，集合的属性和方法：
- size 返回集合的元素个数
- add 新增一个新元素，返回当前集合
- delete 删除元素 返回boolean值
- has 检测集合中是否包含某个元素，返回boolean值
- clear 清空集合返回Undefined 如：
// 创建一个空集合
let s = new Set();
// 创建一个非空集合
let s1 = new Set([1,2,3,1,2,3])
// 返回集合的元素个数
console.log(s1.size);//3
// 添加新元素
console.log(s1.add(4));//set{1,2,3,4}
// 删除元素
console.log(s1.delete(1));//true
// 检测是否存在某个值
console.log(s1.has(2));//true
// 清空集合
console.log(s1.clear());//undefined
2.14 Map
es6提供了map数据结构，类似于对象，键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可当做“键”，也可以使用[扩展运算符]和[for...of...]进行遍历。map的属性和方法
- size 返回map的元素个数
- set 增加一个新元素，返回当前map
- get 返回键名对象的键值
- has 检测map中是否包含某个元素，返回boolean值
- chear 清空集合返回Undefined 如：
// 创建一个空map
let m = new Map();
// 创建一个非空map
let m2 = new Map([
['name','fairy'],
['flogon','超级无敌宇宙最可爱']
]);
// 获取映射元素的个数
console.log(m2.size);//2
// 添加映射值
console.log(m2.set('age', 6))//map(3){"name" => "fairy","flogon" => "超级无敌宇宙最可爱","age" => 6}
// 获取映射值
console.log(m2.get('age'))// 6
// 检测是否有该映射
console.log(m2.has('age'))// true
// 清除
console.log(m2.clear())//undefined
2.15 class类
es6提供了更接近传统语言的写法，引入了class（类）概念
如：
// 父类
class Phone {
// 构造方法
constructor(brand, color, price) {
this.brand = brand;
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;
}
// 子类方法
photo() {
console.log("我可以拍照");
}
playGame() {
console.log("我可以玩游戏")
}
// 方法重写
call() {
console.log("方法重写")
}
// 静态方法
static run() {
console.log("我可以正常运行")
}
static connect() {
console.log("我可以建立连接")
}
}
// 实例化对象
const Nokia = new Phone('洛基亚','灰色',230);
const iPhone6s = new SmartPhone('苹果','白色', 6088,'4.7inch','500w');
// 调用子类方法
iPhone6s.playGame();//我可以玩游戏
// 调用重写方法
iPhone6s.call();//方法重写
// 调用静态方法
SmartPhone.run();//我可以正常运行
