ECMAScript6新特性

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 = `
沈腾
马丽
魏翔
艾伦
`;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值不能与其他数据进行运算

           //创建Symbollet s1 = Symbol();console.log(s1, typeof s1);//添加标识的Symbollet 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值，指向语言内部使用的方法。

迭代器

迭代器（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的属性和方法：

1. size       返回Map的元素个数
2. set         增加一个新元素，返回当前Map
3. get         返回键名对象的键值
4. has        检测Map中是否包含某个元素，返回boolean值
5. 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写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

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

//父类
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() 用来判断一个数值是否为整数

对象扩展 

ES6新增了一些Object对象的方法

1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
3. __proto__、setPrototypeOf、 setPrototypeOf可以直接设置对象的原型

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！