js的数组常用方法
侧边栏壁纸
  • 累计撰写 23 篇文章
  • 累计收到 142 条评论

js的数组常用方法

Zuiet
2022-09-04 / 27 评论 / 708 阅读 / 正在检测是否收录...

1.join
join('参数')把数组的元素以传入的参数为分割符,转换成字符串。

let arr = [1, 2, 3, 4, 5];
let str = arr.join(',');
console.log(str); -> '1,2,3,4,5'

2.push()和pop()
push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

let arr = ['张三', '李四', '王五'];
let count = arr.push('马六');
console.log(arr); // -> ['张三', '李四', '王五', '马六']
console.log(count); // -> 4
let item = arr.pop();
console.log(item); // -> 马六

3.shift() 和 unshift()
shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头,并返回数组的长度 。

let arr = ['张三', '李四', '王五'];
let item= arr.shift();
console.log(arr); // -> ['李四', '王五']
console.log(item); // -> 张三

let count= arr.unshift('马六');
console.log(arr); // -> ['马六', '李四', '王五']
console.log(count); // -> 3

4.reverse()
将数组的数据进行反转,并且返回反转后的数组,会改变原数组

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

5.sort()
对数组内的数据进行排序(默认为升序),并且返回排过序的新数组,会改变原来的数组

let arr = [12,2,43,5,2,5];
console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5]
/* 注意:通过上面的案例,你会发现 打印的数组和原数组比较还是有变化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 
5];但是有没有达到我们想要的结果,这是为什么呢?*/
/* 因为排序是针对字符的排序,先使用数组的toString()方法转为字符串,再逐位比较,3是大于12的,因为首位3>1,不 
要与Number型的数据排序混淆。*/
//5.1那如果需要数值排序怎么办呢?
/* 如果需要数值排序,sort(callback) 需要传入一个回调涵数,该函数应该具有两个参数,比较这两个参数,然后返回 
一个用于说明这两个值的相对顺序的数字(a-b);*/
//例如:
let arr = [12,2,43,5,2,5];
console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]

6.slice()
截取指定位置的数组,并且返回截取的数组,不会改变原数组

// slice(startIndex, endIndex) 可以有两个参数, startIndex为必选, 表示从第几位开始.endIndex为可选
// 表示到第几位结束(不包含endIndex位),省略表示到最后一位, startIndex和endIndex都可以为负数,
// 负数表示从最后一位开始算起,如-1表示最后一位
let arr = ['张三','李四','王五','马六'];
console.log(arr.slice(1, 3));// -> ['李四', '王五']
console.log(arr); // -> ['张三','李四','王五','马六']; 原数组是没有改变的

7.splice()
向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素

 // splice(start, num, val1, val2, ...); 所有参数全部可选.和slice相比splice是会改变原数组的
 // start是开始的位置,可以为负数, -1就表示从最后一位开始, num代表要删除或者替换的长度,不能为负数
 let arr = ['张三','李四','王五','马六'];
 console.log(arr.splice(2, 1)) // -> ['王五']
 console.log(arr) // -> ['张三','李四','王五','马六']
 let arr1 = ['张三','李四','王五','马六'];
 console.log(arr1.splice(2, 1, '七郎')) // ->['王五']
 console.log(arr1) // -> ['张三','李四','七郎','马六']

8.toString()
将数组转换成字符串,类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用,
如果手动调用,就是直接转为字符串。不会改变原数组

let arr = [1, 2, 3, 4, 5, 6];
//toString没有参数
console.log(arr.toString()) // -> '1, 2, 3, 4, 5, 6'

9.indexOf()
根据指定的数据,从左向右,查询在数组中出现的位置,如果不存在指定的数据,返回-1,
找到了指定的数据返回该数据的索引

// indexOf(value, start),value为要查询的数据, start为可选,表示开始查询的位置
// 当start为负数时,从数组的尾部向前数, 如果查询不到value的存在,则返回-1
let arr = ['张三', '李四', '王五', '马六'];
console.log(arr.indexOf('李四')) // -> 1
console.log(arr.indexOf('李四', 2)) // -> -1

10.forEach()
ES5新增的方法,用来遍历数组,没有返回值

// forEach(callback), callback默认有三个参数, 
// 分别为value(遍历到的数组的数据), index(对应的索引), self(数组自身)
let arr = ['张三', '李四', '王五', '马六']
let a = arr.forEach((value, index, self) => {
   console.log(value + '->' + index + '->' + (arr === self));
})
//打印结果为: 张三-> 0 -> true  李四-> 1 -> true ...
console.log(a) // -> undefined --- forEach没有返回值
// 该方法为遍历方法, 不会修改原数组

11.map()
1.同forEach功能。
2.map的回调函数会将执行结果返回,最后map将所有回调函数的返回值组成新数组返回。

// map(callback), callback默认有三个参数, 分别为value, index, seif. 跟forEach参数一样
let arr = ['张三', '李四', '王五', '马六'];
let arr1 = arr.map(item => {
   return '你好' + item
})
console.log(arr1) // -> ['你好: 张三', '你好: 李四', '你好: 王五', ...]

12.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]

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

let arr = ['张三', '李四', '王五', '马六'];
let str = arr.find(item => item == '李四');
console.log(str); // -> '李四'

14.findIndex()
数组的循环,查找到符合条件的索引并且打断循环返回找到的索引值

let arr = ['张三', '李四', '王五', '马六'];
let index = arr.findIndex(item => item == '李四');
console.log(str); // -> 1

15.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 bool1 = arr.every(item => item > 3)
console.log(bool1) // -> false

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

// some()接受一个回调函数作为参数, 这个回调函数需要有返回值, some(callback); callback默认有三个参数
// 分别为value, index, self
let arr = [1, 2, 3, 4, 5, 6]
let bool = arr.every(item => item > 5)
console.log(bool) // -> true

let bool1 = arr.every(item => item > 7)
console.log(bool1) // -> false

17.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 sum1 = arr.reduce((prev, now) => prev + now, 110)
console.log(sum1) // -> 260
0

评论 (27)

取消
  1. 头像
    z
    Windows 10 · Google Chrome

    1

    回复
  2. 头像
    z
    iPhone · Safari

    1

    回复
  3. 头像
    12aa
    MacOS · Google Chrome

    11

    回复
  4. 头像
    奋斗的博意志
    Android · Google Chrome

    回复
  5. 头像
    王哥
    Windows 10 · Google Chrome

    牛牛牛

    回复
  6. 头像
    小丑
    Windows 7 · Google Chrome

    6翻了

    回复
  7. 头像
    esgyplakzh
    Windows 10 · Google Chrome

    博主真是太厉害了!!!

    回复
  8. 头像
    tokzzmzyza
    Windows 10 · Google Chrome

    叼茂SEO.bfbikes.com

    回复
  9. 头像
    pckzvvurje
    Windows 10 · Google Chrome

    不错不错,我喜欢看 https://www.jiwenlaw.com/

    回复
  10. 头像
    pvloqstujq
    Windows 10 · Google Chrome

    怎么收藏这篇文章?

    回复
  11. 头像
    pmibicpddb
    Windows 10 · Google Chrome

    兄弟写的非常好 https://www.cscnn.com/

    回复
  12. 头像
    euvutfeqcp
    Windows 10 · Google Chrome

    你的文章充满了创意,真是让人惊喜。 http://www.55baobei.com/EiOuUvTaSU.html

    回复
  13. 头像
    xhkkqqphni
    Windows 10 · Google Chrome

    《薄荷的滋味》喜剧片高清在线免费观看:https://www.jgz518.com/xingkong/100690.html

    回复
  14. 头像
    zglkjuseqb
    Windows 10 · Google Chrome

    你的文章充满了智慧,让人敬佩。 http://www.55baobei.com/WerAt68tq3.html

    回复
  15. 头像
    terqbnldgj
    Windows 10 · Google Chrome

    你的文章让我感受到了生活的美好,谢谢! https://www.yonboz.com/video/27503.html

    回复
  16. 头像
    ukrveuycux
    Windows 10 · Google Chrome

    看到你的文章,我仿佛感受到了生活中的美好。 http://www.55baobei.com/aa8u4aXxmU.html

    回复
  17. 头像
    rrvdmpqsow
    Windows 10 · Google Chrome

    《薄荷的滋味》喜剧片高清在线免费观看:https://www.jgz518.com/xingkong/100690.html

    回复
  18. 头像
    ideqljvttg
    Windows 10 · Google Chrome

    你的文章内容非常精彩,让人回味无穷。 http://www.55baobei.com/2JPfjEsBJ5.html

    回复
  19. 头像
    udecfecamb
    Windows 10 · Google Chrome

    你的文章让我感受到了生活的美好,谢谢! http://www.55baobei.com/zHqmnSl8Ht.html

    回复
  20. 头像
    eytfxxchxu
    Windows 10 · Google Chrome

    《教头发威国语》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/28805.html

    回复
  21. 头像
    fsusazleng
    Windows 10 · Google Chrome

    《律动人生》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/65158.html

    回复
  22. 头像
    hfvutfeqpt
    Windows 10 · Google Chrome

    你的文章让我感受到了艺术的魅力,谢谢! https://www.4006400989.com/qyvideo/31830.html

    回复
  23. 头像
    vqsxwukdiq
    Windows 10 · Google Chrome

    《薄荷的滋味》喜剧片高清在线免费观看:https://www.jgz518.com/xingkong/100690.html

    回复
  24. 头像
    tcrqpoyjvv
    Windows 10 · Google Chrome

    你的文章让我感受到了艺术的魅力,谢谢! https://www.4006400989.com/qyvideo/31830.html

    回复
  25. 头像
    uopozlkwih
    Windows 10 · Google Chrome

    你的文章让我感受到了生活的美好,谢谢! http://www.55baobei.com/ihyxs7BiAl.html

    回复
  26. 头像
    wftldqtzsu
    Windows 10 · Google Chrome

    《律动人生》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/65158.html

    回复
  27. 头像
    bzdjdsfavk
    Windows 10 · Google Chrome

    哈哈哈,写的太好了https://www.lawjida.com/

    回复