ES6的新特性

Yxmeimei

已于 2024-07-28 22:07:56 修改

阅读量561

点赞数 20

分类专栏： web 文章标签： es6 前端 javascript

于 2024-07-28 20:21:57 首次发布

本文链接：https://blog.csdn.net/qq_63543660/article/details/140752976

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 箭头函数

const func = ()=>{}

箭头函数的this继承当前上下文的this

箭头函数和普通函数的区别

1. 箭头函数的语法比普通函数更加简洁，省去了function关键字

2. 箭头函数都是匿名函数，普通函数既可以是匿名也可以是具名

3. 箭头函数不能用于构造函数，不能new

4. 箭头函数的this指向其上下文的this，call和apply也改变不了

5. 箭头函数没有arguments，但可以用扩展运算符代替

2. 模板字符串

允许在字符串中嵌入表达式，并支持多行文本，不需要拼接，使用反引号``表示字符串

        const name = "tom"
        const age = 20
        const word = `${name}今年${age}岁`

3. 解构赋值

可以将对象或数组的属性取出赋给其他变量。

        let obj = {
            id:1,
            name:'tom',
            age:20
        }
        const {id,name,age} = obj
        // 也可以取别名
        const {id:count,name:user} = obj


        let arr = ['apple','good','happy']

        let [a,b,c] = arr  //a='apple',b='good',c='happy'
        let [n,,m] = arr   //如果不想要某个值，可以省略，n='apple',m='happy'
        console.log(a,b,c);

        //还可以进行交换数据，就可以不用定义第三个变量用来进行交换了
        [a,b] = [b,a]  //a='good',b='apple'

4. let,const

let和const是es6新增的声明关键字

与var的区别：

var能够变量提升，而let和const不行

var定义的变量名可以重复，let和const定义的变量名不能被重复

let和var声明的变量可以被修改，const定义后成为常量，不能被修改

let和const存在块级作用域

5. 类和继承

通过class关键字定义类

类的继承必须通过关键字extends实现

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法

一个类中必须有constructor方法

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        console.log(this.name + ":" + this.age);
    }
}
class Student extends Person {
    constructor(name, age, sex) {
        super(name, age);
        this.sex = sex;
    }
}
var student = new Student("tom", 18, "male");
student.name;   //'tom'
student.sex;    //'male'
student.say(); //'tom:12'

6. Symbol

symbol是es6引入的新的基本数据类型，可以创建出一个独一无二的值，不可以与其他数据类型进行运算

js的数据类型有：

基本数据类型：String、Number、Boolean、null、undefined、Symbol

引用数据类型：Array、Function、Object

7. Map和Set

Map

Map对象用于保存键值对

Map的属性有size，返回键值对的数量

Map的常用方法有：

get（）返回指定键关联的值，如果没有则返回undefined

set（）存入键值对

has（）查找map对象是否存在该健，如果存在返回true，反之返回false

clear（）删除所有键值对

delete（）删除指定键的键值对，返回布尔值

keys（）返回map对象中所有元素的键

values（）返回map对象中所有元素的值

        let map = new Map()
        // 存入键值对
        map.set("id",1)
        map.set("name","tom")
        map.set("age",18)
        
        console.log(map);  //Map(3) {'id' => 1, 'name' => 'tom', 'age' => 18}

        map.sise  //3
        map.get("name")  //tom 
        map.get("sex")  //undefined
        map.has("id")  //true
        map.has("sex") //false
        map.keys()  //MapIterator {'id', 'name', 'age'}
        map.values()  //MapIterator {1, 'tom', 18}
        map.delete("age")  //true   map=>Map(2) {'id' => 1, 'name' => 'tom'}
        map.clear()  //Map(0) {size: 0}

Set

Set和Map类似，但存储的不是键值对。

类似数组，但Set里的元素是不重复的，利用这一特性，可以对数组进行去重操作

set的常用属性为size，返回值的数量

常用的方法有：

add（）插入值

has（）查找set对象中是否存在该值，存在则返回true，反之返回false

clear（）清空元素

delete（）删除某一个元素，返回布尔值

keys（）和values（）返回所有元素的值

        const arr = [1,1,2,2,3,4,5]
        let set = new Set(arr)
        //arr=>Set(5) {1, 2, 3, 4, 5}

        set.size  //5
        set.add(6)  //Set(6) {1, 2, 3, 4, 5, 6}
        //如果set中已存在，则不会插入进去
        set.has(4)  //true
        set.has(7)  //false
        set.keys()  //SetIterator {1, 2, 3, 4, 5, 6}
        set.values()  //SetIterator {1, 2, 3, 4, 5, 6}
        set.delete(3) //true  set=>Set(5) {1, 2, 4, 5, 6}
        set.clear() //Set(0) {size: 0}

8.数组新方法

1. Array.from()

将可迭代对象/类数组转换为新的数组

该方法可以有三个参数：

第一个为可迭代对象/类数组

第二个为对该数组操作的可回调函数（可省略）

第三个为this指向（可省略）

类数组就是

有索引属性和length属性的对象

        const str = "abc"
        let arr = Array.from(str)  //['a', 'b', 'c']

        const likearr = {
            0:'name',
            1:'age',
            length:2
        }
        let arr1 = Array.from(likearr)  //['name', 'age']

2. includes（）

查看数组中是否存在这个元素，返回布尔值

        const arr = [1,3,5,6,7]
        arr.includes(3)  //true
        arr.includes(4) //false

3. map(),filter()

map返回一个由原数组中的每个元素调用的一个指定方法后的返回值组成的新数组

filter是对原数组进行过滤筛选，产生的一个新的数组对象

两者都不会改变原数组

let arr = [1,2,3,20,12,4]

const a2 = arr.map(item=>item*2)  //[ 2, 4, 6, 40, 24, 8 ]

const a3 = arr.filter(item=>item>10)  //[ 20, 12 ]

4.forEach(),find()

forEach()遍历数组，没有返回值

find（）查找数组中满足条件的第一个元素，并返回该元素

        const arr = [1,3,5,6]
        const arr1 = arr.find(item=>{
            return item>3
        })  //5

5. some(),every()

some查询数组中有符合条件的就返回true

every查询数组中所有符合条件的才会返回true

some一真即真，every一假即假

        const arr = [1,3,5,6]
        const some = arr.some(item=>item>3)  //true
        const every = arr.every(item=>item>3)  //false

        const some1 = arr.some(item=>item>9)  //false
        const every1 = arr.every(item=>item>0)  //true

9. 对象的新方法

1. Object.is()

判断两个值是否为同一个值，返回布尔值

地址相同的时候返回true，直接赋值是共用一个地址所以相同

const obj1 = {}
const obj2 = {}
console.log(Object.is(obj1,obj2));  //false

const obj3 = obj1
console.log(Object.is(obj3,obj1));  //true

2. Object.assign()

将后面的对象合并到前面的对象，如果属性重复将直接覆盖

const obj1 = {a:1,b:2}
const obj2 = {a:2,c:3}
const obj3 = {a:3,d:4}
console.log(Object.assign(obj1,obj2,obj3));  //{ a: 3, b: 2, c: 3, d: 4 }

3. Object.keys(),Object.values(),Object.entries()

Object.keys()返回对象所有属性

Object.values()返回对象所有属性值

Object.entries()返回键值对的数组

10. 扩展运算符

可以拷贝数组或对象，也可以合并数组或对象

const arr = [1,2,3,4,5,6]
const arr2 = [3,4,5,6,7]
const arr3 = [...arr,...arr2]
console.log(arr3);  //[1,2,3,4,5,6,3,4,5,6,7]

const obj = {
    id:1,
    name:'tom',
    age:18
}
const obj2 = obj
console.log(obj2===obj)  //true
const obj3 = {...obj}
console.log(obj3===obj)  //false