365bet开户网-365bet提款审核-365玩球平台

js的数组方法整理(26)

一、数组有哪些方法? 1.数组创建与初始化 Array()构造函数:用于创建新数组 const arr1 = new Array() //创建空数组 const arr2 = new Array(5) //创建包含个

js的数组方法整理(26)

一、数组有哪些方法?

1.数组创建与初始化

Array()构造函数:用于创建新数组

const arr1 = new Array() //创建空数组

const arr2 = new Array(5) //创建包含个空位的数组

const arr3 = new Array(1,2,3) //创建包含元素1,2,3的数组

Array.of():创建包含任意数量参数的新数组

const arr = Array.of(1, 2, 3); // [1, 2, 3]

Array.from():从类数组对象或可迭代的对象创建新数组

const str = 'hello';

const arr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

2.数组元素操作

push():在数组末尾添加一个或多个元素,并返回新的长度

const arr = [1, 2, 3];

const newLength = arr.push(4, 5); // arr 变为 [1, 2, 3, 4, 5],newLength 为 5

pop():移除数组的最后一个元素,并返回该元素

const arr = [1, 2, 3];

const lastElement = arr.pop(); // arr 变为 [1, 2],lastElement 为 3

unshift():在数组开头添加一个或多个元素,并返回新的长度

const arr = [1, 2, 3];

const newLength = arr.unshift(0); // arr 变为 [0, 1, 2, 3],newLength 为 4

shift():移除数组的第一个元素,并返回该元素

const arr = [1, 2, 3];

const firstElement = arr.shift(); // arr 变为 [2, 3],firstElement 为 1

splice():可用于添加、删除或替换数组中的元素。splice()会改变原数组。

/*

数组.splice(n,m,x):对数组进行增/删/改操作

@params:

n:从索引n开始(必填)

m:向后截取m个元素,没有填写则默认截取到数组末尾(非必填)。

x:代替截取掉的部分(非必填)

@return:将截取到的部分以新数组的方式返回

*/

//增:

let arr = [0,1,2,3,4,5,6],

newArr = arr.splice(arr.length-1,0,7); //从数组末尾开始向后截取0个元素,并在此插入新元素7

console.log(newArr,arr)// => [],[0,1,2,3,4,5,7,6]

//删:

let arr2 = [0,1,2,3,4,5,6],

newArr2 = arr2.splice(0,1);//从索引0开始向后截取1个元素

console.log(newArr2,arr2)// => [0],[1,2,3,4,5,6]

//改:

let arr3 = [0,1,2,3,4,5,6],

newArr3 = arr3.splice(0,1,0.5)//从索引0开始向后截取1个元素,并在此插入元素0.5

console.log(newArr3,arr3)// => [0],[0.5,1,2,3,4,5,6]

slice():返回一个新的数组,包含从开始到结束(不包括结束)的元素

/*

数组.slice(n,m):查询数组

@params:

n:从索引n开始(必填)

m:查询到索引m为止,不包含m,如果m不填或大于arr.length,默认查询到末尾(非必填)

@return:将查找到的元素以新数组的方式返回,如果没有查找到,返回空数组

*/

//1.当n和m都为正整数:

let arr = [0,1,2,3,4,5],

newArr = arr.slice(0,arr.length);//从索引0开始查询到数组末尾的后一项(复制数组)

console.log(newArr,arr)// => [0,1,2,3,4,5],[0,1,2,3,4,5]

//2.当n和m为小数时,会先通过parseInt转换为整数在进行查询操作

let arr2 = [0,1,2,3,4,5],

newArr2 = arr2.slice(1.9,2.1);//从索引1开始查询到索引为2的元素

console.log(newArr2,arr2)// => [1],[0,1,2,3,4,5]

//3.当n是负数时,m不能大于n 否则返回空数组;表示从数组的末尾开始查找,数组最后一项索引为-1,越往前越小(原正数索引-arr.length=当前的负数索引)

let arr3 = [0,1,2,3,4,5],

newArr3 = arr3.slice(-3,-1);//从索引-2开始向前查找到索引为-1的元素

console.log(newArr3,arr3);// => [3,4],[0,1,2,3,4,5],

//4.当n或m不是有效数字时,先通过parseInt转换为有效数字,转换为NaN则默认为0

let arr4 = [0,1,2,3,4,5],

newArr4 = arr4.slice('1.9','哈哈哈');//从索引1开始向后查询到索引为0的元素,返回空数组

console.log(newArr4,arr4)// => [],[0,1,2,3,4,5]

let arr5 = [0,1,2,3,4,5],

newArr5 = arr4.slice('1.9','3.1');//从索引1开始向后查询到索引为3的元素,返回空数组

console.log(newArr4,arr4)// => [1,2],,[0,1,2,3,4,5]

3.数组查找与过滤

indexOf():返回指定元素在数组中第一次出现的索引,如果不存在则返回-1

const arr = [1, 2, 3, 2];

const index = arr.indexOf(2); // index 为 1

lastIndexOf():返回指定元素在数组中最后一次出现的索引,如果不存在则返回-1

const arr = [1, 2, 3, 2];

const lastIndex = arr.lastIndexOf(2); // lastIndex 为 3

includes():判断数组是否包含指定元素,返回布尔值

const arr = [1, 2, 3];

const hasTwo = arr.includes(2); // 为 true

find():数组的循环,查找符合条件的值,并打断循环返回找到的值

let arr = ['张三','李四','王五','马六'];

let str = arr.find(item => item == '李四');

console.log(str); // -> '李四'

findIndex():返回数组中满足测试的函数的第一个索引,否则返回-1

const arr = [1, 2, 3, 4, 5];

const foundIndex = arr.findIndex(item => item > 3); // foundIndex 为 3

filter():

(1) 同forEach功能;

(2) filter的回调函数需要返回布尔值,当为true时,将本次数组的数据返回给filter,最后filter将所有回调函数的返回值组成新数组返回(此功能可理解为“过滤”)

// 注意:filter(callback);callback默认有三个参数,分别为value,index,self。

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

let arr1 = arr.filter((item,index,self)=>{

console.log(item) // -> 1,2,3,4,5,6

console.log(index) // -> 0,1,2,3,4,5

console.log(self) // -> [1,2,3,4,5,6]

return item > 3

})

console.log(arr1) // -> [4,5,6]

every():判断数组中是否每一项都满足条件,只有所有项都满足条件,才返回true

// 注意: every()接收一个回调函数作为参数,这个回调函数需要有返回值,

// every(callback);callback默认有三个参数,分别为value,index,self。

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

let bool = arr.every(item => item > 0);

console.log(bool); // -> true;

let bool = arr.every(item => item > 3);

console.log(bool); // -> false;

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true,否则返回false

// 注意: some()接收一个回调函数作为参数,这个回调函数需要有返回值,

// some(callback);callback默认有三个参数,分别为value,index,self。

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

let bool = arr.some(item => item > 3);

console.log(bool) // -> true;

let bool = arr.some(item => item > 6);

console.log(bool) // -> false;

4.数组排序与反转

sort():对数组的元素进行排序,并返回排序后的数组。默认按字符串unicode编码排序

/*

数组.sort(fn => fn()):将数组按照指定的顺序进行排序

@params:

函数(可有可无),如果需要实现多位数正常排序,需要传递函数,并使返回值为a-b(升序)或者b-a(降序),属于冒泡排序机制

@return:

排序后的新数组

*/

let arr = [12,45,6,21,51,81],

//升序:

newArr = arr.sort((a,b) => (a-b));

console.log(newArr,arr)

reverse():反转数组中元素的顺序,会改变原数组

/*

数组.reverse():将数组的元素倒过来排序

@params:

@return:重新排序后的新数组

*/

let arr = [1,2,5,4,3,6,7],

newArr = arr.reverse();

console.log(newArr,arr)

5.数组迭代与映射

forEach():遍历数组,没有返回值

// 注意:forEach(callback);callback默认有三个参数,

// 分别为value(遍历到的数组的数据),index(对应的索引),self(数组自身)。

let arr = ['张三','李四','王五','马六']

let a = arr.forEach((item,index,self)=>{

console.log(item + "--" + index + "--" + (arr === self));

})

// 打印结果为:

// 张三--0--true

// 李四--1--true

// 王五--2--true

// 马六--3--true

console.log(a); // -> undefined---forEach没有返回值 //该方法为遍历方法,不会修改原数组

map():map的回调函数会将执行结果返回,最后将所有回调函数的返回值组成新数组返回,同forEach

//注意:map(callback);callback默认有三个参数,

// 分别为value,index,self。

// 跟上面的forEach()的参数一样

let arr = ['张三','李四','王五','马六'];

let arr1 = arr.map(item => {

return '你好:'+item

})

console.log(arr1) // -> ['你好:张三', '你好:李四', '你好:王五', '你好:马六']

?reduce():数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值

// 注意: 参数:reduce()接收一个或两个参数:

// 第一个是回调函数,表示在数组的每一项上调用的函数;

// 第二个参数(可选的)作为归并的初始值,被回调函数第一次执行时的第一个参数接收。

// reduce(callback,initial);

// callback默认有四个参数,分别为prev,now,index,self。

// callback返回的任何值都会作为下一次执行的第一个参数。

// 如果initial参数被省略,那么第一次迭代发生在数组的第二项上,

// 因此callback的第一个参数是数组的第一项,第二个参数就是数组的第二项。

let arr = [10,20,30,40,50];

let sum = arr.reduce((prev,now) => prev+now)

console.log(sum); // -> 150;

let sum = arr.reduce((prev,now) => prev+now,110)

console.log(sum) // 260

6.数组合并与扁平化

concat():合并两个或多个数组,返回一个新数组

/*

数组.concat(): 在指定数组后面将多个元素拼接成一个新数组

@params:多个任意类型值

@return:返回拼接后的新数组

*/

let arr = [1,2,3,4],

arr2 = [5,6,7],

newArr = arr.concat(arr2,'morning',{name:"Zack"})

console.log(newArr,arr,arr2)

flat():创建一个新数组,将所有子数组元素递归连接到该数组中。

注意事项如果原数组的元素不是数组(即没有子数组),则 flat() 方法将返回原数组的浅拷贝。如果指定的深度小于 1,则 flat() 方法将不会进行任何扁平化操作,并返回原数组的浅拷贝。如果数组中的某个元素是空数组,则扁平化时该空数组会被忽略(即不会作为结果数组的元素)。flat() 方法不会改变原数组,而是返回一个新的扁平化后的数组

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

// 不指定深度,默认深度为 1

let flatArr1 = arr.flat();

console.log(flatArr1); // 输出: [1, 2, 3, 4, [5, [6, 7]]]

// 指定深度为 2

let flatArr2 = arr.flat(2);

console.log(flatArr2); // 输出: [1, 2, 3, 4, 5, [6, 7]]

// 指定深度为 Infinity,完全扁平化

let flatArr3 = arr.flat(Infinity);

console.log(flatArr3); // 输出: [1, 2, 3, 4, 5, 6, 7]

7.数组转字符串

toString():不改变原数组

/*

数组.toString:将数组转换为字符串

@params:

@return:转换后的字符串

*/

let arr = [1,'2',undefined,{name:"Zack"}],

newArr = arr.toString();

join():不改变原数组

/*

数组.join([string]):将数组以指定分隔符的形式分隔成字符串

@params:指定的分隔符(字符串格式)

@return:转换后的字符串

*/

let arr = [0,1,2,3,4,5],

newArr = arr.join('|');

console.log(newArr,arr) // 0|1|2|3|4|5,[0,1,2,3,4,5]

二、其中比较常用的?

push():在数组末尾添加元素。

pop():移除数组最后一个元素。

map():对数组元素进行映射转换。

filter():过滤数组元素。

reduce():对数组元素进行累加或汇总。

forEach():遍历数组元素。

sort():对数组元素进行排序。

includes():判断数组是否包含指定元素

三、其中会改变原数组的方法

push(),pop(),shift(),unshift(),splice(),sort(),reverse()

← 上一篇: 眼部精华十大品牌排行榜
下一篇: 公众号推文是什么意思?功能介绍与应用场景 →

相关推荐

如何设计密室逃脱游戏
华为平板M6屏幕维修价格及备件查询指南
写日记用什么样的软件更安全?
为什么现在这么多人考二级建造师?真相原来是这样的!更新时间:2021-07-20 17:51:35作者:空格建工
微信的账号保护在哪里
拼多多砍单时间一般在下单后多久?详细投诉流程解析
拿到近一亿美元的创业金,梨视频到底怎么玩?
如何辨别洋酒真假?真假洋酒9大辨别方法
铁路隧道衬砌病害事故案例分析及预防措施
艺人唱歌为什么都用左手拿话筒?
【浪木洗衣机】浪木洗衣机怎么样
如何提高网站在百度中的权重?