首頁 > web前端 > js教程 > 主體

JavaScript中Array數組的tips的講解

不言
發布: 2018-07-13 10:01:30
原創
1518 人瀏覽過

這篇文章主要介紹了關於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位點進行排序。

如果指明了compareFunction,那麼陣列就會依照呼叫該函數的回傳值排序。即a 和b 是兩個將要被比較的元素:

  • 如果compareFunction(a, b)小於0 ,那麼a 會被排列到b 之前;

  • 如果compareFunction(a, b)等於0 , a 和b 的相對位置不變;

  • 如果compareFunction(a, b)大於0 , b 會被排列到a 之前。

比較函數格式如下(字串與陣列都可以比較):

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()

#使用技巧案例

// 下面的语句返回什么呢:
["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()是與其用法類似,是從右向左遍歷。

參數:

  • 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]
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

#

以上是JavaScript中Array數組的tips的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!