数组必会常用方法

every

every() 方法查看一个数组内的所有元素是否都能通过条件。返回一个布尔值。

[1, 2, 3, 4].every(item => typeof item === 'number')  // 返回ture 数组每一项都符合
[1, 2, 3, 4].every(item => typeof item === 'string')  // 返回false 数组每一项都不符合

some

some() 方法查看数组中是不是至少有 1 个元素能够通过条件。返回一个布尔值。

[1, 2, 3, '4'].some(item => typeof item === 'string')  // 返回ture 数组有一项符合
[1, 2, 3, 4].every(item => typeof item === 'string')  // 返回false 数组每一项都不符合

find

find() 方法返回数组中满足条件的第一个元素的值。否则返回 undefined。

[1, 2, 3, 4].find(item => item > 3) // 返回 4
[1, 2, 3, 4].find(item => item < 3) // 返回 1 --> 满足条件的第一个元素

findIndex

findIndex()方法返回数组中满足条件第一个元素的索引。若没有找到则返回-1。

[1, 2, 3, 4].findIndex(item => item === 3) // 返回 2
[1, 2, 3, 4].findIndex(item => item < 3) // 返回 0 --> 满足条件第一个元素的索引

flat

flat() 方法会按照一个可指定的深度递归遍历数组,返回一个包含将数组与子数组中所有元素的新数组。扁平化嵌套数组,移除数组中的空项。
参数 指定要提取嵌套数组的结构深度,默认值为 1(递归遍历一层)。
当参数为使用 Infinity,可展开任意深度的嵌套数组

[1, 2, , [3, 4]].flat() // [1, 2, 3, 4] --> 移除空项
[1, 2, 3, [4, 5]].flat() // [1, 2, 3, 4, 5]
[1, 2, 3, [4, 5, [6, 7]]].flat() // [1, 2, 3, 4, 5, [6, 7]] --> 默认只递归一层
[1, 2, 3, [4, 5, [6, 7]]].flat(2) // [1, 2, 3, 4, 5, 6, 7] --> 参数2 递归2层
[1, 2, 3, [4, 5, [6, 7, [8, 9]]]].flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9] --> 参数为Infinity,可展开任意深度的嵌套数组

fill

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引 返回填充后的数组

fill(value, start, end)
value --> 要填充的值 ,start 开始索引,end结束索引(从开始索引填充到结束索引,不含结束索引)若 start 或end 是负数则会被自动计算成为数组倒数第几项。

fill(value) —> 默认填充所有value
fill(value, start) —> 默认填充所有value,从索引strat开始

[1, 2, 3].fill(4) // [4, 4, 4] 默认全部填充
[1, 2, 3].fill(4, 1)  // [1, 4, 4] 默认填充4,从索引1开始
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]

filter

filter() 过滤数组,返回一个通过条件的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。

[1, 2, 3, 4, 5].filter(item => item < 4) // [1, 2, 3]
[1, 2, '3', '4', 5].filter(item => typeof item === 'string') // ['3', '4']

indexOf

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

[1, 2, 3, 4].indexOf(2) // 返回 1
['a', 'b', 'c'].indexOf('a') // 返回 0

includes

includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。
第一次参数是要查找的元素,第二个参数是从哪个索引找

['a', 'b', 'c'].includes('a') // 返回 true
[1, 2, 3].includes(1, 1) // 返回 false --> 找1 从索引为1的元素开始找

map

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

使用 map 重新格式化数组中的对象。
使用一个包含一个参数的函数来映射一个数组。

[1, 4, 9].map((num) => num * 2) // [2, 8, 18]


const arr = [1, 2, '3', '4', 5].map(item => {
    if(typeof item === 'number') return item + 1
    else return item
  })
  console.log('arr', arr)  //  [2, 3, '3', '4', 6]

slice

slice() 方法返回数据截取的后结果,原数组不会被改变。

slice(start, end)
从索引strat开始截取,到索引end结束(不含end索引元素)
slice(1,4) —> 截取索引为 1, 2, 3 的元素

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

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

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

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

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

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

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

splice

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

splice(start, deleteCount, item1, item2, itemN)
start:从哪个索引开始删除
deleteCount:删除几个
item:并插入元素

let arr = [1, 2, 3, 4, 5]
let result = arr.splice(1, 1, 9)
console.log('result', result) // [2]
console.log('arr', arr) // [1, 9, 3, 4, 5]

arr = [1, 2, 3, 4, 5]
result = arr.splice(1, 0, 9)
console.log('result', result) // []
console.log('arr', arr) // [1, 9, 2, 3, 4, 5]
从索引1开始删除,删除0个,并插入元素9

reverse

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。

[1, 2, 3].reverse() // [3, 2, 1]

sort

sort() 方法用原地算法对数组的元素进行排序,并返回数组。

const numbers1 = [4, 2, 5, 1, 3];
numbers2.sort((a, b) => a - b);
console.log(numbers1); // [1, 2, 3, 4, 5]

const numbers2 = [4, 2, 5, 1, 3];
numbers2.sort((a, b) => b - a);
console.log(numbers2); // [5, 4, 3, 2, 1]

pop

pop() 方法从数组中删除最后一个元素,并返回该元素。此方法会更改数组的长度。

const myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
const popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin']
console.log(popped); // 'sturgeon'

push

push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports); // ["soccer", "baseball", "football", "swimming"]
console.log(total); // 4

shift

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
let shifted = myFish.shift();

console.log(myFish); // ['clown', 'mandarin', 'surgeon']
console.log(shifted); // angel

unshift

unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。

let arr = [4, 5, 6];
arr.unshift(1, 2, 3);
console.log(arr); // [1, 2, 3, 4, 5, 6]

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

reduce

reduce

Array.from()

Array.from(arrayLike, mapFn, thisArg) 返回一个新的数组实例。
参数:
arrayLike想要转换成数组的伪数组对象或可迭代对象。
mapFn (可选) 新数组中的每个元素会执行该回调函数。
thisArg (可选) 执行回调函数 mapFn 时 this 对象。

从 String 生成数组
Array.from('foo') // [ "f", "o", "o" ]

从 Set 生成数组
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set) // [ "foo", "bar", "baz" ] --> set数据结构值都是唯一的,没有重复的值

从类数组对象(arguments)生成数组
function f() {
  return Array.from(arguments); // [ 1, 2, 3 ]
}
f(1, 2, 3);

使用函数
Array.from([1, 2, 3], x => x + x) // [2, 4, 6]

Array.isArray()

需要检测的值,如果是 Array,则返回 true,否则为 false。

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
Array.isArray(new Array(3));
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值