ES6,ES7,ES8 常用
ES6常用新特性
let && const
let 命令也用于变量声明,但是作用域为局部
{
let a = 10;
var b = 1;
}
在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let。
const用于声明一个常量,设定后值不会再改变
const PI = 3.1415;
PI // 3.1415
PI = 3; //TypeError: Assignment to constant variable.
iterable类型
为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型,具有iterable类型的集合可以通过新的for … of循环来遍历。
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + '=' + x[1]);
}
Map相关操作如下, Set同理:
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
例如数组:
let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;
这真的让代码看起来更优美,有种python赋值的既视感。
对象的解构赋值:获取对象的多个属性并且使用一条语句将它们赋给多个变量。
var {
StyleSheet,
Text,
View
} = React; 等同于
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.Text;
箭头函数
ES6中新增箭头操作符用于简化函数的写法,操作符左边为参数,右边为具体操作和返回值。
var sum = (num1, num2) => { return num1 + num2; }
//等同于
var sum = function(num1, num2) {
return num1 + num2;
};
箭头函数还修复了this的指向,使其永远指向词法作用域:
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
...操作符
这个的引入几乎不会用到extend这个函数来。通过它可以将数组作为参数直接传入函数:
var people=['Wayou','John','Sherlock'];
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
}
//改写为
sayHello(...people);//输出:Hello Wayou,John,Sherlock
在函数定义时可以通过…rest获取定义参数外的所有参数(类似C#中的参数数组,可以有任意多个参数):
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
} foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
这个真是完美!关于更多...的说明参考这篇博客
类
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
} toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
ES7新特性
Array.prototype.includes
let arr = ['react', 'angular', 'vue'] // WRONG
if (arr.indexOf('react')) { // 0 -> evaluates to false, definitely as we expected
console.log('Can use React') // this line would never be executed
} // Correct
if (arr.indexOf('react') !== -1) {
console.log('Can use React')
}
或者使用一点点hack 位运算符 ~
使代码更加紧凑一些,因为~
(位异或)对任何数字相当于-(a + 1)
:
let arr = ['react', 'angular', 'vue'] // Correct
if (~arr.indexOf('react')) {
console.log('Can use React')
}
在ES7中使用includes
代码如下:
let arr = ['react', 'angular', 'vue'] // Correct
if (arr.includes('react')) {
console.log('Can use React')
}
还能在字符串中使用includes
:
let str = 'React Quickly' // Correct
if (str.toLowerCase().includes('react')) { // true
console.log('Found "react"')
}
除了增强了可读性语义化,实际上给开发者返回布尔值,而不是匹配的位置。
includes
也可以在NaN
(非数字)使用。最后 ,includes
第二可选参数fromIndex
,这对于优化是有好处的,因为它允许从特定位置开始寻找匹配。
更多例子:
console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)
总而言之,includes在一个数组或者列表中检查是否存在一个值,给任何开发人员带来简单性。
Exponentiation Operator(求幂运算)
求幂运算大多数是做一些数学计算,对于3D,VR,SVG还有数据可视化非常有用。在ES6或者早些版本,不得不创建一个循环,创建一个递归函数或者使用Math.pow
,如果忘记了什么是指数,当你有相同数字(基数)自相相乘多次(指数)。例如,7的3次方是7*7*7
所以在ES6/2015ES,你能使用Math.pow
创建一个短的递归箭头函数:
calculateExponent = (base, exponent) => base*((--exponent>1)?calculateExponent(base, exponent):base)
console.log(calculateExponent(7,12) === Math.pow(7,12)) // true
console.log(calculateExponent(2,7) === Math.pow(2,7)) // true
现在在ES7 /ES2016,以数学向导的开发者可以使用更短的语法:
let a = 7 ** 12
let b = 2 ** 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true
开发者还可以操作结果:
let a = 7
a **= 12
let b = 2
b **= 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true
许多ES新特性是从其他语言(CoffeeScript,Ruby,python等)模仿而来的
ES8新特性
Object.values/Object.entries
Object.values
和 Object.entries
是在ES2017规格中,它和Object.keys
类似,返回数组类型,其序号和Object.keys
序号对应。类似python中的dict.iteritems()。
Object.values
,Object.entries
和Object.keys
各自项返回是数组,相对应包括key,value或者可枚举特定对象property/attribute
在ES8 /ES2017之前,Javascript开发者需要迭代一个对象的自身属性时候不得不用Object.keys
,通过迭代且使用obj[key]
获取value值返回一个数组,很挫的:
let obj = {a: 1, b: 2, c: 3}
Object.keys(obj).forEach((key, index)=>{
console.log(key, obj[key])
})
而使用ES6/ES2015 中for/of
稍微好点:
let obj = {a: 1, b: 2, c: 3}
for (let key of Object.keys(obj)) {
console.log(key, obj[key])
}
Object.values
返回对象自身可以迭代属性值(values)为数组类型。我们最好使用Array.prototype.forEach
迭代它,结合ES6的箭头函数隐形返回值:
let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(value=>console.log(value)) // 1, 2, 3
或者实用for/of:
let obj = {a: 1, b: 2, c: 3}
for (let value of Object.values(obj)) {
console.log(value)
}
// 1, 2, 3
·Object.entries·,在另一方面,将会返回对象自身可迭代属性key-value对数组(作为一个数组),他们(key-value)分别以数组存放数组中:
let obj = {a: 1, b: 2, c: 3}
JSON.stringify(Object.entries(obj))
"[["a",1],["b",2],["c",3]]"
可以使用ES6/ES2015解构,从这嵌套数组中分别声明key和value
let obj = {a: 1, b: 2, c: 3}
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} is ${value}`)
})
// a is 1, b is 2, c is 3
同样使用ES6for/of
(毕竟全部都是数组)遍历Object.entries
返回来的结果值:
let obj = {a: 1, b: 2, c: 3}
for (let [key, value] of Object.entries(obj)) {
console.log(`${key} is ${value}`)
}
// a is 1, b is 2, c is 3
现在从对象中提取values和key-value pairs 变得非常容易了。Object.values
和Object.entries
这种方式不想之前 Object.keys
(自身属性key+顺序相同)结合for/of
(ES6)一起,我们不仅仅可以提取他们还可以迭代他们。
String padding(字符串填充)
String.prototype.padStart
和 String.prototype.padEnd
在javascript字符操作是一个不错的体验,帮助避免依赖而外的库。padStart()
在开始部位填充,返回一个给出长度的字符串,填充物给定字符串,把字符串填充到期望的长度。从字符串的左边开始(至少大部分西方语言),一个经典例子是使用空格创建列:console.log('react'.padStart(10).length) // " react" is 10
console.log('backbone'.padStart(10).length) // " backbone" is 10
它对于财务方面非常有用:
console.log('0.00'.padStart(20))
console.log('10,000.00'.padStart(20))
console.log('250,000.00'.padStart(20))
如果是为会计做账之类的,这个很实用,帐做的很整齐
ES6,ES7,ES8 常用的更多相关文章
- es6/es7/es8常用新特性总结(超实用)
本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...
- ES6/ES7/ES8常用特性和新特性
转自:https://www.jianshu.com/p/9da4aa1c9970
- es6,es7,es8
概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262. ECMAScript 标 ...
- ES6 ES7 ES8 相关用法
set Set作为ES6新的数据解构(类数组),它的成员都是唯一的,因为最直接的使用场景便是去重.并.差.交集的使用.它使用的算法叫做“Same-value-zero equality”,类似精确运算 ...
- ES6/ES7/ES8新特性
ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...
- 【JavaScript】--- ES6/ES7/ES8
一.async async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作 async用于声明一个函数是异步的. 通常情况下async.await都是跟随promise一起 ...
- 细解JavaScript ES7 ES8 ES9 新特性
题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...
- ES7/ES8 语法学习
作为一个前端开发者,感觉需要学习的东西贼多,ES6刚学会用没多久,又得学习了解ES7/ES8新增的东西,这里是看了大佬们文章的一点点总结以及摘抄的内容,给自己当笔记使用 内容转载自:https://w ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
随机推荐
- vscode--常用插件&同步
1.setting.json文件 { "files.autoSave": "off", "extensions.ignoreRecommendatio ...
- 算法笔记刷题3(codeup 5901)
今天刷题的速度依旧很慢(小乌龟挥爪.jpg) 我觉得codeup5901中回文串的处理很妙,如果是我自己写的话可能会把数组直接倒过来和原来对比.按照对称规律进行比对的话,工作量可以减少一半. #inc ...
- 1、flink介绍,反压原理
一.flink介绍 Apache Flink是一个分布式大数据处理引擎,可对有界数据流和无界数据流进行有状态计算. 可部署在各种集群环境,对各种大小的数据规模进行快速计算. 1.1.有界数据流和无界 ...
- Qt 正则表达式检查 IP 格式
KillerSmath 2018年6月29日 下午10:41 @Pranit-Patil Hi there. Like @jonB says above, you should to replace\ ...
- [Qt] 数字转换为 QString
数字转换为 QString 静态函数 number(), asprintf() 公用函数 setNum(), sprintf() QString::number(), setNum() 可转换进制
- docker 部署FastDFS
教程:https://blog.csdn.net/fangchao2011/article/details/103202591 教程:https://www.jianshu.com/p/3f80cba ...
- 09-5.部署 EFK 插件
09-5.部署 EFK 插件 EFK 对应的目录:kubernetes/cluster/addons/fluentd-elasticsearch $ cd /opt/k8s/kubernetes/cl ...
- npm小工具、技巧合集:让你的npm“健步如飞”
1.解决安装速度慢问题-nrm 解决痛点 由于npm的包仓库是在国外,npm包安装速度较慢,部分包甚至无法安装. 对比cnpm的优势 1.cnpm增加了大脑的记忆和思维负担,常常需要考虑使用npm还是 ...
- XmlSerializer .NET 序列化、反序列化
序列化对象 要序列化对象,首先创建要序列化的对象并设置其公共属性和字段.为此,您必须确定要将XML流存储的传输格式,作为流或文件. 例如,如果XML流必须以永久形式保存,则创建一个FileStre ...
- 利用Mysqlbinlog恢复数据库数据
关于binlog的详解请参考:http://zlyang.blog.51cto.com/1196234/1833062 binlog日志用于记录所有更新了数据或者已经潜在更新了数据的所有语句.语句以& ...