9个超级实用的 ES6 特性,超级实用哦！

1、展开操作符

let firstHalf = [  one ,  two ];let secondHalf = [ three ,  four , ...firstHalf];

let firstHalf = [  one ,  two ];let secondHalf = [ three ,  four ];for(var i=0, i 

const hero = {  name:  Xena - Warrior Princess ,  realName:  Lucy Lawless}const heroWithSword = { ...hero, weapon:  sword}

let keys = Object.keys(hero); let obj = {};

for(var i=0; i< keys.length; i++) {   obj[keys[i]] = keys[props[i]]; }

2、剩余参数

function add(first, second, ...remaining) {  return first + second;}

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

3、字符串插值

class Product { constructor(name, description, price) {   this.name = name;   this.description = description;   this.price = price; }getDescription() {   return " Full description" +   " name: " + this.name +   " description: " + this.description }}

getDescription() {   return `Full description:   name: ${this.name}   description ${this.description}   `;}

4、简写属性

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

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

5、方法属性

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

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 = array[0];const c = array[2];

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

// remaining = [4,5,6]

function doSomething(config) {  if(config.a) { ... }  if(config.b) { ... }  if(config.c) { ... }}

function doSomething({ a, b, c }) {  if(a) { ... }  if(b) { ... }  if(c) { ... }}

7、数组方法

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

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

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

includes，列表是否包含某项

const array = [{ 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

const numberArray = [1,2,3,4]; numberArray.includes(2) // true Promises + Async/Await

8、异步方案

function doSomething(cb) {  setTimeout(() =>  {    cb( done )  }, 3000) }

doSomething((arg) => { console.log( done here , arg); })

function doSomething() {  return new Promise((resolve, reject) => {    setTimeout(() =>  {      resolve( done )    }, 3000)  }) }

doSomething().then(arg => { console.log( done here , arg); })

getUser()  .then(getOrderByUser)  .then(getOrderItemsByOrder)  .then(orderItems => {    // 处理排序后的成员  })

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

软件开发

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。