web学习笔记（三十六）

目录

1.解构

1.1对象解构

1.2字符串解构

1.3函数解构

1.4总结 

2.模板字符串 

3.实例方法：startsWith() 和 endsWith()

4.箭头函数 

4.1箭头函数的格式

4.2箭头函数可以省略的部分

4.3箭头函数总结 

5. 剩余参数rest参数

---

1.解构

1.1对象解构

在解构对象时要求变量名和对象的属性名保持一致，顺序不需要一致，可以随便写，但变量名和属性名一定要保持一致否则会输出undefined。当属性名和变量名一致时可以进行简化，对象的解构赋值不会受到属性的排列次序影响。

//1.变量名和属性名保持一致
  let person = { name: 'zhangsan', age: 20 }; 
 let { name, age } = person;
 console.log(name); // 'zhangsan' 
 console.log(age); // 20

 
        let user = 'aaa'
        let pwd = 'aaasd';
        // 属性名和变量名不一致则不能简化
        let obj = {
            name: user, // 属性名和变量名不一致则不能简化
            pwd: pwd // 属性名和变量名一致能简化
        }
        let obj1 = {
            user,
            pwd
            // 可以将等号后面的内容进行省略。
        }
    

如果觉得原对象的属性名过长，也可以给属性写一个别名。 

 let {name: myName, age: myAge} = person; // myName myAge 属于别名

1.2字符串解构

let str="hello";
        let [a,b,c,d,e]=str;
        console.log(a,b,c,d,e);

可以通过字符串解构来完成交换变量的工作，此时不需要第三个变量参与，只需要两个变量就可以完成工作。 

let a=10;let b=5;
[b,a]=[a,b]
console.log(a,b)

1.3函数解构

（1）函数返回值解构

function show(){
    return [100,200,300];
}
let [a,b,c]=show();
console.log(a,b,c)

（2）函数参数解构

   function show([a,b,c]){
            let sum=a+b+c;
            console.log(sum);
        }
        show([100,200,300]);

1.4总结 

•  解构赋值就是把数据结构分解，然后给变量进行赋值
•  如果结构不匹配，变量跟数值个数不匹配的时候，变量的值为undefined
•  数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
•  利用解构赋值能够让我们方便的去取对象中的属性跟方法

  2.模板字符串 

  1. 模板字符串就是反引号` `。
  2. 模板字符串中用${变量名}来解析变量，也可以用${函数名（）}来调用函数，注意：此时的函数一定要有返回值，否则在字符串中调用函数将毫无意义。
  3. 在模板字符串中可以换行。所有的空格和缩进都会被保留在输出中。

  4. ${ }中可以放任意的JavaScript表达式，包括运算表达式、对象属性、函数调用等。

  3.实例方法：startsWith() 和 endsWith()

  • startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
  • endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

    let str = 'Hello world!';
    str.startsWith('Hello') // true 
    str.endsWith('!')       // true
    let str = 'Hello ECMAScript 2015';
    let r1 = str.startsWith('Hello');
    console.log(r1);
    let r2 = str.endsWith('2016');
    console.log(r2)

    4.箭头函数 

    4.1箭头函数的格式

              箭头函数的格式：() => { }

     const fn = () => {
      console.log(123)
     }
    fn();

           箭头函数就是用来简化函数定义的语法的，但在编写构造函数时就不要用箭头函数来编写了，因为用箭头函数编写的构造函数不可以使用new来实例化对象，那么我们创建构造函数就没有意义了。所以不推荐使用箭头函数来编写构造函数。

    4.2箭头函数可以省略的部分

    1. 无参函数时，小括号不能省略，有两个及以上参数时，小括号也不能省略。当参数部分有且只有一个参数时，小括号可以省略 。
    2. 当代码块中有且只有一句代码时，花括号也可以省略。
    3.  当代码中只有一句代码，且带返回值时，花括号和return也可以省略，且当return省略时，花括号必须省略。

    4.3箭头函数总结 

    1. 箭头函数中不能使用arguments.但可以使用rest参数
    2. 箭头函数中没有自己的this，所以不能绑定this关键字。需要看箭头函数所在作用域内的this指向（也可以简单理解为定义箭头函数中的作用域的this指向谁，它就指向谁），因为箭头函数的这个特性可知箭头函数适合与this无关的问题。
    3.  函数体内的 this 对象，绑定定义时所在的对象，而不是使用时所在的对象。

    5. 剩余参数rest参数

    ES6引入rest参数，用于获取函数的实参，用来代替arguments，写在函数的形参部分 

    格式：...

        
            function fn(a, b, ...arg) {
                console.log(a, b);//1,2
                console.log(arg);//(8) [3, 4, 5, 6, 7, 8, 98, 10]
            }
            fn(1, 2, 3, 4, 5, 6, 7, 8, 98, 10)
        

    1. 用剩余参数取到的数值是一个真正的数组，可以用数组的方法，也可以对齐进行遍历用索引号取值等操作。
    2. 在使用剩余参数时一定要保证剩余参数是最后一个参数，因为剩余参数会收集从这个位置到最后的参数
    3. 在函数定义中，我们只能声明一个剩余参数。 
    4. 剩余参数还能和解构配合使用

       let students = ['wangwu', 'zhangsan', 'lisi'];
       let [s1, ...s2] = students; 
       console.log(s1);  // 'wangwu' 
       console.log(s2);  // ['zhangsan', 'lisi']

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。