ES6(一)：let和const、模板字符串、函数默认值、剩余参数、扩展运算符、箭头函数

最新推荐文章于 2023-12-08 10:12:41 发布

是一个努力的小孩ing

最新推荐文章于 2023-12-08 10:12:41 发布

阅读量156

点赞数

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/weixin_57276614/article/details/129527334

版权

ES6阮一峰教程

ES6阮一峰文档
 MDN教程

一、let和const

1.let声明变量没有变量提升

这样的话会报错，而var有变量提升，就不会报错

 console.log(a);
 let a = 10;

用var是这样的

 // 变量提升
        var a;
 //var
        console.log(a);
        var a = 2;

2.let是一个块级作用域

let如果在外面输出就会报错，用var声明就不会

         if (1 === 1) {
             let b = 10;
         }
         console.log(b);

3.let不能重复声明

这样会报错，而var会覆盖原来的值

         let a = 1;
         let a = 3;
         console.log(a);

4.const 声明常量

// const 声明常量一旦被声明无法修改（它自己的特点，其余和let相同）
// const 也不能变量提升
// 也是一个块级作用域
// const也不能重复声明

5.作用1：for循环是一个经典的例子

如果使用var,输出结果为10，使用let输出为5，

        const arr = [];
        for (let i = 0; i < 10; i++) {
            arr[i] = function () {
                return i;
            }
        }
        // console.log(arr);
        console.log(arr[5]()); //5

5.作用2：不会污染全局变量

这样写第一个是10，window对象不会受影响，如果用var定义变量，window对象将会被改变

 let RegExp = 10;
        console.log(RegExp);
        console.log(window.RegExp);

// 建议：在默认情况下用const,而只有在你知道变量值需要被修改的情况使用let

二、模板字符串

如果想往div里面写下这些内容

<div class="box">
        <ul>
            <li>
                <p id="1">小马哥</p>
            </li>
        </ul>
    </div>

拼接字符串好麻烦

<script>
        const oBox = document.querySelector('.box');
        let id = 1,
            name = '小马哥';
        oBox.innerHTML = '<ul><li><p id="+id+">' + name + '</p></li ></ul >';
    </script>

ES6解决了这个问题
使用tab上面的反引号包裹起来咱们这个结构，里面的变量用 ${变量名}来替换

 const oBox = document.querySelector('.box');
        let id = 1,
            name = '小马哥';

        let htmlStr = ` <ul>
            <li>
                <p id="${id}">${name}</p>
            </li>
        </ul>`;
         oBox.innerHTML = htmlStr;

三、函数默认值、

1.函数默认值

1.带参数的默认值的函数
给个默认值的话，es5的写法

 function add(a, b) {
        a = a || 10;
        b = b || 20;
        return a + b;
    }
   console.log( add());

在ES6中，是这样的

function add(a = 10, b = 20) {
        return a + b;
    }
    console.log(add());//30

如果只给一个值,传值时默认给第一个

//ES6的写法
    function add(a, b = 20) {
        return a + b;
    }
    console.log(add(30));

默认的表达式也可以是一个函数
看到表达式先传值，b=10

 function add(a, b = getVal(5)) {
            return a + b;
        }
        function getVal(val) {
            return val + 5;
        }
        console.log(add(10));//20

2.剩余参数

es5写法
不确定传几个，就用arguments伪数组来接收

// es5写法
        function pick(obj) {
            let result = Object.create(null);
            for (let i = 1; i < arguments.length; i++) {
                // console.log(arguments[i]);
                result[arguments[i]] = obj[arguments[i]];
            }
            return result;
        }
        let book = {
            title: 'es6教程',
            author: '小马哥',
            year: 2019
        }
        let bookData = pick(book, 'author', 'year');
        console.log(bookData);

es6写法

// 剩余参数：由三个点...和一个紧跟着的具名参数指定  ...keys
        function pick(obj, ...keys) {
            // ...keys解决了arguments的问题
            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: '小马哥',
            year: 2019
        }
        let bookData = pick(book, 'author', 'year');
        console.log(bookData);

在es6中，使用（…+名字）这种语法做形参，返回的是一个真实的数组，解决了arguments的问题
这个地方需要好好理解一下，感觉不太明白

 // 剩余参数：由三个点...和一个紧跟着的具名参数指定  ...keys
        function pick(obj, ...keys) {
            // ...keys解决了arguments的问题
            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: '小马哥',
            year: 2019
        }
        let bookData = pick(book, 'author', 'year');
        console.log(bookData);

        function checkArgs(...args) {
            console.log(args);
            console.log(arguments);

        }
        checkArgs('a', 'b', 'c')

3.扩展运算符

.扩展运算符…
//剩余运算符：把多个独立的参数合并到一个数组中
//扩展运算符：将一个数组分割，并且将各个项作为分离的参数传给函数

        const maxNum = Math.max(29, 30);
        console.log(maxNum);

        // es5处理数组中的最大值，使用apply
        const arr = [10, 20, 50, 30, 90, 100, 40];
        console.log(Math.max.apply(null, arr));

//es6 扩展运算符更方便
        console.log(Math.max(...arr));

四.箭头函数

1.箭头函数基础用法

es6的箭头函数
使用=>来定义 function(){}等价于 ()=>{}

//es5中
let add = function (a, b) {
            return a + b;
        }

等价于es6中的这样

let add = (a, b) => {
            return a + b;
        }
 console.log(add(10, 20));

如果只有一个返回值，我们可以把return省略

let add = val => {
            return val;
        }
 console.log(add(10));

 let add = val => val;
  console.log(add(10));

如果返回的是一个对象或者数组，要用（）包起来才不会报错

let getObj = id => ({
            id: id,
            name: '小马哥'
        })
        let obj = getObj(1);
        console.log(obj);

2.箭头函数的this指向

箭头函数中的this指向谁，就看这个箭头函数外边有没有包裹函数，如果它外边有函数，this就指向的是外层包裹函数的this,如果没有包裹函数，this指向的就是window

 //没有this绑定
        //es5中的this指向：取决于调用该函数的上下文对象
        let PageHandle = {
            id: 123,
            init: function () {
                document.addEventListener('click', function (event) {
                    //this.doSomeThings is not a function
                    console.log(this);
                    this.doSomeThings(event.type);
                })
            },
            doSomeThings: function (type) {
                console.log(`事件类型:$(type),当前id:${this.id}`);
            }
        }
        PageHandle.init();

es6中

 let PageHandle = {
            id: 123,
            init: function () {
                //箭头函数没有this指向，箭头函数内部this值只能通过查找作用域链来确定,一旦使用箭头函数，当前就不存在作用域链
                document.addEventListener('click', (event) => {
                    //this.doSomeThings is not a function
                    console.log(this);
                    this.doSomeThings(event.type);
                }, false)
            },
            doSomeThings: function (type) {
                console.log(`事件类型:$(type),当前id:${this.id}`);
            }
        }
        PageHandle.init();