ES6新特性简单介绍

1、 let、const 和 block 作用域

let 允许创建块级作用域,例如:

var a = 2;
{
let a = 3;
console.log(a); // 3
}
console.log(a); // 2

const也是块级作用域,声明一个常量,声明的常量类似于指针,它指向某个引用,也就是说这个「常量」并非一成不变的,如:

{
const ARR = [5,6];
ARR.push(7);//值可以改变的
console.log(ARR); // [5,6,7]
ARR = 10; // TypeError
}

注意事项:

  1. let 关键词声明的变量不具备变量提升(hoisting)特性
  2. let 和 const 声明只在最靠近的一个块中(花括号内)有效
  3. 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING
  4. const 在声明时必须被赋值

2、箭头函数

箭头函数让代码变得更简洁,并且函数中 this 总是绑定总是指向对象自身
普通函数和箭头函数:

var getPrice = function() {
return 4.55;
};
// Implementation with Arrow Function
var getPrice = () => 4.55;

3、函数参数默认值

ES6 中允许你对函数参数设置默认值:

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

4、Spread / Rest 操作符

Spread / Rest 操作符指的是 …,具体是 Spread 还是 Rest 需要看上下文语境。

当被用于迭代器中时,它是一个 Spread 操作符:

function foo(x,y,z) {
console.log(x,y,z);
}
let arr = [1,2,3];
foo(…arr); // 1 2 3

当被用于函数传参时,是一个 Rest 操作符:

function foo(…args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5、对象词法扩展

ES6 允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作:

function getCar(make, model, value) {
return {
// 简写变量
make, // 等同于 make: make
model, // 等同于 model: model
value, // 等同于 value: value
// 属性可以使用表达式计算值
[‘make’ + make]: true,
// 忽略 function 关键词简写对象函数
depreciate() {
this.value -= 2500;
}
};
}
let car = getCar(‘Barret’, ‘Lee’, 40000);
// output: {
// make: ‘Barret’,
// model:‘Lee’,
// value: 40000,
// makeBarret: true,
// depreciate: [Function: depreciate]
// }

6、二进制和八进制字面量

ES6 支持二进制和八进制的字面量,通过在数字前面添加 0o 或者0O 即可将其转换为八进制值:

let oValue = 0o10;
console.log(oValue); // 8
let bValue = 0b10; // 二进制使用 0b 或者 0B
console.log(bValue); // 2

7、对象和数组解构

解构可以避免在对象赋值时产生中间变量:

function foo() {
return [1,2,3];
}
let arr = foo(); // [1,2,3]
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
function bar() {
return {
x: 4,
y: 5,
z: 6
};
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

8、模板语法和分隔符

ES6 中有一种十分简洁的方法组装一堆字符串和变量。

${ … } 用来渲染一个变量
作为分隔符 let user = 'Barret'; console.log(Hi ${user}!`); // Hi Barret!

9、for…of VS for…in

for…of 用于遍历一个迭代器,如数组:

let nicknames = [‘di’, ‘boo’, ‘punkeye’];
nicknames.size = 3;
for (let nickname of nicknames) {
console.log(nickname);
}
// 结果: di, boo, punkeye

for…in 用来遍历对象中的属性:

let nicknames = [‘di’, ‘boo’, ‘punkeye’];
nicknames.size = 3;
for (let nickname in nicknames) {
console.log(nickname);
}
Result: 0, 1, 2, size

10、Promises

ES6 对 Promise 有了原生的支持,一个 Promise 是一个等待被异步执行的对象,当它执行完成后,其状态会变成 resolved 或者rejected。

var p = new Promise(function(resolve, reject) {
if (/* condition /) {
// fulfilled successfully
resolve(/
value /);
} else {
// error, rejected
reject(/
reason */);
}
});

每一个 Promise 都有一个 .then 方法,这个方法接受两个参数,第一个是处理 resolved 状态的回调,一个是处理 rejected 状态的回调:

p.then((val) => console.log("Promise Resolved", val),
            (err) => console.log("Promise Rejected", err));

猜你喜欢

转载自blog.csdn.net/Serena_tz/article/details/113994196