ECMAScript 6.0(如下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言能够用来编写复杂的大型应用程序,成为企业级开发语言。javascript
因为es6愈来愈重要,已经成为了web前端开发者必备知识。为了可以快速的入门,这里总结了一些基本方法做为参考学习,但愿有所帮助。若是想了解更多,还要靠慢慢的积累。前端
弄明白如下10点,入门彻底够了,至于深层次的东西就看我的造化了。java
最简单粗暴的作法就是:之前用“var
”声明的变量,如今用“let
”替代就是了。es6
例一:web
var a = 123; //es2015写法
let a = 123; //es6写法
例二:数组
//es2015
var fn = function () {
//handle
};
//es6写法
let fn = function () {
//handle
};
//或者
let fn = () => {
//handle
}
这是常量的声明,好比PI=3.1415这类不但愿被人更改的东西用const。app
例如:svg
const PI = 3.141592563
最简单粗暴的区分es6块级做用域的方法就是:“每个{}就是一个块级做用域,包括for循环后面的大括号也是块级做用域”。函数
例如:学习
{
let a = 'apple';
console.log(a); //apple
{
let a = 'aaa';
console.log(a); //aaa
}
{
console.log(a); //apple
}
{
let a = 'AAA'
console.log(a); //AAA
}
console.log(a); //apple
}
解构赋值本质上属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
例一:
let [a, b, o] = ['apple', 'banana', 'orange'];
console.log(a, b, o); //apple banana orange
例二:
let [a, [b, c], d] = ['aa', ['bb', 'cc']];
console.log(a, b, c, d); //aa bb cc undefined
例三:
let [a, b, ...other] = [1, 2, 3, 4, 5, 6, 7];
console.log(a, b, other); //1 2 [3, 4, 5, 6, 7]
有人就想这个”...
“是什么东西,不要着急,先往下看。
例一:
let { a, b } = { a: 'apple', b: 'banana' };
console.log(a,b); //apple banana
例二:
let { a, b } = { a: 'apple', c:'hehehehehe', xx: 'xxxxxx', b: 'banana' };
console.log(a,b); //apple banana
例三:
let { a, xx:{ b } } = { a: 'apple', xx: { b: 'boy'}, b: 'banana' };
console.log(a,b); //apple boy
从上面的“栗子”咱们能够知道,es6的解构赋值其实讲究的就是“匹配模式”,即等号两面模式一致,就会赋予相应的值,未匹配的则为undefined
。那么,下面的例子就瓜熟蒂落了。
例一:
let [a, b, {x: {c}, d}, e] = ['aa', 'bb', {o: 'oo', x: {v: 'vv', c: 'cc'}, d: 'dd'}];
console.log(a, b, c, d, e); //aa bb cc dd undefined
例二:
let [arr, [obj]] = [[1, 2, 3], [{ a:'aa', b:'bb' }]];
console.log(arr, obj); //[1, 2, 3] {a: "aa", b: "bb"}
函数参数的解构赋值其实也是同样的,本质都是“匹配模式”,只不过这里是形参与实参之间的匹配。
例如:
{
//es6环境下的es5+es6写法
function fun([a, b]) {
return a + b;
}
console.log(fun([100, 150])); //250
}
{
//es6写法
let fun = ([a, b]) => a + b;
console.log(fun([150, 100])); //250
}
再例如:
let fun = ([a, b], { o }) => [a, b, o];
let fruits = fun(['apple', 'banana'], {g: 'grap', o: 'orange'});
console.log(fruits); //["apple", "banana", "orange"]
做为入门,学会以上解构赋值就够用了,须要深刻了解请自行百科。
es6对字符串进行了大量API的扩展,不过对于菜鸟的我而言,最喜欢的莫过于模板字符串功能
例如:
es5写法
var name = 'loushengyue',
age = 30,
sex = 'man';
var tpl =
'<div>' +
'<span>name: ' + name + '</span>' +
'<span>age: ' + age + '</span>' +
'<span>sex: ' + sex + '</span>' +
'</div>'
console.log(tpl); //<div><span>name: loushengyue</span><span>age: 30</span><span>sex: man</span></div>
es6写法
let name = 'loushengyue',
age = 30,
sex = 'man';
let tpl = `<div><span>name: ${name}</span><span>age: ${age}</span><span>sex: ${sex}</span></div>`
console.log(tpl); //<div><span>name: loushengyue</span><span>age: 30</span><span>sex: man</span></div>
其中,我对includes(), startsWith(), endsWith()
方法仍是蛮感兴趣的,下面是他们的简单说明:
es6增强了RegExp构造函数的功能,拓展了u
、y
修饰符,新增sticky
,flags
属性等。
对于菜鸟的我呢,我仍是建议先用好这几个方法再去研究es6的新增功能吧。
es6正则学习参考网站:http://es6.ruanyifeng.com/#docs/regex
0b
开头后面接0-1
的数值构成二进制0o
开头后面接0-7
的数值构成八进制0x
开头后面接0-9
的数值或者abcdef
字符构成八进制例如:
console.log(0b1001); //9
console.log(0o17); //15
console.log(0x2f); //47
ES2016 新增了一个指数运算符(**
)。
例如:
console.log(2 ** 3); //8
console.log(2 ** 4); //16
//还能够**=
let num = 2;
num **= 3;
console.log(num); //8
这一节的内容是重点,须要彻底掌握!!!
例一:
let fn = item => item * 2; console.log(fn(8)); //8
//等价于es5的
var fn = function(item){
return item * 2;
}
例二:
let fn = item => { console.log(item * 2); }
fn(4); //8
//等价于es5的
var fn = function(item) {
console.log(item * 2);
}
例三:
let fn = () => 10;
//等价于es5的
var fn = function() { return 10; }
例四:
let fn = (a, b) => a + b;
//等价于es5的
var fn = function(a, b) { return a + b; }
例如:
let fn = (a, b, c =5, d = 'abcd') => [a, b, c, d];
console.log(fn(1, 3)); //[1, 3, 5, 'abcd']
console.log(fn(2, 4, 6)); //[2, 4, 6, 'abcd']
ES6 引入 rest 参数(形式为…变量名),用于获取函数的多余参数,这样就不须要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
例如:
let sum = (...items) => {
let total = 0;
for (let index in items) {
total += items[index];
}
return total;
};
console.log(sum(1, 3, 5)); //9
console.log(sum(1, 3, 5, 4, 6)); //19
固然函数的扩展还有很多,可是就我看来上面这几个比较重要。