前端常用几个数组方法

1.slice() 方法返回一个新的数组对象,这一对象是一个由 start和 end 决定的原数组的浅拷贝(包括 start,不包括end)。原始数组不会被改变。

//arr.slice(start, end)
const arr = ['a','b','c','d'];
 
console.log(arr.slice(2));//删除两个,从头开始删
//["c","d"]
 
console.log(arr.slice(2, 3));//只保存(从第二开始数(不包括第二个),数到第三个)
// ["c"]
 
console.log(arr.slice(1, 4));//只保存(从第一开始数(不包括第一个),数到第四个)
//  ["b", "c", "d"]
 
console.log(arr.slice(-2));//保存后面两个
// ["c", "d"]
 
console.log(arr.slice(1, -1));//保存(从第一开始数(不包括第一个),最后一个往前开始数(不包括最后一个)
// ["b", "c"]
 
console.log(animals.slice());
//['a','b','c','d']

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

array.splice(开始, 结束, 插入, 插入, ...)
const arr = ['a', 'b', 'c', 'd'];

// 从第一个开始(不包括第一个)删除2个
console.log(arr.splice(1, 2));

// 从第一个开始(不包括第一个)删除0个,然后在这个位置插入e
console.log(arr.splice(1, 0, 'e'));
// ["a", "e", "b", "c", "d"]
 
//从第三个开始不包括第三个)删除1个,然后在这个位置插入e
console.log(splice(3, 1, 'e'));
// ["a", "b", "c", "e"]

3.push:尾部添加元素


var array = ['a','b'];
console.log(array.push('c'))//['a','b','c']

4.unshift:头部添加元素

var array = ['a','b'];
console.log(array.unshift('c'))//['c','a','b']

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


const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = arr1.concat(arr2);
 
console.log(array3);
// ["a", "b", "c", "d"]

//或者
console.log(...arr1,..arr2);// ["a", "b", "c", "d"]

6.copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度

arr.copyWithin(替换的位置, 开始位置, 结束位置])
const arr1 = ['a', 'b', 'c', 'd', 'e'];

//从索引为1的开始到索引为3的(不包括索引为3的)进行删除,然后从后面开始复制,删除多少个就复制多少个,复制都是复制在前面
console.log(arr1.copyWithin(1, 3)); //['a', 'd', 'e', 'd', 'e']


const arr2 = ['a', 'b', 'c', 'd', 'e'];

//删除索引为0的,然后从索引为3的到索引为四(不包括四)的开始复制到删除的位置
console.log(arr2.copyWithin(0, 3, 4));//["d", "b", "c", "d", "e"]

7. 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

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

function arrcheck(a) {

return a >= 25;

}

var arrs = heights.every(arrHeight);

console.log(arrs);//true

8.some() 方法测试数组中是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

function arrf(value, index, ar) {

    if (value >5) {

        return true;

    }

}

var a = [1,2,3,4];

function arrf(value, index, ar) {

    if (value >5) {
console.log(value,index,ar)

        return true;

    }

}

var a = [1,2,3,4];
var a2 = [1,2,3,4,5,6]
var evens = a.some(arrf);
var evens2 = a.some(arrf);
console.log(evens2)//true
console.log(evens)//false

9..pop:删除尾部元素

var arr = ['a','b','c'];
arr.pop();
console.log(arr);//['a','b'];

10.shift:删除头部元素

var arr = ['a','b','c'];
arr.shift();
console.log(arr);//['b','c'];

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

arr.fill(填充的值, start, end)
const arr1 = [1, 2, 3, 4];
 
console.log(arr1.fill(5, 2, 4));
// expected output: [1, 2, 5, 5]
 
// 保存一个从头开始数,其他都变为2
console.log(arr1.fill(2, 1));
//  [1, 2, 2, 2]
 
console.log(arr1.fill(6));
// [6, 6, 6, 6]

12.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素-过滤

const arr = [1,2,3,4,5];
 
const result = arr.filter(v => v < 5);
 
console.log(result);
// [1,2,3,4]

13.数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined

[1, 4, -5, 10].find((n) => n < 0)
// -5


[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

14.findIndex数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

[1, 2, 13, 16].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2
[NaN].findIndex(y => Object.is(NaN, y))
// 0

15.forEach() 方法对数组的每个元素执行一次给定的函数。

const arr = ['a', 'b', 'c'];
 
arr.forEach(v => console.log(v);
 
// "a"
//  "b"
// "c"

16.includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

const arr = ['a', 'b', 'c'];
 
console.log(arr.includes('a'));
//  true
 
console.log(pets.includes('d'));
//false
 

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

const arr = [1,2,3,2];
 
console.log(beasts.indexOf(1));
//  0
 
// 
console.log(beasts.indexOf(4));
// -1
 
console.log(beasts.indexOf(2,2));
//4

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


Array.isArray([1, 2, 3]);
// true
Array.isArray('aa');
// false
Array.isArray("{a:1");
// false
Array.isArray(undefined);
// false

19.join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

const arr = ['a', 'b', 'c'];
 
console.log(arr.join());
//  "a,b,c"
 
console.log(arr.join(''));
//  "abc"
 
console.log(arr.join('-'));
//  "a-b-c"

20.map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const arr = [1, 2, 3];
 
// 
const map1 = arr1.map(x => x * 2);
 
console.log(map1);
//[2, 4, 6]

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

const arr1 = [1, 2,3];
 
const reversed = arr1.reverse();
console.log('reversed:', reversed);
//  "reversed:" Array [3,2,1]
 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值