js 你不知道的 Array

yintaolaowanzi 發(fā)布于2019-08-21 10:40 / 1749人閱讀

摘要：刪除數(shù)組的第一個元素，返回值是刪除的元素對數(shù)組中的元素進行排序添加或刪除數(shù)組中的一個或多個元素。循環(huán)迭代方法對數(shù)組中的每一個元素調(diào)用參數(shù)中指定的過濾函數(shù)，并將對于過濾函數(shù)返回值為的那些數(shù)組元素集合為新的數(shù)組返回。

一、在類數(shù)組對象上復(fù)用通用的數(shù)組方法

類數(shù)組有：arguments, NodeList, 字符串

什么是類數(shù)組？兩個條件

具有 length 屬性

length 屬性大于該對象的最大索引

比如：

  var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3};
  var result = Array.prototype.map.call(arrayLike, function(s) {
    return s.toUpperCase();
  });//["A", "B", "C"]

幾乎所有的數(shù)組方法都是通用的（forEach，slice，map ...）除了 concat。

因為 concat 在連接時，會檢查其參數(shù)的 [[Class]] 屬性。

一些方法，比如 join，僅僅讀取他們被調(diào)用的對象的長度和數(shù)值屬性。 另外，像 reverse 一樣，要求對象的數(shù)值屬性和長度屬性是可變的；因此，這些方法不能在像 String 這樣的對象上被調(diào)用，String不允許它的長度屬性和synthesized的數(shù)值屬性被設(shè)置。

  function namesColumn() {
    return ["Names"].concat(arguments);
  }
  namesColumn("alice", "arale");//["Names", {0: "alice", 1: "arale"}]

  //解決辦法：應(yīng)先使用 slice 將 arguments 轉(zhuǎn)為數(shù)組
  function namesColumn() {
    return ["Names"].concat([].slice.call(arguments));
  }

二、數(shù)組優(yōu)先使用 for 循環(huán)，而不是 for in 循環(huán)。

for in 更多的是用于遍歷對象，但是它也會去檢查對象的原型。

如果瀏覽器支持 for of （ES6）的話，最好是使用它，它不會去遍歷原型。

三、迭代優(yōu)于循環(huán)

一個原因是，迭代可以消除沒必要的 終止條件 和 任何數(shù)組索引

比如：

  for (var i = 0; n = players.length; i < n; i++) {
    players[i].score++;
  }

  //使用迭代
  players.forEach(function(p){
    p.score++;
  });

例1：對數(shù)組每一個元素操作后生成一個新的數(shù)組

  //獲得所有輸入框去除多余空格后的值
  var trimmed = input.map(function(s) {
    return s.trim()
  })

例2：獲取價格在特定區(qū)間的列表

  listings.filter(function(listing) {
    return listing.price >= min && listing.price <= max
  })

當(dāng)然這都是 ES5 的方法，我們也可以自己寫一個。

  function takeWhile(a, pred) {
    var result = []
    for (var i = 0; n = a.length; i < n; i++) {
      if (!pred(a[i], i)) {
       break
      }
      result[i] = a[i]
    }
    return result
  }

  var prefix = takeWhile([1, 2, 4, 8, 16, 32], function(n) {
    return n < 10
  }) // [1, 2, 4, 8]

把它加在 Array 上

  Array.prototype.takeWhile = function(pred) {
    var result = []
    for (var i = 0; n = this.length; i < n; i++) {
      if (!pred(this[i], i)) {
        break
      }
      result[i] = this[i]
    }
    return result
  }

  [1, 2, 4, 8, 16, 32].takeWhile(function(n) {
    return n < 10
  }) // [1, 2, 4, 8]

循環(huán)僅一點優(yōu)于迭代：控制流操作如 break 和 continue

ES5 中只有 some 和 every 可以提前終止循環(huán), 但設(shè)計他們的本意不是用來提前終止循環(huán)。

// some 一旦回調(diào)產(chǎn)生了一個真值，則立即返回，不會執(zhí)行其余的元素
[1, 10, 100].some(function(x) { return x > 5 }) //true
[1, 10, 100].some(function(x) { return x < 0 }) //false
// every 相反, 一旦產(chǎn)生假值，則立即返回，不會執(zhí)行其余元素
[1, 2, 3, 4, 5].every(function(x) { return x > 0 }) //true
[1, 2, 3, 4, 5].every(function(x) { return x < 3 }) //false

這種行為可以用來實現(xiàn) forEach 提前終止循環(huán)的變種時派上用場

  function takeWhile(a, pred) {
    var result = [];
    a.every(function(x, i) {
      if (!pred(x)) {
        return false //break
      }
      result[i] = x;
      return true; //continue
    })
    return result
  }

四、數(shù)組方法分類

1. Mutator 方法

這些方法可以改變數(shù)組自身

pop : 移除數(shù)組的最后一個元素，返回值是被刪除的元素。

push : 在數(shù)組的末尾添加一個或者多個元素，返回值是新的數(shù)組的長度。

reverse : 顛倒數(shù)組中元素的順序，原先第一個元素現(xiàn)在變成最后一個，同樣原先的最后一個元素變成了現(xiàn)在的第一個，也就是數(shù)組的索引發(fā)生了變化。

shift : 刪除數(shù)組的第一個元素，返回值是刪除的元素

sort : 對數(shù)組中的元素進行排序

splice : 添加或刪除數(shù)組中的一個或多個元素。

unshift : （將廢棄）添加一個或者多個元素在數(shù)組的開頭，返回值是新的數(shù)組的長度。

2. Accessor 方法

這些方法不改變數(shù)組自身

concat : 返回一個包含此數(shù)組和其他數(shù)組和/或值的結(jié)合的新數(shù)組

indexOf : 返回第一個與給定參數(shù)相等的數(shù)組元素的索引，沒有找到則返回-1

join : 將所有的數(shù)組元素連接成一個字符串

lastIndexOf : 返回在數(shù)組中搜索到的與給定參數(shù)相等的元素的最后（最大）索引

slice : 返回數(shù)組中的一段。

toString : 返回代表該數(shù)組及其元素的字符,重寫Object.toString 過程.

valueOf : 重寫Object.valueOf過程。

3. 循環(huán)（迭代）方法

filter : 對數(shù)組中的每一個元素調(diào)用參數(shù)中指定的過濾函數(shù)，并將對于過濾函數(shù)返回值為true的那些數(shù)組元素集合為新的數(shù)組返回。

forEach : 對數(shù)組的每一個元素依次調(diào)用參數(shù)中指定的函數(shù)。

every : 如果數(shù)組中每一個元素都滿足參數(shù)中提供的測試函數(shù)，則返回真

map : 創(chuàng)建一個新數(shù)組，新數(shù)組中含有，分別對于原來數(shù)組的每一個元素調(diào)用一個給定函數(shù)的結(jié)果

some : 如果數(shù)組中至少有一個元素滿足參數(shù)函數(shù)的測試，則返回true。

GPU云服務(wù)器云服務(wù)器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/85980.html

發(fā)表評論

登陸后可評論

0條評論

yintaolaowanzi

男|高級講師

我要關(guān)注我要私信

TA的文章

如何在pycharm中安裝tensorflow

閱讀 2178·2023-04-26 01:56
Linux環(huán)境基礎(chǔ)開發(fā)工具的使用

閱讀 3175·2021-11-18 10:02
阿里云老用戶享受新用戶攻略：阿里云老用戶不能購買活動的解決方法

閱讀 3155·2021-09-09 11:35
nfdump的性能分析

閱讀 1415·2021-09-03 10:28
css之div未知高度，剩余div鋪滿整個屏幕

閱讀 3487·2019-08-29 18:36
【每日一包0005】arr-flatten

閱讀 2916·2019-08-29 17:14
響應(yīng)式導(dǎo)航欄

閱讀 890·2019-08-29 16:10
重學(xué)前端學(xué)習(xí)筆記（十三）--瀏覽器工作解析（三）

閱讀 1670·2019-08-26 13:45

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js 你不知道的 Array

1. Mutator 方法

2. Accessor 方法

3. 循環(huán)（迭代）方法

相關(guān)文章

你不知道的js技巧

【讀書筆記】你不知道的JavaScript--內(nèi)置類型

你不知道的JavaScript

筆記-你不知道的JS-對象

ES6和Babel你不知道的事兒

發(fā)表評論

0條評論

yintaolaowanzi

男|高級講師

TA的文章

如何在pycharm中安裝tensorflow

Linux環(huán)境基礎(chǔ)開發(fā)工具的使用

阿里云老用戶享受新用戶攻略：阿里云老用戶不能購買活動的解決方法

nfdump的性能分析

css之div未知高度，剩余div鋪滿整個屏幕

【每日一包0005】arr-flatten

響應(yīng)式導(dǎo)航欄

重學(xué)前端學(xué)習(xí)筆記（十三）--瀏覽器工作解析（三）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js 你不知道的 Array

1. Mutator 方法

2. Accessor 方法

3. 循環(huán)（迭代） 方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

3. 循環(huán)（迭代）方法