(JavaScript) Array的tips

1. Array.prototype.push()

像數組同樣使用對象:數組

var obj = {
    length: 0,

    addElem: function addElem (elem) {
        // obj.length is automatically incremented 
        // every time an element is added.
        [].push.call(this, elem);
    }
};

// Let's add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

儘管 obj 不是數組,可是 push 方法成功地使 obj 的 length 屬性增加了,就像咱們處理一個實際的數組同樣。函數

2. Array.prototype.sort()

arr.sort(compareFunction)

參數:compareFunction
可選。用來指定按某種順序進行排列的函數。若是省略,元素按照轉換爲的字符串的各個字符的Unicode位點進行排序。this

若是指明瞭compareFunction,那麼數組會按照調用該函數的返回值排序。即 a 和 b 是兩個將要被比較的元素:prototype

  • 若是compareFunction(a, b)小於 0 ,那麼 a 會被排列到 b 以前;
  • 若是compareFunction(a, b)等於 0 , a 和 b 的相對位置不變;
  • 若是compareFunction(a, b)大於 0 , b 會被排列到 a 以前。

比較函數格式以下(字符串與數組均可以比較):code

function compare(a, b) {
    if (a < b ) {           // 按某種排序標準進行比較, a 小於 b
        return -1;
    }
    if (a > b ) {
        return 1;
    }
    // a must be equal to b
    return 0;
}

3. Array.prototype.unshift()

var arr = [1, 2];
arr.unshift(-2, -1);    // = 5
// arr is [-2, -1, 1, 2]

4. Array.prototype.concat()

返回新的數組(淺拷貝),不會影響原數組。對象

  • 若是參數是數組,則把數組的元素放入結果中;
  • 若是參數不是數組,則把參數自己放入結果中。
var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9];

var alpha = ['a', 'b', 'c'];

var alphaNumeric = alpha.concat(1, [2, 3]);

console.log(alphaNumeric); 
// results in ['a', 'b', 'c', 1, 2, 3]

5. Array.prototype.forEach()

array.forEach(callback(currentValue, index, array){
    //do something
}, thisArg)

array.forEach(callback[, thisArg])

其中:thisArg爲可選參數,當執行回調 函數時用做this的值(參考對象)。排序

下列函數也有thisArg這個可選參數,用法與Array.prototype.forEach()一致:索引

  • Array.prototype.forEach()
  • Array.prototype.every()
  • Array.prototype.some()
  • Array.prototype.filter()
  • Array.prototype.map()
  • Array.prototype.reduce()
  • Array.prototype.reduceRight()

6. Array.prototype.map()

使用技巧案例ip

// 下面的語句返回什麼呢:
["1", "2", "3"].map(parseInt);
// 你可能覺的會是[1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]

// 一般使用parseInt時,只須要傳遞一個參數.
// 但實際上,parseInt能夠有兩個參數.第二個參數是進制數.
// 能夠經過語句"alert(parseInt.length)===2"來驗證.
// map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 
// 元素索引, 原數組自己.
// 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,
// parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的結果

// 也可使用簡單的箭頭函數,結果同上
['1', '2', '3'].map( str => parseInt(str) );

// 一個更簡單的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 與`parseInt` 不一樣,下面的結果會返回浮點數或指數:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

7.Array.prototype.reduce()

arr.reduce(callback[, initialValue])

Array.prototype.reduceRight()是與其用法相似,是從右向左遍歷。element

參數:

  • callback: 執行數組中每一個值的函數,包含四個參數:

    • accumulator: 累加器累加回調的返回值; 它是上一次調用回調時返回的累積值,或initialValue(以下所示)。
    • currentValue: 數組中正在處理的元素。
    • currentIndex: 可選,數組中正在處理的當前元素的索引。 若是提供了initialValue,則索引號爲0,不然爲索引爲1。
    • array: 可選,調用reduce的數組。
  • initialValue: 可選,用做第一個調用 callback的第一個參數的值。 若是沒有提供初始值,則將使用數組中的第一個元素。 在沒有初始值的空數組上調用reduce將報錯。

reduce如何運行

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
}, 10);

// 20

實例:將二維數組轉化爲一維

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

實例:使用擴展運算符和initialValue綁定包含在對象數組中的數組

// friends - an array of objects 
// where object field "books" - list of favorite books 
var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

// allbooks - list which will contain all friends' books +  
// additional list contained in initialValue
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, ['Alphabet']);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

實例:數組去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

參考

Array - MDN

相關文章
相關標籤/搜索