Javascript ES6几个重要的新特性

Arrow functions 箭头函数

function的简略写法,但是无法使用this

// 箭头函数
var odds = evens.map(v => v + 1);
var nums = evens.map ((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// 普通函数
var odds = evens.map(function (v) {
  return v + 1;
});
var nums = evens.map(function (v, i) {
  return v + i;
});
var pairs = evens.map(function (v) {
  return {
    even: v,
    odd: v + 1
}});

String interpolation 字符串内插

支持在字符串内插入变量,使用``代替""
同样支持字符串内换行代替/n

var name = "Bob", time = "today";
var multiLine = `This
Line
Spans Multiple
Lines`

console.log (`Hello ${name}, how are you ${time}?`}
console.log(multiline)

Destructuring 解构

支持从数组和对象中提取值,要求提取来源为可迭代(遍历)的结构,同样可以用于嵌套的对象

// 数组解构
var [a, , b] = [1,2,3];
console.log(a)  // 1
console.log(b)  // 3

// 对象解构
nodes = () => { return {op: "a", lhs: "b", rhs: "c"}}
var { op: a, lhs: b , rhs: c } = nodes()
var {op, lhs, rhs} = nodes()  //简化版,变量名与属性名一致

console.log(a)  // "a"
console.log(b)  // "b"
console.log(c)  // "c"

Default 函数默认参数

function f(x, y=12) {
  return x + y;
}

console.log(f(3))  // 15

Spread 扩展运算符

扩展运算符是...

// 数组
var parts = ["shoulders", "knees"];
var lyrics = ["head", ...parts, "and", "toes"]; 
console.log(lyrics)  // ["head","shoulders","knees","and","toes"]

//对象
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

Rest

function demo(part1, ...part2) {
    return {part1, part2}
}

console.log(demo(1,2,3,4,5,6))  // {"part1":1,"part2":[2,3,4,5,6]}

新变量:let与const

let声明的变量只在它所在的代码块有效,在同一个代码块(作用域)下,不可以重复声明,可以被重新赋值。

// 只在所在代码块有效
{
   var globalVar = "from demo1"
}

{
   let globalLet = "from demo2";
}
console.log(globalVar)  // "from demo1"
console.log(globalLet)  // ReferenceError: globalLet is not defined

// 同一代码块不能重复声明(redeclare)
var me = "foo";
var me = "bar"; 
console.log(me)  // "bar"

let me = "foo";
let me = "bar"; 
console.log(me);  // SyntaxError: Identifier 'me' has already been declared

const声明的常量只在它所在的代码块有效,在同一个代码块(作用域)下,不可以重复声明,并且不可以被重新赋值(基本类型的数据)。const是read-only variables。

// 只读常量,非变量,不可以被重新赋值
const a = "b"
a = "a"  // TypeError: Assignment to constant variable.

//可以被改变(mutated)
const a = { a: "a" }
a.a = "b"
console.log(a)  // {"a":"b"}

Promises

异步编程

var p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("1"), 101)
})
var p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("2"), 100)
})

Promise.race([p1, p2]).then((res) => {
   console.log(res)
})

Promise.all([p1, p2]).then((res) => {
   console.log(res)
})

你可能感兴趣的:(Javascript ES6几个重要的新特性)