js中的数组方法及用法_js 函数能传多少个数组-CSDN博客

本文链接：https://blog.csdn.net/kai_99/article/details/125557885

数组（Array）

数组也是一个对象
他和我们普通的对象功能相似，也是用来存储一些值的
不同的是普通对象是使用字符串作为属性名的，而数组是使用数字作为索引来操作对象
索引：

从零开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来储存一些数据

创建数组对象

**语法：**数组[索引] = 值

var arr = new Array();
console.log(arr);//输出""  空的，因为里面没有元素
arr[0] = 10;
arr[1] = 33;
console.log(arr);//输出10,33

使用字面量创建数组

语法：[]

使用字面量创建数组时，可以在创建时就指定数组中的元素

使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数参数传递，元素之间用，隔开

当只传一个数时，字面量传的是一个元素而构造函数传的是数组的元素数量

var arr = new Array();
var arr = [];
console.log(arr);//返回值为空（没有设置元素）

var arr = [1,2,3,4,10];
console.log(arr[4]);//返回值为10 

var arr2 = new Array(10,20,30);
console.log(arr2);//返回值为10,220,30（与上面的方法效果一样）

引用数组对象

**语法：**数组[索引]

如果读取不存在的索引，不会报错而是返回undefined

var arr = new Array();
arr[0] = 10;
arr[1] = 33;
console.log(arr[1]);//输出33

获取对象长度

可以使用length属性来获取数组的长度

对于连续的数组使用length可以获取到数组的长度（元素个数）

对于非连续的数组，使用length会获取到数组的最大索引+1

尽量不要创建非连续的数组，占空间

**语法：**数组.length

var arr = new Array();
arr[0] = 10;
arr[1] = 33;
console.log(arr.length);//输出2
arr[10] = 50;
console.log(arr.length);//输出11
console.log(arr)//[ 10, 33, <8 empty items(8个空的项目)>, 50 ]

修改数组

length（）

如果修改的length大于原长度，则多余部分会空出来

如果修改的length小于原长度，则多出部分会被删除

var arr = new Array();
arr[0] = 10;
arr[1] = 11;
arr[2] = 22;
arr[3] = 33;
arr.length = 10;
console.log(arr.length);//输出10
console.log(arr)//输出[ 10, 11, 22, 33, <6 empty items> ]
arr.length = 2;
console.log(arr.length);//输出2
console.log(arr)//输出10,11

向最后的一个位置添加元素

var arr = new Array();
arr[0] = 10;
arr[1] = 11;
arr[2] = 22;
arr[3] = 33;
console.log(arr.length);//输出4
console.log(arr)//输出10,11,22,33
arr[arr.length] = 44;
console.log(arr.length);//输出5
console.log(arr)//输出10,11,22,33,44

数组中的元素可以是任意的数据类型

var arr = new Array();
arr = ["hello",true,null,undefined];
console.log(arr)//输出hello，1，true， ，

也可以是对象

var obj = {name:"孙悟空"};
arr[arr.length] = obj;
console.log(arr[5].name);//输出孙悟空

也可以是个函数

var arr = new Array();
arr = [function(){alert(1)},function(){alert(2)}];
console.log(arr);//输出function(){alert(1)},function(){alert(2)}
arr[0]();//弹出1

数组中也可以放数组，如下这种数组叫二维数组

var arr = new Array();
arr = [[1,2,3],[4,5,6],[7,8,9]];
console.log(arr[0]);//输出1，2,3

push（）

该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
该方法会将数组的新长度作为返回值返回

var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚"];
arr.push("唐僧");
console.log(arr);//输出孙悟空，猪八戒，沙和尚，唐僧
arr.push("蜘蛛精","白骨精");
console.log(arr);//输出孙悟空，猪八戒，沙和尚，唐僧，蜘蛛精,白骨精

var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("蜘蛛精","白骨精","唐僧");
console.log(arr);//输出孙悟空，猪八戒，沙和尚，唐僧，蜘蛛精,白骨精
console.log(result);//输出  6

unshift()

向数组开头添加一个或多个元素，并返回新的数组长度。
像前面插入元素以后，其他元素会依次往后推

var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("蜘蛛精","白骨精","唐僧");
console.log(arr);
arr.unshift("牛魔王","二郎神");
console.log(arr);//输出  牛魔王,二郎神,孙悟空，猪八戒，沙和尚，唐僧，蜘蛛精,白骨精

pop() shift()

pop(); 删除数组最后一个元素，并返回元素的值
shift()；删除数组第一个元素，并返回元素的值

数组的遍历

一般是使用for循环来遍历数组

var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚"];
var result = arr.push("蜘蛛精","白骨精","唐僧");
for(var i = 0 ; i < arr.length ; i++){
    console.log(arr[i]);//输出孙悟空，猪八戒，沙和尚，唐僧，蜘蛛精,白骨精
}

js中还提供了了一个方法，用来遍历数组

forEach()

这个方法只支持ie8以上的浏览器
forEach() 方法需要一个函数作为参数
像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的行书传递进来
浏览器会在回调函数中传递三个参数

第一个参数：当前正在遍历的函数

第二个参数：当前正在遍历的元素的索引

第三个参数：正在遍历的数组

var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚","蜘蛛精","白骨精","唐僧"];
arr.forEach(function fun(a , b , c){   
    console.log(a);//输出 孙悟空 猪八戒 沙和尚 蜘蛛精 白骨精 唐僧
    console.log(b);//输出 0 1 2 3 4 5
    console.log(c);//输出[ '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' ]
                      //[ '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' ]
                      //[ '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' ]
                      //[ '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' ]
                      //[ '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' ]
                      //[ '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' ]
});

slice()

可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：slice(第一个参数，第二个参数)
- 第一个参数：截取开始的位置索引（必须写）
- 第二个参数：截取结束的位置索引（可省略，省略后会截取开始往后的所有元素）
- 索引可以传递一个负值，如果传递一个负值则从后往前计算-1倒数第一个-2倒数第二个
```
var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚","蜘蛛精","白骨精","唐僧"];
console.log(arr.slice(0,2));//输出'孙悟空', '猪八戒'
console.log(arr.slice(2));//输出'沙和尚', '蜘蛛精', '白骨精', '唐僧'
console.log(arr.slice(-2));//输出'白骨精', '唐僧'
```

splice()

可以删除或修改、添加数组中的指定元素
使用splice会影响到原数组，会将指定元素从原数组中删除，并将被删元素作为返回值
参数 splice(第一个参数，第二个参数)
- 第一个参数（必写）：开始删除的位置索引
- 第二个参数（必写）：表示删除的数量
- 第三个及以后参数（可不写）：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = new Array();
var arr = ["孙悟空","猪八戒","沙和尚","蜘蛛精","白骨精","唐僧"];
var result = arr.splice(2,2,"白龙马","红孩儿","玉兔精");
console.log(arr);//输出'孙悟空', '猪八戒', '白龙马', '红孩儿','玉兔精', '白骨精', '唐僧' 
console.log(result);//输出'沙和尚', '蜘蛛精'

concat（）

可以连接两个或多个数组，并将新的数组返回
该方法不会影响原函数

var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["蜘蛛精","白骨精","唐僧"];
var result = arr.concat(arr2,"牛魔王");
console.log(result);//输出 '孙悟空', '猪八戒', '沙和尚', '蜘蛛精', '白骨精', '唐僧' , '牛魔王'

join()

该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
在join（）中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符

var arr = ["孙悟空","猪八戒","沙和尚"];
console.log(arr.join());//输出孙悟空,猪八戒,沙和尚（默认用，连接数组内元素）
console.log(arr.join(哈哈));//输出  孙悟空哈哈猪八戒哈哈沙和尚

reverse()

该方法用来反转数组（前边去后边，后边去前边）
该方法会改变原数组

sort()

可以对数组进行排序，默认会按照Unicode编码进行排序（因为是按照Unicode编码排序，所有可能会与自己的期望有很大出入）
会影响原数组
我们可以自己来指定排序顺序
- 我们可以在sort（）添加一个回调函数，来指定排序规则，
  
  回调函数需要定义两个形参，
  
  浏览器将会分别使用数组中的元素作为实参去调用回调函数
  
  使用哪个元素调用不确定，但肯定的是在数组中a一定在b前面
- 浏览器会根据回调函数的返回值来决定元素的顺序
  
  如果返回一个大于0的值，则元素会交换位置
  
  如果返回一个小于0的值，则元素位置不变
  
  如果返回一个0，则认为两个元素相等，也不交换位置
如果需要升序排列，则返回a-b，降序排列，则返回b-a

var arr = ["a","e","d","c","b"];
arr.sort();
console.log(arr);//输出'a', 'b', 'c', 'd', 'e'

var arr = [1,2,7,9,2,9,4,9,4,6,1,51,55,1,5,161,51,881,8,4];
arr.sort(function fun(a,b){
    return a-b;
});
console.log(arr);//输出[1, 1, 1, 2, 2, 4, 4, 4, 5, 6, 7, 8, 9, 9, 9, 51, 51, 55, 161, 881
]

toSource()

toSource() 方法表示对象的源代码。

该原始值由 Array 对象派生的所有对象继承。

toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

语法：object.toSource()

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());

</script>

输出：

({name:"Bill Gates", job:"Engineer", born:1985})

toString()

toString() 方法可把数组转换为字符串，并返回结果。
语法：arrayObject.toString()
返回值
arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toString())

</script>

输出

George,John,Thomas

toLocaleString()

把数组转换为本地字符串。
语法:arrayObject.toLocaleString()
返回值
arrayObject 的本地字符串表示。

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toLocaleString())

</script>

输出

George, John, Thomas

every()

该方法用来确保数组中的所有成员是否都满足条件，是的话返回true，否则false

[1, 2].every(function(value){
	if(value === 1 || value === 2){
		return true;
	}else{
		return false;
	}
})
//true

some()

该方法会升序对数组的每一个元素调用，若遇到返回true的，直接返回true，如果都为false，则返回false，可以理解为只要数组中有一个元素满足条件，则返回true

[1, 2, 3, 4].some(function(value){
	if(value === 3){
		return true;
	}else{
		return false;
	}
})
//true
[1, 2, 3, 4].some(function(value){
	if(value === 5){
		return true;
	}else{
		return false;
	}
})
//false

fill()

fill(val, start, end)方法用于填充数组，第一个参数为值，第二个参数为开始位置索引，第三个参数为结束位置索引

[0, 0, 0].fill(7, 1);		//[0, 7, 7]
[0, 0, 0].fill(7);			//[7, 7, 7]

filter方法

返回数组中满足回调函数条件的元素

[1, 2, 3].filter(function(val){
	if(val === 1 || val === 2){
		return true;
	}else{
		return false;
	}
})
//[1, 2]

map方法

注意：会返回一个新数组

[1, 2, 3].map(function(val){
	return val * 2;
})
//[2, 4, 6]