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 {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. 在模板字符串中可以换行。

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无关的问题。

5. 剩余参数rest参数

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

格式：...

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

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