就是新一代的Javascript标准,js引擎按照这个标准来实现Javascript这个语言,不需要把它想得太神秘,太高级,对于我们js的工程师而言,熟悉新的特性及语法,在实践过程中,提高工作效率,把项目搞好就行。当然,还有一点就像[我微博]里提到的,如果再不学习,可能过个一两年,等ES6普及开来了,一些库的代码你可能都读不懂了。
由于今年才定稿,早期某些特性定稿的时候已经有『先进的浏览器』实现了部分特性,浏览器支持还不是太完整,而服务器端更激进一些,很多特性已经支持了,详细的特性支持列表,建议参考
http://kangax.github.io/compat-table/es6/
以后会是每年制定一个标准,所以也以年号来定,ES6也叫ES2015
语言只是工具,新特性如果能提高工资效率那必然是好特性,如果不能,然并卵 loadsh和underscore的存在,只能说明语言本身有很多未完善的地方,等到语言真的完善了,它们也就退出历史舞台了。
类似于jQuery的$.extend,但是功能比较弱,只是浅拷贝,用处很多,也可以克隆对象
let a = {a:1}
let b = {a:2}
let c = {c:{d:1}}
console.log(Object.assign(a, b, c))
c.c.d = 2
查找到第一个符合条件的值比遍历更好用
console.log([1,3,4,2].find(function(v){
return v > 3
})) //4
查找到所有符合条件的值
console.log([1,3,4,2].filter(function(v){
return v > 2
})) //[3,4]
三个方法都是indexOf的加强版,其中的查询字符串只不支持正则,如果是正则会抛出错误
console.log("hello".startsWith("ello", 1)) // true
console.log("hello".endsWith("hell", 4) ) // true, 针对前4个字符
console.log("hello".includes("ell") ) // true
console.log("hello".includes("ell", 1) ) // true
console.log("hello".includes("ell", 2) ) // false
告别手工拼接字符串
let x = 123
console.log(`${x}`) //123
${}内是标准的js语法
let x = 123
let y = 234
console.log(`${(x+y).toString(16)}`) //165
多行字符串
let name = 'hubo.hb'
let html = `
<div id="header">
${name}
</div>
`
console.log(html)
一个可以干预模板翻译过程的函数
function toUpper(s) {
return s.toString().toUpperCase()
}
console.log(toUpper`Go up!`) //'GO UP!'
第一个参数是除了替换的字符串的数组,剩下的参数是所有替换出来的值
function valuesOnly(stringsArray, ...valuesArray) {
return valuesArray.join('; ')
}
var one = 1
var two = 2
console.log(valuesOnly`uno=${one}, dos=${two}, tres=?`) //'1; 2'
let is the new var,块级作用域, 区块中存在let和const命令,凡是在声明之前就使用这些命令,就会报错。 不会有变量提升,重复定义会报错
'use strict';
if (true) {
let a = 1
if (a) {
console.log(a) //ReferenceError: a is not defined
let a = 2
}
}
const定义过的变量不能修改(修改无效),同样不会有变量提升,重复定义会报错
const a = 1
a = 2 //TypeError: Assignment to constant variable.
减少函数输入,this的自动绑定
var func = () => 'I return 1' //无参数的情况
console.log(func()) //I return 1
遍历操作常用
console.log([1,2,3,4].map(v => v*2)) //单参的情况
let o = {
render(){
setTimeout(()=> this.showIt(), 100)
},
showIt(){
console.log('I show')
}
}
o.render()
const x = 1
const y = 2
console.log({x, y}) //{x:1, y:2}
属性表达式
const x = 1
const y = 2
console.log({['xy'+ x + y]:`${x + y}`})
函数定义的时候使用...变量名,必须是最后一个参数,函数体内通过变量获取参数数组
const fn = (...rest) => rest.join()
console.log(fn(1, 2))
...把数组转化为参数序列,也可以
console.log([...'hello']) //["h", "e", "l", "l", "o"]
模式匹配批量赋值,数组,字符串,对象均可
const [a, b] = [1, 2]
console.log(a) //1
console.log(b) //2
const [c, d] = [...[1, 2]]
console.log(c) //1
console.log(d) //2
const [a, b, ...end] = [1, 2, 3, 4]
console.log(a, b, end) //1 2 [3,4]
const [h,...ends] = 'hello'
console.log(h, ends) //h ["e", "l", "l", "o"]
快速提取JSON里的值
var jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
}
let { id, status, data: [,secondData] } = jsonData;
console.log(id, status, secondData)// 42 OK 5309
传入的参数为undefined时,使用默认值
let number = (int = 0) => int;
console.log(number()) //0
对象参数默认值
function fetch(url, { body = '', method = 'GET', headers = {} } = {}){
console.log(method)
}
fetch('http://jser.me') //GET
fetch('http://jser.me', {}) //GET
fetch('http://jser.me', {method:'POST'}) //POST
参数省略只能从后向前省
不用讲太多,自己看看使用就行了,事实上也可以使用ES5来模拟
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('+this.x+', '+this.y+')';
}
}
不需要多讲,比较简单,大家多用就行了,用多了会上瘾。
两种新引入的数据结构,Map的键可以为任意对象,Map是Object的补充 Set可以理解为成员唯一的数组
JS越来越完善,当然也越来越像JAVA。