数组(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]