数组的相关方法

最新推荐文章于 2024-07-14 15:54:59 发布

tie1234

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量92

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/tie1234/article/details/126507775

版权

数组数组的相关方法

会改变原数组的方法	不会改变原数组的方法	ES6新增(没写)
pop()	forEach()	find() findLast()
push()	map()	findIndex() findLastIndex()
unshift()	filter()	map()
shift()	indexOf() lastIndexOf()	filter()
sort()	reduce() reduceRight()	every()
reverse()	join()	some()
splice()	concat()	fill()
	slice()	includes()
	every()	flat()
	some()	forEach()
		reduece() reduceRight()

数组的创建

// 1.字面量创建 
var arr = ['成员1'，'成员2'，...]
// 2.构造函数创建 
var arr = new Array('成员1'，'成员2'，...)
// 当使用构造函数创建，但参数只有一个且为数字时，会被当成数组长度
var arr = new Array(5)
// console.log(arr) : (5)[empty x 5]
// 创建使用 fill() 方法，赋初值
// fill(number,start,end)
三个参数：
	number ： 用于填充的值
    start ： 填充的起始序列号(可不写)
    number ： 填充的结束序列号(可不写)
// 默认全为 0 
var arr = new Array(5).fill(0)

// 创建二维数组
var arr = new Array(10);
for (var i = 0; i < arr.length; i++) {
  arr[i]=new Array(8);
//不一定写for循环赋值，还可以直接赋值，在数量有限的情况下
  for (var j = 0; j < 8; j ++) {
    a[i][j]=i+j;
  }

数组的转换

// ES6 语法
// Array.of() 将参数中所有值作为元素形成数组。
let arr = Array.of(1,2,3,4) //[1,2,3,4]

// Array.from() 将类数组对象或可迭代对象转化为数组。
// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

数组的方法

1.join(‘xxx’)：将数组中的元素用参数(xxx)拼接成为一个字符串不会改变原数组

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）

2.push()：在数组末尾添加参数(不限制)，返回新数组的长度会改变原数组

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

3.pop()：删除数组的最后一项，返回删除的那一项会改变原数组

var arr = ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

4.shift()：删除数组的第一项，返回删除的那一项会改变原数组

var arr = ["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

5.unshift()：向数组开头添加数据，返回新数组长度会改变原数组

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

6.sort()：对数组进行排序，参数为一个函数会会改变原数组

var arr = [13,24,51,3]
console.log(arr.sort(compare)) // [3, 13, 24, 51]
function compare(value1,value2){
   if (value1 < value2) {
		return -1; // 后 < 前 降序
	} 
    else if (value1 > value2) {
		return 1; // 后 > 前 降序
	} 
    else {
		return 0;
	}
}

// 箭头函数
console.log(arr.sort((a,b) => {
    return a - b  // 后 - 前 升序
}))
console.log(arr.sort((a,b) => {
    return b - a  // 前 - 后 降序
}))

7.reverse()：反转数组顺序会改变原数组

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

8.concat()：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将参数添加到这个副本的末尾，最后返回新数组。在没有传参的情况下，它只是复制当前数组并返回副本。不会改变原数组

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

// 传二维数组的情况
var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

9.slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组不会改变原数组

arr.slice(start) // 返回从下标为 start 开始到数组末尾的新数组
arr.slice(start,end) // 返回从下标为 start 开始到下标为 end 的新数组 (不包括 end )

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

10.splice()：多种用法，返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。会改变原数组

删除

arr.splice(start , num) // 从下标为 start 的位置删除 num项

添加

arr.splice(start , 0 , 3) // 在下标为 start 的位置插入 3 ，删除 0 个元素
arr.splice(start , 0 , 3,5,6)  // 在下标为 start 的位置插入 3,5,6 ，删除 0 个元素 ,看做整体插入

替换

// 删除某个位置的元素，再向该位置添加 == 替换
arr.splice(start , 1 , 3,5,6)  // 在下标为 start 的位置插入 3,5,6 ，删除 1 个元素

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

11.indexOf()：接收两个参数，第一个为需要查找的项，第二个为起始索引的位置(可不写) ，从开头向后找不会改变原数组

12.lastIndexOf()：接收两个参数，第一个为需要查找的项，第二个为起始索引的位置(可不写) ，从末尾向前找不会改变原数组

// 找到第一个匹配的项就返回 index 序列号 ，没找到 则返回 -1
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

13.forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数，无返回值，默认三个参数不会改变原数组

// 三个参数分别为 x(形参，列表项)  index(每一项的序列号，下标,不可改)  a(形参, 数组本身)
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

// 箭头函数
arr.forEach((item,index,a) => console.log(item + '|' + index + '|' + (a === arr)))

14.map()：映射，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。不会改变原数组

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

// 箭头函数
var arr2 = arr.map(item => item**2)

15.fliter()：过滤器，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。不会改变原数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

// 箭头函数
var arr2 = arr.filter(item => item>4)

16.every()：判断是否数组的每一项都满足某条件，是则返回 true，否则返回 false 不会改变原数组

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

// 箭头函数
var flag = arr.every(item => item>4)

17.some()：判断数组中有满足某条件的项，只要有一项满足条件，就会返回true。不会改变原数组

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

// 箭头函数
var flag = arr.some(item => item>3)

18.reduce()：从数组的第一项开始，逐个遍历到最后。不会改变原数组

19.reduceRight():从数组的最后一项开始，向前遍历到第一项。不会改变原数组

reduce(function(),sum) //参数：第一个是在每一项上调用的函数，第二个（可选的）作为归并基础的初始值。
reduceRight(function(),sum) //参数：第一个是在每一项上调用的函数，第二个（可选的）作为归并基础的初始值
function(pre,cur,index,arr) // 函数的 4 个参数：前一个值、当前值、项的索引和数组对象
// 两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

// 箭头函数
var sum = values.reduce((before,item,index,arr) => {
  return before + item
} , 2)  // 2 表示 sum 的初始值
console.log(sum);