序
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
由于es6越来越重要,已经成为了web前端开发者必备知识。为了能够快速的入门,这里总结了一些基本方法作为参考学习,希望有所帮助。如果想了解更多,还要靠慢慢的积累。
弄明白以下10点,入门完全够了,至于深层次的东西就看个人造化了。
1. let , const 和 块级作用域
let
最简单粗暴的做法就是:以前用“var
”声明的变量,现在用“let
”替代就是了。
例一:
var a = 123; //es2015写法
let a = 123; //es6写法
例二:
//es2015
var fn = function () {
//handle
};
//es6写法
let fn = function () {
//handle
};
//或者
let fn = () => {
//handle
}
const
这是常量的声明,比如PI=3.1415这类不希望被人更改的东西用const。
例如:
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
}
2. 变量解构赋值
解构赋值本质上属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
数组解构赋值
例一:
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"]
作为入门,学会以上解构赋值就够用了,需要深入了解请自行百科。
3.字符串扩展
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>
其他扩展
- codePointAt()
- String.fromCodePoint()
- normalize()
- includes(), startsWith(), endsWith()
- repeat()
- padStart(),padEnd()
- matchAll()
- …
其中,我对includes(), startsWith(), endsWith()
方法还是蛮感兴趣的,下面是他们的简单说明:
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
4.正则扩展
es6加强了RegExp构造函数的功能,拓展了u
、y
修饰符,新增sticky
,flags
属性等。
对于菜鸟的我呢,我还是建议先用好这几个方法再去研究es6的新增功能吧。
- test() 返回boolean
- exec() 返回类似数组的集合
- match() 返回类似数组的集合
- replace() 返回替换后的字符串
- search() 返回下标,未匹配上返回-1
- split() 返回数组
es6正则学习参考网站:http://es6.ruanyifeng.com/#docs/regex
5.数值的扩展
数值的二进制,八进制,十六进制表示法
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
其他扩展
- Number.isFinite() 判断数值是否为有限的(finite),返回boolean
- Number.isNaN() 判断是否为NaN
- Number.parseInt() 转为整型
- Number.parseFloat() 转为浮点型
- Number.isInteger() 判断一个数值是否为整数,返回boolean
- Number.EPSILON 极小常量,即js的最小精度
- Number.isSafeInteger() 判断一个整数是否在-2^53到2^53之间
- Math.trunc() 除一个数的小数部分,返回整数部分
- …
6.函数扩展
这一节的内容是重点,需要完全掌握!!!
箭头函数
例一:
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']
rest参数
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
当然函数的扩展还有不少,但是就我看来上面这几个比较重要。