es6内容总结

ES6 内容总结

1. let
2. const
3. let、const、var的区别
4. 解构赋值
5. 剩余参数
6. 内置对象扩展

1.let

• let声明的变量只在所处于的块级有效

  if(true){
    let a = 10;
  }
  console.log(a);//报错
  

• 不存在变量提升

• 暂时性死区

  var num = 20
  if (true) {
    num = 10;
    console.log(num);//报错
    let num;
  }
  

经典面试题：

var arr = [];

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

-----------------------
var arr = [];

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

2.const

作用：声明常量，常量就是值（复杂数据类型：内存地址）不能变化的量

• 具有块级作用域
• 声明的常量必须赋值
• 常量赋值后，值不能修改

3.let、const、var的区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可修改	值可修改	值不可修改

4.解构赋值

ES6允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

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

let [foo] = [];
console.log(foo)//报错
let [bat,foo] = [2];
console.log(foo)//2
console.log(foo)//undefined

对象解构

let person = { name: 'ann', age: 10 };
let { name, age } = person;//根据键名一一对应
console.log(name);//ann
console.log(age);//10

let person = { name: 'ann', age: 10 };
let { name: myname, age: myage } = person;//根据键名一一对应 然后赋值
console.log(myname);//ann
console.log(myage);//10

5.剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum(first, ...args) {
  console.log(first);//10
  console.log(args);//[23,98]
}
sum(10, 23, 98)


let [a,...c]=[1,2,3]
console.log(a);//1
console.log(c);//[2,3]

6.内置对象扩展

Array 的扩展方法

扩展运算符（展开语法）

1. 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

   let ary = [1, 2, 3];
   //...ary=1,2,3
   console.log(...ary);//内部做了一个操作console.log(1，2，3);//1 2 3
   

2. 合并数组

   let ary1 = [1, 2, 3];
   let ary2 = [4, 5, 6];
   //...ary=1,2,3
   console.log(...ary1,...ary2);//1 2 3 4 5 6
   let ary3 = [...ary1,...ary2];
   console.log(ary3)//[1,2,3,4,5,6]
   
   
   ary1.push(...ary2);
   console.log(ary1)//[1,2,3,4,5,6]
   

3. 伪数组=》真正的数组

   const div = document.createElement('div')
   const div1 = document.createElement('div')
   const body = document.body
   body.appendChild(div);
   body.appendChild(div1);
   
   let ob = document.getElementsByTagName('div')
   ob = [...ob]
   console.log(ob);
   

构造函数方法：伪数组=》真正的数组 Array.from()

将类数组或可遍历对象转换为真正的数组

let arrlike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  '3': 'd',
  'length': 4
};

let arr2 = Array.from(arrlike);//['a','b','c','d']
console.log(arr2);

//方法还可以接收第二个参数，作用类似于数组中的map()方法，用于对每个元素进行处理，将处理后的值放入返回的数组

let arrlike = {
  '0': '1',
  '1': '2',
  '2': '3',
  '3': '4',
  'length': 4
};

let arr2 = Array.from(arrlike,item => item * 2);//['2','4','6','8']
console.log(arr2);

实例方法

1. find()：用于找出第一个符合条件的数组成员，如果没有找到就返回undefined

   var ary = [{
     id: 1,
     name: '张三'
   }, {
     id: 2,
     name: '李四'
   }];
   let taget = ary.find((item, index) => {
     if (item.id == 2) console.log(index);//1
     return item.id == 2
   })
   
   console.log(taget);
   

2. findIndex()：用于找出第一个符合条件的数组成员的位置，如果没有找到就返回-1

   var ary = [1, 2, 6, 10, 12];
   let num = ary.findIndex((value, index) => {
     return value > 9
   })
   console.log(num);//3
   

3. includes()：表示某个数组是否包含给定的值，返回布尔值

   console.log([1, 2, 3].includes(2));//true
   console.log([1, 2, 3].includes(4));//false
   

String 的扩展方法

模板字符串

1. ES6新增的创建字符串的方式，使用反引号定义

   let name = `zhang`;
   let say = `hello,my name is ${name}`
   console.log(say);//hello,my name is zhang
   

2. 可换行

   let result = {
     name: 'zhang',
     age: 12
   }
   let html = `
   name: 'zhang',
   age:12
   `;
   console.log(result);
   console.log(html);
   
   

3. 可调用函数

   const say = () => {
     return 'hhhhhhhhhhh';
   }
   let greet = `${say()} aaaaaaaa`;
   console.log(greet);//hhhhhhhhhhh aaaaaaaa
   

实例方法

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

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

   let str = `hello world!`;
   console.log(str.startsWith(`hello`));//true
   console.log(str.endsWith(`!`));//true
   

3. repeat()：方法表示将原字符串重复n次，返回一个新的字符串

   'x'.repeat(3) //xxx
   

Set数据结构

ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值

Set 本身是一个构造函数，用来生成Set数据结构

const s = new Set();
console.log(s.size)//0

Set函数可以接受一个数组作为参数，用来初始化

const set = new Set([1, 2, 3, 4]);
console.log(set.size)//4

数组去重

const set = new Set([1, 2, 3, 4, 4, 2, 3]);
console.log([...set]);//[1,2,3,4]

实例方法

• add(value)：添加某个值，返回Set结构本身

• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

• has(value)：返回一个布尔值，表示该值是否为Set的成员

• clear()：清除所有成员，没有返回值

  const set = new Set();
  //添加
  console.log(set.add(6).add(7).add(8));
  console.log(set);
  
  //删除
  console.log(set.delete(7));//true
  console.log(set);
  
  //查
  console.log(set.has(7));//false
  
  //清空
  set.clear()
  console.log(set);
  

遍历

set.forEach(value => { console.log(value); })