js数组及原型上的方法

573 阅读8分钟

在 JavaScript 中,数组可以容纳任何类型的值,可以是字符串、数字、对象(object),甚至是其他数组(多维数组就是通过这种方式来实现的)\

空数组

给定一个空数组,里面默认的是undefined

var b = new Array(3)
console.log(...b)   //undefined undefined undefined

在js数组原型中有以下方法,也可以在原型扩展自定义方法 image.png

1. push() 添加到数组末尾

新添加的加到数组末尾,并返回修改后数组的长度,改变了原来的数组,新添加的元素可以是字符串、数字、数组

var arr = [1,2,3,4,5,6,7,8,9]
arr.push(10)
console.log(arr);               //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

2. unshift() 添加到数组开头

逐个添加到数组开头,并返回修改后数组的长度,改变了原来的数组,新添加的元素可以是字符串、数字、数组

var arr = [1,2,3,4]
arr.unshift(10)
console.log(arr);               //[10, 1, 2, 3, 4]

3. splice() 数组任意位置添加元素

在数组任意位置添加元素 ,该方法的返回值是被删除的数组,改变了原来的数组,新添加的元素可以是字符串、数字、数组

var arr = [1,2,3,4,5]
arr.splice(1,2,7)      //在下标为1的位置删除2个,并加入新元素7
console.log(arr);               //[1, 7, 4, 5]

1. pop() 删除数组末尾

改变了原来的数组,返回修改后数组的长度

var arr = [1,2,3,4,5]
arr.pop()      
console.log(arr);               // [1, 2, 3, 4]

2. splice() 数组任意位置删除元素

改变了原来的数组,返回修改后数组的长度

var arr = [1,2,3,4,5]
arr.splice(1,2)                 //在下标为1的位置删除2个
console.log(arr);               // [1, 4, 5]

3. shift() 删除数组中第一个元素

改变了原来的数组,返回修改后数组的长度

var arr = [1,2,3,4,5]  
console.log(arr.shift());    //1
console.log(arr);            //[2, 3, 4, 5]

1. flat() 把嵌套数组换成一个数组

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

2. toString() 把数组转换为字符串

原始数组不改变,数组中的元素之间用逗号分隔。

var arr = [1,2,3,4,5]
console.log(arr.toString());   //1,2,3,4,5
console.log(arr);              //[1, 2, 3, 4, 5]

3. toLocaleString() 把Date对象转换为字符串

var d=new Date();
var n=d.toLocaleString();
console.log(n);   //2022/7/28 15:43:36

1. at() 根据索引找值

可正可负,负的从后向前遍历

var arr = [1,2,3,4,5]
console.log(arr.at(2));     // 3
console.log(arr.at(-1));    // 5

2. indexOf() 根据值找索引

找不到显示-1,内部使用严格相等运算符(===)进行判断,这会导致对NaN的误判。

var arr = [1,2,3,4,5]
console.log(arr.indexOf(1));    // 0   数字1在下标为0的位置
console.log(arr.indexOf(2,3));  //-1   从3的位置查找2所处的位置,找不到为-1

3. lastIndexOf() 元素在数组中最后出现的位置

从该字符串的后面向前查找。如果要检索的元素没有出现,则该方法返回 -1。

var arr = [3,2,3,4,5,4]
console.log(arr.lastIndexOf(4));      //5    4在数组最后出现的位置是5
console.log(arr.lastIndexOf(3,4));    //2    从下标为4的位置向前找3最后出现的位置

4. includes() 数组是否包含指定的值

var arr = [1,2,3,4,5]
console.log(arr.includes(5));   //true
console.log(arr.includes(5,0));   //true  从下标为0的位置开始查找

5. find() 符合函数条件的数组元素

查找数组中符合条件的第一个元素,如果没有符合条件的元素,则返回undefined

var arr = [1,2,3,4,5]   
var sum = arr.find(item => item > 2)
console.log(sum);  //3    符合条件的第一个元素是3

5.1 findIndex() 符合函数条件的数组第一个元素

var arr = [1,2,3,4,5]   
var sum = arr.findIndex(item => item > 2)
console.log(sum);    //2    符合条件元素3,它的下标为2

5.2 findIndex() 符合函数条件的数组第一个元素下标

var arr = [1,2,3,4,5]   
var sum = arr.findIndex(item => item > 2)
console.log(sum);    //2    符合条件元素3,它的下标为2

5.3 findfindLast() 符合函数条件的数组最后一个元素

var arr = [1,2,3,4,5]   
var sum = arr.findLast(item => item > 2)
console.log(sum);    //5

5.4 findfindLast() 符合函数条件的数组最后一个元素下标

var arr = [1,2,3,4,5] 
var sum = arr.findLastIndex(item => item > 2)
console.log(sum);    //4

6. some() 元素是否满足指定条件

some() 方法会依次执行数组的每个元素:如果有一个元素满足条件返回true , 剩余的元素不会再执行检测。如果没有满足则返回false。不会改变原始数组。不会对空数组进行检测。

var arr = [1,2,3,4,5]
var sum = arr.some(item => {
        return item > 5
})
console.log(sum);   //false    没有大于5,返回false

7. every() 元素是否都满足指定条件

测数组所有元素是否都符合指定条件。如果数组中检测到有一个元素不满足,则返回 false ,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回 true。不会对空数组进行检测。不会改变原始数组。

var arr = [1,2,3,4,5]
var sum = arr.every((value) => {
        return value > 2 	//1、2不满足大于2	
})
console.log(sum);   //false

遍历

1. entries() 遍历键值对

是一个键值对存在

var arr = [1,2,3,4,5]
var a = arr.entries()  //Array Iterator {}
var b = a.next()       //{value: Array(2), done: false}
while(!b.done) {
        console.log(b.value);
        b = a.next()
}  //  [0, 1], [1, 2] ,[2, 3]
var arr = [1,2,3,4,5]
for(obj of arr.entries()){
        console.log(obj);
}

2. forEach() 遍历元素

调用数组的每个元素,并将元素传递给回调函数。参数第一个是value,第二个是index,原始数组不变

var arr = [1,2,3,4,5]
arr.forEach((value,index) => {
        console.log(index,value); //0 1   1 2   2 3
})

3. keys() 遍历数组中的key(键)

var arr = [1,2,3,4,5]
console.log(arr.keys());    //Array Iterator {}
for (obj of arr.keys()){
        console.log(obj);    //0,1,2,3,4
}

4.map() 处理数组的每个元素

返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。原始数组不变

var arr = [1,2,3,4,5]
var sum = arr.map((value) => {
        return value*value; 			
})
console.log(sum);   //[1, 4, 9, 16, 25]
console.log(arr);   //[1, 2, 3, 4, 5]

5. reduce() 数组元素计算为一个值(从左到右)

累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

var arr = [1,2,3,4,5]
var sum = arr.reduce((sum,value) => {
        return sum += value		//1+1+2+3+4+5
},1)                                   //初始值为1
console.log(sum);   //16
console.log(arr);   //[1, 2, 3, 4, 5]

6. reduceRight() 数组元素计算为一个值(从右到左)

和reduce一样,不过从右向左加

7. values()

var arr = [1,2,3,4,5]
console.log(arr.values());   //Array Iterator {}
for (obj of arr.values()){ 
        console.log(obj); // 1 2 3 4 5
}

截取

1. copyWithin()

会修改原数组里面的内容,返回新的数组

var arr = [1,2,3,4,5]
var le  = arr.copyWithin(1,2,4)   //从下标2到4的位置值为[3,4],换到下标为1的位置
console.log(le);     //  [1, 3, 4, 4, 5]
console.log(arr);     // [1, 3, 4, 4, 5]

2. fill() 填充并截取

var arr = [1,2,3,4,5]
arr.fill(5)          //[5, 5, 5, 5, 5] 
arr.fill(5,1,3)      // [1, 5, 5, 4, 5] 从截取下标1到3(不包括)的位置,并把5填充进去
console.log(arr);  

3. slice() 截取

截取的位置返回新数组,原始数组还是不变

var arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.slice(1,3));    //从下标为1到3(不包括)截取返回新数组 [2, 3]
console.log(arr);                //  [1, 2, 3, 4, 5, 6, 7, 8, 9]

合并

1. concat()

参数可以是数组,也可以是数字、字符。返回一个新的数组,不会改变原来的数组。

var arr = [1,2,3,4,5]
var arr1 = [1,2,3,4,5,6]
var le  = arr.concat(arr1)   //将arr1追加到arr后面
console.log(arr);            //[1, 2, 3, 4, 5]
console.log(le);             // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 6]

2. join() 拼接数组

把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的。原始数组不变

var arr = [1,2,3,4,5]
console.log(arr.join("or"));    // 数组中的用or拼接  1or2or3or4or5
console.log(arr);                //  [1, 2, 3, 4, 5]

排序

1. reverse()反转

反转原来的数组中的列表,原数组内容也会反转

var arr = [1,2,3,4,5]
console.log(arr.reverse())  //[5, 4, 3, 2, 1]
console.log(arr);    //[5, 4, 3, 2, 1]

2. sort() 排序

排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。会改变原始数组!

var arr = [5,1,8,2,6,6,0]
console.log(arr.sort())  //[0, 1, 2, 5, 6, 6, 8]
console.log(arr);    //[0, 1, 2, 5, 6, 6, 8]

自定义升序

var arr = [5,1,8,2,6,6,0]
console.log(arr);    //[5, 1, 8, 2, 6, 6, 0]
arr.sort((x,y) =>{
        return x-y
})
console.log(arr);    //[0, 1, 2, 5, 6, 6, 8]

过滤

1. filter()

创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,返回一个新数组,元素中里内容不变

var arr = [1,2,3,4,5]
var newArr = arr.filter(function(index,value){
        return value >= 3
})
console.log(newArr);  //[4,5]

map()和forEach()区别?

forEach将计算出的结果遍历出来,而map是生成一个新数组。forEach不能用变量接收,map可以

var arr = [1,2,3,4,5]
-------forEach
arr.forEach((value) => {
        console.log( value*value); 		//1 4 9 16 25
})
-------map
var sum = arr.map((value) => {
        return value*value; 		//[1, 4, 9, 16, 25]
})
console.log(sum);   //[1, 4, 9, 16, 25]

ES6 为 Array 增加了一些静态函数和原型

Array.of()

用于将一组值,转换为数组,原数组不变。参数数字个数不少于2个时,才会返回由参数组成的新数组

var arr = "hello world"
var sum = Array.of(arr)
console.log(sum);  //['hello world']
console.log(arr);  //hello world

Array.from()

对象形式的转为数组键必须是'0','1'这种形式,提供map功能

var obj = {
        '0' : 'zs',
        '1': 20,
        length:2
}
var sum = Array.from(obj)
var arr = [1,2,3,4,5]
var sum1 = Array.from(arr)
console.log(sum);   // ['zs', 20]
console.log(sum1);  // [1, 2, 3, 4, 5]

...扩展运算符

var arr = [1,2,3,4,5]
console.log(...arr);       //1 2 3 4 5
var res = []
res.push(...arr)
console.log(res);  //[1, 2, 3, 4, 5]

ES6 明确将空位转为undefined