ES6的常用知识点

最新推荐文章于 2022-08-03 08:08:56 发布

置顶温柔小生

最新推荐文章于 2022-08-03 08:08:56 发布

阅读量776

点赞数 5

分类专栏： es6 文章标签： Es6

本文链接：https://blog.csdn.net/qq_34953053/article/details/89342714

版权

es6 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是ES6?
ES6 操作数组的并集／交集／差集
let和const
字符串模板
解构赋值
复制数组
Map
for-of循环
箭头函数
对象的简洁语法
class和extends
模块化-export,import
Promise
Generator、yield

1.什么是ES6?

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015(简称ES2015）。虽然浏览器在不断更新，但并不是所有用户的电脑浏览器都支持ES6，所以在使用的过程中建议还是转成es5，保证代码的可执行性。至于转换的方式大家可以用Babel或者Traceur转码器。

2.ES6 操作数组的并集／交集／差集
使用ES6 操作数组

let a = new Set([1, 2, 3]);
let b = new Set([3, 5, 2]); 

// 并集
let unionSet = new Set([...a, ...b]);
//[1,2,3,5]


// 交集
let intersectionSet = new Set([...a].filter(x => b.has(x)));
// [2,3]


// ab差集
let differenceABSet = new Set([...a].filter(x => !b.has(x)));

2. let和const

在ES6以前，Javascript并不同有块级作用域的概念，有的是函数作用域，而let的出现就是为了打破局面，有点向后台语言发展的趋势。const是代表常量，必须在定义的时候初始化，不可改变。下面我举例子说明。

window.onload = function(){
    var aInput = document.getElementsByTagName("input");
    // 传统解决办法
    for(var i=0;i<aInput.length;i++){
        (function(i){
        // 函数闭包自执行来解决i索引的问题
            aInput[i].onclick = function(){
                alert(i);
            };
        })(i);
    }

    // let变量的出现相当于给你加了一个封闭空间来极度简化了i值索引的问题
    // let大家可以看成是匿名函数立即调用(IIFE）
    for(let i=0;i<aInput.length;i++){
        aInput[i].onclick = function(){
            alert(i);
        };  
    }
};
//对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错，而以前var的时候并不会报错，只是覆盖定义
let a = 12;
let a = 13; //Identifier 'a' has already been declared
//const必须在初始化的时候同时赋初值，且不能更改
const b;  //Uncaught SyntaxError: Missing initializer in const declaration
const b = 14;
b = 15;  //Uncaught TypeError: Assignment to constant variable.

3. 字符串模板

  //传统字符串拼接
    var s1 = '快乐童年放飞希望^_^';
    var s2 = '我们的童年^_^';
    var str = '2013年5月29日，放飞自己、'+s2+'、在这个夏天'+
    '在北京市少年宫参加“'+s1+'”很环保的话题'+'是很快乐的人';
    document.write(str);    
                
    // 字符模板的写法
    var s1 = '快乐童年放飞希望^_^';
    var s2 = '我们的童年^_^';
    var str = `2013年5月29日，很嗨皮${s2}、喜欢这样的活动“${s1}”主题队日活动。办的挺好。 `;
    document.write(str);

4.解构赋值

理解：解构赋值说白了就是获取数组的元素，一般情况下我们获取数组元素是通过下标来获取

解构赋值分为两种：数组的解构赋值 和 对象的解构赋值
    A.数组解构赋值：
        let arr0 = [1,2,3];
	    let [a,b,c] = arr0;
	    console.log(a,b,c);//1,2,3
	 B.对象的解构赋值：
	    let p1 = {
		"name":"zhuangzhuang",
		"age":25
	    }
	   let {name,age} = p1;//注意变量必须为属性名
	   console.log(name,age);//"zhuangzhuang",25
 C.下面的是解构的基本介绍：
	
   // 以前我们给变量赋值，只能直接指定值
    var a = 1;
    var b = 2;
    var c = 3;
    console.log(a,b,c); // 1 2 3
                
    // 现在用解构赋值的写法就变得简单了，只要模式匹配上了就行了，如下
    // 注意数组是有顺序的
    var [a,b,c] = [11,22,33];
    console.log(a,b,c); // 11 22 33
    
    var [b,a,c] = [11,22,33];
    console.log(a,b,c); // 22 11 33
    
    // 当然解构赋值还有嵌套比较复杂的写法，如下
    let [foo,[[bar],[baz]]] = [111,[[222],[333]]];
    console.log(foo,bar,baz); // 111 222 333
    
    let [head,...foot] = [1,2,3,4];
    console.log(head,foot); // 1 [2,3,4]
    
    // 如果解构不成功，变量的值就等于undefined，如下
    var [bar3,foo3] = [1000];
    console.log(bar3,foo3); // 1000 undefined
    
    // 另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功
    let [x,y] = [10000,20000,30000];
    console.log(x,y); // 10000 20000
    
    // 默认值可以引用解构赋值的其他变量，但该变量必须已经声明
    let [a=1,b=a] = [2,3];
    console.log(a,b); // 2 3
    
    // 对象的解构也可以指定默认值
    var {x,y=5} = {x:1};
    console.log(x,y); // 1 5
    
    //对象的解构赋值解构不仅可以用于数组，还可以用于对象(json)
    //对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；
    //而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
    var {a,b} = {a:'apple',b:'banana'};
    console.log(a,b); // apple banana
    var {b,a} = {a:'apple',b:'banana'};
    console.log(a,b); // apple banana
    
    // 如果变量名与属性名不一致，必须写成下面这样
    let obj = {first:'hello',last:'world'};
    // first ---> f，那么此时f就是first，而不是undefined了,有点类似别名的概念
    let {first:f,last} = obj;
    console.log(f,last); // hello world
    
    //1.也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。 真正被赋值的是后者，而不是前者
    //2.v是匹配的模式，n才是变量。真正被赋值的是变量n，而不是模式v。  
    //注意，采用这种写法时，变量的声明和赋值是一体的
    // v ---> n，那么此时n就是vue，而不是undefined了
    var {v:n} = {v:'vue',r:'react'};
    console.log(n); // vue
    console.log(v); // Uncaught ReferenceError: v is not defined
    console.log(r); // Uncaught ReferenceError: r is not defined

5.复制数组

   // 数组的浅拷贝，引用之间的拷贝，没有实现数组的真正复制
    var arr1 = [1, 2, 3];
    var arr2 = arr1;
    arr2.push(4);
    console.log(arr1, arr2);
  
    // 复制数组深拷贝，传统做法
    var arr1 = [1,2,3];
    var arr2 = [];
    //通过for循环遍历之后将arr1数组的每一项赋值给arr2数组的每一项， 就实现了数组的深拷贝，这时候我再去操作arr2的数组的时候，arr1就不会受影响了
    for(var i=0;i<arr1.length;i++){
        arr2[i] = arr1[i];
    }
    // 数组尾部添加
    arr2.push(4);
    console.log(arr1,arr2);
    
    // ES6实现的数组的深拷贝方法1
    var arr1 = [1,2,3];
    var arr2 = Array.from(arr1);
    // 数组尾部添加
    arr2.push(100);
    console.log(arr1,arr2);
    
    // ES6实现的数组的深拷贝方法2
    var arr1 = [1,2,3];
    // 超引用拷贝数组
    var arr2 = [...arr1];
    // 数组尾部添加
    arr2.push(1000);
    console.log(arr1,arr2);
    
    function show(...args){
    // 此时这个形势参数就是一个数组，我们可以直接push东西进来，如下
    args.push(5);
    console.log(args);
    }
    // 调用
    show(1,2,3,4); // 1,2,3,4,5

浅拷贝的值

在这里插入图片描述
深拷贝的值

6. Map
map（IE9+支持）：

返回新数组
方法接受一个回调函数，回调函数接受三个参数：当前项、索引、操作的数组
不影响原来的数组

for in：

一般用来遍历对象，不用来遍历数组
没有返回值

   var map = new Map();
    // 设置
    // map.set(name,value);
    map.set('a','apple');
    map.set('b','banana');
    // 获取
    // map.get(name);
    console.log(map.get('a') + ' ' + map.get('b'));
    // 删除之前map对象
    console.log(map);
    // 删除
    // map.delete(name);
    map.delete('a');
    // 删除之后map对象
    console.log(map);
    
    // 注意for..in是不能循环map对象的，不报错也无任何反应，稍微注意下
    for(var name in map){
        console.log(name);
    }
    
    // 实体  map=map.entries()
    for(var name of map){
    //循环出来的结果就是:a,apple b,banana 循环key,value
    console.log(name);
    }
    
    //循环出来的结果就是: a,apple b,banana 循环key,value
    for(var [key,value] of map.entries()){
        console.log(key,value);
    }
    
    //只循环key
    for(var key of map.keys()){
        console.log(key);
    }
    
    //只循环value
    for(var val of map.values()){
        console.log(val);

7. for-of循环

  //for of一个arr对象
    var arr = ['红楼梦','西游记','三国演义','水浒传','金瓶梅'];
    //只循环key
    for(var key of arr.keys()){
    console.log(key);
    }
    //只循环value，注意数组是没有.values()
    for(var value of arr){
    console.log(value);
    }
    //循环key,value
    for(var [key,value] of arr.entries()){
    console.log(key,value);
    }
    
    //for in循环与for of循环的区别
    var arr = ['apple','banana','orange','pear'];
    for(var i in arr){
    // i打印出来的就是arr数组对应的索引
    // 0 1 2 3
    console.log(i);
    }
    for(var i of arr){
    // i值打印出来的就是我们想要的数组具体的值
    // apple banana orange pear
    console.log(i);
    }
    
    //for of不能循环json
    var json = {'a':'apple','b':'banana','c':'orange','d':'pear'};
    for(var name in json){
    // a b c d
    console.log(name);
    // apple
    console.log(json.a);
    // pear
    console.log(json['d']);
    }
    // 注意for..of可以循环arr，但是不可以循环json,会报错，特别注意下
    for(var name of json){
    Uncaught TypeError: undefined is not a function
    console.log(json);
    }

8. 箭头函数
箭头函数与普通函数的区别
1.箭头函数是匿名函数，不能作为构造函数，不能使用new
2.箭头函数不绑定arguments，取而代之用rest参数…解决
3.箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
4.箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
5.箭头函数没有原型属性
以上内容详细参考：https://www.cnblogs.com/biubiuxixiya/p/8610594.html

 //箭头函数写法 function(){} 变为 ()=>{}
    window.onload = () => {
            var oBox = document.getElementById("box");
            oBox.onclick = () => {
            oBox.style.backgroundColor = '#ff0000';
        };
    };
    
    //注意this指向会有问题
    var json = {
        a:1,
        b:2,
        showName:() => {
            return this.a;
        }
    };
    // 因为使用了箭头函数this指向了object window 所以result：undefined
    console.log(json.showName());
    
    //如果使用了箭头函数的写法，那么注意arguments将不能继续使用了
    var show = () => {
        console.log(arguments);
    };
    // Uncaught ReferenceError: arguments is not defined
    show(1,2,3);

9. 对象的简洁语法

 //传统对象_单体模式写法 key-value模式
    var person = {
        name:'jam',
        age:28,
        showName:function(){
            return this.name;
        },
        showAge:function(){
            return this.age;
        }
    };
    // 调用
    console.log(person.showName()); // jam
    console.log(person.showAge()); // 28
    
    //ES6_单体模式写法  不需要写key
    var name = 'xiaokai';
        var age = 2;
        var person = {
        name,
        age,
        showName(){
            return this.name;
        },
        showAge(){
            return this.age;
        }
    };
    // 调用
    console.log(person.showName()); // xiaokai
    console.log(person.showAge()); // 2

**10. 模块化-export和import**

下边的演示文件mod代表是导出模块js, index代表的是引入模块的js ,mod文件跟index文件一一对应关系 。

    //mod.js
    // 第一种模块导出的书写方式(一个个的导出)
    // 导出普通值
    export let a = 12;
    export let b = 5;
    // 导出json
    export let json = {
        a,
        b
    };
    // 导出函数
    export let show = function(){
        return 'welcome';
    };
    // 导出类
    export class Person{
        constructor(){
            this.name = 'jam';
        }
        showName(){
            return this.name;
        }
    }
    
    //index.js
    //导出模块如果用default了，引入的时候直接用，若没有用default，引入的时候可以用{}的形式
    // 导入模块的方式
    import {
        a,
        b,
        json,
        show,
        Person
    } from './mod.js';
    console.log(a); // 12
    console.log(b); // 5
    console.log(json.a); // 12
    console.log(json.b); // 5
    console.log(show()); // welcome
    console.log(new Person().showName()); // jam
    
    //mod1.js
    // 第二种模块导出的书写方式
    let a = 12;
    let b = 5;
    let c = 10;
    export {
        a,
        b,
        c as cc // as是别名，使用的时候只能用别名，特别注意下
    };
    
    //index1.js
    // 导入模块的方式
    import {
        a,
        b,
        cc // cc是导出的，as别名
    } from './mod1.js';
    console.log(a); // 12
    console.log(b); // 5
    console.log(cc); // 10
    
    //mod2.js
    // 第三种模块导出的书写方式 ---> default
    // default方式的优点，import无需知道变量名，就可以直接使用，如下
    // 每个模块只允许一个默认出口
    var name = 'jam';
    var age = '28';
    export default {
        name,
        age,
        default(){
            console.log('welcome to es6 module of default...');
        },
        getName(){
            return 'bb';
        },
        getAge(){
            return 2;
        }
    };
    
    //index2.js
    // 导入模块的方式
    import mainAttr from './mod2.js';
    var str = ' ';
    // 直接调用
    console.log(`我的英文名是:${mainAttr.name}我的年龄是${mainAttr.age}`);
    mainAttr.default(); // welcome to es6 module of default...
    console.log(mainAttr.getName()); // bb
    console.log(mainAttr.getAge()); // 2
    
    //mod3.js
    var name = 'jam';
    var age = '28';
    export function getName(){
        return name;
    };
    export function getAge(){
        return age;
    };
    
    //index3.js
    // 导入模块的方式
    import * as fn from './mod3.js';
    // 直接调用
    console.log(fn.getName()); // jam

11. class和extends

  //传统面向对象写法
    function Person(name,age){ // 类、构造函数
        this.name = name;
        this.age = age;
    }
    Person.prototype.showName = function(){
        return this.name;
    };
    Person.prototype.showAge = function(){
        return this.age;
    };
    var p1 = new Person('allen',28);
    var p2 = new Person('xiaoxiaoyou',101);
    console.log(p1.showName()); // allen
    console.log(p2.showAge()); // 101
    console.log(p1.showName == p2.showName); // true
    console.log(p1.constructor == Person); // true
    
    //ES6面向对象写法
    class Person{
        // 构造器
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            return this.name;
        }
        showAge(){
            return this.age;
        }
    }
    var p1 = new Person('aaa',18);
    var p2 = new Person('bbb',20);
    console.log(p1.name); // aaa
    console.log(p1.showName()); // aaa
    console.log(p2.showAge()); // 20
    console.log(p1.showAge == p2.showAge); // true
    console.log(p1.constructor == Person); // true
    
    //面向对象class给默认值
    class Person{
        // 构造器
        constructor(name='default',age=0){
            this.name = name;
            this.age = age;
        }
        showName(){
            return this.name;
        }
        showAge(){
            return this.age;
        }
    }
    
    var p1 = new Person();
    console.log(p1.name); // 构造器里面给的默认值 default
    console.log(p1.age); // 构造器里面给的默认值 0
    
    //传统写法原型继承
    function Person(name,age){ // 类、构造函数
        this.name = name;
        this.age = age;
    }
    Person.prototype.showName = function(){
        return this.name;
    };
    Person.prototype.showAge = function(){
        return this.age;
    };
    // 工人类
    function Worker(name,age){
        // 属性继承过来
        Person.apply(this,arguments);
    }
    // 原型继承
    Worker.prototype = new Person();
    var p1 = new Person('allen',28);
    var w1 = new Person('worker',1000);
    console.log(w1.showName()); // 确实继承过来了 result：worker
    
    //ES6中面向对象实现类继承
    class Person{
        // 构造器
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            return this.name;
        }
        showAge(){
            return this.age;
        }
    }
    class Worker extends Person{
        constructor(name,age,job='拖地的'){
            // 继承超父类的属性
            super(name,age);
            this.job = job;
        }
        showJob(){
            return this.job;
        }
    }
    var p1 = new Person('aaa',18);
    var w1 = new Person('www',36);
    var w2 = new Worker('wwwwwwww',90);
    console.log(w1.showName()); // www
    console.log(w2.showJob()); // 默认给的值 ‘拖地的’

12.Promises

详细的参考：https://segmentfault.com/a/1190000007032448
7.Promises
ES5：

   setTimeout(function(){  
      console.log('Yay!');  
    }, 1000);

ES6: 我们可以用promise重写

   var wait1000 = new Promise((resolve,reject)=> {
       setTimeout(resolve,1000);
    }).then(()=> {
        console.log('Yay!'); 
    });

如果我们有更多的嵌套逻辑在setTimeout()回调函数中，好处会明显一点：
ES5：

  setTimeout(function(){  
      console.log('Yay!');  
      setTimeout(function(){  
        console.log('Wheeyee!');  
      }, 1000)  
    }, 1000);

ES6: 我们可以用promise重写

var wait1000 = ()=> new Promise((resolve,reject)=>{ setTimeout(resolve,1000);});
wait1000()
    .then(function(){
        console.log('Yay!');  
        return wait1000()
    })
    .then(function(){
         console.log('Wheeyee!');  
    });