快来复习一下数组常见操作的API✅

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章点击查看文章详情 🚀🚀

前言

最近在写算法和做项目时碰到数组操作的api，总是看了忘，忘了看。唉~

今就干脆索性自己总结一些最近用到的或者易忘的数组api。😁

unshift() shift()

unshift()

添加到数组开头的元素


let arr = [4, 5, 6];

arr.unshift(1, 2, 3);

console.log(arr);

// [1, 2, 3, 4, 5, 6]

shift()

从数组中删除第一个元素，并返回该元素的值

const arr = [1,2,3]

const res = arr.shift();

console.log(arr) // [1,2]
console.log(res) // 1

小结一下：原来unshift()和shift()都会改变原数组的值，并且还都是和它们原数组的第一个值有关

splice()

官方文档是这样描述它的：

splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。

说白了就是两部分 删除 插入

删除功能

比如，可以从索引为 1 的地方删除 2 个元素

const names = ['老王', '老胡', '老李', '老刘'] 

const res = names.splice(1, 2)

console.log(res) // ['老胡', '老李']

console.log(names) // ['老王','老刘']

插入功能

比如，可以替换索引1处开始的2个元素，然后插入一个新的元素 '老六'：

const names = ['老王', '老胡', '老李', '老刘'] 

const res = names.splice(1, 2,'老六')

console.log(res) // ['老胡', '老李']

console.log(names) // ['老王','老六',老刘']

小结：我们也可以看到，splice()是可以接受三个参数的。

 参数：
  第一个，表示开始的位置的索引
  第二个，表示删除的数量
  第三个，可以传递一些新的元素，这些元素会自动插入到开始位置索引前边

slice()

slice()可以用来从数组提取指定元素 => 经常用来做浅拷贝

继续搬出我们的寝室四人组来举个例子吧~

const names = ['老王', '老胡', '老李', '老刘'] 

const res1 = names.slice(1,3);

const res2 = names.slice(2);

console.log(res1);// ['老胡', '老李']

console.log(names);// ['老王', '老胡', '老李', '老刘'] 

console.log(res2);// ['老李', '老刘']

小结：可以看到，slice()也是会传递两个参数的

参数：

1.截取开始的位置的索引，包含开始索引。

2.截取结束的位置的索引，不包含结束索引。

第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

join()

join() 将数组所有元素拼接成一个字符串

const names = ['老王', '老胡', '老李', '老刘'] 

const arr = names.join()
const res = names.join('-')

console.log(arr) // 老王,老胡,老李,老刘
console.log(res) // 老王-老胡-老李-老刘

小结：join()接收一个参数

 指定一个字符串来分隔数组的每个元素。
 如果缺省该值，数组元素用逗号（`,`）分隔

扩展：我们一般使用数组的join方法和字符串中的split方法来进行数组和字符串的相互转换，经常把这两个放在一起记忆。

concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const name1 = ['老王', '老胡'] 
const name2 = ['老李', '老刘'];

const names = name1.concat(name2);
console.log(names); // [ '老王', '老胡', '老李', '老刘' ]

map() filter()

都是对数组中的每一个元素进行操作，就干脆把它俩放一起总结

map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1); //  [2, 8, 18, 32]

filter()

filter()创建一个新数组，其包含通过所提供函数实现的测试的所有元素

const words = ['a', 'ab', 'abc', 'abcd', 'abcde'];

const result = words.filter(word => word.length > 3);

console.log(result);// [ 'abcd', 'abcde' ]

这两个方法看起来效果不是一样的吗？

看似是一样的，但当它们的返回值为布尔值时，就会有不同了

var arr = [1,2,3,4,5,6];

var mapArr = arr.map( item => item>5 );
var filterArr = arr.filter( item => item>5 );

console.log(mapArr);
// [ false, false, false, false, false, true ]

console.log(filterArr);
// [ 6 ]

看见了吗?

map是会对arr中的每一个元素操作结果都会返回

filter是只把符合规则的每一个元素结果返回

includes()

includes() 方法用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false

const array = [1, 2, 3];

console.log(array.includes(2));
//  true

indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
//  1
console.log(beasts.indexOf('giraffe'));
//  -1

toString()

toString() 方法返回一个字符串，表示指定的数组及其元素。

const array = [1, 2, 'a', '1a'];

console.log(array.toString());
// "1,2,a,1a"

every() 和 some()

都是查询数组的方法

every()

every() 检测数组中的每一项是否符合条件,它返回一个布尔值

// 是否只包含偶数
const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];

function isEven(number) {
 return number % 2 === 0;
}

evens.every(isEven); //  true
numbers.every(isEven); //  false

some()

some() 检测数组中是否有某些项符合条件它，它返回一个布尔值

// 至少包含一个偶数
const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];

function isEven(number) {
  return number % 2 === 0;
}

numbers.some(isEven); //  true
odds.some(isEven);   //  false

小结： every() , some() 都是查询数组内元素的方法

 every()  =>  数组中每一项
 some()   =>  数组中有一项

参考文档

结尾

对自己最近一些常用的数组api做了一下小结，希望也能帮助到屏幕前的你~ ❤️❤️❤️