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

資訊專欄INFORMATION COLUMN

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

happen / 2266人閱讀

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

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

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

遍歷查找 Array.filter() 過(guò)濾

返回新數(shù)組，不改變?cè)瓟?shù)組

不檢查空數(shù)組

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

返回 boolean

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

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

every() 不會(huì)改變?cè)紨?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() 方法返回通過(guò)測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值。

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

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

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

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

求和排序 Array.reduce() 求和

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

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()會(huì)將數(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]

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

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

例如，1、如果是數(shù)字?jǐn)?shù)組：

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

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

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

2、數(shù)組對(duì)象

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() 方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，如果是返回 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、菜鳥(niǎo)教程

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

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

相關(guān)文章

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

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

    blair 評(píng)論0 收藏0

  • Vue插件開(kāi)發(fā)初體驗(yàn)——（懶加載）

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

    monw3c 評(píng)論0 收藏0

  • 滴滴一下，小程序?qū)＼噥?lái)了

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

    SwordFly 評(píng)論0 收藏0

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

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

    Codeing_ls 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<