ES6 特性

ES6 ECMAScript：是由 Ecrna 国际通过 ECMA-262标准化的脚本程序设计语言 let 局部变量 变量不能重复声明变量作用域可以在{}内不存在变量提升不影响作用域值 const 声明常量 一定要赋初始值一般常量使用大写常量值不能修改块级作用域对于数组和对象的元素修改，不算做对常量的修改，不会报错数组解构

对象解构

 

 

模板字符串 声明

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

变量拼接

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

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

 

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

 

call 方法调用

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

 

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

 

箭头函数适合与this无关的回调，定时器，数组的方法回调箭头函数不适合与this有关的回调，事件回调，对象的方法 函数参数默认值 形参初始值，具有默认值的参数，一般位置要靠后

与解构赋值结合

 

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

 

扩展运算符 声明一个数组

 

扩展运算符应用 数组合并

 

数组克隆

 

将伪数组转为真正的数组

 

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

 

Symbol 创建对象属性

 

Symbol 内置值 除了定义自己使用的Symbol 值以外，ES6 还提供了 11 个内置的 Symbol值，只想语言内部使用方法 迭代器 迭代器是一种接口，为各种不同的数据结构提供同意的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历 *** 作

 

自定义遍历数据

 

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

 

生成器函数参数 next方法可以传实参

 

生成器函数实例

 

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

 

发送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);
        });

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'));
});

promise.prototype.catch

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

Set set使用

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

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..进行遍历 size 返回map的元数个数set 增加一个新元素，返货当前Mapget 返回键名对象的键值has 检测Map 中是否包含某个元素，返回boolean值clear 清空集合，返回undefined

//声明 Map
let m = new Map();
//添加元素
m.set('name','尚硅谷');
m.set('change', function(){
  console.log("我们可以改变你!!");
});
let key = {
  school : 'ATGUIGU'
};
m.set(key, ['北京','上海','深圳']);
//size
console.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写法只是让对象原型的写法更加清晰，使其更像面向对象编程 class 声明类constructor 定义构造函数初始化extends 继承父类super 调用父级构造方法static 定义静态方法和属性父类方法可以重写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);
//class
class 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

模块化 模块化是指将一个大的程序文件，拆分成许多个 小的文件，然后将小文件组合起来模块化好处防止命名重复代码复用搞维护性模块化规范产品commonJS：nodeJS，browserifyAMD：requireJSCMD：seaJSexport：命令用于规定模块的对外接口import：命令用于输入其他模块提供功能