成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

讓開發(fā)事半功倍-js數(shù)組處理方法

happen / 2233人閱讀

摘要：日常開發(fā)中，如果熟悉一般的數(shù)組處理方法，常能事半功倍，有更多時間學習其他技術(shù)，形成正向循環(huán)。這里總結(jié)常用的數(shù)組處理方法。

日常開發(fā)中，如果熟悉一般的數(shù)組處理方法，常能事半功倍，有更多時間學習其他技術(shù)，形成正向循環(huán)。

這里總結(jié)常用的js數(shù)組處理方法。

遍歷查找 Array.filter() 過濾

返回新數(shù)組，不改變原數(shù)組

不檢查空數(shù)組

let holidays = [1, 3, 5, 7];
getSmaller = (item) => item > 3;
holidays.filter(getSmaller);
// [5, 7]
Array.every()

返回 boolean

every() 方法用于檢測數(shù)組所有元素是否都符合指定條件

every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素

every() 不會改變原始數(shù)組。

let holidays = [1, 3, 5, 7];
biggerThan3 = (item) => item > 3;
holidays.every(biggerThan3);
// false
Array.find() 
const peoples = [
    {
        name: "jane",
        age: 23
    },
    {
        name: "dannel",
        age: 43
    },
    {
        name: "bruce",
        age: 56
    }
];

findJane = (item) => item.name === "jane";

const Jane = peoples.find(findJane)
// {name: "jane", age: 23}

find() 方法返回通過測試（函數(shù)內(nèi)判斷）的數(shù)組的第一個元素的值。

find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：

當數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。如果沒有符合條件的元素返回 undefined

注意: find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。

注意: find() 并沒有改變數(shù)組的原始值。

求和排序 Array.reduce() 求和

reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。

const numbers = [1, 2, 3, 4, 5, 6];
getSum = (total, curValue) => total + curValue
const sum = numbers.reduce(getSum)
// 21
Array.reduceRight()

與reduce() 類似

const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b);
// sum is 6

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

reduce與reduceRight區(qū)別

var a = ["1", "2", "3", "4", "5"]; 
var left  = a.reduce((sum, cur) => sum + cur); 
var right = a.reduceRight((sum, cur) => sum + cur); 

console.log(left);  // "12345"
console.log(right); // "54321"
Array.sort()

Array.sort()會將數(shù)組的數(shù)值轉(zhuǎn)化成字符串，然后根據(jù)UTF-16 code 比較大小

var months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]

如果想要對數(shù)組降序、升序排序，就需要變通一點。原理：

function compare(a, b) {
  if (a 大于 b) { // a、b的類型可以是任意的，比較規(guī)則自己定義
    return -1;
  }
  if (a 小于 b) {
    return 1;
  }
  // a 等于 b
  return 0;
}

例如，1、如果是數(shù)字數(shù)組：

let numbers = [2, 31, 34, 1, 9];
numbers.sort(function(a, b) {
    return a - b;
})

使用箭頭函數(shù),可以使代碼更加簡潔：

let numbers = [2, 31, 34, 1, 9];
numbers.sort((a, b) => a - b)

2、數(shù)組對象

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 }
];

// 根據(jù)value排序
items.sort(function (a, b) {
  return a.value - b.value;
});

// 根據(jù)name排序
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // 去除大小寫的影響
  var nameB = b.name.toUpperCase(); // 去除大小寫的影響
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});
判斷 includes() 判斷存在

includes() 方法用來判斷一個數(shù)組是否包含一個指定的值，如果是返回 true，否則false

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

參考：
1、mdn
2、菜鳥教程

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

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

相關(guān)文章

  • 26天學通前端開發(fā)（配資料）

    摘要：網(wǎng)上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個前端框架。也可以關(guān)注微信公眾號曉舟報告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤地址在最下方，獲取教程和案例的資料。 前言 好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發(fā)資料，干貨滿滿，準備接招。 網(wǎng)上有很多前端的學習路徑文章，大多是知...

    blair 評論0 收藏0

  • Vue插件開發(fā)初體驗——（懶加載）

    摘要：插件開發(fā)初體驗懶加載前言閑來無事，想自己開發(fā)一個簡單的懶加載插件，能力的提升我覺得是可以通過編寫插件實現(xiàn)，研究了一下官網(wǎng)的插件編寫。 Vue插件開發(fā)初體驗——（懶加載） 前言 閑來無事，想自己開發(fā)一個簡單的Vue懶加載插件，能力的提升我覺得是可以通過編寫插件實現(xiàn)，研究了一下官網(wǎng)的Vue插件編寫。馬上自己獨立開始編寫懶加載插件。 一、寫在前面 由于我在網(wǎng)上看了很多關(guān)于vue插件的實例，發(fā)...

    monw3c 評論0 收藏0

  • 滴滴一下，小程序?qū)＼噥砹?/b>

    摘要：功能三滴滴費用計算古人云細節(jié)決定成敗，一個良好的微信小程序往往就是一些細節(jié)打動人心，居然是模仿，雖做不到百分百，至少還是很希望一模一樣。 最近時常感嘆道：時間總是那么的快，轉(zhuǎn)瞬即逝。對于像我這種剛?cè)腴T的小生來講，技術(shù)每天都在更新，框架也層出不窮，有時候還沒弄懂這個知識大牛們又推出了更好的技術(shù)。當然學習好的技術(shù)也是十分重要的。但是在學習之后怎樣才能夠得到自己想要的呢，一個好的建議便是靜...

    SwordFly 評論0 收藏0

  • 一種SPA（單頁面應用）架構(gòu)

    摘要：個人認為單頁面應用的優(yōu)勢相當明顯前后端職責分離，架構(gòu)清晰前端進行交互邏輯，后端負責數(shù)據(jù)處理。上面的這種單頁面應用也有其相應的一種開發(fā)工作流，當然這種工作流也適合非單頁面應用進行產(chǎn)品功能原型設計。 未經(jīng)允許，請勿轉(zhuǎn)載。本文同時也發(fā)布在我的博客。 （如果對SPA概念不清楚的同學可以先自行了解相關(guān)概念） 平時喜歡做點小頁面來玩玩，并且一直采用單頁面應用（Single Page Appl...

    Codeing_ls 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<