經常使用處理數據用法es6 語法糖總結

 

一 循環(數組 ,集合)

 

1 forEach-----------能夠遍歷獲得vaue和index

 

const arr = ['red', 'green', 'blue'];
arr.forEach( (element, index)=> {
console.log(element); // red green blue
console.log(index);   // 0 1 2
}); 

//foreach處理不能直接用 變量接收 （map能夠直接接收），返回undefined.

let newData=data.forEach((item, index) => {

if (item.imgUrl) {

item.imgUrl=tools.dealLogo(item.imgUrl, 460);

}

return item;

});

 

 

要接收能夠這樣:::

data.forEach((item, index) => {

if (item.imgUrl) {

item.imgUrl=tools.dealLogo(item.imgUrl, 460);

}

});

let  newData=data;

console.log(JSON.stringFy(newData));

 

 

ps: 循環默認會所有執行完畢，若要知足條件 的狀況下break,能夠考慮 使用 "every".

//Foreach 循環處理item的時候， 只處理某字段，其餘字段不用管，仍是在！

 

 

2 for...of-----------可直接拿到某條item對象

 

const arr = ['red', 'green', 'blue'];

for(let v of arr) {

console.log(v); // red green blue

}

 

 

3 for...in---------只能得到對象的鍵名，不能直接拿到鍵值

 

const arr =['a', 'b', 'c', 'd'];

for(let a in arr) {

  console.log(a); // 0 1 2 3

}

 

 

 

4 普通的for循環

 

const arr =['a', 'b', 'c', 'd'];

 

for(let i=0;i<arr.length;i++)

{

  console.log(arr[i]); // a b c d

}

 

 

 

二 Map--------處理集合列表，裏面的 具體item

const list= courses.map((item,index)=> {

 

       if ((item.time <= 15 && item.time>=0)) {

           item.type = 1 //產生新的字段

      }

 

    return item

  })

 

ps: map,foreach沒法終止循環， 能夠用every 替代處理

oldList.every(function (item, i) {

if (item.id==add.id) {

 

temp=i;

return  false//跳出循環

}

return   true//繼續循環

})

 

//map 循環處理集合item的時候，處理某字段，其餘字段同樣要返回，不然其餘字段會丟失。

 

 

三 Filter -----------集合條件過濾

 

let netList = list.filter((item)=> item.type !=3) // 能夠結合map進一步處理集合數據

 

 

 

四 slice----------------截取集合 ,前閉後開！

let  newList = list.slice(0, 4)  

 

 

五 concat----------------合併數組

•concat是將多個數組（也能夠是字符串，或者是數組和字符串的混合）鏈接爲一個數組，

返回鏈接好的新的數組

 

•arrayObj.concat([item1[,item2[, . . . [,itemN]]]]);

 

•若是沒有參數，則表示對數組進行了一次深拷貝！

 

 

 

六 splice-----數組截取 ，替換

oldList.splice(0, 1, add);  //刪除該條舊數據，並用新數據替換

oldList.splice(0, 0, add);  //不刪除，強插一條

oldList.splice(0, 1);          //直接刪除

 

ps :::

1 通常不用變量接收 ，直接單行使用！！！

2 0：表示位置,    1：表示個數, 後面參數表示內容(個數幾個,這裏就要寫幾個內容用,號分割)

 

 

 

七 Shift/unshift ----附加和移除 ，數組最前面的元素

•arrayObj.shift();  //移除最前一個元素並返回該元素值，數組中元素自動前移（shift，unshift針對的都是數組最前面的元素，棧形式的數據操做）

 

•arrayObj.unshift([item1[item2 [. . . [itemN]]]]);// 將一個或多個新元素添加到數組開始，數組中的元素自動後移，返回數組新長度

 

ps::

oldList.unshift(add);//這裏不能用變量接收賦值(打出的會是數量）直接寫單行便可。。

 

 

 

 

八 push / pop -----附加和移除 ，數組 最後面的 元素

•arrayObj.push([item1 [item2 [. . . [itemN]]]]);// 將一個或多個新元素添加到數組結尾，並返回數組新長度

 

•arrayObj.pop();//移除最後一個元素並返回該元素值（pop和push連在一塊兒造成，隊列形式的操做）

 

 

 

 

九 set ------數組添加惟一的值

似於數組但它的一大特性就是全部元素都是惟一的，沒有重複。

咱們能夠利用這一惟一特性進行數組的去重工做。

 

 

1.向Set中添加元素。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log('added:', set1)

 

結果：

added: Set { 1, 2, 3 }

 

 

 

2.從Set中刪除元素。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('deleted:', set1)

 

結果：

deleted: Set { 2, 3 }

 

 

 

3.判斷某元素是否存在。

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('has(1):', set1.has(1))
console.log('has(2):', set1.has(2))

 

結果：

has(1): false
has(2): true

 

 

 

4.清除全部元素。

 

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.clear()
console.log('cleared:', set1)

 

結果：

 

cleared: Set {}

 

 

 

Set和Array互轉

 

1.數組轉Set

 

let set2 = new Set([4,5,6])
console.log('array to set 1:', set2)

let set3 = new Set(new Array(7, 8, 9))
console.log('array to set 2:', set3)

 

結果：

 

array to set 2: Set { 4, 5, 6 }
array to set 3: Set { 7, 8, 9 }

 

 

 

2.Set轉數組( set數組是一個 不包含重複元素,無序的元素的集合)

 

let set4 = new Set([4, 5, 6])
console.log('set to array 1:', [...set4])
console.log('set to array 2:', Array.from(set4))

 

結果：

 

set to array 1: [ 4, 5, 6 ]
set to array 2: [ 4, 5, 6 ]

 

 

 

 

 

 

十 解構函數 (比較方便處理模塊化的邏輯)

 

•用法1

  Const {字段1，字段2，字段3,...other} =item;

 

 

•用法1  做爲方法的參數使用 ，傳遞對象/數組 ，可 賦默認值！

 

 

 

十一   其餘

 

1   函數方法沒有多態性，同名方法後面的會覆蓋前面的。

     ------相似的js 都是單線程，異步處理。(多個模塊同時請求某方法都是會前後執行完畢)

 

2   方法裏面參數能夠傳遞{……}對象, [……] 集合，能夠給參數設定默認值( 沒有傳遞就是用默認值 )

     queryUnreadAritcleUsers(chapterId, pageNo, limit=100)

    相似這樣傳參，不傳就是默認100。

 

3   判斷空集合--[] es5就支持

     if (Object.prototype.toString.call(data) === '[object Array]') {

                                    if (!data.length) {

                                       // 成功無數據

                                        resolve({ errorCode: 0, data: { success: true } });

                                        return；

                                    }

                                }

4 空對象---{} es5就支持

      if (Object.prototype.toString.call(data) === '[object Object]') {

                                    if (JSON.stringify(data) === JSON.stringify({})) {

                                       // 成功無數據

                                        resolve({ errorCode: 0, data: { success: true } });

                                        return;

                                    }

                                }

 

 

十二   對象合併覆蓋

Object.assign(target,…sources)
當target和sources對象中有相同的key時，在target對象中的值會被後面source對象的值覆蓋。

target對象自身會被修改

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 },

 

若是想要避免o1被改變，須要這樣寫：

var obj = Object.assign({},o1,o2,o3);//給一個空對象做爲target，這樣改變的是空對象
console.log(obj);// { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1}

 

 

 

十三

Math.floor()和parseInt()  都是向下取整。  

 

 

 

十四  search判斷字符串是否包含某字符內容。

 

String(currentName).search(item) !== -1 

 

 

 

 

最後附es6 地址：：：：

http://es6.ruanyifeng.com /