数组的处理

push(向数组结尾添加元素)
unshift(向数组的头部添加元素)
splice(向数组中间添加元素)
数组参数位置调换
$set更新
concat数组拼接
sort排序
reverse颠倒数组中元素的顺序
数组转字符串
fill 替换数组内元素，用新元素替换掉数组内的元素
数组的查找
pop 删除数组元素
slice
every 检查数组元素是否符合指定条件(所有)
some 检查数组元素是否符合指定条件（只要有一个）
apply 创建数组
from 创建数组
of 一组值转换为数组
includes 判断数组中是否存在该元素
filter 过滤指定元素
forEach&for 数组循环
map 循环并返回一个新数组
其他数组去重方法
===================================代码示例===========================================
let arr1 = [1,2,3,4,5]
let arr2 = [
    {name:'jerry',age:25},
    {name:'tom',age:25},
]

 

 

// push
arr1.unshift(6) // arr1 = [6,1,2,3,4,5]
// unshift
arr1.unshift(6) // arr1 = [6,1,2,3,4,5]
// splice(在index处添加一个元素)
arr1.splice(2,0,6) // arr1 = [1,2,6,3,4,5]

// 取数组中的某个元素(开始的下标，取的length个数),得到一个新数组
arr1.splice(2,1) // [3]
arr1.splice(2,2) // [3,4]
复制代码
//  数组参数位置调换
// 1. 
[arr1[2], arr1[3]] = [arr1[3], arr1[2]]
console.log(arr1)    // [1, 2, 4, 3, 5]

// 2.
let val = arr1[2]
arr1[2] = arr1[3]
arr1[3] = val
console.log(arr)     // [1, 2, 4, 3, 5]

// 3.
arr1[3] = [arr1[2],arr1[2]=arr1[3]][0]
console.log(arr1)     // [1, 2, 4, 3, 5]

//4.
arr1.splice(2, 1, ...arr1.splice(3, 1, arr1[2]))
console.log(arr1)    // [1, 2, 4, 3, 5]
复制代码
// $set更新数组   (避免页面延迟响应)
// 参数1：要处理的数组；参数2：指定的下标处；参数3：要插入的值

this.$set(arr1,1,6) // [1,6,2,3,4,5]
// concat  （数组拼接）

let a = [1,2,3]
let b = ["4","5","6"]
let c = a.concat(b) // 得到一个新数组c [1,2,3,"4","5","6"]
// sort  （排序，按照 Unicode code 位置排序，默认升序）

let arr = ['cherries','apples','bananas']
let newArr = arr.sort()  //  ['apples','bananas','cherries']

let arr2 = [1,10,21,2]
let newArr2 = arr2.sort()  // [1,10,2,21]
// reverse   (颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组)

let newArr = arr1.reverse()  // [5,4,3,2,1]
console.log(arr)  // [5,4,3,2,1]
复制代码
// 数组转字符串

// join   (数组转字符串,是通过指定的分隔符进行分隔，默认使用’,'号分割，不改变原数组)

let str = arr1.join()  // '1,2,3,4,5'
console.log(arr1)   // [1,2,3,4,5]


// toString 

let str1 = arr1.toString()  //  '1,2,3,4,5'
console.log(arr1)   //  [1,2,3,4,5]


// toLocaleString

let str2 = arr1.toLocaleString()  // '1,2,3,4,5'
console.log(arr1)   //  [1,2,3,4,5]

// toLocaleString方法功能还可以：
// 根据本地时间把 Date 对象转换为字符串
var d=new Date();
var n=d.toLocaleString(); // 2023/8/30 09:38:36

// 将数字转转变成千分位格式
let num=12345678;
console.log(num.toLocaleString()); // 12,345,678

// 把时间转换为24小时制

// 2021/10/12 下午7:39:06
console.log(new Date().toLocaleString() 

// 2021/10/12 19:39:06
console.log(new Date().toLocaleString('chinese',{hour12:false}))
复制代码
// fill   （替换数组内元素，用新元素替换掉数组内的元素，可以指定替换下标范围）
// 参数1：替换的新值；参数2：开始位置；参数3：结束位置

let newArr = arr1.fill('a',0,1)  // ['a',2,3,4,5]
复制代码
// 数组查找

// find   (查找数组中第一个符合条件的元素，并返回终止搜索)

let arr = [1,2,'3',4,'5']
let val = arr.find(n => typeof n === "number")  // 1   
let val2 = arr.find(n => typeof n === "string")  // 3

// findIndex   (查找数组中第一个符合条件的元素下标，并返回终止搜索)

let arr = [1,2,'3',4,'5']
let arrIndex = arr.findIndexn => typeof n === "number")  // 0   
let arrIndex2 = arr.findIndexn => typeof n === "string")  // 2   


// indexOf   （从前往后查找,返回下标索引值）
// 两个参数：查找的值、查找起始位置(不存在，返回 -1 ；存在，返回位置。)

let arr = [1,1,2,2,1]
console.log(arr.indexOf(1))  // 0
console.log(arr.indexOf(3))  // -1  不存在
console.log(arr.indexOf(1,2))  // 4


// lastIndexOf   (从后往前查找,返回下标索引值)
// 两个参数：查找的值、查找起始位置(不存在，返回 -1 ；存在，返回位置。)

let arr = [2,5,9,2]
arr.lastIndexOf(2)   // 3
arr.lastIndexOf(7)   // -1
arr.lastIndexOf(2,2)  // 0
复制代码
// pop ()方法用于删除数组列表中的最后一个元素，并返回该元素本身

arr1.pop() // 5
console.log(arr1); // [1,2,3,4]
复制代码
// slice 取指定元素后，返回新的数组
// arr.slice(begin, end)    
// begin:从该索引开始提取原数组元素，如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取,此参数缺省为0，如果 begin 超出原数组的索引范围，则会返回空数组
// end:在该索引处结束提取原数组元素，slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）,如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）
// 如果 end 被省略或者大于数组的长度，则 slice 会一直提取到原数组末尾。


let newArr = arr1.slice() // [1,2,3,4,5]
arr1.slice(1) // [2, 3, 4, 5]
arr1.slice(1,3) // [2, 3]---前包后不包
// arr1.slice(1,3) 取索引1-3直接的元素，包含1但不包含3，也就是索引1,2所对应的元素，故返回[2,3]
复制代码
复制代码
// every 方法用于检测数组中所有元素是否都符合指定条件（通过函数提供）
// 如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回true
// every()不会对空数组进行检测
// every() 不会改变原始数组

function isBig(element,index,array){
    return  element < 10
}
arr1.every(isBig) // 数组arr1中每个元素都小于10，所以返回true
复制代码
复制代码
// some 用于检测数组中的元素是否满足指定条件
// 如果一个元素满足条件就返回true，不会继续执行后面的元素判断；没有满足条件则返回false
// 不会改变原数组
// some() 不会对空数组进行检测
// some() 不会改变原始数组

function isBig(element,index,array){
    return  element > 10
}

arr1.some(isBig)   // false 数组的每个元素值都小于10


// 注意：
// every() 每一项都返回true才返回true
// some() 只要有一项返回true就返回true
复制代码
复制代码
// apply 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数
// Array.apply(thisArg, [argsArray])
// thisArg:必选,在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装
// argsArray:可选,一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象

let arr = Array.apply(null,{length:5})  
 // [undefined,undefined,undefined,undefined,undefined]
// 这里length：5 表示数组长度，好处是数组的每个参数都输undefined，数组可以遍历


// 也可以指定数组的某个元素
let arr = Array.apply(null,{0:'a',1:'b',2:'c',length:5})  // ['a', 'b', 'c', undefined, undefined]
复制代码
复制代码
// from 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组
// 如果对象是数组返回 true，否则返回 false
// Array.from(object, mapFunction, thisValue)
// object：必需，要转换为数组的对象
// mapFunction：可选，数组中每个元素要调用的函数
// thisValue：可选，映射函数(mapFunction)中的 this 对象


// 通过字符串创建一个数组
let arr = Array.from("RUNOOB") // ['R', 'U', 'N', 'O', 'O', 'B']

// 返回集合中包含的对象数组(相当于赋值数组)
let arr = [1,2,3]
let newArr = Array.from(arr)
console.log(arr,newArr) //  [1, 2, 3] , [1, 2, 3] 

// 使用箭头语法和映射函数更改元素的值
let arr=Array.from([1, 2, 3], x => x * 10)
console.log(arr) // [10, 20, 30]

// 实现数组去重
// 不考虑兼容性，去重的方法代码最少，这种方法还无法去掉‘{}’空对象
// 这个方法就是将一个类数组对象，或者可遍历对象转换成一个真正的数组

let arr = Array.from(new Set([1, 2, 1, 2]))
console.log(arr) //[1, 2]

// 可以将一个伪数组转换为数组
// 这里key值不按常理出牌所以无效，但规定了 length 所以输出: 四个 undefined
let obj={'a':1,'b':2,'c':3,'length':4}
let arr=Array.from(obj, item => {return item})
console.log(arr) // [undefined, undefined, undefined, undefined]

// 指定特定索引值
let obj = {  
    '0': 1,  
    '3': 2,  
    'length': 4,
}
let newObj= Array.from(obj, item => {return item})
console.log(newObj); // [1, undefined, undefined, 2]
复制代码
// of 用于将一组值，转换为数组
// 返回参数值组成的数组。如果没有参数，就返回一个空数组

Array.of(); // []
Array.of(3); // [3]
Array.of(3,2,1); // [3,2,1]
复制代码
// includes  用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

let site = ['runoob', 'google', 'taobao'];

site.includes('runoob');  //  true 
site.includes('baidu'); // 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, 2, NaN].includes(NaN); // true
复制代码
复制代码
// filter 返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
// filter() 不会对空数组进行检测
// filter() 不会改变原始数组


// 返回数组 ages 中所有元素都大于 18 的元素:
let ages = [32, 33, 16, 40];function checkAdult(age) {    return age >= 18;}
function myFunction() {    
  document.getElementById("demo").innerHTML = ages.filter(checkAdult);}

// 返回数组被2整除的
let arr = [1, 6, 9, 10, 100, 25];
let result = arr.filter(function (item) {
if (item % 2 == 0) {
    return true;
    } else {
    return false;
}
})

let result2 = arr.filter(v=>v%2 === 0)
console.log(result); // [6, 10, 100]
console.log(result2); // [6, 10, 100]

// 数据去重
// 1.利用filter
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}

// 2.利用hasOwnProperty 判断是否存在对象属性
function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
 
复制代码
复制代码
// forEach 遍历数组

let res = arr1.forEach(function(item,index) {
      console.log(`数组第${index+1}个元素是${item}`);
})

console.log(res); //forEach的返回值为undefined
// forEach()是没有返回值的
// 运行结果
// 数组第1个元素是1
// 数组第2个元素是2
// 数组第3个元素是3
// 数组第4个元素是4
// 数组第5个元素是5


// forEach()和for循环区别:
// 1. forEach() 方法无法提前结束
// 如，想要找到某个满足条件的元素时就结束循环。在for语句中可以这样写

let arr = [1, 3, 5, 13, 2];
// for语句执行了2次，在第二次找到了数组中的3，并结束了循环
for (var i = 0; i < arr.length; i++) {
            if (arr[i] == 3) {
                console.log("找到了3，并结束循环");
                break;
            }
            console.log(arr[i]);
}
// forEach在找到3之后用return结束遍历，结果仍然输出了3后面的元素
arr.forEach(function(item) {
            if (item == 3) {
                return console.log('找到了3，但未结束遍历');
            }
            console.log(item);
})
// 终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足某种条件然后返回某值，可以用一般的for循环实现，或者用Array.every()或者Array.some()

// 2.forEach()会跳过空值
let arr1 = [1, 3, , 13, 2];
let arr2 = [1, 3, , 13, 2];

for (var i = 0; i < arr1.length; i++) {
            arr1[i] = 2;
}
console.log(arr1); // 运行结果【2,2,2,2,2】

let newarr = [];
arr2.forEach(function(item, index) {
            // item = 2; //修改不了原数组            
            arr2[index] = 2;
})
console.log(arr2);  // 运行结果【2,2,empty,2,2】

// 可以发现，for循环对于数组中的空值进行了修改，而forEach()方法跳过了空值
// 要注意的是，用forEach()方法修改数组元素不能使用item直接修改，item相当于从arr2中复制过来的值，并不是真正指向原数组arr2里面的元素。所以我们想要修改原数组的每个元素必须通过拿到它的索引值index去进行修改:arr2[index] = 2


// 3.forEach()的循环次数由数组初始长度决定
// for循环时，向数组中添加数据，循环次数也增加了。而forEach()方法却只循环数组的初始长度


// 总结：forEach适用于只是进行集合或数组遍历，for则在较复杂的循环中效率更高

// for 循环数组去重
// 1.利用for 嵌套for 实现数组去重（es5最常用）

　　function unique(arr){
　　　　for(var i=0; i<arr.length;i++){
　　　　　　for(var j=i+1;j<arr.length;j++){
　　　　　　　　if(arr[i] == arr[j]){
　　　　　　　　　　arr.splice(j,1);
　　　　　　　　　　j--;
　　　　　　　　}
　　　　　　}
　　　　}
　　　　retrun arr;
　　}

   // 2.利用indexOf去重
let arr = [1,2,2,3,4,5,6]
function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
console.log(unique(arr)) // [1,2,3,4,5,6]

   // 3.利用sort()去重

   // 利用 sort() 排序方法，然后根据排序后的结果进行遍历及相邻元素比对。

function unique(arr) {
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
   // 4.利用includes去重
function unique(arr) {
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}


复制代码


复制代码


// map 通过指定函数处理数组中的每一个元素，
// 一个处理后的新数组
// map()不会对空数组进行检测
// map()不会改变原始数组

let arr=[1,2,3]
arr.amp(x => x*2); //  [2, 4, 6]
console.log(arr) // [1,2,3]

// 利用map 数据结构去重


function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  } 
  return array ;
} 


复制代码


 


复制代码


// 其他的数组去重方法

// 1. 利用递归去重
function unique(arr) {
        var array= arr;
        var len = array.length;

    array.sort(function(a,b){   //排序后更加方便去重
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //递归loop，然后数组去重
        }
    }
    loop(len-1);
    return array;
}

// 2.利用 reduce+includes
function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}

// 3.[...new Set(arr)]
[...new Set(arr)] 


复制代码


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 


 








        

            posted on 
 
一名小学生呀 
阅读(35) 
评论(0) 
编辑 
收藏 
举报

        

    











    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                · 
                求数组平均值 === 箭头函数用法
            

            

                · 
                对象的处理
            

            

                · 
                JavaScript中操作数组的方法汇总
            

            

                · 
                数组的常用方法
            

            

                · 
                最新数组方法
            

    





    

    阅读排行：
    

 ·          地球OL攻略 —— 某应届生求职总结
        

 ·          周边上新：园子的第一款马克杯温暖上架
        

 ·          Open-Sora 2.0 重磅开源！
        

 ·          提示词工程——AI应用必不可少的技术
        

 ·          .NET周刊【3月第1期 2025-03-02】
        



    

    





	






	
		




    
        

            
                

                    
                        

                            
                                <
                            
                            2025年3月
                            
                                >
                            
                        

                    
                

            		
        

    

        日
        一
        二
        三
        四
        五
        六
    

            

                            23
                            24
                            25
                            26
                            27
                            28
                    
                        1
                    
            

                

                        
                            2
                        
                            
                                3
                            
                            
                                4
                            
                            
                                5
                            
                            
                                6
                            
                            
                                7
                            
                        
                            8
                        
                

                

                        
                            9
                        
                            
                                10
                            
                            
                                11
                            
                            
                                12
                            
                            
                                13
                            
                            
                                14
                            
                        
                            15
                        
                

                

                        
                            16
                        
                            
                                17
                            
                            
                                18
                            
                            
                                19
                            
                            
                                20
                            
                            
                                21
                            
                        
                            22
                        
                

                

                        
                            23
                        
                            
                                24
                            
                            
                                25
                            
                            
                                26
                            
                            
                                27
                            
                            
                                28
                            
                        
                            29
                        
                

                

                        
                            30
                        
                            
                                31
                            
                            
                                1
                            
                            
                                2
                            
                            
                                3
                            
                            
                                4
                            
                        
                            5
                        
                

    


		

导航




		

统计




		

		































                    
	


			
			
			
			
			 

	



    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae