当前位置：网站首页>ECMAScript6新特性

ECMAScript6新特性

2022-06-22 21:24:00 【半夜删你代码·】

ECMAScript6新特性

ｌｅｔ关键字

let 关键字用来声明变量，使用let声明的变量有几个特点：

（1）不允许重复声明

（2）块级作用域

（3）不存在变量提升

ｃｏｎｓｔ关键字

const关键字用来声明常量，const声明有以下特点

（1）声明一定要赋初始值

（2）不允许重复声明

（3）值不允许修改

（4）块级作用域

注：对象属性修改和数组元素变化不会触发ｃｏｎｓｔ错误
应用场景：声明对象类型使用const，非对象类型声明选let

变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

            //数组的解构赋值
            const arr = ['张学友','刘德华','黎明','郭富城'];
            let [zhang, liu, li, guo] = arr;

            //对象的解构赋值
            const lin = {
                name: '林志颖',
                tags: ['车手','歌手','小旋风','演员']
            };
            let wangfei = {
                name: '王菲',
                age: 18,
                songs: ['红豆','流年','暧昧','传奇'],
                history: [
                    {name: '窦唯'},
                    {name: '李亚鹏'},
                    {name: '谢霆锋'}
                ]
            };
            let {songs: [one, two, three], history: [first, second, third]} = wangfei;

注：频繁使用对象方法、数组元素，就可以使用解构赋值形式

模板字符串

模板字符串（template　string）是增强版的字符串，用反引号（｀）标识

特点：（1）字符串中可以出现换行符

（2）可以使用＄｛ｘｘｘ｝形式输出变量

             let str = `<ul>
                <li>沈腾</li>
                <li>马丽</li>
                <li>魏翔</li>
                <li>艾伦</li>
                </ul>`;
            let star = '王宁';
            let result = `${star}在前几年离开了开心麻花`;

当遇到字符串与变量拼接的情况使用模板字符串

简化对象写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

             let name = '小区保安';
             let eat = '小熊饼干';
             let hobby = function(){
                console.log('我是小区保安，爱吃小熊饼干');
             }
             //属性和方法简写
             let intro = {
                name,
                eat,
                hobby,
                change(){
                    console.log('改变世界');
                }
             }

箭头函数

ES6允许使用　箭头　（＝＞）定义函数

1.通用写法

let fn = (a, b) => {
return a + b;
}

箭头函数的注意点：

（1）箭头函数this指向声明时所在作用域下this的值

（2）箭头函数不能作为构造函数实例化

（3）箭头函数内没有arguments

（4）如果形参只有一个，则小括号可以省略

（5）函数体如果只有一条语句，则花括号可以省略，函数的返回值为该语句的执行结果

箭头函数不会更改this的指向，所以非常适合设置与this无关的回调，比如数组回调、定时器回调，不适合事件回调与对象方法。

ｒｅｓｔ参数

ES6引入rest参数，用于获取函数的实参，用来代替arguments

rest参数非常适合不定个数参数函数的场景

            //作用与arguments类似
            function add(...args){
                console.log(args);
            }
            add(1,2,3,4,5);

            //rest参数必须是最后一个形参
            function minus(a, b, ...args){
                console.log(a,b,args);
            }
            minus(100,1,2,3,4,5,19)

spread扩展运算符

扩展运算符（spread）也是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

           //展开数组
           let movies = ['闻香识女人', '触不可及', '绿皮书'];
           function fn(){
            console.log(arguments);
           }
           fn(...movies)

           //展开对象
           let first = {
            f: '第一个'
           };
           let second = {
            s: '第二个'
           };
           let third = {
            t: '第三个'
           };
           let all = { ...first, ...second, ...third };

Symbol

基本使用：ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是Javascript语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol特点

（1）Symbol的值是唯一，用来解决命名冲突的问题

（2）Symbol值不能与其他数据进行运算

           //创建Symbol
           let s1 = Symbol();
           console.log(s1, typeof s1);

           //添加标识的Symbol
           let s2 = Symbol('小小花');
           let s2_2 = Symbol('小小花');
           console.log(s2 === s2_2);

           //使用Symbol for 定义
           let s3 = Symbol.for('花花');
           let s3_2 = Symbol.for('花花');
           console.log(s3 === s3_2);

Symbol类型唯一合理的用法是用变量存储symbol的值，然后使用存储的值创建对象属性。

Symbol内置值

除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。

Symbol.hasInstance	当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的Symbol.isConcatSpreadable属性等于的是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。
Symbol.unscopables	该对象指定了使用with关键字时，哪些属性会被with环境排除。
Symbol.match	当执行str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace	当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.search	当该对象被str. search (myObject)方法调用时，会返回该方法的返回值。
Symbol.split	当该对象被str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator	对象进行for...of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag	在该对象上面调用toString方法时，返回该方法的返回值
Symbol.species	创建衍生对象时，会使用该属性

迭代器

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

（1）ES6创造了一种新的遍历命令　for...of循环，Iterator接口z主要供for...of消费

（2）原生具备Iterator接口的数据（可用for...of遍历）

ａ）Ａｒｒａｙ

ｂ）Ａｒｇｕｍｅｎｔｓ

ｃ）Ｓｅｔ

ｄ）Ｍａｐ

ｅ）Ｓｔｒｉｎｇ

ｆ）ＴｙｐｅｄＡｒｒａｙ

ｇ）ＮｏｄｅＬｉｓｔ

（３）工作原理

1.创建一个指针对象，指向当前数据结构的起始位置
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3.接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4.每调用next方法返回一个包含value和done属性的对象
需要自定义遍历数据的时候，要想到迭代器

Set

ES6提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用　扩展运算符　和　for...of　进行遍历，集合的属性和方法：

（1）size　　返回集合的元素个数

（2）add　　增加一个新元素，返回当前集合

（3）delete　删除元素，返回Boolean值

（4）has　　检测集合中是否包含某个元素，返回Boolean值

（5）clear　　清空集合，返回undefined

            //创建一个空集合
            let s = new Set();
            //创建一个非空集合
            let s1 = new Set([1,2,3,1,2,3]);

            //集合属性与方法
            //返回集合的元素个数
            console.log(s1.size);
            //添加新元素
            console.log(s1.add(4));
            //删除元素
            console.log(s1.delete(1));
            //检测是否存在某个值
            console.log(s1.has(2));
            //清空集合
            console.log(s1.clear());

Map

ES6提供了Map数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map的属性和方法：

size 返回Map的元素个数
set 增加一个新元素，返回当前Map
get 返回键名对象的键值
has 检测Map中是否包含某个元素，返回boolean值
clear 清空集合，返回undefined

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
    ['name','尚硅谷'],
    ['slogon','不断提高行业标准']
]);

//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

class 类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

class声明类
constructor定义构造函数初始化
extends继承父类
super调用父级构造方法
static定义静态方法和属性
父类方法可以重写

//父类
class Phone {
    //构造方法
    constructor(brand, color, price) {
        this.brand = brand;
        this.color = color;
        this.price = price;
    }

    //对象方法
    call() {
        console.log('我可以打电话!!!')
    }
}

//子类
class SmartPhone extends Phone {

    constructor(brand, color, price, screen, pixel) {
        super(brand, color, price);
        this.screen = screen;
        this.pixel = pixel;
    }

    //子类方法
    photo(){
        console.log('我可以拍照!!');
    }

    playGame(){
        console.log('我可以玩游戏!!');
    }

    //方法重写
    call(){
        console.log('我可以进行视频通话!!');
    }

    //静态方法
    static run(){
        console.log('我可以运行程序')
    }

    static connect(){
        console.log('我可以建立连接')
    }
}

//实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230);
const iPhone6s = new SmartPhone('苹果', '白色', 6088, '4.7inch','500w');

//调用子类方法
iPhone6s.playGame();
//调用重写方法
iPhone6s.call();
//调用静态方法
SmartPhone.run();

数值扩展

1) 二进制和八进制

二进制 0b 八进制0o 十进制0x

2) Number.isFinite() 与Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

Number.isNaN() 用来检查一个值是否为NaN

3)Number.parseInt() 与Number.parseFloat()

ES6 将全局方法parseInt和parseFloat，移植到Number对象上面，使用不变。

4) Math.trunc

用于去除一个数的小数部分，返回整数部分。

5) Number.isInteger

Number.isInteger() 用来判断一个数值是否为整数