开发者社区> 李博 bluemind> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ES6新特性详解

简介:
+关注继续查看

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 = `<div>
 <span>hello world</span>
</div>`

对于字符串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.name
var 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
本文来源掘金如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ES6的新特性
const 和 let let: 声明在代码块内有效的变量。
0 0
es6的新特性使用
使用 命令有: export、import 、export default
0 0
ES6新特性
ES6新特性
0 0
ES6中的新特性:Iterables和iterators
ES6中的新特性:Iterables和iterators
0 0
深入理解ES8的新特性SharedArrayBuffer
深入理解ES8的新特性SharedArrayBuffer
0 0
ES的那些新特性
前段时间换工作,面试了几家公司,有一道题发现基本是必问的,就是说一说平时用到的那些 es6 7 8 9 等的特性。一直没有做总结,现在就整理一下平时自己在工作中用到的比较多的那些新特性。
892 0
ES6中常用的10个新特性讲解
ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。
771 0
es6新特性分享
1、字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:includes()/startsWith()/endWith()返回bool值includes => 是否包含字符startsWith => 首字母是否包含字符endWith => 末尾是否包含字符   2、数值扩展Number.isInteger() => 判断一个值是否是整数Math.trunc() => 去除一个数的小数部分Math.sign() => 方法用来判断一个数到底是正数、负数、还是零。
594 0
+关注
李博 bluemind
云栖社区Java、Redis、MongoDB运营小编,有意合作请联系钉钉:15810436147
文章
问答
文章排行榜
最热
最新
相关电子书
更多
ES6 必知必会
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载