ES6 特性

ES6

1. ECMAScript：是由 Ecrna 国际通过 ECMA-262标准化的脚本程序设计语言

let 局部变量

1. 变量不能重复声明
2. 变量作用域可以在{}内
3. 不存在变量提升
4. 不影响作用域值

const 声明常量

1. 一定要赋初始值
2. 一般常量使用大写
3. 常量值不能修改
4. 块级作用域
5. 对于数组和对象的元素修改，不算做对常量的修改，不会报错
6. 数组解构

1. 对象解构

模板字符串

1. 声明

1. 内容中可以直接出现换行符

1. 变量拼接

简化对象写法

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

箭头函数

允许使用箭头 => 定义函数

this 是静态的，this 时钟只想函数声明时所在作用域下的this的值

call 方法调用

1. 不能作为构造实例化对象
2. 不能使用arguments变量
3. 当形参且只有一个的时候可以省略小括号

省略花括号，此时return必须省略

1. 箭头函数适合与this无关的回调，定时器，数组的方法回调
2. 箭头函数不适合与this有关的回调，事件回调，对象的方法

函数参数默认值

形参初始值，具有默认值的参数，一般位置要靠后

与解构赋值结合

rest参数

获取实参方式，rest参数必须放最后

扩展运算符

1. 声明一个数组

扩展运算符应用

数组合并

数组克隆

将伪数组转为真正的数组

Symbol

1. ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值，它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型
2. Symbol 的值是惟一的，用来解决命名冲突的问题
3. Symbol 值不能与其他数据进行运算
4. Symbol 定义的对象属性不能使用 for in 循环遍历，但是可以使用 Reflect.ownKeys来获取对象的所有键名

Symbol 创建对象属性

Symbol 内置值

1. 除了定义自己使用的Symbol 值以外，ES6 还提供了 11 个内置的 Symbol值，只想语言内部使用方法

迭代器

1. 迭代器是一种接口，为各种不同的数据结构提供同意的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历操作

自定义遍历数据

生成器

1. 生成器其实就是一个特殊函数，函数代码的分隔符

生成器函数参数

next方法可以传实参

1. 生成器函数实例

Promise

1. 是ES6引入的异步编程的新解决方案，语法上promise是一个构造函数，用于封装异步操作并可以获取其成功或失败结果
2. promise 构造函数 ：promise(excutor){}
3. promise.prototype.then 方法
4. promise.prototype.catch 方法
5. 基本语法

1. 发送Ajax请求

// 接口地址: https://api.apiopen.top/getJoke const p = new Promise((resolve, reject) => {     //1. 创建对象     const xhr = new XMLHttpRequest();     //2. 初始化     xhr.open("GET", "https://api.apiopen.top/getJ");     //3. 发送     xhr.send();     //4. 绑定事件, 处理响应结果     xhr.onreadystatechange = function () {  //判断  if (xhr.readyState === 4) {      //判断响应状态码 200-299      if (xhr.status >= 200 && xhr.status < 300) {   //表示成功   resolve(xhr.response);      } else {   //如果失败   reject(xhr.status);      }  }     } }) //指定回调 p.then(function(value){     console.log(value); }, function(reason){     console.error(reason); });

1. promise.prototype.then

调用then方法，then方法的返回结果是promise对象，对象状态由回调函数的执行结果决定，如果回调函数中返回的结果是非peomise类型属性，状态为成功，返回值为对象的成功值

//使用 promise 实现const p = new Promise((resolve, reject) => {    fs.readFile("./resources/为学.md", (err, data) => { resolve(data);    });});p.then(value => {    return new Promise((resolve, reject) => { fs.readFile("./resources/插秧诗.md", (err, data) => {     resolve([value, data]); });    });}).then(value => {    return new Promise((resolve, reject) => { fs.readFile("./resources/观书有感.md", (err, data) => {     //压入     value.push(data);     resolve(value); });    })}).then(value => {    console.log(value.join('\r\n'));});

1. promise.prototype.catch

const p = new Promise((resolve, reject)=>{  setTimeout(()=>{    //设置 p 对象的状态为失败, 并设置失败的值    reject("出错啦!");  }, 1000)});p.catch(function(reason){  console.warn(reason);});

Set

1. set使用

//声明一个 setlet s = new Set();let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);s2.add('喜事儿');for(let v of s2){  console.log(v);}

1. set 实践

let arr = [1,2,3,4,5,4,3,2,1];//1. 数组去重let result = [...new Set(arr)];//2. 交集let arr2 = [4,5,6,5,6];let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));//3. 并集let union = [...new Set([...arr, ...arr2])];//4. 差集let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));

Map

Map 数据结构，键的范围不限于字符串，各种类型的值都可以当做键，map实现了iterator接口，可以用于for...of..进行遍历

1. size 返回map的元数个数
2. set 增加一个新元素，返货当前Map
3. get 返回键名对象的键值
4. has 检测Map 中是否包含某个元素，返回boolean值
5. clear 清空集合，返回undefined

//声明 Maplet m = new Map();//添加元素m.set('name','尚硅谷');m.set('change', function(){  console.log("我们可以改变你!!");});let key = {  school : 'ATGUIGU'};m.set(key, ['北京','上海','深圳']);//sizeconsole.log(m.size);//删除m.delete('name');//获取console.log(m.get('change'));// console.log(m.get(key));//清空m.clear();//遍历for(let v of m){  console.log(v);}

class 类

引入了class类这个概念，作为对象的模板，通过class关键字，可以定义类，基本上，ES6的class可以看做只是一个语法糖，它的绝大部分功能与E5大致相同，class写法只是让对象原型的写法更加清晰，使其更像面向对象编程

1. class 声明类
2. constructor 定义构造函数初始化
3. extends 继承父类
4. super 调用父级构造方法
5. static 定义静态方法和属性
6. 父类方法可以重写
7. class使用

//人物function Phone(name, age){  this.name = name;  this.age = age;}//添加方法Phone.prototype.call = function(){  console.log("我来了!!");}//实例化对象let Huawei = new Phone('华为', 59);Huawei.call();console.log(Huawei);//classclass Shouji{  //构造方法 名字不能修改  constructor(brand, price){    this.brand = brand;    this.price = price;  }  //方法必须使用该语法, 不能使用 ES5 的对象完整形式  call(){    console.log("我可以打电话!!");  }}let onePlus = new Shouji("1+", 19);console.log(onePlus);

class 静态成员

class User{  static name = '张三'  static change(){    console.log('我可以改变世界')  }}let schoole = new User();console.log(schoole.name)console.log(User.name)

class 构造函数继承

//手机function Phone(brand, price){  this.brand = brand;  this.price = price;}Phone.prototype.call = function(){  console.log("我可以打电话");}//智能手机function SmartPhone(brand, price, color, size){  Phone.call(this, brand, price);  this.color = color;  this.size = size;}//设置子级构造函数的原型SmartPhone.prototype = new Phone;SmartPhone.prototype.constructor = SmartPhone;//声明子类的方法SmartPhone.prototype.photo = function(){  console.log("我可以拍照")}SmartPhone.prototype.playGame = function(){  console.log("我可以玩游戏");}const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');console.log(chuizi);

class 类继承

class Phone{  //构造方法  constructor(brand, price){    this.brand = brand;    this.price = price;  }  //父类的成员属性  call(){    console.log("我可以打电话!!");  }}class SmartPhone extends Phone {  //构造方法  constructor(brand, price, color, size){    super(brand, price);// Phone.call(this, brand, price)    this.color = color;    this.size = size;  }  photo(){    console.log("拍照");  }  playGame(){    console.log("玩游戏");  }  call(){    console.log('我可以进行视频通话');  }}const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');xiaomi.call();xiaomi.photo();xiaomi.playGame();

数值扩展

Number.isFinite  检测一个数值是否为有限数Number.isNaN 检测一个数值是否为 NaN Number.parseInt Number.parseFloat字符串转整数Number.isInteger 判断一个数是否为整数Math.trunc 将数字的小数部分抹掉  Math.sign 判断一个数到底为正数 负数 还是零 正1零0负-1

对象方法

Object.is 判断两个值是否完全相等 Object.assign 对象的合并Object.setPrototypeOf 设置原型对象  Object.getPrototypeof

模块化

1. 模块化是指将一个大的程序文件，拆分成许多个 小的文件，然后将小文件组合起来
2. 模块化好处
3. 防止命名重复
4. 代码复用
5. 搞维护性
6. 模块化规范产品
7. commonJS：nodeJS，browserify
8. AMD：requireJS
9. CMD：seaJS
10. export：命令用于规定模块的对外接口
11. import：命令用于输入其他模块提供功能