ES6

作者: cj小牛 | 来源:发表于2020-02-01 13:10 被阅读0次

1 let

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

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

2 const

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

  • 有块作用域。
  • 必须赋初始值。
  • 复制后不能改变。(基本变量不可改变。对象可以更改对象中的值)
const let var 的区别
  1. 使用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

      本文链接:https://www.haomeiwen.com/subject/bswceftx.html