JavaScript數組扁平化怎么實現

這篇“JavaScript數組扁平化怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript數組扁平化怎么實現”文章吧。

常用數組操作方法

push末尾追加元素

/**
 * @param push 將一個或多個元素添加到數組的末尾，返回該數組的新長度
 *
 * 集合apply和call合并數組
 *
 */
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刪除數組末尾元素

/**
 *
 * @param pop 方法從數組中刪除最后一個元素，返回值是該元素。
 *
 * 如果數組是空數組，那么返回的是undefined
 *
 */
let user = ["zhangsan", "lisi"];
console.log(user.pop()); //	lisi
console.log(user); //	["zhangsan"]
let empArray = [];
console.log(empArray.pop()); //	undefined

sort排序

/**
 *
 * @param sort
 *
 * 使用原地算法對數組的元素進行排序，并返回數組。
 * 默認排序順序是在將元素轉換為字符串，然后比較它們的UTF-16代碼單元值序列時構建的
 * 由于它取決于具體實現，因此無法保證排序的時間和空間復雜性。
 *
 * arr.sort([compareFunction])
 *
 * @param compareFunction
 *
 * 用來指定按某種順序進行排列的函數。
 * 如果省略，元素按照轉換為的字符串的各個字符的Unicode位點進行排序。
 *
 * 如果沒有指明 compareFunction ，那么元素會按照轉換為的字符串的諸個字符的Unicode位點進行排序。
 * 例如 "Banana" 會被排列到 "cherry" 之前。
 * 當數字按由小到大排序時，9 出	* 現在 80 之前，但因為（沒有指明 compareFunction），比較的數字會先被轉換為字符串，所以在Unicode順序上 "80" 要比 "9" 要靠前。
 * 如果指明了 compareFunction ，那么數組會按照調用該函數的返回值排序。即 a 和 b 是兩個將要被比較的元素：
 * 如果 compareFunction(a, b) 小于 0 ，那么 a 會被排列到 b 之前；
 * 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相對位置不變。
 * 備注： ECMAScript 標準并不保證這一行為，而且也不是所有瀏覽器都會遵守（例如 Mozilla 在 2003 年之前的版本）；
 * 如果 compareFunction(a, b) 大于 0 ， b 會被排列到 a 之前。
 * compareFunction(a, b) 必須總是對相同的輸入返回相同的比較結果，否則排序的結果將是不確定的。
 *
 * firstEl
 * 第一個用于比較的元素。
 * secondEl
 * 第二個用于比較的元素
 *
 */
/**
 *
 * 基本用法
 *
 * */

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數組開頭添加元素 && unshift數組開頭刪除元素

/**
 *
 * @param shift
 * 從數組中刪除第一個元素，并返回該元素的值,如果刪除空數組，返回值是undefined
 *
 * @param unshift
 * 方法將一個或多個元素添加到數組的開頭，并返回該數組的新長度
 *
 * */
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"]

數組合并concat

/**
 *
 * @param concat
 *
 * 方法用于合并兩個或多個數組。返回值是新數組，原數組不會發生更改
 *
 * 注：數組合并是淺拷貝
 *
 */
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
 *
 * 返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1，
 * 常用于判斷數組是否存在某個元素
 *
 * @param includes
 *
 * 判斷一個數組是否包含一個指定的值，返回值是布爾值 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反轉數組

/**
 *
 * @param reverse
 *
 * 反轉數組元素，將原有數組倒敘顯示，會改變元素的元素位置
 *
 */
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"]

數組切割成字符串join

/**
 *
 * @param join
 *
 * 根據傳入的參數字符串，對數組進行切割，返回值是使用參數拼接元素的字符串
 * 如果數組只有一個元素，則不使用分割符號
 *
 */
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操作數組，替換，刪除，新增

slice使用的范圍較廣，不同的參數可以實現對數組的刪除，新增和替換等，使用的時候需要注意參數的具體使用方法

/**
 *
 * @param slice
 *
 * 返回一個新的數組對象，
 * 這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。原始數組不會被改變。
 *
 * @param begin
 * 提取起始處的索引（從 0 開始），從該索引開始提取原數組元素。
 * 如果該參數為負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2) 表示提取原數組中的倒數第二個元素到最后一個元素（包含最后一個元素）。
 * 如果省略 begin，則 slice 從索引 0 開始。
 * 如果 begin 超出原數組的索引范圍，則會返回空數組
 *
 * @param end
 *
 * 提取終止處的索引（從 0 開始），在該索引處結束提取原數組元素。
 * slice 會提取原數組中索引從 begin 到 end 的所有元素（包含 begin，但不包含 end）。
 * slice(1,4) 會提取原數組中從第二個元素開始一直到第四個元素的所有元素 （索引為 1, 2, 3的元素）。
 * 如果該參數為負數， 則它表示在原數組中的倒數第幾個元素結束抽取。
 * slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數第二個元素）。
 * 如果 end 被省略，則 slice 會一直提取到原數組末尾。如果 end 大于數組的長度，slice 也會一直提取到原數組末尾。
 *
 */
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[, ...]]]])
 *
 * 通過刪除或替換現有元素或者原地添加新的元素來修改數組,并以數組形式返回被修改的內容。此方法會改變原數組
 *
 * 由被刪除的元素組成的一個數組。如果只刪除了一個元素，則返回只包含一個元素的數組。如果沒有刪除元素，則返回空數組。
 *
 * @param start
 *
 * 指定修改的開始位置,默認從下標0開始。
 * 如果超出了數組的長度，則從數組末尾開始添加元素；
 * 如果是負值，則表示從數組末位開始的第幾位（從-1計數，這意味著-n是倒數第n個元素并且等價于array.length-n）；
 * 如果負數的絕對值大于數組的長度，則表示開始位置為第0位。
 *
 * @param deleteCount
 *
 * 整數，表示要移除的數組元素的個數。
 * 如果 deleteCount 大于 start 之后的元素的總數，則從 start 后面的元素都將被刪除（含第 start 位）。
 * 如果 deleteCount 被省略了，
 * 或者它的值大于等于array.length - start(也就是說，如果它大于或者等于start之后的所有元素的數量)，
 * 那么start之后數組的所有元素都會被刪除。
 *
 * 如果 deleteCount 是 0 或者負數，則不移除元素。這種情況下，至少應添加一個新元素。
 * @param item1, item2, ...
 *
 * 要添加進數組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數組元素
 *
 */
const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb"); // 下表為1，插入一個元素
console.log(months); // ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, "May"); // 替換下標為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校驗數組所有元素

/**
 *
 * @param every
 * 測試一個數組內的所有元素是否都能通過某個指定函數的測試,返回值是布爾值 true or false
 * 備注：若收到一個空數組，此方法在任何情況下都會返回 true。
 *
 * arr.every(callback(element[, index[, array]])[, thisArg])
 * callback
 * 用來測試每個元素的函數，它可以接收三個參數：
 *
 * @param element 用于測試的當前值。
 * @param index可選 用于測試的當前值的索引。
 * @param array可選 調用 every 的當前數組。
 *
 * every 方法為數組中的每個元素執行一次 callback 函數，直到它找到一個會使 callback 返回 false 的元素。
 * 如果發現了一個這樣的元素，every 方法將會立即返回 false。
 * 否則，callback 為每一個元素返回 true，every 就會返回 true。
 *
 * callback 只會為那些已經被賦值的索引調用。不會為那些被刪除或從未被賦值的索引調用。
 * callback 在被調用時可傳入三個參數：元素值，元素的索引，原數組。
 * 如果為 every 提供一個 thisArg 參數，則該參數為調用 callback 時的 this 值。
 * 如果省略該參數，則 callback 被調用時的 this 值，在非嚴格模式下為全局對象，在嚴格模式下傳入 undefined。
 *
 *
 * every 不會改變原數組。
 * every 遍歷的元素范圍在第一次調用 callback 之前就已確定了。
 * 在調用 every 之后添加到數組中的元素不會被 callback 訪問到。
 * 如果數組中存在的元素被更改，則他們傳入 callback 的值是 every 訪問到他們那一刻的值。
 * 那些被刪除的元素或從來未被賦值的元素將不會被訪問到。
 *
 * */
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // true

some 測試數組中是不是至少有1個元素通過了被提供的函數測試。返回值是布爾值

/**
 *
 * @param some 測試數組中是不是至少有1個元素通過了被提供的函數測試。返回值是布爾值
 *
 * */
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0; //確認偶數
console.log(array.some(even)); // true;

深層次遞歸數組flat

/**
 * @param flat	按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回。
 *
 * var newArray = arr.flat([depth])
 * @depth  指定要提取嵌套數組的結構深度，默認值為 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，可展開任意深度的嵌套數組
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遍歷數組

/**
 * @param map
 *
 * 創建一個新數組，這個新數組由原數組中的每個元素都調用一次提供的函數后的返回值組成
 *
 * */
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);
console.log(map1); // [2, 8, 18, 32]

以上就是關于“JavaScript數組扁平化怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。