JS高级面向对象(六)-ES6新语法

六，ES6新语法

1，let关键字

ES6中新增的用于声明变量的关键字

1. 在**{}中用 let 声明的变量具有块级作用域**（只有在{}里面才能访问）

   if(true) {
   	let a = 10;
       var b = 20;
   }
   console.log(b)		// 20
   console.log(a)		// 报错！！！,let定义的关键字有块级作用域，只能在{}内才能访问
   

2. 防止循环变量变成全局变量

   for (var i = 0; i < 10; i++) {}
   console.log(i);		// 能够访问 i，此时i已经是全局变量了
   
   for (let i = 0; i < 10; i++) {}
   console.log(i);		// 抱错，不能够访问 i，此时i已经是具有块级作用域了
   

3. 没有变量提升，只能先申明在使用

   console.log(x);
   let x = 10;			// 报错！！
   

4. 暂时性死区

   var a = 10;
   if (true) {
       console.log(a);	// 10
       console.log(b);	// 报错，出现暂时性锁区，查找b变量只会在当前作用域查找，且let没有变量提升
       let b = 20;
   }
   console.log(b)		// 报错，let具有块级作用域，外部不能当文
   

• let关键字面试题

  先看一段代码

  var arr = [];
  for (var i = 0; i < 2; i++) {
      arr[i] = function() {
          console.log(i)
      }
  }
  arr[0]();       // 2
  arr[1]();       // 2
  

  这段代码做了以下的操作：

  1. 创建一个数组

  2. 利用for循环往数组里添加函数

  3. 最后执行数组里的函数（i的值从上级作用域也就是全局作用域里面找）

  4. 注意 ：在执行函数的时候for循环早就结束了，i的值为2

  

  使用let定义各自i的值的块级作用域

  var arr = [];
  for (let i = 0; i < 2; i++) {
      arr[i] = function() {
          console.log(i)
      }
  }
  arr[0](); // 0
  arr[1](); // 1
  

  这段代码做了以下的操作：

  1. 创建一个数组
  2. 利用for循环往数组里添加函数，并生成两个块级作用域，在他们作用域内i的值分别为0和1
  3. 最后执行数组里的函数（i的值从上级作用域也就是各自的块级作用域里面找）

  

let能做到这个功能关键的一点就是let会创建块级作用域，i的值是从上层作用域里面找的，var的上层是全局作用域，let的上层是块级作用域

2，const

作用：申明常量，常量就是值（内存地址）不能修改的量

1. 具有块级作用域

   // 案例1
   if (true) {
       const a = 10;		// 具有块级作用域
       console.log(a);		// 10
   }
   console.log(a);			// 报错
   
   // 案例2
   if (true) {
       const a = 10;
       if (true) {
           const a = 20;
           console.log(a);		// 20
       }
       console.log(a);			// 10
   }
   console.log(a);				// 报错
   

2. 申明常量必须赋初始值

   const A;		// 报错
   

3. 不能修改变量的内存地址，能修改内存地址里面的值

   const a = 10;
   a = 20  // 报错
   const b = [1, 2, 3];
   b [0] = 220;    // 可以被修改
   b = [4, 5, 6]   // 报错
   

3，对象字面量增强写法

1. 属性增强写法

   在对象里面直接写键名，JS会自动找对应的变量，把其的值作为 value

   const a = 10;
   const b = 20;
   const c = 30;
   
   const obj = {
       a: a,
       b: b,
       c: c
   }
   
   const object = {
       a,
       b,
       c
   }
   

2. 方法增强写法

   const obj = {
       sayHi() {
           console.log('你好');
       }
   }
   

3，let丶const丶var区别

1. var ：作用域为该语句所在的函数内，存变量提升

2. let ：作用域该语句代码块内，不存变量提升

3. const ：作用域该语句代码块内，不存变量提升，效率比var高（定义函数等不需要变化的值）

   

4，解构赋值

1. 数组解构

   let arr = [1, 2, 3];
   let [a, b, c] = [1, 2] // []代表结构，可以从等号右边提取值，类似python的a, b, c = [1, 2, 3]
   let [a, b, c] = [1, 2] // c为underfined
   let [a, b, c] = [1, 2, 3, 4] // 报错
   console.log(a);
   console.log(b);
   console.log(c);
   

2. 对象解构

   用法一：

   let obj = {name: 'xyb', age: 20}
   let {name, age} = obj;
   console.log(name);  // 'xyb'
   console.log(age);   // 20
   

   用法二：

   冒号左边只用来匹配对象，冒号右边才是值的匹配

   let obj = {name: 'xyb', age: 20}
   let {name: Myname, age: Myage} = obj;    // 如果左右两边匹配，将obj里面name值赋值给Myname
   console.log(Myname); // 'xyb'
   console.log(Myage); // 20
   

5，箭头函数

箭头函数是用来简化定义语法的

一，语法使用

1. 箭头函数基本语法

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

2. 函数体中只有一句话，且执行结果就是返回值，可以省略大括号

   function sum(x, y) {
       return x + y
   }
   
   // 用箭头函数概括
   const sum = (x, y) => x + y;
   

3. 如果形参只有一个，可以省略小括号

   function fn(x) {
   	return x + 1
   }
   
   // 用箭头函数概括
   const fn = x => x + 1;
   

二，this指向

1. 箭头函数不绑定this关键字，箭头函数中的this，指的是函数定义位置的上下文this

   // 案例1
   var btn = document.querySelector('button');
   btn.addEventListener('click', function() {
       (() => {
           console.log(this);		// 当前箭头函数在btn的回调函数内，所以this为btn
       })()
   })
   
   // 案例2
   let obj = {
       name: 'xyb',
       age: 20
   };
   function fn() {
       console.log(this);
       return () => {
           console.log(this);
       }
   }
   const newFn = fn.call(obj);  // 改变 fn 利的 this 的指向，箭头函数的this也会改变，他跟随的是他上下文this 的指向
   newFn();
   
   // 案例3
   var obj = {
       name: 'xyb',
       age: 20,
       say1: () => {
           console.log(this); // obj里面的this是指向window的
       },
       say: function() {
           console.log(this);
       },
       this: this // obj里面的this是指向window的
   }
   obj.say1() // obj对象是没有作用域的，里面的say方法是被定义在全局作用域下的，所以是window
   obj.say2() // obj对象调用的，所以里面的this指向obj
   console.log(obj.this);
   

6，剩余参数

• 箭头函数里是没有 arguments 的，得使用 ...args

const fn = (...args) => {
    console.log(args);  // args 是一个数组
}
fn(1, 2, 3)

// 案例，参数个数不同，求参数的和
const fn = (...args) => {
    var total = 0;
    args.forEach(item => total += item)
    return total
}
var res = fn(1, 2, 3);
console.log(res);

7，扩展运算符…

1. 使用扩展运算符 ... 用来解包

   console.log(1, 2, 3);
   let arr = [1, 2, 3];
   console.log(...arr); // ...arr 的值为 1, 2, 3（控制台没有输出1, 2, 3是因为,被当成参数分隔符了）		
   

2. 使用扩展运算符 ... 来接收多余参数

   let arr = [1, 2, 3, 4];
   var [b, ...a] = arr;
   console.log(b); // b = 1
   console.log(a); // a = [2, 3, 4]
   

案例1：用于数组合并

// 方法一：
let arry1 = [1, 2, 3];
let arry2 = [4, 5, 6];
console.log([...arry1, ...arry2]); // [1, 2, 3, 4, 5, 6]

// 方法二：
let arry1 = [1, 2, 3];
let arry2 = [4, 5, 6];
arry1.push(...arry2);		// push一次可以放多个
console.log(arry1);

案例2：伪数组转换正正数组

var divs = document.querySelectorAll('div');
console.log(divs); // NodeList
console.log([...divs]); // Array

8，数组对象扩展方法

• Array.from

  ---

  将伪数组或可遍历对象转换成真正的数组

  var divs = document.querySelectorAll('div');
  console.log([...divs]); // 把伪数组转换成真数组
  console.log(Array.from(divs)); // 把伪数组转换成真数组
  console.log(Array.from(divs, item => item.innerHTML = '666')); // 对每个值进行处理
  

• Array.find

  ---

  查找数组当中第一个满足条件的值，查找不到则值为 underfined

  var ary = [{
      id: 1,
      name: 'x'
  }, {
      id: 2,
      name: 'y'
  }, {
      id: 3,
      name: 'z'
  }]
  
  var target = ary.find( item => {
      return item.id == 2;    // 返回id == 2 的对象
  });
  console.log(target);
  

• Array.find

  ---

  查找第一个复合条件的数组成员的位置，找不到返回 -1

  let arr = [1, 5, 8, 4, 3, 6, 10];
  var target = arr.findIndex(item => item > 5);
  console.log(target);    // 2
  

• Array.includes

  ---

  某个值是否出现在数组中，返回布尔值

  let arr = [1, 5, 8, 6, 'a'];
  console.log(arr.includes(5)); // true
  console.log(arr.includes('b')); // false
  console.log(arr.includes('a')); // true
  

9，模板字符串

• 模板字符串

  ---

  ES6 中新增的用来创建字符串的方法，使用反引号定义

  使用

  let name = `Mack`
  

  1. 解析变量

  // 模板字符串可以解析变量
  let name = 'xyb';
  let age = '20';
  let go = `hello my name is ${name} and i am ${age} years old`
  console.log(go); // hello my name is xyb and i am 20 years old
  

  2. 可以换行

  // 模板字符串可以换行
  var html = document.querySelector('body');
  let result = {
      name: 'xyb',
      age: 20,
      sex: '男'
  }
  
  let str = `
  
  ${result.name}"> 
  
  ${result.age}"> 
  
  ${result.sex}"> 
  
  `;
  html.insertAdjacentHTML('beforeend', str)
  

  

  3.可以调用函数

  const fn = () => {
      return '我是fn函数'
  }
  let html = `我是模板字符串 ${fn()}`;
  console.log(html);	// 我是模板字符串 我是fn函数
  

  4.扩展方法

  1. startsWith() 判断字符串是否和元字符的头部相同，返回布尔值

  2. endsWith() 判断字符串是否和元字符的头部相同，返回布尔值

     let str = 'my name is xyb';
     console.log(str.startsWith('my na')); // true
     console.log(str.startsWith('mya')); // false
     console.log(str.endsWith('xyb')); // true
     console.log(str.endsWith('xyb3')); // false
     

  3. repeat() 将原字符复制n遍，并返回

     let str = 'hello';
     console.log(str.repeat(5)); // hellohellohellohellohello
     

10，集合

• Set

  ---

  同python中的set

  创建

  const s1 = new Set();
  console.log(s1.size); // 相当于length
  
  const s2 = new Set([1, 2, 5, 6, 4, 1, 1, 1, 1]);
  console.log(s2.size); 		 // 数组去除重复
  console.log(s2); 			// Set(5) {1, 2, 5, 6, 4}
  console.log([...s2]); 		 // 去重之后的数组
  

  API

  1. add(v) 添加某个值，返回 Set 结构本身

  2. delete(v) 删除某个值，返回 布尔值，表示删除是否成功

  3. has(v) 返回布尔值，成员函数

  4. clear() 清除所有成员，没有返回值

     const s = new Set();
     s.add(1).add(2).add(3) // 向set中添加值
     console.log(s);
     console.log(s.delete(1)); // 向set中添加值
     console.log(s.has(2)); // 向set中添加值
     s.clear() // 向set中添加值
     console.log(s);
     

  遍历数组

  // Set 结构和数组一样，也有forEach方法，用于每个成员执行某种操作
  const s = new Set([1, 2, 3, 4, 5, 6]);
  s.forEach(item => {
      console.log(item);
  })