ES6中新增语法

    技术2025-09-12  79

    一、声明变量

    1.let

    作用:声明变量 特点:

    只在所处块级(一对{}中的区域)有效(var不行)防止循环变量成全局变量不存在变量提升(只能先声明,再使用)暂时性死区 if(true) { let a = 10; } console.log(a); //a is not defined

    经典面试题 比较一下:

    var用法(输出2 2) let用法(输出0 1)

    2.cosnt

    作用:声明常量 特点:

    具有块级作用域声明时必须赋初值赋值后不可修改

    var、let、cosnt区别

    二、解构赋值

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

    1.数组解构

    允许按照一一对应的关系从数组提取值,然后赋值给变量!

    let ary=[1,2,3] let [a,b,c]=ary;//这个中括号在等号左边,代表解构,从数组中提取值(不代表数组) console.log(a);//1 console.log(b);//2 console.log(c);//3

    2.对象解构

    属性匹配,变量名匹配对象中属性的名字,匹配成功,就将对象中属性的值赋给变量

    写法一 let person = { name:"lily", age:20 }; let { name, age } = person; console.log(name);//lily console.log(age);//20 写法二(修改变量名) let person = { name:"lily", age:20 }; let { name:myName, age:myAge } = person;//myName,myAge属于别名 console.log(myName);//lily console.log(myAge);//20

    三、箭头函数

    ES6新增的定义函数的方式

    () => { } const fn = () => { }

    函数体只有一句代码,且执行结果是返回值,可省略大括号

    const sum = (num1, num2) => num1+num2;

    形参只有一个,可以省略小括号

    const fn = v => v;

    箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this 一个例子

    var age = 10; var obj = { age: 20, say: () => { alert(this.age) } }; obj.say();//弹出10

    PS:对象是不产生作用域,所以箭头函数被定义在了全局作用域下,调用时,this指向的是window

    四、剩余参数

    讲一个不定数量的参数定义成一个数组

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

    与解构配合使用

    let students = ['lily', 'lily1', 'lily2']; let [s1, ...s2] = students; console.log(s1);//'lily' console.log(s2);//['lily1','lily2']

    五、扩展运算符

    与剩余参数相反,将数组或对象转为用逗号分隔的参数序列

    let ary = [1, 2, 3]; ...ary // 1,2,3 console.log(...arg);// 1 2 3

    应用

    合并数组 let arr1 = [1, 2]; let arr2 = [3, 4]; let arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4] 或者: arr1.push(arr2); 将伪数组转换成真正的数组 let allDiv = document.getElementsByTagName("div"); allDivList = [...allDiv]

    六、Array的扩展方法

    1.Array.from()

    同上,将伪数组转换成真正的数组

    let arrayLike={ '0': 'a', '1': 'b', '2': 'c', length: 3 } let arr2=Array.from(arrayLike);//['a', 'b', 'c'] let arr2=Array.from(arrayLike,item=>item+'1');//['a1', 'b1', 'c'1]

    2.find()

    找到第一个符合条件的数组成员,未找到返回undefined

    let res = array.find((item,index) => item.id == 2);//返回第一个id为2的对象

    3.findIndex()

    找到第一个符合条件的数组成员的位置,未找到返回-1

    let res = array.findIndex((item,index) => item.id == 2);//返回第一个id为2的对象索引

    4.includes()

    表示某个数组是否包含给定的值,返回布尔值

    [1,2,3].includes(2); //true

    七、模板字符串

    模板字符串可以解析变量

    let name = 'lily' let string = 'hello,${name}';//"hello,lily"

    模板字符串可以调用函数

    const sayHello = function () { return "hhhh" } let string = 'hello,${sayHello()},lily';//"hello,hhhh,lily"

    八、String扩展方法

    startsWith() :判断参数字符串是否在原字符串头部,返回布尔值endsWith():~~~尾部 let str = 'hello world' str.startsWith('hel');//true repeat(n):表示将原字符串重复n次,返回一个新的字符串 'x'.repeat(3);//"xxx"

    九、Set数据结构

    类似于数组,但是成员唯一,无重复值

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

    可以利用Set去重 实例方法

    add(value):添加某个值,返回本身delete(value):删除某个值,返回布尔值has(value):判断是否为其成员,返回布尔值clear():清除所有成员,无返回值

    遍历 与数组一样,有forEach方法,用于对每个成员执行某种操作,无返回值

    Processed: 0.021, SQL: 9