博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6新特性详解
阅读量:6866 次
发布时间:2019-06-26

本文共 2726 字,大约阅读时间需要 9 分钟。

1.变量声明const和let

①let 和const都是块级作用域,并且都不会有变量提升

②const声明的变量都会被认为是常量,不能被修改,但如果被const修饰的是对象,对象中的属性值可以被修改

看一道简单的题目

var funcs = [] for (var i = 0; i < 5; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func()})

输出结果显而易见是输出五个5,但如果想输出0~9应该怎么做呢?看下ES5和ES6分别怎么做

// ES5告诉我们可以利用闭包解决这个问题 var funcs = []for (var i = 0; i < 5; i++) { funcs.push( (function(value) { return function() { console.log(value) } })(i) )}funcs.forEach(function(func) { func()})//ES6中只需要使用let const funcs = []for (let i = 0; i < 10; i++) { funcs.push(function() { console.log(i) })}funcs.forEach(func => func())

2.模板字符串

第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

//ES5  var name = 'lili' console.log('hello' + name)//es6 const name = 'lili' console.log(`hello ${name}`) //hello lili

第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串拼接。ES6反引号(``)直接搞定。

// ES5 var msg = "Hi \man!" // ES6 const template = `
hello world
`

对于字符串ES6当然也提供了很多厉害也很有意思的方法

const str = 'hahay' console.log(str.includes('y')) // true const str = 'he' console.log(str.repeat(3)) // 'hehehe' const str = 'hello world!' console.log(str.startsWith('hello')) // true console.log(str.endsWith('!')) // true

3.函数

函数默认参数

//es5 function action(num) { num = num || 200 return num}//es6 function action(num = 200) { console.log(num)}

箭头函数

//es6[1,2,3].map(x => x + 1) //es5[1,2,3].map((function(x){ return x + 1}).bind(this))

4.拓展的对象功能

键值对简写

//es5 function people(name, age) { return { name: name, age: age };}//es6 function people(name, age) { return { name, age };}//方法同样适用 //es5 const people = { name: 'lux', getName: function() { console.log(this.name) }}//es6 const people = { name: 'lux', getName () { console.log(this.name) }}

浅拷贝Object.assign()

const objB = { address: 'beijing' }const objC = {} // 这个为目标对象 const obj = Object.assign(objC, objB)console.log(objB) // { address: 'beijing' } console.log(objC) // { address: 'beijing' } console.log(obj) // { address: 'beijing' } //obj为 objC的浅拷贝 //虽然assign被定义为浅拷贝,但是第一个参数传入{}可以达到深拷贝的效果 const objB = { address: 'beijing' }const obj = Object.assign({}, objB)console.log(objB) // { address: 'beijing' } console.log(obj) // { address: 'beijing' }此时obj为objB的深拷贝

5.解构

var people = { name: 'lux', age: 20}//es5 var name = people.namevar age = people.age//es6 const {name, age} = people//数组同样适用 var arr = [1,2,3];const {one, , three} = arr;

6.Spread Operator 展开运算符

//数组 const color = ['red', 'yellow']const colorful = [...color, 'green', 'pink']console.log(colorful) //[red, yellow, green, pink] //对象 const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

7.import 和 export

8. Promise

9.Generators

原文发布时间:2018-07-03
原文作者:kimyeongnam
本文来源
如需转载请紧急联系作者
你可能感兴趣的文章
阿里云HBase推出全新X-Pack服务 定义HBase云服务新标准
查看>>
通过Auto Layout深入了解SizeClasses的好处和使用
查看>>
Spring scope解惑
查看>>
BCH与BCE共享比特币之名
查看>>
js脚本 处理js注入
查看>>
A potentially dangerous Request.Form value was detected from the client
查看>>
测试过程之过分关注功能性测试
查看>>
SQL Server -- LIKE模糊查询
查看>>
centos7.0 docker安装部署
查看>>
ORA-32004错误的解决方法
查看>>
嵌入式系统学习步骤
查看>>
PPT | Docker定义存储-让应用无痛运行
查看>>
django 自定义日志配置
查看>>
是程序员,就用python导出pdf
查看>>
Absolute Uninstaller是类似于标准的Windows添加/删除卸载工具
查看>>
C++ Primer Plus(十)——对象和类
查看>>
ZooKeeper伪分布式集群安装及使用
查看>>
js 页面跳转保存状态
查看>>
轻松应对IDC机房带宽突然暴涨问题
查看>>
Mybatis Interceptor 讲解
查看>>