站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        經(jīng)典技巧之JavaScript數(shù)組操作(整理分享)

        本篇文章給大家?guī)砹岁P(guān)于JavaScript中數(shù)組的相關(guān)操作,主要包括Array對象原型方法以及常用操作去重、扁平化、排序等,希望對大家有幫助。

        經(jīng)典技巧之JavaScript數(shù)組操作(整理分享)

        JavasScript數(shù)組操作, 主要包括Array對象原型方法以及常用操作去重、扁平化、排序等

        Array.prototype

        forEach

        arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

        • callback為數(shù)組中每個元素執(zhí)行的函數(shù), 該函數(shù)接收一至三個參數(shù)

        • currentValue數(shù)組中正在處理等當(dāng)前元素的索引

        • array可選[表示正在操作的數(shù)組]

        • thisArg可選[當(dāng)執(zhí)行回調(diào)函數(shù)時, 用作this的值, 當(dāng)使用箭頭函數(shù)時此參數(shù)將被忽略]

        forEach()對數(shù)組的每一個元素執(zhí)行一次給定的函數(shù)

        let arr = [1, 2, 3, 4, 5]; let obj = {a: 1}; arr.forEach(function(currentValue, index, array) {   console.log("當(dāng)前值:", currentValue);// 1   console.log("當(dāng)前值索引:", index);// 0   console.log("當(dāng)前處理數(shù)組:", array); // (5)[1, 2, 3, 4, 5]   console.log("當(dāng)前this指向:", this);// {a: 1}   console.log("結(jié)束一次回調(diào), 無需返回值");   console.log(""); }, obj); console.log(arr);// [1, 2, 3, 4, 5]不改變原數(shù)組

        map

        arr.map(callback(currentValue [, index [, array]])[, thisArg])

        • callback為數(shù)組每個元素執(zhí)行的函數(shù), 該函數(shù)接收一至三個參數(shù)

        • currentValue數(shù)組中正在處理的當(dāng)前元素

        • index可選[數(shù)組中正在處理的當(dāng)前元素的索引]

        • array可選[正在操作的數(shù)組]

        • thisArg可選[當(dāng)執(zhí)行回調(diào)函數(shù)時, 用作this的值, 當(dāng)使用箭頭函數(shù)時此函數(shù)將被忽略]

        map()創(chuàng)建一個新數(shù)組, 其結(jié)果是該數(shù)組中的每個元素都被調(diào)用一次提供的函數(shù)后的返回值

        let arr = [1, 2, 3, 4, 5]; let obj = {a: 1}; let newArr = arr.map(function(currentValue, index, array) {   console.log("當(dāng)前值:", currentValue);// 1   console.log("當(dāng)前值索引:", index);// 0   console.log("當(dāng)前處理數(shù)組:", array); // (5)[1, 2, 3, 4, 5]   console.log("當(dāng)前this指向: ", this); // {a: 1}   console.log("");   return crrentValue + 10; }, obj); console.log(newArr);// [11, 12, 13, 14, 15] console.log(arr);// [1, 2, 3, 4, 5]不改變原數(shù)組

        push

        arr.push(element1[,…, elementN])

        elementN被添加到數(shù)組末尾的元素

        push()將一個或多個元素添加到數(shù)組的末尾, 并返回該數(shù)組的長度

        let arr = ['a', 'b', 'c', 'd', 'e']; console.log(arr.push('f', 'g'));// 7 console.log(arr);// ["a", "b", "c", "d", "e", "f", "g"] 改變原數(shù)組

        pop

        pop()數(shù)組中刪除最后一個元素, 并返回該元素的值, 當(dāng)數(shù)組為空時返回undefind, 此方法更改數(shù)組的長度

        let arr = [1, 2, 3, 4, 5]; console.log(arr.pop());// 5 console.log(arr);// [1, 2, 3, 4] 改變原數(shù)組

        shift

        shift()從數(shù)組中刪除第一個元素, 并返回該元素的值, 該方法會改變原數(shù)組

        let arr = [1, 2, 3, 4, 5] console.log(arr.shift());// 1 console.log(arr);// [2, 3, 4, 5] 改變原數(shù)組

        unshift

        arr.unshift(element1[, …, elementN])

        unshift()將一個或多個元素添加到數(shù)組的開頭, 并返回該數(shù)組的長度, 該方法修改原有數(shù)組

        let arr = [1, 2, 3, 4, 5] console.log(arr.unshift(-1, 0));// 7 console.log(arr);// [-1, 0, 1, 2, 3, 4, 5] 改變原數(shù)組

        splice

        arrar.splice(start[, deleteCount[, item1[, item2[, …]]]])

        start指定修改的開始位置, 如果超出了數(shù)組的長度, 則從數(shù)組末尾開始添加內(nèi)容; 如果是負值, 則表示從數(shù)組末尾開始的第幾位(從-1計數(shù), 這意味著-n是倒數(shù)第n個元素并且等價于array.length-1); 如果負數(shù)的絕對值大于數(shù)組的長度, 則表示開始位置為第0位

        deleteCount可選[整數(shù)], 表示要移除的數(shù)組元素的個數(shù). 如果deleteCount大于start之后元素的總數(shù), 則從statr后面的元素都將被刪除(含第start位). 如果deleteCount被省略, 或者它的值大于等于array.length-start(也就是說, 如果它大于或者等于start之后的所有元素的數(shù)量), 那么start之后數(shù)組的所有元素都會被刪除

        item1, item2, …可選[要添加進數(shù)組的元素, 從start位置開始. 如果不指定, 則splice()將只刪除數(shù)組元素]

        splice()通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組, 并以數(shù)組形式返回被修改的內(nèi)容, 此方法會改變原數(shù)組

        let arr = [1, 2, 3, 4, 5] console.log(arr.splice(1, 1));// [2] console.log(arr);// [1, 3, 4, 5] 改變原數(shù)組

        slice

        arr.slice([begin[, end]])

        begin可選[提取起始處的索引] 從該索引開始提取原數(shù)組元素. 如果該參數(shù)為負數(shù), 則表示從原數(shù)組中的倒數(shù)第幾個元素開始提取, 如果省略begin, 則slice從索引0開始; 如果begin大于原數(shù)組的長度, 則會返回空數(shù)組

        end可選[提取終止處的索引], 在該索引處結(jié)束提取原數(shù)組元素. slice會提取原數(shù)組中索引從begin到end到所有元素, 包含begin, 但不包含end. 如果end 被省略, 則slice會一直提取到原數(shù)組末尾, 如果end大于數(shù)組的長度, slice也會一直提取到數(shù)組末尾

        slice()返回一個新的數(shù)組對象, 這一對象是一個由begin和end決定到原數(shù)組的淺拷貝, 包括begin, 不包括end, 原始數(shù)組不會被改變

        let arr = [1, 2, 3, 4, 5]; console.log(arr.sclice(1, 3));// [2, 3] console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        concat

        let new_array = old_array.concat(value[, value2[, …[, valueN]]])

        valueN可選[], 將數(shù)組或值連接成新數(shù)組, 如果省略了valueN參數(shù), 則concat會返回一個它所調(diào)用的已存在的數(shù)組的淺拷貝

        concat()用于合并兩個或多個數(shù)組, 此方法不會更改現(xiàn)有數(shù)組, 而是返回一個新數(shù)組

        let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = arr1.concat(arr2); console.log(arr3);// [1, 2, 3, 4, 5, 6] console.log(arr1);// [1, 2, 3] 不改變原數(shù)組

        join

        arr.join([separator])

        separator可選 指定一個字符串來分隔數(shù)組的每個元素

        join()將一個數(shù)組(或一個類數(shù)組對象)的所有元素連接成一個字符串并返回這個字符串. 如果數(shù)組只有一個項目, 那么將返回該項目而不使用分隔符

        let arr = ['a', 'b', 'c']; console.log(arr.join("&"));// a&b&c console.log(arr);// ["a", "b", "c"] 不改變數(shù)組

        sort

        arr.sort([compareFunction])

        compareFunction可選 用來指定按某種順序進行排列的函數(shù). 如果省略, 元素按照轉(zhuǎn)換為第字符串的各個字符的Unicode進行排序

        firstEl第一個用于比較的元素

        secondEl第二個用于比較的元素

        sort()用原地算法對數(shù)組的元素進行排序, 并返回數(shù)組. 默認排序順序是在將元素轉(zhuǎn)換為字符串, 然后比較它們的UTF-16代碼單元值序列時構(gòu)建的

        let arr = [1, 2, 3, 4, 5]; console.log(arr.sort((a, b) => b - a));// [5, 4, 3, 2, 1] console.log(arr);// [5, 4, 3, 2, 1] 改變原數(shù)組

        reverse

        reverse()將數(shù)組中元素的位置顛倒, 并返回該數(shù)組, 該方法會改變原數(shù)組

        let arr = [1, 2, 3, 4, 5]; console.log(arr.reverse());// [5, 4, 3, 2, 1] console.log(arr);// [5, 4, 3, 2, 1] 改變原數(shù)組

        every

        every()測試一個數(shù)組內(nèi)的所有元素是否都能通過某個指定函數(shù)的測試, 返回一個布爾值

        let arr = [1, 2, 3, 4, 5]; console.log(arr.every(currentValue => currentValue > 1));// false console.log(arr);// 不改變原數(shù)組

        some

        some()測試數(shù)組中是不是至少有1個元素通過了提供的測試函數(shù), 返回一個Boolean類型的值

        let arr = [1, 2, 3 ,4 ,5]; console.log(arr.some(currentValue => currentValue > 1));// true console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        filter

        filter()創(chuàng)建一個新數(shù)組, 其包含通過所提供的測試函數(shù)的所有元素

        let arr = [1, 2, 3, 4, 5]; console.log(arr.filter(currentValue => currentValue > 2));// [3, 4, 5] console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        find

        find()返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值, 否則返回undefined

        let arr = [1, 2, 3, 4, 5]; console.log(arr.find(currentValue => currentValue > 2));// 3 console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        findIndex

        findIndex()返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引, 否則返回-1

        let arr = [1, 2, 3, 4, 5]; console.log(arr.findIndex(currentValue => currentValue > 2));// 2 console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        includes

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

        let arr = [1, 2, 3, 4, 5]; console.log(arr.includes(2));// true console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        indexOf

        indexof()返回指定元素在數(shù)組中的第一個索引, 否則返回-1

        let arr = [1, 2, 3, 4, 5]; console.log(arr.indexOf(2));// 1 console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        lastIndexOf

        lastIndexOf()返回指定元素在數(shù)組中的的最后一個索引, 如果不存在則返回-1

        let arr = [1, 2, 3, 2, 1]; console.log(arr.lastIndexOf(2));// 3 console.log(arr);// [1, 2, 3, 2, 1] 不改變原數(shù)組

        fill

        fill()用一個固定值填充一個數(shù)組從起始索引到終止索引到全部元素, 不包括終止索引

        let arr = [1, 2, 3, 4, 5]; console.log(arr.fill(0, 0, 5));// [0, 0, 0, 0, 0] console.log(arr);// [0, 0, 0, 0 ,0] 改變數(shù)組

        flat

        flat()會按照一個可指定的深度遞歸遍歷數(shù)組, 并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回

        let arr = [1, 2, [3, 4, [5]]]; console.log(arr.flat(2));// [1, 2, 3, 4, 5] console.log(arr);// [1, 2, [3, 4, [5]]] 不改變原數(shù)組

        keys

        keys()返回一個包含數(shù)組中每個索引鍵的Array Iterator對象

        let arr = [1, 2, 3, 4, 5]; let iterator = arr.keys(); for (const key of iterator) {   console.log(key);   // 0   // 1   // 2 } console.log(arr);// [1, 2, 3, 4, 5] 不改變原數(shù)組

        常用操作

        數(shù)組去重

        使用對象

        let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3]; let obj = {}; let newArr = []; arr.forEach(v => {   if(!ogj[v]) {     ogj[v] = 1;     newArr.push(v);   } }) console.log(newArr);// [1, 2, 3, 5]

        使用Set

        let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3]; let newArr = Array.from(new Set(arr)); // let newArr = [...(new Set(arr))];// 使用ES6解構(gòu)賦值 console.log(newArr);// [1, 2, 3, 5]

        扁平化數(shù)組

        使用flat

        let arr = [1, 2, [3, 4, [5]]]; let newArr = arr.flat(2); console.log(newArr);// [1, 2, 3, 4, 5]

        遞歸實現(xiàn)flat

        function _flat(arr, maxN = 1, curN = 0) {   let newArr = [];   if (curN >= maxN) return arr;   arr.forEach((v, i, array) => {     if (Array.isArray(v)) {       newArr.push(..._flat(v, maxN, curN + 1));     } else newArr.push(v);   })   return newArr; } let arr = [1, 2, [3, 4, [5]]]; let newArr = _flat(arr, 1);// 扁平化一層 console.log(newArr);// [1, 2, 3, 4, [5]]

        統(tǒng)計一個字符串中出現(xiàn)最多的字符

        使用數(shù)組將字符的ASCII碼作為key制作桶

        let s = "ASASRKIADAA"; let arr = []; let base = 65;// A-Z 65-90 a-z 97-122 Array.prototype.forEach.call(s, (v) => {   let ascii = v.charCodeAt(0) - base;   if (arr[ascii]) {     ++arr[ascii];   } else arr[ascii] = 1; }) let max = 0; let maxIndex = 0; arr.forEach((v, i) => {   if (v > max) {     max = v;     maxIndex = i;   } }) console.log(String.fromCharCode(maxIndex + base), arr[maxIndex]);// A 5

        找出數(shù)組中的最大值

        遍歷數(shù)組

        let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3]; let max = -Infinity; arr.forEach(v => {   if (v > max) max = v; }) console.log(max);// 5

        使用Math

        let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3]; let max = Math.max(...arr); console.log(max);// 5

        使用reduce

        let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3]; let max = arr.reduce((a, v) => {   return a > v ? a : v; }) console.log(max);// 5

        拷貝數(shù)組

        遍歷數(shù)組使用push

        let arr = [1, 2, 3, 4, 5]; let newArr = []; arr.forEach(v => newArr.push(v)); console.log(newArr);// [1, 2, 3, 4, 5]

        使用concat

        let arr = [1, 2, 3, 4, 5]; let newArr = [].concat(arr); console.log(newArr);// [1, 2, 3, 4, 5]

        使用slice

        let arr = [1, 2, 3, 4, 5]; let newArr = arr.slice(0); console.log(newArr);// [1, 2, 3, 4, 5];

        隨機打亂一個數(shù)組

        隨機交換N次

        function randomInt(a, b) {   return Number.parseInt(Math.random() * (b-a) + a); } let arr = [1, 2, 3, 4, 5]; let N = arr.length; arr.forEach((v, i, arr) => {   let ran = randomInt(0, N);   [arr[i], arr[ran]] = [arr[ran], arr[i]]; }) console.log(arr);

        隨機排序

        let arr = [1, 2, 3, 4, 5]; arr.sort((v1, v2) => {   return Math.random() >= 0.5 ? 1 : -1; }) console.log(arr);

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 久久国产香蕉一区精品| 亚洲国产精品一区第二页| 中文成人无字幕乱码精品区| 午夜影视日本亚洲欧洲精品一区| 无码人妻精品一区二区三区99仓本| 国产亚洲精品精品国产亚洲综合| 国99精品无码一区二区三区| 午夜精品久久久久久毛片| 久久夜色撩人精品国产| 国产精品日日摸夜夜添夜夜添1国产精品va欧美精 | 中文字幕av日韩精品一区二区| 国产精品自产拍高潮在线观看| 国产69精品久久久久777| 久久99久久99精品免视看动漫| 亚洲精品成人久久久| 久久久久国产日韩精品网站| 国产精品亚洲美女久久久| 一区二区三区四区精品视频| 国产91精品一区二区麻豆网站| 精品调教CHINESEGAY| 亚洲AV无码久久精品成人| 亚洲精品永久在线观看| 日韩福利视频精品专区| 青草国产精品视频。| 久久这里只有精品视频99| 久久99精品久久久久久不卡| 精品亚洲欧美无人区乱码| 精品伦精品一区二区三区视频| 国产精品内射视频免费| 国产精品成人观看视频| 国产精品黄页免费高清在线观看| 91久久精品国产91性色也| 99久久人人爽亚洲精品美女| 亚洲国产精品久久66| 高清在线国产午夜精品| 国产成人毛片亚洲精品| 国产精品自在在线午夜福利| 国产精品一级AV在线播放| 精品视频一区二区三区四区五区| 精品无码一级毛片免费视频观看 | 国产精品制服丝袜亚洲欧美|