ES6特性

ES6特性

此篇主要摘录自微信公众号 小生方勤

1、展开操作符

用于对象或数组之前的展开操作符(…)，将一个结构展开为列表。

数组

// 使用展开操作符
let firstHalf = [ 'one', 'two' ];
let secondHalf = [ 'three', 'four', ...firstHalf ];

// 不使用展开操作符
let firstHalf = [ 'one', 'two' ];
let secondHalf = [ 'three', 'four' ];
for(var i = 0; i < firstHalf.length; i++) {
    secondHalf.push(firstHalf[i])
}

// secondHalf
// ["three", "four", "one", "two"]

对象

// 用于合并对象的属性
const hero = {
  name: 'one',
  realName: 'ONE one'
}  
const heroWithWord = {
   ...hero,
   weapon: 'word'
}

// 不使用展开操作符，需要遍历对象的属性


// hero
// {name: "one", realName: "ONE one"}
// heroWithWord
// {name: "one", realName: "ONE one", weapon: "word"}

2、剩余参数

剩余参数将剩余的参数收入数列。JavaScript的特性是参数数目很灵活。通常会有一个arguments变量收集参数

function add(first, second, ...remaining) {
  return first + second + remaining.reduce((acc, curr) => acc + curr, 0);
}

// add(2,3,4,5)
// 14

3、字符串插值

常用于变量与字符串的拼接

// 
this.api = "http://192.168.0.121:8080/api";
url: `${this.api}/user/getUserInfo`,
// http://192.168.0.121:8080/api/user/getUserInfo

其实就是使用${}插值

4、简写属性

function createCoord(x, y) {
  return {
    x,
    y
  }
}

5、方法属性

方法属性是在对象中定义指向方法的属性。

const math = {
  add(a,b) { return a + b; },
  sub(a,b) { return a - b; },
  multiply(a,b) { return a * b; }
}

6、解构赋值

对象

function handle(req, res) {
 const name = req.body.name;
 const description = req.body.description;
 const url = req.url;
 log( url endpoint , url);
 // 大量代码逻辑
 dbService.createPerson(name, description)
}


// 解构赋值
function handle(req, res) {
 const { body: { name, description }, url } = req;
 log( url endpoint , url);
 // 大量代码逻辑
 dbService.createPerson(name, description)
}   

数组

const array = [1,2,3,4,5,6];
const [a, ,c, ...remaining] = arr;

// remaining = [4,5,6]

函数和参数

解构赋值还可以用于函数和参数。函数有不止2-3个参数时，使用一个对象收集所有参数是JavaScript的事实标准。

function doSomething(config) {
  if(config.a) { ... }
  if(config.b) { ... }
  if(config.c) { ... }
}
                
// 解构赋值
function doSomething({ a, b, c }) {
  if(a) { ... }
  if(b) { ... }
  if(c) { ... }
}              

7、数组方法

ES6引入了许多有用的数组方法，如：

• find()，查找列表中的成员，返回null表示没找到

• findIndex()，查找列表成员的索引

• some()，检查某个断言是否至少在列表的一个成员上为真

• includes，列表是否包含某项

const arr = [{ id: 1, checked: true }, {id: 2}]
arr.find(item => item.id === 2) // id: 2
arr.findIndex(item => item.id === 2) // 1
arr.some(item => item.checked) // true
arr.some(item => item.id)   // true

const numArr = [1,2,3,4,5]
numArr.includes(3)  // true

8、异步方案

async function getItems() {
  try {
    const user = await getUser();
    const order = await getOrderByUser(user);
    const items = await getOrderItemsByOrder(order);
    return items;
  } catch(err) {
    // 在这里处理错误，建议返回某个值或者重新抛出错误
  }
}

getItems().then(items => {
  // 处理排序后的成员
}

9、模块

// math.js

export function add(a,b) { return a + b; }
export function sub(a,b) { return a - b; }
export default mult(a,b) => a * b;


// main.js
import mult, { add, sub } from  ./math ;
mult(2, 4) // 8
add(1,1)   // 2
sub(1,2)   // -1

我们在上面用 export 关键字注明了 add 和 sub 这两个结构对任何引入该模块的模块都公开可见。export default 关键字则注明仅仅 import 模块时得到的结构。在 main.js 中，我们将导入的 default 命名为 mult，同时指明我们引入 add() 和 sub()这两个方法。箭头函数和字典作用域 this。