ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
也就是说，ES6就是ES2015。
这次在公司的项目中运用的ES6的一些语法在此之前先了解一下babel
babel
babel是广泛使用是es6的转码器，它可以把es6的语法转化为es5的语法结构使得代码可以在现有的环境中执行
大家可以选择自己习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：
http://babeljs.io/
在项目中常使用的ES6的特征：es6
1.新增加let命令用来声明变量，用法类似var;注：let声明的变量只在代码块内有效.此命名方式和es5中的var是有区别的，
在es5中只是包含全局变量和局部变量的概念
{
let a = 10;
var b = 30;
}
console.log(a);//a is not defined
console.log(b);//30
可以用于for循环;
提示：var变量存在变量提升，就是变量可以在声明的前面使用但是输出结果为undefined。
let声明的变量只能在声明之后调用，否则报错。
注意暂时性死区，
2.const声明一个只读的常量，一旦声明常量的值就不会改变（在声明的同时初始化，否则报错。只在声明的块级作用域内有效，也存在暂时性死区，
所以只能是声明后使用）
3.变量的解构赋值；数组，对象
对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的，变量的取值由它的位置决定；
而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let[a,b,c]=[1,2,3]//允许对应位置赋值(模式匹配：只要等号的两边的模式相同，左边的变量就会被赋予对应的值)
函数参数的解构赋值：
实例：
1.function add([ x , y ]){
return x + y
}
add([1 , 2]);//3
2.[[1 , 2] , [3 , 4]].map(([ a , b] => a + b))
//[3 , 7]
3.函数参数的解构也可以使用默认值；
function move({x=0,y=0}={}){
return [ x , y]
}
move({x;3,y:8})//[3,8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
3.1圆括号问题：一个式子到底是模式还是表达式只有解析到等号才知道
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
//提取json数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
3.2遍历map结构：
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
4.数组的扩展：
4.1 Array.from()可以把类似数组的对象和可以遍历的对象转化成数组
实例：
类似数组的对象转化为真数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
网友评论