ES6学习笔记

SRF_000

已于 2022-07-15 16:38:05 修改

阅读量310

点赞数

分类专栏：学习文章标签： es6 学习前端

于 2022-07-15 16:37:22 首次发布

本文链接：https://blog.csdn.net/qq_54506109/article/details/125787530

版权

Set是一种数据结构，类似于数组，但成员的值都是唯一的。

Map数据结构，类似于对象，也是键值对的集合，但是键不仅仅局限于字符串，各种类型的值都可以。

变量定义：

es5:

var（会有变量提升问题），即在声明之前打印该变量不会报错，因为编译时自动将声明提升到了最上方（此时未赋初始值），所以打印时会打印出undefined。此外，var能重复声明变量，导致覆盖，而let则无此问题。

        var a = 2;
        var a = 4;
        console.log(a);

es6:

使用let和const，都是块级作用域，无变量提升问题且不可重复声明。const不能直接修改其本身，但能修改其中的属性。比如vue3的ref就是基于此的。建议在默认情况下使用const声明变量，只有在你知道该变量会被修改的时候使用let。

动态修改dom元素操作方式：

es5和es6区别

    <div class="box">

    </div>
    <script>
        const oBox = document.querySelector('.box');
        let id = 1,
            name = "字符串拼接";
        //es5
        oBox.innerHTML = "<ul><li><p id=" + id + ">" + name + "</p></li></ul>"
        //es6,使用``来拼接字符串,模板字符串
        oBox.innerHTML = `<ul><li><p id=${id}>${name}{</p></li></ul>`
    </script>

es5需要拼接的方式来将变量添加进去，而es6使用模板字符串` `（反引号）来直接添加变量。

函数

es6：

1.更好地赋初始值

直接在其中定义。

function（a=10,b=20）{

}

2.默认的表达式可以是一个函数

function（a=10,b=getVal(5)）{

}
function getVal(val){
    return val + 5
}

3.获取对象中的属性

es5可以通过arguments来获取传入函数对象的数据。

由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是arguments对象的由来。arguments 是一个对应于传递给函数的参数的类数组对象。只能在函数体内部使用，通过arguments[i]获取当前索引的数据，在正常模式小arguments的数据可以修改，但是在严格模式下则不能修改。

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}
 
f(1, 1) // 5

es6剩余参数（由三个点...和一个紧跟着的具体参数指定 ...keys组成）

        function pick(obj, ...keys) {
            console.log(keys);
            let result = Object.create(null); //创建一个空对象
            for (let i = 0; i < keys.length; i++) {
                result[keys[i]] = obj[keys[i]];
            }
            return result;
        };
        let book = {
            title: "ES6",
            author: "作者",
            price: 25.5
        }
        let bookData = pick(book, 'title', 'author', 'price');
        console.log(bookData);

keys和bookData结果：

...keys解决了arguments问题

4.扩展运算符...

剩余运算符是把多个独立的合并到一个数组中。

扩展运算符则是讲一个数组分割，并且将各个项作为分离的参数传给函数。

        const arr = [1,4,2,5,5,15,12]
        //es5处理数组中的最大值，使用apply
        console.log(Math.max.apply(null,arr));//15
        //es6处理数组中的最大值，使用扩展运算符
        //...将数组进行分割，然后max对每一项进行判断
        console.log(Math.max(...arr));//15

5.箭头函数

使用=>来定义 function(){}等于()=>{}

        //es5
        let add1 = function(a, b) {
                return a + b;
            }
        //es6
        let add2 = (a, b) => (a + b)//表示{return a+b}
        let add3 = (a, b) => {
            return a + b
        }
        console.log(add1(1, 2));//3
        console.log(add2(1, 2));//3
        console.log(add3(1, 2));//3

        //箭头函数传入值返回对象
        let getObj = id =>({id:id,name:"ES6"})
        console.log(getObj(1));
        //等价于
        function getObj(id){
            return{
                id:id,
                name:"ES6"
            }
        }

        //闭包函数
        //es5
        let fn1 = (function() {
            return function() {
                console.log('es5');
            }
        })();
        //es6
        let fn2 = (() => {
            return () => {
                console.log("es6箭头函数");
            }
        })();
        fn1();//es5
        fn2();//es6箭头函数

        //this指向
        // //es5的this指向是取决于调用该函数的上下文对象
        let PageHandle = {
            id: 123,
            init: function() {
                document.addEventListener('click', function(event) {
                    console.log(this); //#document,因为添加事件时是给文档添加的，所以this发生了改变
                    //此时报错 this.doSomeThings is not a function，说明此时this指向不是PageHandle
                    this.doSomeThings(event.type)
                },false)//报错后通过
                //}.bind(this),false)将this传递过来解决
            },
            doSomeThings: function(type) {
                console.log(`事件类型是${type}`);
            }
        }
        PageHandle.init();

        //es6通过箭头函数解决this指向问题(箭头函数没有this指向，它内部的this值只能通过查找作用域链(此时init指向了PageHandle)来确定this)
        let PageHandle = {
            id: 123,
            init: function() { //此处不要使用箭头函数，否则会导致this指向window
                //将function(event)改为event=>，由于箭头函数没有this指向，只能通过查找作用域链来查找当前this指向，解决了this指向改变的问题
                document.addEventListener('click', event => {
                    console.log(this); //#document,因为添加事件时是给文档添加的，所以this发生了改变
                    //此时报错 this.doSomeThings is not a function，说明此时this指向不是PageHandle
                    this.doSomeThings(event.type)
                }, false)
            },
            doSomeThings: function(type) {
                console.log(`事件类型是${type}`);
            }
        }
        PageHandle.init();

        //注意事项
        //1.一旦使用箭头函数，则它内部就不会有arguments对象(因为没有作用域链了，此时this指向了window)
        //2.箭头函数不能使用new关键字来实例化对象(function既是一个函数，也是一个对象，所以可以new，但箭头函数不行)
        let Pe