JavaScript Array 方法集合

JavaScript Array 方法集合

前端在开发中对于Array的使用场景非常多,很多时候很容易忘记,还得百度(老手请绕开)。 所以今天就对这里整体进行一个总结,希望大家看完本文可以有所收获。如果喜欢的话可以点波赞/关注,支持一下。

本文前一部分内容根据w3school整理,具体还是以w3school上的为准

1、数组的创建

Array()是构造函数。

参数

  1. 参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。
  2. 参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array()
    时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

  1. 返回新创建并被初始化了的数组。
  2. 如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。
  3. 当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。
  4. 当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。
  5. 当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

2、push()将一个或多个元素添加到数组的末尾

var arr = [1,2,3];
arr.push(4,5,6)
console.log(arr) // [1,2,3,4,5,6] 返回数组的新长度

在这里插入图片描述

3、prop()删除最后一个元素

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.prop())  // 8
console.log(arr)  // [1,2,3,4,5,6,7]  更改原数组长度

在这里插入图片描述

4、shift()删除第一个元素

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.shift())  // 1
console.log(arr)  // [2,3,4,5,6,7,8]  更改原数组长度

在这里插入图片描述

4、unshift()向数组的开头添加一个或多个元素

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.unshift(12,34,54,564))
console.log(arr)  //  [12,34,54,564,1,2,3,4,5,6,7,8]更改原数组长度

在这里插入图片描述

6、join()数组转字符串

var arr = [1,2,3,4,5,6,7,8];
console.log(arr.join())  // 1,2,3,4,5,6,7,8 默认用逗号分隔,如果要改变 join('/')
console.log(arr)  // [1,2,3,4,5,6,7,8]  原数组不变

在这里插入图片描述

7、sort()排序

var arr = [12,34,54,564,1,2,3,4,5,6,7,8]
console.log(arr.sort()) // [1, 12, 2, 3, 34, 4, 5, 54, 564, 6, 7, 8] 原数组改变
// 这个排序是按照字符编码的顺序进行排序,如果要按照大小排序还得进行处理
// 这里我就简单的说下数字的升序降序排列,我们可以使用一个比较简单的方法来实现
// 升序
function SortAscending(a, b) {
  return a - b;
}
// 降序
function SortDescending(a, b) {
  return b-a;
}

在这里插入图片描述

8、concat()合并两个或多个数组

var arr1 = [1,2,3,4]
var arr2 = [5,6,7,8]
var arr3 = arr1.concat(arr2)
console.log(arr3) // 会返回一个新的数组,不会改变原数组

在这里插入图片描述

9、map()返回一个新的数组,数组中的元素都是被函数处理过的值

var arr = [1, 4, 9, 16];
var arr2 = arr.map(item => item + 1);
console.log(arr2); // [2, 5, 10, 17]

在这里插入图片描述

10、forEach()

参考菜鸟教程
在这里插入图片描述

var arr = [3,5,7,8];
arr.forEach(function(currentValue, index, arr){
	console.log(index+"--"+currentValue+"--"+arr);		
})

在这里插入图片描述

11、slice() 数组截取

var arr = [12,34,54,564,1,2,3,4,5,6,7,8]
var arr1 = arr.slice(-1) // 8
var arr2 = arr.slice(1) // [34, 54, 564, 1, 2, 3, 4, 5, 6, 7, 8]

在这里插入图片描述

12、splice()

var arr = [12,34,54,564,1,2,3,4,5,6,7,8]
// 向数组中指定的位置添加,因为没有删除所以返回了一个空数组
console.log(arr.splice(2,0,'hello word')) 
// 删除数组指定位置的内容
console.log(arr.splice(3,5))
// 删掉指定位置的内容替换为指定内容
console.log(arr.splice(2,3,'hello'))

在这里插入图片描述

13、indexOf()

var arr = [12,34,54,564,1,2,3,4,5,6,7,8]
console.log(arr.indexOf(0)). // -1 没有返回-1
console.log(arr.indexOf(12)) // 0 有的返回下标
console.log(arr.indexOf(34)) // 1

在这里插入图片描述

14、reverse() 颠倒顺序

var arr = [12,34,54,564,1,2,3,4,5,6,7,8]
console.log(arr.reverse()) // 返回的是颠倒后的数组,会改变原数组
console.log(arr)

在这里插入图片描述

目前就先更新这么多,日后继续更新该文档。。。。敬请期待!!!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值