es6函数新功能使用（V客学院知识分享）

ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，代号harmony(和谐之意，显然没有跟上我国的步伐，我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中已经在14年12月份放出正式敲定的版本。ES7也已经发布，ES8即将发布。

 

reduce

reduce 可以用来汇总数据

 

const customer = [

  {id: 1, count: 2},

  {id: 2, count: 89},

  {id: 3, count: 1}

];

const totalCount = customer.reduce((total, item) =>

  total + item.count,

  0 // total 的初始值

);

// now totalCount = 92

 

　　

 

把一个对象数组变成一个以数组中各个对象的 id 为属性名，对象本身为属性值的对象。haoduoshipin

map

map 可以理解为是数组的转换器，依次对数组中的每个元素做变换进而得到一个新的数组。

 

const integers = [1, 2, 3, 4, 6, 7];

const twoXIntegers = integers.map(i => i*2);

// twoXIntegers are now [2, 4, 6, 8, 12, 14]

// integers数组并不会受到影响

　　

筛选出数组中的个别元素find

 

const posts = [

  {id: 1, title: 'Title 1'},

  {id: 2, title: 'Title 2'},

];

// find the title of post whose id is 1

const title = posts.find(p => p.id === 1).title;

　　

唉~ 使用了半年的 es6才发现有这么好用的东西，译者傻缺还像下面这么写过呢

filter

筛选出数组中某些符合条件的元素组成新的数组

 

 

const integers = [1, 2, 3, 4, 6, 7];

const evenIntegers = integers.filter(i => i % 2 === 0);

// evenIntegers are [2, 4, 6]

 

　　

 

数组concat请大家自行思考下filter和find的区别

 

const arr1 = [1, 2, 3, 4, 5];

const arr2 = [6, 7, 8, 9, 0];

const arrTarget = [...arr1, ...arr2];

// [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

 

　　

 

 

对象操作

 

 

function operation(query, option = {}) {

    const param = {...query, ...option};

    // ....

    return param;

}

let opt = {startTime: 123455555, endTime: 113345555};

let q = {name: '一步', age: 'xxx'};

operation(q, opt);

// {name: "一步", age: "xxx", startTime: 123455555, endTime: 113345555}

 

　　

 

对象是引用传参的，所以函数内部应该尽可能的保证传入的参数不受到污染。

为对象动态地添加字段

 

 

const dynamicKey = 'wearsSpectacles';

const user = {name: 'Shivek Khurana'};

const updatedUser = {...user, [dynamicKey]: true};

// updatedUser is {name: 'Shivek Khurana', wearsSpectacles: true}

 

　　

 

将对象转换为query字符串

 

const params = {color: 'red', minPrice: 8000, maxPrice: 10000};

const query = '?' + Object.keys(params)

  .map(k =>

    encodeURIComponent(k) + '=' + encodeURIComponent(params[k])

  )

  .join('&')

;

// encodeURIComponent encodes special characters like spaces, hashes

// query is now "color=red&minPrice=8000&maxPrice=10000"

　　

得到对象数组的元素 index

 

const posts = [

  {id: 13, title: 'Title 221'},

  {id: 5, title: 'Title 102'},

  {id: 131, title: 'Title 18'},

  {id: 55, title: 'Title 234'}

];

// to find index of element with id 131

const requiredIndex = posts.map(p => p.id).indexOf(131);

　　

 

const posts = [

  {id: 13, title: 'Title 221'},

  {id: 5, title: 'Title 102'},

  {id: 131, title: 'Title 18'},

  {id: 55, title: 'Title 234'}

];

const index = posts.findIndex(p => p.id === 131)

　　

删除对象的某个字段

 

const user = {name: 'Shivek Khurana', age: 23, password: 'SantaCl@use'};

const userWithoutPassword = Object.keys(user)

  .filter(key => key !== 'password')

  .map(key => {[key]: user[key]})

  .reducer((accumulator, current) =>

    ({...accumulator, ...current}),

    {}

  )

;

// userWithoutPassword becomes {name: 'Shivek Khurana', age: 23}

 

　　

 

这里我认为原作者有点为了函数式编程而函数式了，下面是我的解决方案：

 

 

const user = {name: 'Shivek Khurana', age: 23, password: 'SantaCl@use'};

const newUser = {...user};

delete newUser.password;

// {name: "Shivek Khurana", age: 23}

 

　　

 

 

 

（PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有，转载请注明出处，谢谢合作！）