ES6~11

ES6

块级作用域let

1.变量不能重复声明
2.块级作用域：只在{}内有效
3.不存在变量提升
4.不影响作用域链
示例：

let a;
let b=100;

/*for(var i=0;i<items.length;i++){
        items[i].οnclick=function(){
            this.style.backgroundColor='pink';
            //不能使用items[i].style
        } */
//使用let声明后
        for(let i=0;i<items.length;i++){
        items[i].onclick=function(){
            items[i].style.backgroundColor='pink';
            
        }

const常量

1.必须赋初始值
2.命名一般是用大写
3.不能修改
4.块级作用域
5.对于数组和对象的元素修改，不算对常量修改，不报错

const TEAM=['swk','zbj']
TEAM.push('swk');

变量的解构赋值

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

1. 数组的解构

代码如下（示例）：

        const F4 = ['小沈阳','刘能','赵四','宋小宝'];
        let [xiao, liu, zhao, song] = F4;
        console.log(xiao);//小沈阳
        console.log(liu);//刘能
        console.log(zhao);//赵四
        console.log(song);//宋小宝

2.对象的解构

代码如下（示例）：

const zhao = {
            name: '赵本山',
            age: '不详',
            xiaopin: function(){
                console.log("我可以演小品");
            }
        };

  let {name, age, xiaopin} = zhao;//要求定义对象的名字必须和赋值对象相同
        console.log(name);//赵本山
        console.log(age);//不详
        console.log(xiaopin);//我可以演小品

模板字符串

ES6 引入新的声明字符串的方式 『 `` 』

首先使用``将字符串包起来，当使用变量时，使用${变量}

应用

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

let str = `<ul>
              <li>沈腾</li>
              <li>玛丽</li>
              <li>魏翔</li>
              <li>艾伦</li>
           </ul>`;

• 变量拼接

let lovest = 'hh';
let out=`${lovest}jjjjjj`
console.log(out);//hhjjjjjj

扩展运算符 …

‘…’ 扩展运算符能将 数组 转换为逗号分割的 参数序列

应用

1.数组合并

const a=['a','b'];
const b=['c','d']
const c=a.concat(b);
const d=[...a,...b]
console.log(c)//abcd
console.log(d)//abcd

2.数组克隆

const f=['a','b'];
const g=[...f]

3.将为数组转变为真数组

const divs=document.querySelectorAll('div')
const arr=[...divs];

简化对象写法

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

const school = {
            name,
            change,
            improve(){
                console.log("我们可以提高你的技能");
            }
            //旧
            // name:name,
            // change:change,
            // improve:function(){}
 
        }

箭头函数

• 自身没有this，this是静态的，始终指向函数声明时所在作用域下的this（父级）

• 不能作为构造函数实例化对象

• 不能使用 arguments 变量：保留实参

• 箭头函数的简写

  //当形参只有一个，可以省略（）
     let add= n =>{
  
      }
  //当代码体只有一条语句，可以省略{}，此时return必须省略，语句的执行结果是函数的返回值
     let pow=(n)=>n*n;
  

rest参数

ES6引入rest 获取函数的实参 代替arguments

        //ES5：arguments
        function data(){
            console.log(arguments)//对象
        }
        data('swk','shs');


        //rest参数 必须放到最后
        function data(a,b,...args){
            console.log(args);//数组
        }
        data('swk','shs');

Symbol类型

新类型：值是唯一的，用来解决命名冲突

两种创建方式
let s = Symbol('');
let s4 = Symbol.for(' ');

不能与其他数据进行运算

迭代器

通过迭代器工厂函数 Symbol.iterator生成：

let iterator = xiyou[Symbol.iterator]();//生成迭代器 

调用对象的next方法进行输出:

console.log(iterator.next());

生成器

生成器是特殊的函数
异步编程 纯回调函数
yield:函数代码的分隔符:函数内部代码遇到yield中断执行,当遇到yield 会执行到yield右边的代码后中断
实例：

 function * gen(){
             console.log('hello')
             yield '111'
             console.log('jjjj')
        }
        //执行必须next
        let iterator=gen();
        iterator.next();//hello
        iterator.next();//jjjj
        
//生成器会返回一个生成器：是undefined ，可以通过在yield后面添加值作为其返回值

set新集合类型

创建

let s=new Set();
//可以包含任意数据类型
let s=new Set(['val1',1])

Set不会添加重复值

方法	代码
添加元素	s.add(‘’)
删除元素	s.delete(‘’)
检测元素	s.has(‘’)
清空元素	s.clear()
遍历	for of

应用

数组去重

const arr= [1,2,3,4,5,4,3,2,1];
let result=[...new Set(arr)];
//Array.from([new Set(arr)]);

Map对象

创建

let m= new Map()

添加

m.set('name','尚硅谷');//键 值
m.set('change', function(){
            console.log("我们可以改变你!!");
        });

方法	代码
删除元素	m.delete(‘’)
获取元素	m.get()
清空元素	m.clear()
遍历	for of

Class类

//class
        class Shouji{
            //构造方法是固定的 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式call：function（）{}
            call(){
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);

类的继承

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');
        // console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();

类的静态成员

function Phone(){}
         Phone.name = '手机';//函数对象属性
         Phone.change = function(){}//函数对象属性

         let nokia = new Phone();

         console.log(nokia.name);//undefined//实例对象属性
         nokia.change();//undefined
   
        // 函数对象属性和实例对象属性不相通

        class Phone{
            //静态属性:属于类不属于实例对象
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        console.log(nokia.name);//undefined
        console.log(Phone.name);//手机

对象方法扩展

方法	代码
判断两个值是否完全相等	Object.is()
对象的合并	Object.assign()
设置原型对象	Object.setPrototypeOf
获取原型对象	Object.getPrototypeOf

数值方法扩展

方法	代码
最小精度	Number.EPSILON
检测一个数值是否为有限数	Number.isFinite
检测一个数值是否为 NaN	Number.isNaN
字符串转整数	Number.parseInt Number.parseFloat
判断一个数是否为整数	Number.isInteger
将数字的小数部分抹掉	Math.trunc
判断一个数到底为正数 负数 还是零	Math.sign

模块化

导入方式

1.通用

import * as 别名 from "src";

2.解构赋值

import {名, 名} from "src";
import {default as 别名 } from"src"//默认暴露

3.默认暴露简便写法

import 别名 from "src"

暴露方式

1.分别暴露

export let a='hhh' 
export function b(){}

2.统一暴露

let a='hhh'
function b(){}
export{a,b}

3.默认暴露

export default{
a:1
b:function(){}
}

---

ES7

includes方法

判断数组是否包含指定的值
判断字符串是否包含指定子串
返回true or false

const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
console.log(mingzhu.includes('西游记'));//true
console.log(mingzhu.includes('123'));//false

幂运算 **

等同于Math.pow( , )

---

ES8