摘要:日常開發中,如果熟悉一般的數組處理方法,常能事半功倍,有更多時間學習其他技術,形成正向循環。這里總結常用的數組處理方法。
</>復制代碼
日常開發中,如果熟悉一般的數組處理方法,常能事半功倍,有更多時間學習其他技術,形成正向循環。
這里總結常用的js數組處理方法。
遍歷查找 Array.filter() 過濾返回新數組,不改變原數組
不檢查空數組
</>復制代碼
let holidays = [1, 3, 5, 7];
getSmaller = (item) => item > 3;
holidays.filter(getSmaller);
// [5, 7]
Array.every()
返回 boolean
every() 方法用于檢測數組所有元素是否都符合指定條件
every() 方法使用指定函數檢測數組中的所有元素
every() 不會改變原始數組。
</>復制代碼
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() 方法返回通過測試(函數內判斷)的數組的第一個元素的值。
find() 方法為數組中的每個元素都調用一次函數執行:
當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素,之后的值不會再調用執行函數。如果沒有符合條件的元素返回 undefined
注意: find() 對于空數組,函數是不會執行的。
注意: find() 并沒有改變數組的原始值。
求和排序 Array.reduce() 求和reduce() 方法接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值。
</>復制代碼
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區別
</>復制代碼
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()會將數組的數值轉化成字符串,然后根據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]
如果想要對數組降序、升序排序,就需要變通一點。原理:
</>復制代碼
function compare(a, b) {
if (a 大于 b) { // a、b的類型可以是任意的,比較規則自己定義
return -1;
}
if (a 小于 b) {
return 1;
}
// a 等于 b
return 0;
}
例如,1、如果是數字數組:
</>復制代碼
let numbers = [2, 31, 34, 1, 9];
numbers.sort(function(a, b) {
return a - b;
})
使用箭頭函數,可以使代碼更加簡潔:
</>復制代碼
let numbers = [2, 31, 34, 1, 9];
numbers.sort((a, b) => a - b)
2、數組對象
</>復制代碼
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 }
];
// 根據value排序
items.sort(function (a, b) {
return a.value - b.value;
});
// 根據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() 方法用來判斷一個數組是否包含一個指定的值,如果是返回 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、菜鳥教程
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109402.html
摘要:網上有很多前端的學習路徑文章,大多是知識點羅列為主或是資料的匯總,數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告,發送獲取資料,就能收到下載密碼,網盤地址在最下方,獲取教程和案例的資料。 前言 好的學習方法可以事半功倍,好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑,還要寫學習方法,還要發資料,干貨滿滿,準備接招。 網上有很多前端的學習路徑文章,大多是知...
摘要:插件開發初體驗懶加載前言閑來無事,想自己開發一個簡單的懶加載插件,能力的提升我覺得是可以通過編寫插件實現,研究了一下官網的插件編寫。 Vue插件開發初體驗——(懶加載) 前言 閑來無事,想自己開發一個簡單的Vue懶加載插件,能力的提升我覺得是可以通過編寫插件實現,研究了一下官網的Vue插件編寫。馬上自己獨立開始編寫懶加載插件。 一、寫在前面 由于我在網上看了很多關于vue插件的實例,發...
摘要:功能三滴滴費用計算古人云細節決定成敗,一個良好的微信小程序往往就是一些細節打動人心,居然是模仿,雖做不到百分百,至少還是很希望一模一樣。 最近時常感嘆道:時間總是那么的快,轉瞬即逝。對于像我這種剛入門的小生來講,技術每天都在更新,框架也層出不窮,有時候還沒弄懂這個知識大牛們又推出了更好的技術。當然學習好的技術也是十分重要的。但是在學習之后怎樣才能夠得到自己想要的呢,一個好的建議便是靜...
摘要:個人認為單頁面應用的優勢相當明顯前后端職責分離,架構清晰前端進行交互邏輯,后端負責數據處理。上面的這種單頁面應用也有其相應的一種開發工作流,當然這種工作流也適合非單頁面應用進行產品功能原型設計。 未經允許,請勿轉載。本文同時也發布在我的博客。 (如果對SPA概念不清楚的同學可以先自行了解相關概念) 平時喜歡做點小頁面來玩玩,并且一直采用單頁面應用(Single Page Appl...
閱讀 1683·2021-11-15 11:37
閱讀 3413·2021-09-28 09:44
閱讀 1658·2021-09-07 10:15
閱讀 2791·2021-09-03 10:39
閱讀 2694·2019-08-29 13:20
閱讀 1299·2019-08-29 12:51
閱讀 2212·2019-08-26 13:44
閱讀 2131·2019-08-23 18:02
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要