ES6新特性

转自：https://www.jianshu.com/p/87008f4f8513

1.const 与 let 变量

2.模板字面量

3.解构

　　数组对应数组 对象对应对象，提取值并赋值

const gemstone = {
  type: 'quartz',
  color: 'rose',
  karat: 21.29
};
const {type, color, karat} = gemstone;
console.log(type, color, karat);

　　

4.对象字面量简写法

属性名称和所分配的变量名称相同，从对象属性中删掉这些重复的变量名称

5.for...of循环

 

//可以随时停止或退出for...of循环

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

6.展开运算符

const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"];
console.log(...books);
Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities

使用展开符来结合数组

const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
const produce = [...fruits,...vegetables];
console.log(produce);
["apples", "bananas", "pears","corn", "potatoes", "carrots"]

剩余参数(可变参数)

用途1: 将变量赋数组值时:

const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);

用途2: 可变参数函数
对于参数不固定的函数,ES6之前是使用参数对象(arguments)处理:

function sum() {
  let total = 0;  
  for(const argument of arguments) {
    total += argument;
  }
  return total;
}

在ES6中使用剩余参数运算符则更为简洁,可读性提高

function sum(...nums) {
  let total = 0;  
  for(const num of nums) {
    total += num;
  }
  return total;
}

7.ES6箭头函数

箭头函数把每个名字转换为大写形式

 

const upperizedNames = ['Farrin', 'Kagure', 'Asser'].map(
  name => name.toUpperCase()
);

 

普通函数可以是函数声明或者函数表达式, 但是箭头函数始终都是表达式, 全程是箭头函数表达式, 因此因此仅在表达式有效时才能使用，包括：

• 存储在变量中，
• 当做参数传递给函数，
• 存储在对象的属性中。

  const greet = name => `Hello ${name}!`;
  greet('Asser');

8.默认参数函数

function greet(name = 'Student', greeting = 'Welcome') {
  return `${greeting} ${name}!`;
}

greet(); // Welcome Student!
greet('James'); // Welcome James!
greet('Richard', 'Howdy'); // Howdy Richard!

默认参数函数+解构

function createGrid([width = 5, height = 5] = []) {
  return `Generates a ${width} x ${height} grid`;
}

createGrid([]); // Generates a 5 x 5 grid
createGrid([2]); // Generates a 2 x 5 grid
createGrid([2, 3]); // Generates a 2 x 3 grid
createGrid([undefined, 3]); // Generates a 5 x 3 grid
createGrid(); //Generates a 5 x 5 grid

createSundae([undefined, ['Hot Fudge', 'Sprinkles', 'Caramel']]);

 对象默认值具备的一个优势是能够处理跳过的选项。传入的是第一参数可以忽略

function createSundae({scoops = 1, toppings = ['Hot Fudge']}={}) {
  const scoopText = scoops === 1 ? 'scoop' : 'scoops';
  return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(' and ')} toppings.`;
}

createSundae({}); // Your sundae has 1 scoop with Hot Fudge toppings.
createSundae({scoops: 2}); // Your sundae has 2 scoops with Hot Fudge toppings.
createSundae({scoops: 2, toppings: ['Sprinkles']}); // Your sundae has 2 scoops with Sprinkles toppings.
createSundae({toppings: ['Cookie Dough']}); // Your sundae has 1 scoop with Cookie Dough toppings.
createSundae(); // Your sundae has 1 scoop with Hot Fudge toppings.

createSundae({toppings: ['Hot Fudge', 'Sprinkles', 'Caramel']});