web前端--ES6初探


let声明变量

  • ES6中新增的变量,只在块级作用域中有效(一个大括号中);

  • 防止循环中的变量变成全局变量;

  • 不存在变量提升,暂时性死区(一个大括号内,对let变量先使用后定义,报错undefined)如:var num=10;if(1){ console.log(num) let num; }

    const声明常量

  • 值不可更改(值对应内存地址),具有块级作用域,声明时必须赋值,否则报错;

    var

  • 存在变量提升,作用域是整个函数

    解构

  • 从数组中提取值,变量对应的位置进行重新赋值。如let【a,b,c,d】=[1,2,5]

  • 解构不成功的部分为undefined,如d

  • 允许使用对象属性和变量名匹配,把值赋给变量,如let person ={name:“bob“} let {name}=person

  • 如:*let{name:myname } = person *,把person中的bob赋值给myname

    箭头函数 ()=>{}

  • 使用方法:通常把箭头函数赋值给变量,然后调用,如 const fn = ()=>{ console.log(1)}; fn();

  • 函数中只有一行代码,大括号可省略,return可省略如: const sum=(n1,n2)=>n1+n2; sum(3,5);

  • 只有一个形参,小括号可省略const sum = n1=>n1

  • 箭头函数不绑定this关键字,其中的this指向函数定义上下文的this

剩余参数

  • const sum= (…args)=>{} …表示接受所有参数。

image.png

扩展运算符

  • 用于数组合并 let array3=【…ary1,…ary2】

  • 用于数组push ary1.push(…ary2)

  • 将伪数组或对象转换为数组

    Array扩展方法

    from,转换为数组

    image.png

    find 找到某元素

  • var id = arraylike.find(item=>item.id==2)

    findIndex,找到下标,否则-1

  • let findex = alike.findIndex((item,index)=>item==100)

    includes(),是否包含某值,

  • 返回true和false 【1,2,3】.includes(4)

    String,模板字符串

  • 模板字符串:反引号定义字符串,可以通过${变量名}来引用

  • 可以使用${函数名}调用, 模板字符串可以包含换行可以

    扩展方法startsWith 和endsWith

  • 返回是否以某字符(或某几个)开头或结尾,true/false。 str1.startsWith(‘hello’)

    repeat

  • str.repeat(3)str重复3遍

    Set数据结构

  • 值唯一,没有重复值(自动去重) const s1= new Set([1,1,1,3,3,5,7]);

  • Set实例方法:s1.add(3), delete(), has(), clear()