ES6 新特性（深入浅出ES6

前言：ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。如今，越来越多人尝试使用ES6语法来规范代码，因为，ES6的出现大大简化了前端的代码和书写习惯，使得我们在工作学习中更加高效、便捷、稳定。

正文：在学习ES6的语法过程中，我个人是参考着《ECMAScript 6 入门第三版》，书中关于ES6的介绍和总结非常详尽、明了，给人清晰的思路。那么ES6和ES6到底有哪些区别，换句话说，ES6究竟有哪些新特性值得我们学习，那么我们拭目以待吧。

(1).let、const

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。const声明一个只读的常量。

一旦声明，常量的值就不能改变。但是const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。

由于存在变量提升，在执行function函数之前,所有变量都会被提升, 提升到函数作用域顶部.为了解决这个麻烦，let和const很好的解决了这一问题。因为他们是块级作用域, 在代码块(用{}表示)中使用let或const声明变量, 该变量会陷入暂时性死区直到该变量的声明被处理。没有了变量提升，let和const必须先声明后使用。

(2).Map()

在JavaScript对象中，键值对中的键必须是字符串类型，但实际上Number或者其他数据类型也是合理的，为此，ES6中引入了新的数据类型Map。

(3).Set()

Set()是有序列表的结合，而且是没有重复的，因此Set()对象可以用于数组的去重。

let set = new Set([1,2,3,4,4,4,4,4]);
console.log( Array.from(set) ); //输出：[ 1, 2, 3, 4 ]

Set中包含的方法，add()、has、delete()、clear()

Set也能用来保存NaN和undefined，如果有重复的NaN， Set会认为就一个NaN(实际上NaN!=NaN);实例Set以后的对象拥有这些属性和方法：

　　　　属性
　　　　Set.prototype
　　　　Set.prototype.size
　　　　方法
　　　　Set.prototype.add()
　　　　Set.prototype.clear()
　　　　Set.prototype.delete()
　　　　Set.prototype.entries()
　　　　Set.prototype.forEach()
　　　　Set.prototype.has()
　　　　Set.prototype.values()
　　　　Set.prototype[@@iterator]()

(4).iterable

引入iterable的目的是Map和Array无法像Array通过下标遍历，但是可以通过for...of解决这个问题。

(5).for...of(迭代器)

(6).箭头函数

定义：ES6箭头函数结构为 X => X*X

等价：function(X){return X*X}

(7).Spread / Rest 操作符

(8).解构赋值

(9).允许在对象中使用 super 方法

(10).class

(11).模版字符串（template string），使用 ` ` （反引号作为标识）：

既可以当作普通字符串使用，又可以用来定义多行字符串，还可以在字符串中嵌入变量。

//普通字符串、嵌入变量
$(`.content li:eq(${index}) .dataItem`).css("background", "#DBDBDB");

//多行字符串:提示的内容就是按照断开的分行
alert(`Li mei is a beautiful girl,
she is  so funny!`)

如果遇到特殊的字符比如`，则需要在前面加转义字符\

`\`` === "`" // --> true

(12).Proxy

(12).Symbol

Symbol是ES6中的一个新特性，所有拥有[Symbol.iterator]()方法的对象被称为 可迭代的。

(13).Promise

(14).async函数

(15).二进制和八进制字面量

(16).keys，values，entries

ES6 提供三个新的方法 —— entries()，keys()和values()。用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['小明', '小红'].keys()) {
console.log(index);
}
// 0
// 1
for (let item of ['小明', '小红'].values()) {
console.log(item);
}
// '小明'
// '小红'
for (let [index, item] of ['小明', '小红'].entries()) {
console.log(index, item);
}
// 0 "小明"
// 1 "小红"

（17）.ES6 声明变量的六种方法：

var、function、let、const、class、import ====>> 详情请点击

在ES5中，JavaScript是没有块级作用域的，如果在块内使用var声明一个变量，它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域，let和const都添加了块级作用域，使得JS更严谨和规范。

（18）.ES6 数组方法flat()

flat(n）将每一项的数组偏平化，n默认是1,表示扁平化深度.意思是可以利用ES6的flat()将多维数组变成一维数组。

ES6 新特性（深入浅出ES6—阮一峰）相关推荐

Longstick的学习周记——ES6新特性
Longstick的学习周记--ES6新特性前言 ES6新特性 1. let 和 const let关键字 const 关键字 2. 模块字符串\` \` 3. 解构 4. 函数的参数默认值 5. ...
ES6新特性----面试
ES6新特性关键字 let关键字 const关键字解构赋值变量的解构赋值数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值用途模板字符串箭头函数 ...
javascript ES6 新特性之扩展运算符三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
ES6新特性（函数默认参数，箭头函数）
ES6新特性之函数参数的默认值写法和箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
ES6新特性之了解ES6以及其发展历史
ES6 新特性现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令前端开发必备 - ES6 新特性之变量的解构赋值前端开发必备 - ES6 新特性之字符串的拓展前端开发必备 - E ...
html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
尚硅谷es6新特性笔记
尚硅谷es6新特性笔记一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...
lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧接 ...
ES6新特性16-Class
ES6新特性16-Class 文章目录 ES6新特性16-Class 一.Class介绍和初体验二.class静态成员三.构造函数继承四.子类对父类方法的重写五.get和set 一.Class ...

ES6 新特性（深入浅出ES6—阮一峰）

ES6 新特性（深入浅出ES6—阮一峰）相关推荐

最新文章

热门文章