【ES6】其一：let和const、模板字符串、剩余参数、扩展运算符、箭头函数、解构赋值

文章目录

0）概述

ECMAScript 6.0（以下简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了，使得 JavaScript 语言可以用来编写复杂的大型应用程序
ES6为了解决ES5语言的先天性不足，比如变量提升、内置对象的方法不灵活、模块化实现不完善等等；同时ES6的出现为了后面vue、尤其是react框架做好了准备；目前大部分公司的项目都在使用es6

1）let和const命令

1：var的弊端

同样是声明变量的var命令为什么被淘汰？因为var命令涉及变量提升问题和覆盖写问题（即可以多次声明变量名相同的变量）

<script>
    // var的变量提升问题
    console.log(a);
    var a=2
    console.log(b)
</script>

a声明在打印语句之后，但是控制台中打印出来的值是undefined，这表明变量a被声明但没有被赋初始值，所谓变量提升即是把var a提升到了打印语句之前，a=2在打印语句之后，这在开发中显然是不符合逻辑的

【ES6】其一：let和const、模板字符串、剩余参数、扩展运算符、箭头函数、解构赋值-LMLPHP

2：let命令

<script>
	// 1.let声明变量没有变量提升
    // 2.并且是一个块级作用域
    if (1 === 1) {
      let c = 10;
    }
    console.log(c); // 打印不出来
    // 3.let不允许重复声明,而var可以覆盖写
    let c = 5;
    let c = 8; // 编译器级别报错
    // 4.不会污染全局变量
    let RegExp = 10;
    console.log(RegExp);
    console.log(window.RegExp); // RegExp是js中的正则表达式对象
</script>

3：const命令

<script>
	// const变量满足以上let的所有特性,并附带有
    // 1.const变量声明的是常量,不可被修改,并且const一旦声明变量必须立即初始化,不能留到以后
    const MAX = 30;
    // 2.当const声明的是一个Object时,可以修改内部的属性值,但是不能修改对象的地址及其添加的额外属性
    const person = {
      name: "RoysterCDD",
    };
    person.name = "步九琦";
    // 报错
    person = {
      age: 20,
    };
    console.log(person);
</script>

4：总结

建议在默认情况下使用const，只有知道变量值需要被修改的情况下用let，const比let用得更多

2）模板字符串

用反引号``，插入变量时用${变量名}，代替了字符串的拼接，简化开发

<html>
  <body>
    <div class="box"></div>
  </body>

  <script>
    // 模板字符串:使用``(反引号),需要插入变量时使用${变量名}
    const Box = document.querySelector(".box");
    const id = 1,
      name = "RoysterCDD";
    const htmlStr = `
        <ul>
            <li>
                <p id=${id}}>${name}</p>
            </li>
        </ul>
    `;
    Box.innerHTML=htmlStr
    // 如果用常规方法则需要字符串拼接,非常麻烦
    Box.innerHTML="<ul><li><p id="+id+">"+name+"</p></li></ul>"
  </script>
</html>

3）函数

1：默认值

<script>
    // 1.参数带默认值的函数
    // 在ES5中
    function add(a,b) {
        // "||"表示逻辑或运算
        // 如果传入a,那么a为true,返回true,即返回a
        // 如果没有传入a,那么a为false,继续看下一个元素,下个元素写死了,即有值为true,则返回这个值
        a=a||10
        b=b||20
        return a+b
    }
    console.log(add())
    
    // 在ES6中
    // 有点类似于python中的写法
    function add(a=10,b=20) {
        return a+b
    }
    console.log(add())
    
    // 2.参数的默认值也可以是一个函数
    function add(a, b = getVal(5)) {
      return a + b;
    }
    function getVal(val) {
      return val + 5;
    }
    console.log(add(10));
</script>

2：剩余参数

简单说来就是，在调用函数时将剩余参数里的所有参数整合到我们给的这个形参名里面，随后便可进行遍历取值等操作
注意，…keys必须放在形参的最后面，因为它的作用是取出所有剩余的参数

<script>
	// 剩余参数: 由三个点"...""和一个紧跟着的具体参数名
    // obj是一个Object对象,keys这个形参名可以随便取
    function pick(obj, ...keys) {
      // ...keys解决了arguments(接受形参)的局限性
      let res = Object.create(null); // 创建一个空对象
      for (let i = 0; i < keys.length; i++) {
        res[keys[i]] = obj[keys[i]]; // 遍历对象存储进来
      }
      return res;
    }
    const book = {
      title: "es6入门",
      author: "RoysterCDD",
      year: "2024",
    };
    let bookData = pick(book, "title", "author", "year");
    console.log(bookData);
</script>

【ES6】其一：let和const、模板字符串、剩余参数、扩展运算符、箭头函数、解构赋值-LMLPHP

剩余参数仅以数组的形式存储了传递过来的形参，可以直接用for和forEach进行快速遍历
而arguments作为伪数组传递了太多无用的变量，具有数组的属性单不具备方法

<script>
	// 剩余参数比arguments优越在哪里?
    function checkArgs(...args) {
        console.log(args);
        console.log(arguments);
    }
    let a=1,b=2,c=3
    checkArgs('a','b',[a,b,c])
</script>

【ES6】其一：let和const、模板字符串、剩余参数、扩展运算符、箭头函数、解构赋值-LMLPHP

3：扩展运算符

1. 作用于数组

<script>
	// 扩展运算符
    // 剩余运算符:把多个独立的合并到一个数组中
    // 扩展运算符:将一个数组分割,将各个项作为独立项传递给函数
    // 如处理数组中的最大值
    const arr=[10,20,50,30,90,100,40]
    console.log(Math.max(...arr));
</script>

2. 作用于对象

<script>    
	// 扩展运算符也可以用于对象
    const people = {
        'name': 'RoysterCDD',
        'age': 20
    }
    console.log({...people})
</script>

【ES6】其一：let和const、模板字符串、剩余参数、扩展运算符、箭头函数、解构赋值-LMLPHP

4：箭头函数

非常重要！！！

<script>
	// ES6中的箭头函数,使用=>来定义,function(){}等于()=>{}
    // 0. 简化书写
    let f = (v) => v;
    // 等同于
    let ff = function (vv) {
      return vv;
    };
    // 若没有参数
    let func = () => "hello world";

    // 1. (val1,val2)是参数列表
    let addd = (val1, val2) => val1 + val2; // =>可以忽略return
    console.log(addd(10, 20));
    // 等同于
    let adddd = function (val1, val2) {
      return val1 + val2;
    };

    // 2. id是参数列表,如果直接返回一个对象,必须用小括号包裹
    let getObj = (id) => ({
      id: id,
      name: "RoysterCDD",
    });
    console.log(getObj(1));
    // 3. 简写函数闭包
    let fn = (() => {
      return () => {
        console.log("hello es6");
      };
    })();
    fn();
</script>

5：箭头函数的this指向

es5中this指向函数的调用者，可以用bind来改变this的指向
es6中箭头函数没有this指向，而箭头函数内部的this通过查找作用域链来确定，指向最近上层this
在vue中，在method中创建函数用的是普通函数，不能用箭头函数，因为如果是箭头函数没有this指向，函数内部的this指向外层，并没有指向Vue对象；如果创建普通函数，在于普通函数中使用箭头函数(如success的回调函数)，此时的this指向的是Vue对象，就可以通过this.{变量名}来取data域中的值

1. 使用箭头函数的注意事项

<script>
	// 使用箭头函数的注意事项
    // 1. this指向最近上层this
    // 2. 箭头函数内部没有arguments
    let getVal=(a,b)=>{
      console.log(arguments);
      return a+b
    }
    console.log(getVal(1,5));
    // 3. 箭头函数不能使用new关键字实例化对象
    // 箭头函数创建的不是constructor
    // function函数也是一个对象,但是箭头函数不是一个对象,就只是一个语法槽
    let Person=()=>{} // 空参箭头函数
    let p=new Person()
</script>

4）解构赋值

解构赋值是对赋值运算符的一种扩展，针对数组和对象进行操作，在代码书写上简单且易读
可以对对象解构；也可以对数组解构

<script>
    // 解构赋值
    // 1. 对象解构
    let node = {
      type: "Royster",
      name: "CDD",
    };
    // ES5
    // let type=node.type;
    // let name=node.name;
    // ES6
    
    // 全部解构
    let { type, name } = node;
    
    let obj= {
        a: {
            name: '张三'
        },
        b: [],
        c: 'hello, es6'
    }
    
    // 不完全解构,可以用剩余表达式
    let {a,...res}=obj
    console.log(res);

    // 也可以传递默认值
    let {aa,bb=30} ={aa:20}
    console.log(aa+' '+bb);

    // 2. 数组解构
    let arr=[1,2,3]
    let [aaa,bbb]=arr // 承接前两项
    console.log(aaa,bbb);
    // 可嵌套
    let [a1,[b1],c1]=[1,[2],3]
    console.log(a1+' '+b1+' '+c1);
</script>