【JS】数组方法汇总（工作常用）

置顶 已于 2023-07-27 11:42:51 修改
阅读量826 收藏 6
点赞数 2
分类专栏： JavaScript 笔记 文章标签： 数组方法 JavaScript
于 2021-01-20 17:27:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/112802222
版权

文章目录

一、会改变原数组方法

1.1、splice（增删改）

  • splice()方法可以删除、插入、替换数组中的元素。返回一个数组，里面包含了被删除的元素，没有则返回空数组
  • 语法：
/*
	start: 必填，指定修改的开始位置（从0计数）
	deleteCount：可选，为整数，表示要移除的数组元素的个数，从start 位置开始。
	itemN：可选，可多个，表示要添加进数组的元素，从start 位置开始。
*/
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

// 描述
- start 如果超出了数组的长度，则从数组末尾开始添加内容
- start 如果为负数，意味着-n是倒数第n个元素并且等价于array.length-n）；
- start 如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
- deleteCount 如果不填或者大于start 之后的元素的总数，则删除start 之后的所有元素
- deleteCount 如果是 0 或者负数，则不移除元素。
- itemN 如果不指定，则将只删除数组元素，不新增。

// 返回值
- 由被删除的元素组成的一个数组。
- 如果只删除了一个元素，则返回只包含一个元素的数组。
- 如果没有删除元素，则返回空数组。
  • 示例：
// 删除元素
let colors = ['red','green','blue'];
let removed = colors.splice(0,1);   // 删除一项
console.log(colors);    // ['green','blue']
console.log(removed);    // ['red'] 只有一个元素的数组

// 插入元素
let colors2 = ['red','green','blue'];
let removed2 = colors2.splice(1,0,'yellow','orange'); //在索引位置 1 插入两个元素
console.log(colors2);    // ['red','yellow','orange','green','blue']
console.log(removed2);   // [] 空数组

// 修改元素
let colors3 = ['red','green','blue'];
let removed3 = colors3.splice(1,1,'yellow','orange');    // 先删除后插入
console.log(colors3);    // ['red','yellow','orange','blue']
console.log(removed3);   // ['green'] 只有一个值的数组

1.2、shift（删除首项）

  • shift：删除数组第一项，并返回被删除的元素。
var arr = [1,2,3]
var val = arr.shift();
console.log('被删除的元素：', val)	// 1
console.log('改变后的元素：', arr)	// [2, 3]
// 不能在 log 这样打印被删除的元素，不然会默认执行一次
// console.log('被删除的元素：', arr.shift())

1.3、unshift（添加首项）

  • unshift：添加数组第一项，并返回新的数组长度。
var arr = [1, 2, 3]
var val = arr.unshift(0);
console.log('返回数组长度：', val)	// 4
console.log('改变后的数组：', arr)	// [0, 1, 2, 3]

1.4、pop（删除尾项）

  • pop：删除数组最后一项，并返回被删除的项。
var arr = [1, 2, 3]
var val = arr.pop();
console.log('返回数组长度：', val)	// 3
console.log('改变后的数组：', arr)	// [1, 2]

1.5、push（添加尾项）

  • push：添加数组最后一项，并返回新的数组长度。
var arr = [1, 2, 3]
var val = arr.push(4);
console.log('返回数组长度：', val)	// 4
console.log('改变后的数组：', arr)	// [1, 2, 3, 4]

1.6、sort（数组排序）

  • sort()：按照UTF-16代码单元值序列升序从新排列数组元素，即最小的值在前面，最大的值在后面
var arr = [1, 3, 2, 10]
var val = arr.sort();
console.log('val =', val)	// [1, 10, 2, 3]
console.log('arr =', arr)	// [1, 10, 2, 3]
  • 想直接使用sort对数字大小进行排序是不太可能的，因为它默认比较的是数组元素在unicode编码中的位置高低
  • 所以sort方法还可以接受一个比较函数，用返回值来判断哪个值该排在前面
compareFn(a, b) 返回值排序顺序
大于 0a 在 b 后，如 [b, a]
小于 0a 在 b 前，如 [a, b]
等于 0保持 a 和 b 原来的顺序
//升序排序
function  ascending(a, b){
    if(a < b){
        return -1;  
    }else if(a > b){
        return 1;   
    }else{
        return 0;   
    }
}
//降序排序
function descending(a, b){
    if(a < b){
        return 1;   
    }else if(a > b){
        return -1;  
    }else{
        return 0;   
    }
}
  • 比较函数可以适用于大多数数据类型，可以把它当做参数传给sort（）方法
let values = [1,0,5,15,10];
values.sort(ascending);  	// 调用升序函数 ascending()
console.log(values);    	// 打印数组：0,1,5,10,15
values.sort(descending);  	//调用降序函数 descending()
console.log(values);    	// 打印数组：15,10,5,1,0
  • 此外，这个比较函数也可以简写为一个箭头函数
let values = [1,0,5,15,10];
values.sort((a,b) => a < b ? -1 : a > b ? 1 : 0);  //调用升序函数
console.log(values);    //打印数组：0,1,5,10,15
values.sort((a,b) => a < b ? 1 : a > b ? -1 : 0);  //调用降序函数
console.log(values);    //打印数组：15,10,5,1,0
  • 如果数组的元素是number类型(如果不是，也先可以先转number，比如下例的时间类型)，比较函数还可以这样写：
//升序排序
function ascending(a, b){
    return a - b;
}
//降序排序
function descending(a, b){
    return b - a; // 等价于 -(a - b);
}

// 示例：
// 数值格式
[1,0,5,15,10].sort((a,b)=> a - b);	// 升序-小到大
[1,0,5,15,10].sort((a,b)=> b - a);	// 降序-大到小
// 日期格式
["2023-07-26 16:11:02", "2023-05-24 17:18:55"].sort((a,b)=> new Date(a) - new Date(b));	// 升序-小到大
["2023-07-26 16:11:02", "2023-05-24 17:18:55"].sort((a,b)=> new Date(b) - new Date(a));	// 降序-大到小

1.7、reverse（反转数组）

  • reverse()：只是仅仅将数组中的元素进行反向排列
var arr = [1, 3, 2]
var val = arr.reverse();
console.log('val =', val)	// [2, 3, 1]
console.log('arr =', arr)	// [2, 3, 1]

二、不改变原数组方法

2.1、at（索引取值）

  • at() 方法：接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。
  • 优势在于比length属性写法更简洁
  • 基本用法：
// 数组及数组元素。
const colors = ['red', 'green', 'blue'];

// 使用长度属性。
console.log(colors[colors.length-1]); // 'blue'
console.log(colors[colors.length-2]); // 'green'

// 使用 at() 方法。
console.log(colors.at(0)); // 'red'
console.log(colors.at(1)); // 'green'
console.log(colors.at(-1)); // 'blue'=

2.2、join（转字符串）

  • join() 方法：接收一个参数，即字符串分隔符，返回包含所有项的字符串
  • 语法：
/*
	separator：可选，指定一个字符串来分隔数组的每个元素
*/
arr.join([separator])

// 参数
- 如果 separator 不填， 数组元素用 逗号(,)分隔。
- 如果 separator 是空字符串 ("")，则所有元素之间都没有任何字符。
- 如果 separator 是未定义的 (undefined)，则数组元素用 逗号(,)分隔。
- 如果数据里面有元素为 undefined 或 null，它会被转换为空字符串。

// 返回值
- 一个所有数组元素连接的字符串
  1. 调用 join 方法可以得到与调用toSting方法相同的结果
  2. 如果不给join传入参数，或者传入的参数为undefined，则仍然使用‘,’号作为分隔符
let colors = ['red','greeen','blue'];

// 不传参数，默认","号分割
console.log(colors.join());	// 打印结果：red,greeen,blue	

// 参数为 undefined，默认","号分割
console.log(colors.join(undefined));	// 打印结果：red,greeen,blue	

// 传入指定字符串 +
console.log(colors.join('+'));	// 打印结果：red+greeen+blue

// 传入空字符串 ""
console.log(colors.join(''));	// 打印结果：redgreeenblue

// 数组中含有 undefined 和 null
console.log([undefined,2,null].join());	// 打印结果：,2,

2.3、concat（合并数组）

  • concat()方法：用于合并两个或多个数组，返回一个新数组，原数组不会改变。
  • 如果原数组含有对象的引用，被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。
  • 语法：
/*
	valueN: 数组和/或值，将被合并到一个新的数组中。
*/
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

// 描述
- 如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝
- 如果参数不是数组，则直接把他们添加到结果数组末尾
- 如果传入的是一个或多个数组，则concat（）会把这些数组的每一项都添加到结果数组。

// 返回值
- 新的 Array 实例。
  • 示例：
let colors = ['red','green','blue'];
// colors调用concat（）方法，传入字符串‘yellow’ 和 一个包含‘bleak’和‘brown’的数组。
let colors2 = colors.concat('yellow',['bleak','brown']);

console.log(colors);    //['red','green','blue']
console.log(colors2);   //['red','green','blue','yellow','bleak','brown']

2.4、slice（拷贝数组）

  • slice()方法：浅拷贝原数组，返回一个新数组，原数组不会改变。

  • 如果原数组含有对象的引用，被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

  • 语法：

/*
	begin: 可选，开始索引
	end:  可选，结束索引
*/
arr.slice([begin[, end]])

// 描述
- 返回从 begin 到 end 对应的所有元素，不包含 end 对应的元素。
- 如果参数有负数，那么就以数组长度加上这个负值的结果来确定位置（length + value）
- 如果省略 begin，则 slice 从索引 0 开始。
- 如果 begin 超出原数组的索引范围，则会返回空数组。
- 如果 end 小于 begin ，则返回空数组。
- 如果 end 被省略，则 slice 会一直提取到原数组末尾。
- 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

// 返回值
- 一个含有被提取元素的新数组。
  • 示例：
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

三、ES5 新增方法

迭代方法

  • ECMAScript为数组定义了5个迭代方法，这些方法都不会改变原数组。
  • 每个方法接收两个参数：以每一项为参数运行的函数，以及可选的作为函数运行上下文的作用域对象（影响函数中this的值）
  • 传递给每个方法的函数接收 3 个参数：数组元素(item)，元素索引(index)和数组本身(array)。
  • 因方法而异，这个函数的执行结果可能会也可能不会影响方法的返回值

3.1、filter（过滤数组）

  • filter()：对数组的每一项都运行传入的函数，函数返回true项会组成数组返回。
  • 语法：数组.filter(function (item,index,arr){});
  • 返回值：根据我们的条件过滤出来的新数组
  1. 适合从数组中筛选满足给定条件的元素
let numbers = [1,2,3,4,5,4,3,2,1];

let filterResult = numbers.filter((item,index,array) => item > 2);
console.log(filterResult);	//[3,4,5,4,3]

var arr[1,2,3,4,5];
var newArr = arr.filter(function(item,index,arr){
	//函数内胆三个参数和 forEach 一样
	//我们把我们的条件return 出去
	return item > 2;
});
console.log(newArr);	//[3,4,5]
  • 等价于
var arr = [1,2,3,4,5];
var newArr = [];
for(var i = 0; i < arr.length; i++){
	if(fn(arr[i],i,arr)){
		newArr.push(arr[i]);
	}
}
function fn(item,index,arr){
	return item > 2;
}
consolo.log(newArr);

解析：

  1. 调用filter（）返回的数组包含3,4,5,4,3，因为只有这些项传入的函数才返回 true

3.2、some（判断单项）

  • some()：对数组的每一项都运行传入的函数，如果有一项函数返回true，则返回 true
let numbers = [1,2,3,4,5,4,3,2,1];
let someResult = numbers.some((item,index,array) => item > 2);
console.log(someResult);	//true

3.3、every（判断全部）

  • every()：对数组的每一项都运行传入的函数，如果每一项函数都返回 true，则返回 true
let numbers = [1,2,3,4,5,4,3,2,1];
let everyResult = numbers.every((item,index,array) => item > 2);
console.log(everyResult);	//false

3.4、forEach（循环遍历）

  • forEach()：对数组的每一项都运行传入的函数，没有返回值
  • 语法：数组.forEach(function(item,index,arr){})
  1. 本质上，forEach（）方法相当于使用for循环遍历数组
  2. forEach（）的时候传递的那个函数，会根据数组的长度执行
  3. 数组的长度是多少，这个函数就会执行多少回
let numbers = [1,2,3,4,5,4,3,2,1];
let count=0;
numbers.forEach((item,index,array) =>{
	count++;
})
console.log(count);	//9

var arr = ['a','b','c'];
//forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回
arr.forEach(function(item,index,arr){
	//在这个函数内部
	//item就是数组红的每一项
	//index 就是每一项对应的索引
	//arr 就是原始数组
	console.log(item);
	console.log(index);
	console.log(arr);
});
  • 上面的代码就等价于
var arr = ['a','b','c'];
for(var i = 0; i < arr.length; i++){
	fn(arr[i],i,arr);
}
function fn(item,index,arr){
	console.log(item);
	console.log(index);
	console.log(arr);
}

3.5、map（遍历后返回）

  • map()：对数组的每一项都运行传入的函数，返回由每次函数调用的结果构成的新数组。
  • 语法：数组.map(function(item,index,arr){})
  • 返回值：一个新的数组
  1. 这个方法非常适合创建一个与原数组一一对应的新数组。
  2. 和forEach类似，只不过可以对数组的每一项进行操作，返回一个新的数组
let numbers = [1,2,3,4,5,4,3,2,1];

//将数组的每一项都乘以2，并返回一个包含所有结果的新数组mapResult
let mapResult = numbers.map((item,index,array) => item*2);
console.log(mapResult);	//[2, 4, 6, 8, 10, 8, 6, 4, 2]

var arr = ['a','b','c'];
// forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回

var newArr = arr.map(function(item,index,arr){
	//函数里面的三个参数和 forEach 一样
	//我们可以在这里操作数组中的每一项
	//return 操作后的每一项
	return item + '11';
})
console.log(newArr); // ["a11", "b11", "c11"]
  • 上面代码等价于
var arr = ['a','b','c'];
var newArr = [];
for(var i = 0; i < arr.length; i++){
	newArr.push(fn(arr[i],i,arr));
}
function fn(item,index,arr){
	return item + '11';
}
console.log(newArr);// ["a11", "b11", "c11"]

3.6、reduce（归并数组值）

归并方法

  • 归并方法都会迭代数组的所有项，并在此基础上构建一个最终返回值
  • 每个方法接收两个参数：以每一项为参数运行的函数，以及可选的以之为并归起点的初始值
  • 传给方法的函数接收4个参数：上一个并归值、当前项、当前项的索引、数组本身。
  • 这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。
  • 如果没有给这两个方法传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传递给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项
  • reduce()：从数组的第一项开始遍历到最后一项
  • reduceRight()：从数组的最后一项开始，遍历到第一项
  • 语法：
/*
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）	
    5、initialValue：可选参数，函数迭代的初始值
*/
arr.reduce((prev,cur,index,array) => {},[initialValue])

不设置 initialValue

let values = [1,2,3];

//累加数组中所有的值
let sum = values.reduce((prev,cur,index,array) => {
	console.log(prev,cur);
	/*
		左边是 prev，右边是 cur，由于没设置 initialValue，
		所以第一次 prev = 数组第一项，cur = 数组第二项
		1 2 ( prev + cur = 3 作为下一个 prev )
		3 3 ( prev + cur = 6 cur是最后一个元素，所以到处结束，并返回最终结果 )
	*/
	return prev + cur
});
console.log(sum);	// 6

设置 initialValue：

let values = [1,2,3];

//累加数组中所有的值
let sum = values.reduce((prev,cur,index,array) => {
	console.log(prev,cur);
	/*
		左边是 prev，右边是 cur，由于设置了 initialValue，
		所以第一次 prev = initialValue，cur = 数组第一项
		11 1 ( prev + cur = 12 作为下一个 prev )
		12 2 ( prev + cur = 14 作为下一个 prev )
		14 3 ( prev + cur = 17 cur是最后一个元素，所以到处结束，并返回最终结果 )
	*/
	return prev + cur
}, 11);
console.log(sum);	// 17

实例：

let values = ["name","age","gender"];
let enumMap = {
	name: "流星",
	age: 18,
	gender: "男"
}
let newObj = values.reduce((obj, key) => {
	console.log(obj,key);
	/*
		{} "name"
		{name: '流星'} "age"
		{name: '流星', age: 18} "gender"
	*/
	return { ...obj, [key]: enumMap[key] }
}, {})
console.log(newObj); // {name: '流星', age: 18, gender: '男'}

3.7、indexOf（直接查找索引）

搜索方法：

  • ECMAScript提供两类搜索数组的方法：按严格搜索和按断言函数搜索

严格搜索：

  • 接收两个参数：要查找的元素和一个可选的搜索位置
  • 在比较第一个参数跟数组中的每一项时，会使用全等（===）比较，也就是说两项必须严格相等

  • indexOf()：从数组前头向后搜索，返回要查找的元素在数组中的索引，没找到则返回-1

  • lastIndexOf()：从数组末尾向前搜索，搜索顺序与indexOf相反，用法相同

let numbers = [1,2,3,4,5,4,3,2,1];

console.log(numbers.indexOf(4));    //3
console.log(numbers.lastIndexOf(4));    //5

console.log(numbers.indexOf(4,4));  //5
console.log(numbers.lastIndexOf(4,4));  //3

let person = {name : 'jack'};
let people = [{name : 'jack'}];
let morePeople = [person];

console.log(people.indexOf(person));    //-1
console.log(morePeople.indexOf(person));    //0

四、ES6 新增方法

4.1、 find（函数查找元素）

搜索方法：

  • ECMAScript提供两类搜索数组的方法：按严格搜索和按断言函数搜索

断言函数：

  • 断言函数接收3个参数：元素、索引和数组本身。
  • 元素表示数组中当前搜索的元素；索引是当前元素的索引；而数组就是正在搜索的数组。
  • 断言函数返回真值，表示是否匹配。

  • find()：返回数组中满足提供的测试函数的第一个元素的值（否则返回undefined）

  • 语法：

array.find((element,index,array)=>{
	// element: 必选，当前遍历到的元素
	// index: 	可选，当前遍历到的索引
	// array：	可选，数组本身
	// 找到后直接返回，不再继续向下搜索
	return '判断条件'
})
  • 示例 1：查找数组中对象的属性
// 定义一个数组
const people =[
    {
        name : '张三',
        age : 88
    },
    {
        name : '李四',
        age : 64
    }
];

// 定义一个 callback 函数
function callBackName(element) {
    return element.name === '张三';
}

// 不改变原数组
let findValue = people.find(callBackName)
console.log(findValue);		// { name: '张三', age: 88 }

// 一步搞定写法：
let findValue2 = people.find((elemet,index,array) => elemet.age > 18)
console.log(findValue2);	// { name: '张三', age: 88 }
  • 示例 2：运行过程
const evens = [2,4,6];
evens.find((element,index,array) =>{
    console.log(element); //打印遍历到的元素
    console.log(index); //打印遍历到元素的索引
    console.log(array)  //打印数组本身
    return element === 4;   //查找数组中与4相匹配的元素，找到后终止函数
});
//第一次遍历
/*
2
0
[2,4,6]
*/
//第二次遍历
/*
4
1
[2,4,6]
*/
//由于第二次已经找到4，所以不用在继续搜索下去

4.2、findIndex（函数查找索引）

  • findIndex()：返回数组中满足提供的测试函数的第一个元素的索引（否则返回-1）
  • 语法：
array.findIndex((element,index,array)=>{
	// element: 必选，当前遍历到的元素
	// index: 	可选，当前遍历到的索引
	// array：	可选，数组本身
	// 找到后直接返回，不再继续向下搜索
	return '判断条件'
})
  • 示例 1：查找数组中对象的属性
// 定义一个数组
const people =[
    {
        name : '张三',
        age : 88
    },
    {
        name : '李四',
        age : 64
    }
];

// 定义一个 callback 函数
function callBackName(element) {
    return element.name === '张三';
}

// 不改变原数组
let findIndexValue = people.findIndex(callBackName)
console.log(findIndexValue);		// 0

// 一步搞定写法：
let findIndexValue2 = people.findIndex((elemet,index,array) => elemet.age > 18)
console.log(findIndexValue2);	// 0

4.3、fill（填充值）

  • fill()：可以像一个已有的数组中插入全部或者部分相同的的值。
  1. 开始索引用于指定开始的位置，他是可选的。
  2. 如果不提供结束索引，则一直填充到数组末尾
  3. 负值索引从数组末尾开始结束，相当于数组长度+负索引=一个正索引
  4. 包含开始索引，不包含结束索引
const zeroes = [0,0,0,0,0]	//length = 5

//用 5 填充整个数组
zeroes.fill(5);
console.log(zeroes);	//[5,5,5,5,5]
zeroes.fill(0);			//重置数组归0

//用 6 填充索引大于等于 3 的元素
zeroes.fill(6,3);
console.log(zeroes);	//[0,0,0,6,6]
zeroes.fill(0);			//重置数组归0

//用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7,1,3);
console.log(zeroes);	//[0,7,7,0,0]
zeroes.fill(0);			//重置数组归0
//用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7,-4,-2);	//length-4=1,length-2=3
console.log(zeroes);	//[0,7,7,0,0]
zeroes.fill(0);			//重置数组归0
  • 静默忽略超出数组边界、0长度即方向相反的索引范围
const zeroes = [0,0,0,0,0]	//length = 5

//索引过低，忽略
zeroes.fill(1,-10,-6);
console.log(zeroes);	//[0,0,0,0,0]

//索引过高，忽略
zeroes.fill(1,10,16);
console.log(zeroes);	//[0,0,0,0,0]

//索引反向，忽略
zeroes.fill(1,10,6);
console.log(zeroes);	//[0,0,0,0,0]

//索引部分可用，填充可用索引
zeroes.fill(1,3,10);
console.log(zeroes);	//[0,0,0,1,1]

4.4、copyWithin（复制后插入）

  • copyWithin()：按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。
  • 在原索引或目标索引到达数组边界时停止
  • 包含开始索引，不包含结束索引
let ints;
//创建箭头函数reset（）给ints赋值。
let reset = () => ints = [0,1,2,3,4,5,6,7,8,9];
reset();

//从ints中复制索引 0 开始的位置，插入到索引 5 开始的位置
ints.copyWithin(5);
console.log(ints);	//[0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset();			//重置ints数组值

//从ints中复制索引 5 开始的位置，插入到索引 0 开始的位置
ints.copyWithin(0,5);
console.log(ints);	//[5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();			//重置ints数组值

//从ints中复制索引 0 到 3 结束的位置位置，插入到索引 4 开始的位置
ints.copyWithin(4,0,3);
console.log(ints);	//[0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset();			//重置ints数组值

//js引擎在插值前会完整复制范围内的值，因此复制期间不存在重写的风险
ints.copyWithin(2,0,6);
console.log(ints);	//[0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset();			//重置ints数组值

//支持负索引，与fill（）计算方法一样
ints.copyWithin(-4,-7,-3);	//length = 10,等价于：(6,3,7)
console.log(ints);	//[0, 1, 2, 3, 4, 5, 3, 4, 5, 6]
reset();			//重置ints数组值
  • 静默忽略超出数组边界、0长度即方向相反的索引范围
与fill类似，再此不再重复讲解

4.5、 迭代器 keys()、values()、entries()

迭代器方法，在ES6中，Array的原型上暴露了 3 个用于检索数组内容的方法

  • keys()：返回数组索引的迭代器。
  • values()：返回数组元素的迭代器。
  • entries()：返回（索引/值）键值对的迭代器
const a = ['foo','bar','baz','qux'];
const aKeys = (a.keys());
const aValues = (a.values());
const aEntries = (a.entries());

console.log(aKeys);		//Array Iterator {}
console.log(aValues);	//Array Iterator {}
console.log(aEntries);	//Array Iterator {}

/*因为这些方法都返回迭代器，所以可以将它们的内容
通过Array.from()直接转换为数组实例*/

console.log('通过Array.from()转换后的返回值');
console.log(Array.from(aKeys));		//[0, 1, 2, 3]
console.log(Array.from(aValues));	//["foo", "bar", "baz", "qux"]
console.log(Array.from(aEntries));	//[[0, "foo"],[1, "bar"],[2, "baz"],[3, "qux"]]

在这里插入图片描述

  • 使用ES6解构可以非常容易的在循环中拆分键值对：
const a = ['foo','bar','baz','qux'];

//for-of循环是一种严格的迭代语句，用于遍历可迭代对象的元素
for(const [idenx,element] of a.entries()){
	console.log(idenx);
	console.log(element);
}
// 0
// foo
// 1
// bar
// 2
// baz
// 3
// qux

五、ES+ 新增方法

5.1、 includes（是否存在）ES2016

  • includes()：es7新增，表示是否找到一个与指定元素匹配的项，但它返回布尔值，严格相等（===）
let numbers = [1,2,3,4,5,4,3,2,1];

console.log(numbers.includes(4));    //true
console.log(numbers.includes(4,7));    //false

let person = {name : 'jack'};
let people = [{name : 'jack'}];
let morePeople = [person];

console.log(people.includes(person));  //false
console.log(morePeople.includes(person));  //true

5.2、 flat（数组降维）ES2019

  • flat() 方法：会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
  • 语法：
/*
	depth: 指定要提取嵌套数组的结构深度，默认值为 1，使用 Infinity，可展开任意深度的嵌套数组
*/
var newArray = arr.flat([depth])
/* 返回值 */
一个包含将数组与子数组中所有元素的新数组
  • 示例：扁平化嵌套数组
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  • 示例：扁平化与数组空项
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

5.3、 flatMap（循环降维）ES2022

  • flatMap() 方法：使用映射函数映射每个元素，然后将结果压缩成一个新数组（相当于map() + 返回值组成的数组执行flat()方法）

  • 语法：

/*
	currentValue: 当前正在数组中处理的元素。
	index：可选的，数组中正在处理的当前元素的索引
	array：可选的，被调用的 map 数组
	thisArg：可选的，执行 callback 函数时 使用的this 值
*/
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])
/* 返回值 */
一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为 1
  • 示例：与map相比较
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只能展开一层数组
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
  • 示例：与map的区别
let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

六、静态方法

6.1、Array.of（创建数组）

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

6.2、Array.from()（拷贝迭代数组）

Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

6.3、Array.isArray（判断是不是数组）

Array.isArray() 用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

其他资料：数组基础知识

一颗不甘坠落的流星
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
每个后端开发人员都应该知道的 4 个 JS 数组方法（包括现实生活中的示例）
我的博客，不一样的自我表达
07-03 41
除了基本的 forEach()、map() 和 filter() 方法之外，绝大多数 Js 开发人员并不知道还有其他 Array 方法可以极大地简化他们的代码，并使其更具可读性、可维护性和高效性。与教科书或大多数 YouTube 视频不同，我不会在 Javascript 中抛出一千零一个可用的数组方法，相反，我将带您了解我日常常用的 4 个不常见但功能强大的数组方法作为后端开发人员的工作。它是递归的，可让您将数组简化为单个值，并且它通过对数组中的每个元素执行回调函数中嵌入的操作来实现此目的。
JavaScript数组常用操作技巧汇总
12-09
本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下： 前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作，如$.isArray，_.some，_.find等等方法。这里无非是...
javascript数组常用方法汇总
10-21
主要汇总了javascript中数组常用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
超详细的javascript数组方法汇总
10-23
主要对javascript的数组方法进行了详细的汇总，包括了最常用的的数组方法，还有扩展方法，很全面，感兴趣的小伙伴们可以参考一下
JavaScript所有的数组使用方法及场景(包括es6及以后)，这一篇就够了
最新发布
weixin_44803406的博客
12-31 347
使用场景：返回一个包含数组中每个索引的新Array Iterator对象。使用场景：创建一个新数组，其结果是对原数组中的每个元素调用提供的函数。使用场景：创建一个新数组，其中包含通过提供函数实现的测试的所有元素。使用场景：返回数组中第一个找到的元素的索引，如果不存在则返回 -1。使用场景：对数组中的所有元素执行一个累积器函数，并返回累积的结果。使用场景：从类似数组或可迭代对象创建一个新的数组实例。使用场景：返回数组中通过测试的第一个元素的索引。使用场景：返回数组中通过测试的第一个元素的值。
js中数组的方法总结及一些使用场景
yy的博客
12-23 2347
js数组的方法及一些使用场景
JavaScript高级程序设计--学习笔记（第5章）
小周凉茶的博客
05-16 323
第五章 引用类型1. Object2. Array2.1 创建数组2.2 数组空位2.3 数组索引 在 ECMAScript 中，引用类型是把数据和功能组合到一起的结构（不能称之为“类”，与类不是一个概念）。引用类型描述了自己的对象应有的属性和方法，故也被称为对象定义。引用值(或者对象)是某个特定引用类型的实例。 新对象通过使用 new 操作符后跟一个构造函数来创建。构造函数就是用来创建新对象的函数，表示了对象的类型。 1. Object Object 类型在 ECMAScript 中十分常用。虽然 Obj
面试题（一）javascript系列
weixin_67585820的博客
04-11 692
来源：面试官：说说JavaScript中的数据类型？存储上的差别？ | web前端面试 - 面试官系列 一、说说JavaScript中的数据类型？存储上的差别？ 二、数组的常用方法有哪些？ 三、JavaScript字符串的常用方法有哪些？ 四、谈谈 JavaScript 中的类型转换机制 五、== 和 ===区别，分别在什么情况使用 六、深拷贝浅拷贝的区别？如何实现一个深拷贝？ 七、说说你对闭包的理解？闭包使用场景 八、说说你对作用域链的理解 九、JavaScript原型，原型链 ? 有什么特点？ 十、Ja
【JS】fetch() 用法
热门推荐
qq_45677671的博客
03-30 3万+
文章目录fetch 基本使用Response 对象1、同步属性2、判断请求3、操作标头4、读取内容5、创建副本6、底层接口定制 HTTP 请求取消 fetch 请求 fetch 基本使用 Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的XMLHttpRequest的，在 JavaScript 脚本里面发出 HTTP 请求。 目前还没有被所有浏览器支持，如果考虑低版本浏览器的问题的话，引入https://github.com/github/fetch/blob/master/f
【JS】将字符串保存成文件到本地（.txt、.json、.md...）
qq_45677671的博客
07-21 1万+
将字符串保存成 .txt 文件到本地、 将字符串保存成 .json 文件到本地、 将字符串保存成 .md 文件到本地、
【JS】实现 Base64 编码和解码（及中文乱码问题）
qq_45677671的博客
06-06 1万+
项目中实现 Base64 编码和解码
【JS】剪切板操作（手写复制、粘贴功能）
qq_45677671的博客
12-20 1万+
文章目录Document.execCommand() 方法Clipboard 对象介绍Clipboard 对象方法 浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。 一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如"一键复制"功能，用户点击一下按钮，指定的内容就自动进入剪贴板。 目前，一共有三种方法可以实现剪贴板操作。 1. Document.execCommand()方法 2. 异步的 Clipboard API 3. c
【JS】postMessage 用法（可以给iframe传值）
qq_45677671的博客
12-08 1万+
跨文档消息，有时候也简称为`XDM(cross-document messaging)`，是一种在不同执行上下文（如不同源的页面）间传递信息的能力。 例如：`www.wrox.com`上的页面想要与包含在内嵌窗格中的`p2p.wrox.com`上面的页面通信 `XMD`的核心就是`postMessage()`方法，将`message`传递给指定窗口
【JS】递归函数
qq_45677671的博客
03-26 9333
七、递归函数 什么是递归函数 在编程世界里，递归就是一个自己调用自己的手段 递归函数：一个函数内部，调用了自己，循环往复 //下面这个代码就是一个最简单的递归函数 //在函数内部调用了自己，函数一执行，就调用自己一次，在调用再执行，循环往复，没有止尽 function fn(){ fn(); } fn(); 简单实现一个递归 我们先在用递归函数简单实现一个效果 需求： 求 1 至 5 的和 先算 1 + 2 得 3 再算 3 + 3 得 6 再算 6 + 4 得 10 再算 10 + 5 得
【JS笔记】JavaScript prompt（）方法的使用
qq_45677671的博客
10-24 8573
JavaScript prompt()方法 prompt()方法： 用于弹出显示可提示用户进行输入的对话框，方法返回用户输入的字串符。 语法格式： prompt(msg,defaultText); 参数说明： msg（可选项）：需要在对话框中显示的纯文本（不是HTML格式的文本）。 defaultText（可选项）：默认的输入文本，可以不写，也可以为空。 例1：defaultTex...
【JS】获取 Headers 头部信息
qq_45677671的博客
05-25 8275
获取 Headers 头部信息，以及headers各实例方法的使用。
【JS】问号点（?.）和双问号（??）的用法
qq_45677671的博客
08-04 7199
文章目录问号点（?.）双问号（??）如何使用 问号点（?.） 参考文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining 当访问多层对象属性(比如 res.data.list)时，如果属性res.data为空，则会报引用错误 为此我们不得不这么处理： let dataList = res && res.data && res.data.li
【JS】performance.now 方法（类似于Date.now）
qq_45677671的博客
10-26 4544
performance.now：是浏览器(Web API)提供的方法，不同浏览器获取到的精度不同。 Date.now：是Javascript内置方法，差异主要在于浏览器遵循的ECMAScript规范。
【JS】BOM 详解（工作必备）
qq_45677671的博客
04-15 4100
- BOM（Browser Object Model）：浏览器对象模型 - 其实就是操作浏览器的一些能力 - 我们可以操作哪些内容 1. 获取一些浏览器相关信息（窗口大小） 2. 操作浏览器的滚动条 3. 浏览器的信息（浏览器的版本） 4. 让浏览器出现一个弹出框（alert、confirm、prompt） - BOM的核心就是window对象 - window是浏览器内置的一个对象，里面包含着操作浏览器的方法
js数组都使用哪些常用的方法?
04-22
JavaScript数组有很多常用的方法，其中一些包括： 1. push()：向数组末尾添加一个或多个元素 2. pop()：从数组末尾删除一个元素 3. shift()：从数组头部删除一个元素 4. unshift()：向数组头部添加一个或多个元素 5...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值