es6总结

1.let，const，var有什么区别

（1）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：

内层变量可能覆盖外层变量

用来计数的循环变量泄露为全局变量

（2）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

（3）重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。

（4）暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

（5）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

2.解构赋值

（1）数组模型的解构

a.基本：一一对应。

b.可嵌套：里面可以嵌套多维数组

c.可忽略:可以忽略中间没有的

d.不完全解构：有值可能会未定义。

e.剩余运算符：…既是（…）

（2）对象模型的解构

与数组模型差不多

3.ES6判断字符串

（1）includes()：返回布尔值，判断是否找到参数字符串。

（2）startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。

（3）endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

<!-- startsWith与endsWith方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引（下标0） -->

4.ES6字符串补全

（1）padStart：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。

（2）padEnd：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。

实例：

<!-- console.log("h".padStart(5,"o"));  "ooooh" -->

<!-- console.log("h".padEnd(5,"o"));    "hoooo" -->

<!-- console.log("h".padStart(5));      "    h" -->

5.ES6字符串重复打印

epeat(number)：返回新的字符串，表示将字符串重复指定次数返回。

（1）如果参数是小数，向下取整

（2）如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次

（3）如果参数是 NaN，等同于 repeat 零次

（4）.如果参数是负数或者 Infinity ，会报错:

（5）如果传入的参数是字符串,零次。

6.ES6模板字符串

模板字符串``     添加${a}

7.ES6拦截器

Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，

或修改其现有属性，并返回此对象。

Object.defineProperty(操作的对象, 键名, {value:键值})

writable 设置为false不允许修改defineProperty对象添加的值，true允许修改

enumerable设置为true允许被循环拿取值，false不予许

configurable  false不可被删除，true可以删除

<!-- 实例：

        const object1 = {};

        object1["name"] = "zs";

        let aa = 99;

        Object.defineProperty(object1, 'property1', {

        value: 42,

        writable: false,

        enumerable:false,

        configurable:false,

        });

        object1.property1 = 1;

        console.log(object1) -->

8.ES6 symbol函数

a.由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

b.Symbol 作为对象属性名时不能用.运算符，要用方括号。因为.运算符后面是字符串，所以取到的是字符串 sy 属性，而不是 Symbol 值 sy 属性。

注意：相同参数 Symbol() 返回的值不相等

（1）Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中

是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。

（2）Symbol.keyFor()返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。

let yellow1 = Symbol.for(“Yellow”);

Symbol.keyFor(yellow1);    "Yellow" 

Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

Object.values() 静态方法返回一个给定对象的自有可枚举字符串键属性值组成的数组。

获取原型上属性的有：for in；

获取不可枚举属性的有：getOwnPropertyNames，Reflect.ownKeys（静态方法返回一个数组，其包含给定对象中所有自有属性）

可获取Symbol属性的有：getOwnpropertySymbols,Reflect.ownKeys(返回的一个值是数组)

9.ES6 map函数

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map的特性：

（1）Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

（2）Map 对象记得键的原始插入顺序。

（3）Map 对象具有表示映射大小的属性。

Map 对象的几个常用方法和属性：

new Map() 创建新的 Map 对象。

set() 为 Map 对象中的键设置值。

get() 获取 Map 对象中键的值。

entries() 返回 Map 对象中键/值对的数组。

keys() 返回 Map 对象中键的数组。

values() 返回 Map 对象中值的数组。

map的迭代：

for...of实例:

    let arrs = [["ac",1],["bc",2]]

    let mapObj = new Map(arrs);

    mapObj.set("name","张三");

    let obj = {

        name:"a",

        age:18

    }

    for (var [a,b] of mapObj.entries()) {

这个 entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组

        console.log(a);

a表示key值

        console.log(b);  

b表示value值

    }
    console.log(mapObj.keys());

循环打印ac，1，bc，2 ，name，张三，obj对象

forEach()实例：

    var myMap = new Map();

    myMap.set(0, "zero");

    myMap.set(1, "one");

将会显示两个 logs。 一个是 “0 = zero” 另一个是 “1 = one”

    myMap.forEach（function(value, key) {

    console.log(key + " = " + value);

    }, myMap）

10.ES6 set函数

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

（1）set的类型转换

数组转换set函数

var mySet = new Set(["11", "22", "33"]);

set函数转数组

运用剩余运算符【...myset】即可

String 转 Set

var mySet = new Set('hello');  Set(4) {"h", "e", "l", "o"}

（2）Set 对象作用

数组去重
var mySet = new Set([1, 2, 3, 4, 4]);

[...mySet]; [1, 2, 3, 4]

并集

var a = new Set([1, 2, 3]);

var b = new Set([4, 3, 2]);

var union = new Set([...a, ...b]); {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);

var b = new Set([4, 3, 2]);

var intersect = new Set([...a].filter(x => b.has(x))); {2, 3}

差集

var a = new Set([1, 2, 3]);

var b = new Set([4, 3, 2]);

var difference = new Set([...a].filter(x => !b.has(x))); {1}

(3)Set 函数对象的几个常用方法和属性

new Set() 创建新的 Set 对象。

add() 向 Set 添加新元素。

clear() 从 Set 中删除所有元素。

delete() 删除由其值指定的元素。

has() 如果值存在则返回 true。

forEach() 为每个元素调用回调。

keys() 返回 Set 对象中值的数组。

size 返回元素个数。

注意9和10的区别总结：

set对象与map对象区别

    Set对象可以接收一维数组和字符串类型添加值

    Set对象只有value值

    Set对象可以对数组去重

map和object的区别：

key的数据类型范围不同 -

    obj可以作为key的仅有number、string、symbol。

    map均可以。

• key的顺序不同。

    obj通过obj.keys（）打印出来的属性顺序是 number–字符串
  
    map的key顺序是声明顺序。
  

• 创建方式不同。

    obj有三种创建方式 字面量{}、new Object（） 、构造函数。
  
    map仅支持new Map（）
  

• key的调用不同。

    map只能用原生的get方法调用。
  

• 设置属性的方式不同 -

    map只能使用set（key，val）方法设置属性。
  

• Size属性

    map有size属性，对象没有。Map.size 返回 Map 中元素的数量，而 Object 的键值对个数只能手动计算
  

11.ES6 函数

（1）箭头函数

形式：参数 => 函数体

例子：let f = ()=>{}

特性：

不绑定arguments，用rest参数…解决

本身没有this的概念，捕获其所在上下文的 this 值，作为自己的 this 值，this指向全局

箭头函数不能使用new（会报错）

箭头函数没有原型属性(prototype)

箭头函数不能当做Generator函数,不能使用yield关键字

箭头函数不能换行

箭头函数有constructor、length属性

箭头函数可以立即执行

• 箭头函数里面没有 this 对象，此时的 this 是外层的 this 对象，即 Window

  改变this指向的方式:

    （1）在指定位置定义this存为变量
  
    （2）使用箭头函数
  
    （3）使用setTimeout
  
    （4）使用call()方法
  
    （5）使用bind()方法
  
    （6）使用applay()方法
  
        call()，bind(),apply()区别：
  
        1.apply、call、bind他们三个都能改变函数this的指向问题；
  
        2.apply、call这两个方法的主动调用，bind返回的是改变this指向后的新函数；
  
        3.传参的问题区别，call和bind都是直接传递参数，apply传递的是数组
  
            扩展prototype可以去自己写方法
  
                call的原理例子：
  
                Function.prototype.callFun = function(content,...a){
  
                console.log(content)
  
                if(!content||content==null||content==undefined){
  
                    content = window;
  
                }
  
                let fn = Symbol();
  
                content[fn] = this;
  
                return content[fn](...a);
  
            }
  

12.ES6 防抖和节流

• 防抖的两种方式：

var num = 1;

let times;

先执行

content.onmousemove = function (){

        let obj = times;

        clearTimeout(times);

        times = setTimeout(()=>{

            times = null;

        },1000)

        if(!obj){

            console.log(typeof !obj);

            content.innerHTML = num++;

        }

    };

后执行

content.onmousemove = function (){

        clearTimeout(times);

        times = setTimeout(()=>{

            content.innerHTML = num++;

        },1000)

    };

• 节流的两种方式：

延时器

var time;

     content.onmousemove = function(){

        if(!time){

            time = setTimeout(()=>{

                time = null;

                content.innerHTML = num++;

            },1000)

        }

     }

时间戳

     var content = document.getElementById("content");

     var num = 1;

     var timeNew = 0;

     content.onmousemove = function(){

        var timeOld = Date.now();

        if(timeOld-timeNew>1000){

            timeNew = timeOld;

            content.innerHTML = num++;

        }

     }

13.闭包

• 闭包有3个特性：

  ①函数嵌套函数

  ②函数内部可以引用函数外部的参数和变量

  ③参数和变量不会被垃圾回收机制回收

    好处：
  
    ①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
  
    ②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
  
    ③匿名自执行函数可以减少内存消耗
  
    坏处:
  
    ①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
  
    ②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响
  

14.class类

    a.class 的本质是 function。

    b.不可重复声明。

    c.类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。

    d.类中方法不需要 function 关键字。

    e.方法间不能加分号。

• 命名类

    let Example = class Example{}
  

• 匿名类 -

    let Examples = class{}
  
    静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。
  
    添加静态属性用static
  

• class类方法

    constructor 方法
  
    constructor 方法是类的默认方法，创建类的实例化对象时被调用。
  
    例子：
  
    class Example{
  
    constructor(){
  
    console.log('我是constructor');
  
            }
  
        }
  

• 调用的方法

    new Example(); // 我是constructor
  
    instanceof 是用来判断左侧对象是否是右侧构造函数的实例化对象，或则说左侧对象能否通过其隐式原型 **[[proto]]**在原型链上一层层向上查找到右侧函数的原型对象，即函数原型对象出现在实例对象的原型链上就返回 true。