JavaScript數(shù)組常用方法解析及數(shù)組扁平化
前言
數(shù)組作為在開發(fā)中常用的集合,除了for循環(huán)遍歷以外,還有很多內(nèi)置對(duì)象的方法,包括map,以及數(shù)組篩選元素filter等。
注:文章結(jié)尾處附深層次數(shù)組扁平化方法操作。
作為引用數(shù)據(jù)類型的一種,在處理數(shù)組Array的時(shí)候,我們需要考慮到深拷貝和淺拷貝的情況
可以參考以下文章:
一、常用數(shù)組操作方法
push末尾追加元素
/** * @param push 將一個(gè)或多個(gè)元素添加到數(shù)組的末尾,返回該數(shù)組的新長度 * * 集合apply和call合并數(shù)組 * */ let user = ["zhangsan", "lisi"]; console.log(user.push("xiaoming")); // 3 console.log(user); // ["zhangsan", "lisi", "xiaoming"] let user1 = ["xiaowang", "xiaoming"]; let user2 = ["zhangsan", "lisi"]; console.log(Array.prototype.push.apply(user1, user2)); // 4 console.log(user1); // ["xiaowang", "xiaoming", "zhangsan", "lisi"]
pop刪除數(shù)組末尾元素
/** * * @param pop 方法從數(shù)組中刪除最后一個(gè)元素,返回值是該元素。 * * 如果數(shù)組是空數(shù)組,那么返回的是undefined * */ let user = ["zhangsan", "lisi"]; console.log(user.pop()); // lisi console.log(user); // ["zhangsan"] let empArray = []; console.log(empArray.pop()); // undefined
sort排序
/** * * @param sort * * 使用原地算法對(duì)數(shù)組的元素進(jìn)行排序,并返回?cái)?shù)組。 * 默認(rèn)排序順序是在將元素轉(zhuǎn)換為字符串,然后比較它們的UTF-16代碼單元值序列時(shí)構(gòu)建的 * 由于它取決于具體實(shí)現(xiàn),因此無法保證排序的時(shí)間和空間復(fù)雜性。 * * arr.sort([compareFunction]) * * @param compareFunction * * 用來指定按某種順序進(jìn)行排列的函數(shù)。 * 如果省略,元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。 * * 如果沒有指明 compareFunction ,那么元素會(huì)按照轉(zhuǎn)換為的字符串的諸個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。 * 例如 "Banana" 會(huì)被排列到 "cherry" 之前。 * 當(dāng)數(shù)字按由小到大排序時(shí),9 出 * 現(xiàn)在 80 之前,但因?yàn)椋]有指明 compareFunction),比較的數(shù)字會(huì)先被轉(zhuǎn)換為字符串,所以在Unicode順序上 "80" 要比 "9" 要靠前。 * 如果指明了 compareFunction ,那么數(shù)組會(huì)按照調(diào)用該函數(shù)的返回值排序。即 a 和 b 是兩個(gè)將要被比較的元素: * 如果 compareFunction(a, b) 小于 0 ,那么 a 會(huì)被排列到 b 之前; * 如果 compareFunction(a, b) 等于 0 , a 和 b 的相對(duì)位置不變。 * 備注: ECMAScript 標(biāo)準(zhǔn)并不保證這一行為,而且也不是所有瀏覽器都會(huì)遵守(例如 Mozilla 在 2003 年之前的版本); * 如果 compareFunction(a, b) 大于 0 , b 會(huì)被排列到 a 之前。 * compareFunction(a, b) 必須總是對(duì)相同的輸入返回相同的比較結(jié)果,否則排序的結(jié)果將是不確定的。 * * firstEl * 第一個(gè)用于比較的元素。 * secondEl * 第二個(gè)用于比較的元素 * */ /** * * 基本用法 * * */ const user = ["zhangsan", "lisi", "xiaoming", "xiaowang"]; user.sort(); console.log(user); // ["lisi", "xiaoming", "xiaowang", "zhangsan"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // [1, 100000, 21, 30, 4] /** * * 自定義排序方法 * * */ var numbers = [4, 2, 5, 1, 3]; let sortFun = function (a, b) { return a - b; }; numbers.sort(sortFun); console.log(numbers); // [1, 2, 3, 4, 5]
shift數(shù)組開頭添加元素 && unshift數(shù)組開頭刪除元素
/** * * @param shift * 從數(shù)組中刪除第一個(gè)元素,并返回該元素的值,如果刪除空數(shù)組,返回值是undefined * * @param unshift * 方法將一個(gè)或多個(gè)元素添加到數(shù)組的開頭,并返回該數(shù)組的新長度 * * */ let user = ["zhangsan", "lisi"]; console.log(user.shift()); // zhangsan console.log(user); // ["lisi"] let empArray = []; console.log(empArray.shift()); // undefined let user1 = ["xiaoming", "xiaowang"]; console.log(user1.unshift("xiaoming1", "xiaowang1")); // 4 console.log(user1); // ["xiaoming1", "xiaowang1", "xiaoming", "xiaowang"]
數(shù)組合并concat
/** * * @param concat * * 方法用于合并兩個(gè)或多個(gè)數(shù)組。返回值是新數(shù)組,原數(shù)組不會(huì)發(fā)生更改 * * 注:數(shù)組合并是淺拷貝 * */ let user = ["zhangsan", "lisi"]; let user1 = [["xiaowang"], { name: "xiaoming" }]; console.log(user.concat(user1)); // ["zhangsan","lisi",["xiaowang"],{name: "xiaoming"}] console.log(user); // ["zhangsan", "lisi"]
indexOf查找元素 && includes查找元素是否存在
/** * * @param indexOf * * 返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引,如果不存在,則返回-1, * 常用于判斷數(shù)組是否存在某個(gè)元素 * * @param includes * * 判斷一個(gè)數(shù)組是否包含一個(gè)指定的值,返回值是布爾值 true 或者 false * */ let user = ["zhangsan", "lisi"]; console.log(user.indexOf("lisi")); // 1 console.log(user.indexOf("xiaoming")); // -1 let user1 = ["zhangsan", ["xiaowang"], { name: "xiaoming" }]; console.log(user1.includes("zhangsan")); // true console.log(user1.includes(["xiaowang"])); // false console.log(user1.includes({ name: "xiaoming" })); // false
reverse反轉(zhuǎn)數(shù)組
/** * * @param reverse * * 反轉(zhuǎn)數(shù)組元素,將原有數(shù)組倒敘顯示,會(huì)改變?cè)氐脑匚恢? * */ let user = ["zhangsan", "lisi", "xiaoming"]; console.log(user.reverse()); // ["xiaoming", "lisi", "zhangsan"] console.log(user); // ["xiaoming", "lisi", "zhangsan"] let user1 = ["zhangsan", ["xiaowang", "lisi"], { name: "xiaoming" }]; console.log(user1.reverse()); // [{name: "xiaoming"},["xiaowang", "lisi"],"zhangsan"]
數(shù)組切割成字符串join
/** * * @param join * * 根據(jù)傳入的參數(shù)字符串,對(duì)數(shù)組進(jìn)行切割,返回值是使用參數(shù)拼接元素的字符串 * 如果數(shù)組只有一個(gè)元素,則不使用分割符號(hào) * */ let user = ["zhangsan", "lisi", "xiaoming"]; console.log(user.join(" ")); // zhangsan lisi xiaoming console.log(user.join("")); // zhangsanlisixiaoming console.log(user.join(",")); // zhangsan,lisi,xiaoming console.log(user.join({ a: 1 })); // zhangsan[object Object]lisi[object Object]xiaoming console.log(user); // ["zhangsan", "lisi", "xiaoming"]
slice操作數(shù)組,替換,刪除,新增
slice使用的范圍較廣,不同的參數(shù)可以實(shí)現(xiàn)對(duì)數(shù)組的刪除,新增和替換等,使用的時(shí)候需要注意參數(shù)的具體使用方法
/** * * @param slice * * 返回一個(gè)新的數(shù)組對(duì)象, * 這一對(duì)象是一個(gè)由 begin 和 end 決定的原數(shù)組的淺拷貝(包括 begin,不包括end)。原始數(shù)組不會(huì)被改變。 * * @param begin * 提取起始處的索引(從 0 開始),從該索引開始提取原數(shù)組元素。 * 如果該參數(shù)為負(fù)數(shù),則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開始提取,slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(包含最后一個(gè)元素)。 * 如果省略 begin,則 slice 從索引 0 開始。 * 如果 begin 超出原數(shù)組的索引范圍,則會(huì)返回空數(shù)組 * * @param end * * 提取終止處的索引(從 0 開始),在該索引處結(jié)束提取原數(shù)組元素。 * slice 會(huì)提取原數(shù)組中索引從 begin 到 end 的所有元素(包含 begin,但不包含 end)。 * slice(1,4) 會(huì)提取原數(shù)組中從第二個(gè)元素開始一直到第四個(gè)元素的所有元素 (索引為 1, 2, 3的元素)。 * 如果該參數(shù)為負(fù)數(shù), 則它表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。 * slice(-2,-1) 表示抽取了原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(不包含最后一個(gè)元素,也就是只有倒數(shù)第二個(gè)元素)。 * 如果 end 被省略,則 slice 會(huì)一直提取到原數(shù)組末尾。如果 end 大于數(shù)組的長度,slice 也會(huì)一直提取到原數(shù)組末尾。 * */ const animals = ["ant", "bison", "camel", "duck", "elephant"]; console.log(animals.slice(2)); // Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // Array ["camel", "duck"] console.log(animals.slice(1, 5)); // Array ["bison", "camel", "duck", "elephant"] console.log(animals.slice(-2)); // Array ["duck", "elephant"] console.log(animals.slice(2, -1)); // Array ["camel", "duck"] console.log(animals.slice()); // Array ["ant", "bison", "camel", "duck", "elephant"] /** * * @param splice(start[, deleteCount[, item1[, item2[, ...]]]]) * * 通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組 * * 由被刪除的元素組成的一個(gè)數(shù)組。如果只刪除了一個(gè)元素,則返回只包含一個(gè)元素的數(shù)組。如果沒有刪除元素,則返回空數(shù)組。 * * @param start * * 指定修改的開始位置,默認(rèn)從下標(biāo)0開始。 * 如果超出了數(shù)組的長度,則從數(shù)組末尾開始添加元素; * 如果是負(fù)值,則表示從數(shù)組末位開始的第幾位(從-1計(jì)數(shù),這意味著-n是倒數(shù)第n個(gè)元素并且等價(jià)于array.length-n); * 如果負(fù)數(shù)的絕對(duì)值大于數(shù)組的長度,則表示開始位置為第0位。 * * @param deleteCount * * 整數(shù),表示要移除的數(shù)組元素的個(gè)數(shù)。 * 如果 deleteCount 大于 start 之后的元素的總數(shù),則從 start 后面的元素都將被刪除(含第 start 位)。 * 如果 deleteCount 被省略了, * 或者它的值大于等于array.length - start(也就是說,如果它大于或者等于start之后的所有元素的數(shù)量), * 那么start之后數(shù)組的所有元素都會(huì)被刪除。 * * 如果 deleteCount 是 0 或者負(fù)數(shù),則不移除元素。這種情況下,至少應(yīng)添加一個(gè)新元素。 * @param item1, item2, ... * * 要添加進(jìn)數(shù)組的元素,從start 位置開始。如果不指定,則 splice() 將只刪除數(shù)組元素 * */ const months = ["Jan", "March", "April", "June"]; months.splice(1, 0, "Feb"); // 下表為1,插入一個(gè)元素 console.log(months); // ["Jan", "Feb", "March", "April", "June"] months.splice(4, 1, "May"); // 替換下標(biāo)為4的元素 console.log(months); // ["Jan", "Feb", "March", "April", "May"] let del = months.splice(1, 1); // 刪除 console.log(del); // ["Feb"] console.log(months); // ["Jan", "April", "May"]
every校驗(yàn)數(shù)組所有元素
/** * * @param every * 測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測(cè)試,返回值是布爾值 true or false * 備注:若收到一個(gè)空數(shù)組,此方法在任何情況下都會(huì)返回 true。 * * arr.every(callback(element[, index[, array]])[, thisArg]) * callback * 用來測(cè)試每個(gè)元素的函數(shù),它可以接收三個(gè)參數(shù): * * @param element 用于測(cè)試的當(dāng)前值。 * @param index可選 用于測(cè)試的當(dāng)前值的索引。 * @param array可選 調(diào)用 every 的當(dāng)前數(shù)組。 * * every 方法為數(shù)組中的每個(gè)元素執(zhí)行一次 callback 函數(shù),直到它找到一個(gè)會(huì)使 callback 返回 false 的元素。 * 如果發(fā)現(xiàn)了一個(gè)這樣的元素,every 方法將會(huì)立即返回 false。 * 否則,callback 為每一個(gè)元素返回 true,every 就會(huì)返回 true。 * * callback 只會(huì)為那些已經(jīng)被賦值的索引調(diào)用。不會(huì)為那些被刪除或從未被賦值的索引調(diào)用。 * callback 在被調(diào)用時(shí)可傳入三個(gè)參數(shù):元素值,元素的索引,原數(shù)組。 * 如果為 every 提供一個(gè) thisArg 參數(shù),則該參數(shù)為調(diào)用 callback 時(shí)的 this 值。 * 如果省略該參數(shù),則 callback 被調(diào)用時(shí)的 this 值,在非嚴(yán)格模式下為全局對(duì)象,在嚴(yán)格模式下傳入 undefined。 * * * every 不會(huì)改變?cè)瓟?shù)組。 * every 遍歷的元素范圍在第一次調(diào)用 callback 之前就已確定了。 * 在調(diào)用 every 之后添加到數(shù)組中的元素不會(huì)被 callback 訪問到。 * 如果數(shù)組中存在的元素被更改,則他們傳入 callback 的值是 every 訪問到他們那一刻的值。 * 那些被刪除的元素或從來未被賦值的元素將不會(huì)被訪問到。 * * */ const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // true
some 測(cè)試數(shù)組中是不是至少有1個(gè)元素通過了被提供的函數(shù)測(cè)試。返回值是布爾值
/** * * @param some 測(cè)試數(shù)組中是不是至少有1個(gè)元素通過了被提供的函數(shù)測(cè)試。返回值是布爾值 * * */ const array = [1, 2, 3, 4, 5]; const even = (element) => element % 2 === 0; //確認(rèn)偶數(shù) console.log(array.some(even)); // true;
深層次遞歸數(shù)組flat
/** * @param flat 按照一個(gè)可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。 * * var newArray = arr.flat([depth]) * @depth 指定要提取嵌套數(shù)組的結(jié)構(gòu)深度,默認(rèn)值為 1。 * */ let arr1 = [1, 2, [3, 4]]; console.log(arr1.flat()); // [1, 2, 3, 4] let arr2 = [1, 2, [3, 4, [5, 6]]]; console.log(arr2.flat()); // [1, 2, 3, 4, [5, 6]] let arr3 = [1, 2, [3, 4, [5, 6]]]; console.log(arr3.flat(2)); // [1, 2, 3, 4, 5, 6] //使用 Infinity,可展開任意深度的嵌套數(shù)組 let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] let objArray = [{ name: "zhangsan", children: ["張三"] }]; console.log(objArray.flat(Infinity)); // [{ name: "zhangsan", children: ["張三"] }]
map遍歷數(shù)組
/** * @param map * * 創(chuàng)建一個(gè)新數(shù)組,這個(gè)新數(shù)組由原數(shù)組中的每個(gè)元素都調(diào)用一次提供的函數(shù)后的返回值組成 * * */ const array1 = [1, 4, 9, 16]; const map1 = array1.map((x) => x * 2); console.log(map1); // [2, 8, 18, 32]
二、總結(jié)
到此這篇關(guān)于JavaScript數(shù)組常用方法解析和深層次js數(shù)組扁平化的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在JavaScript中模擬類(class)及類的繼承關(guān)系
眾所周知,JavaScript中沒有類,然而我們卻可以動(dòng)手實(shí)現(xiàn)一個(gè)擁有繼承特性的類,所以接下來我們要討論的便是在JavaScript中模擬類(class)及類的繼承關(guān)系:2016-05-05p5.js實(shí)現(xiàn)動(dòng)態(tài)圖形臨摹
這篇文章主要為大家詳細(xì)介紹了p5.js實(shí)現(xiàn)動(dòng)態(tài)圖形臨摹,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10javascript實(shí)現(xiàn)全角轉(zhuǎn)半角的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)全角轉(zhuǎn)半角的方法,涉及JavaScript字符串遍歷與編碼轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-01-01uniapp使用H5調(diào)試時(shí)跨域問題解決
本文主要介紹了uniapp使用H5調(diào)試時(shí)跨域問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07屏蔽網(wǎng)頁右鍵復(fù)制和ctrl+c復(fù)制的js代碼
解決的方法就是直接把網(wǎng)頁保存下來然后刪掉下面這段js代碼,然后就可以正常用右鍵菜單,也可以通過設(shè)置瀏覽器的安全級(jí)別到最高級(jí)別來解決問題2013-01-01javascript實(shí)現(xiàn)模擬時(shí)鐘的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)模擬時(shí)鐘的方法,涉及javascript操作時(shí)間實(shí)時(shí)顯示的相關(guān)技巧,需要的朋友可以參考下2015-05-05