ES6

2020-02-01 本文已影响0人 cj小牛

1 let

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

let 声明的变量只在所处的块级（一堆大括号）中有效。
let 防止循环变量变成全局变量。
let 声明的变量不存在变量提升。、
let 声明的变量展示型死区（只在代码段中有效，在外面改不了）
var申明的变量不具备在块外面也可以访问

2 const

作用：申明常量。不可改变

有块作用域。
必须赋初始值。
复制后不能改变。（基本变量不可改变。对象可以更改对象中的值）

const let var 的区别

使用var申明的变量，其作用域为该语句所在的函数内，且存在便量提升。
2.使用let 申明的变量，其作用为该语句所在的代码块内，不存在变量提升
3.使用const申明的变量，在后面出现的代码中不能再修改该常量值。

结构复制

ES6中允许从数组中提取值，按照对应位置，一一复制

     let [a,b,c,d]=[1,2,3]; 结构赋值d为undifine 
     let [a,b,c,d]=[1,2,3];

    let person={name:'zhangsn',age:20}
    //用便量区匹配对象的值
    let {name,age}= person;
    console.log(name);

箭头函数

（）=>{}

    fn=(a)=>{
        console.log(a);
    }
    箭头函数
    fn(123)
      // 在箭头函数中，如果函数只有一句代码，并且函数执行的结果就是放回值，函数的括号可以去掉。
    const sum = (n1,n2)=>n1+n2;
    console.log(sum(10,20));
    // 在箭头函数中，如果反函数只有一个参数，那么参数的括号也可以去掉
    const one =a=>a;
    console.log(one(1));

箭头函数的this

箭头函数不绑定this关键字，箭头函数中的this，箭头函数中this指向箭头函数定义位置中的this。

剩余参数

    箭头函数中多参数的写法...
    const sum =(...args)=>{
            let total = 0;
            args.forEach((item,index)=>{
                console.log(item);
                total+=item;
            })
            return total;
        }
     console.log(sum(1,2,3)) ;

扩展运算符

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

    let arry = [1,2,3];
    ...array // 1,2,3

扩展运算符的应用

数组合并。

      let arr1=[1,2,3];
      let arr2 =[4,5,6];
       let arr = [...arr1,....arr3];
      这样就实现了数组的合并。

数组的和平push方法。

   arr.push(...arr2);//这样用push方法合并了。

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

    let dev = document.getElementsByTagNanme('div');
    dev = [...dev]; 这样就将伪数组转成了真正的数组。

Array.from();

方法可以接受两个参数，作用类似于数组的map方法，用来对每个元素进行处理，处理后的值放回返回的数组

      let arrayLike ={
    "1":"5",
    "2":"2",
    "3":"4",
    "length":3
}
let newarray = Array.from(arrayLike,(item)=>item);

console.log(newarray)

find()

用于查找第一个符合条件的数组元素，没有找到返回undefine

            let arr =[{
    id:1,
    name:"zhangsan"
},{
    id :2,
    name:'lissi'
}];
let result = arr.find((item)=>{
    // 查找的条件
    if(item.id ==2){
        return item;
    }
    
})
console.log(result)

findindex()

用于查找第一个符合条件的数组成员的位置，如果没有返回-1

let array =[1,3,4,4,5,5,5,6];
let index = array.findIndex((value,index)=>{
  //查找的条件。
    if(value ==5){
        return index;
    }
})
console.log(index);

includes（）

看数组中是否包含给的的值，返回bool值true
使用方法如下。

    [1,2,3,4].includes(1)

模板字符串

模板字符串中可以解析字符串

   let name =`这是一个模板`;
console.log(name);
let sayhello = `hello ,thi is a str ${name}`;
console.log(sayhello);

模板字符可有固定字符串的格式（写的是什么样子的，打印出来就是这个样子）

         let html =`
        <div>
          <span>ssss<span>
        </div>
        `;
console.log(html);

模板字符串可以调用函数，在调用处的位置显示函数的返回值。

         const fn=()=>{
    return `woshi hanshu`;
}
let html = `我是模板字符串${fn()}hahah`;
console.log(html);

String扩展方法

startsWith(): 表示参数字符串中是否在原字符串的头部，返回布尔值。

endsWith();表示参数字符串中是否存在原字符串的尾部，返回bool值

    let str = 'hahah,'
    let result=  str.startsWith('haha');
    console.log(result);
    result=  str.endsWith(',');  
    console.log(result);

字符串repeat（数字重复的次数）

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

  console.log(str.repeat(10));

set 数组结构

ES6 中提供的新的数据结构Set，它类似于数组，但是成员的值是唯一的，没有重复的值。（用于搜索历史关键字等。）；
Set 是一个钩子函数，用来生成Set数据接够。

const s1 = new Set();// 初始化
console.log(s1.size);
const s2= new Set(["1","b","b"]);// 初始化了重复的东西在里面会自动去掉
console.log(s2.size);
console.log([...s2]);//的到去重的数组

Set中的方法

add（vaule）：添加值，返回set结构本身，重复的值添加不进去
delete（value）删除的值，返回bool值
has（value）返回一个bool值，表示该Set是否有这个成员。
clear（）清除所有的成员，返回bool值；

Set数据结构遍历

Set结构的实例与数字一样，也有forEach方法。用于对没成员执行操作没有返回值。

const s2= new Set(["1","b","b"]);
 s2.forEach((item,index)=>{
console.log(item);
console.log(index);
})

ES6