一、JavaScript中的数组 JavaScript中的数组是值得有序集合。数组中值叫做元素,元素在数组的位置叫索引。数组的元素可以是任意类型的,同一个数组中元素类型可以不同。JavaScript中数组是动态的,可以根据需要增加或缩减。数组的索引可以不连续,不连续的数组称为稀疏数组,稀疏数组的长度大于元素的个数,非稀疏数组的元素长度等于元素个数。 数组是对象的特殊形式。可以把数组看做属性恰巧是整数的对象,但是数组是经过优化的,访问元素的效率比对象访问属性的效率高很多。 二、创建数组 1、数组直接量 1 var arr=[];//空数组
2 var arr=[1,2,,3] //长度为四的数组
3 var arr=[,,,]//三个元素的数组
2、new Array() 不带参数:创建一个空数组 只有一个参数且参数为一个数字:创建一个长度为参数的数组,数组的元素为0个。 带多个参数,参数为数组的元素,数组的长度和元素的个数相等。 1 var arr=new Array();//空数组
2 arr=new Array(5);//长度为5的空数组
3 arr=new Array(1,2,3,'4');//有四个元素的数组
三、数组的读写 用对象的([])运算读取和设置数组的元素值。当数组的索引是非负整数,那么数组的length会更新,当索引是其他值,会作为对象的属性。 1 var arr=new Array(1,2,3,'4');//有四个元素的数组
2 arr[1]=100;//设置数组的元素值
3 console.log(arr[1]);//100//读取元素的值
四、稀疏数组和非稀疏数组 稀疏数组的索引是不可连续的。length属性大于元素的个数。可以通过new Array(arg)、对象直接量获得稀疏数组。 1 var arr=new Array(5);//有四个元素的数组
2 console.log(arr.length);
3 arr=[];
4 arr[1001]=1;
5 console.log(arr.length);//1002
6 arr=[1,2,,,4]
7 console.log('2' in arr)//false
五、数组的长度 每个数组都有一个length属性,就是这个属性使其区别与其他的JavaScript对象。稠密数组的length属性代表元素的个数,其中比数组的最大索引数大1,对于非稠密数组,length大于数组的元素个数,数组中的找不到元素索引大于或等于它的长度的。当给数组赋值时,索引i大于或者等于length,length属性将设置为i+1;当把length属性设置为一个小于当前length的非负整数n时,数组中大于等于n的元素会被删除。 1 var arr=[1,3,4,5]
2 arr.length=2;
3 console.log(arr);//[1,3]
六、数组元素的添加和删除 给数组添加元素: 方法1:为新索引赋值 1 var arr=[1,3,4,5]
2 arr[6]=10;
· 方法2:push()和unshift()方法 push()方法给数组的末尾添加一个元素。unshift()方法给数组的首位添加一个元素。 1 var arr=[1,3,4,5]
2 arr.push(1);
3 arr.unshift(10);
4 console.log(arr);
删除数组的元素 方法一:delete运算符:使用delete运算符可以删除掉元素,但是不会改变数组的length. 1 var arr=[1,3,4,5]
2 delete arr[3];
3 console.log(arr);
4 console.log(arr.length);
方法2:改变(减小)length的值:大于或者等于length的元素都会被删除。 方法三:shift()和pop方法() 1 var arr=[1,3,4,5]
2 arr.pop();
3 arr.shift();
4 console.log(arr);//[3,4]
5 console.log(arr.length);//2
七、数组的遍历 方法1:for循环 1 var arr=[1,3,4,5]
2 var keys=Object.keys(arr);
3 for(var i=0,len=keys.length;i<len;i++){
4 console.log(arr[keys[i]]);
5 }
当数组是稠密的。 1 var arr=[1,3,4,5]
2 for(var i=0;i<arr.length;i++){
3 console.log(arr[i]);
4 }
方法二:for/in循环,但是有可能遍历出数组的元素上的可枚举属性。 1 var arr=[1,3,4,5]
2 for(var i in arr){
3 console.log(arr[i]);
4 }
方法三:forEach() 1 var arr=[1,3,4,5]
2 arr.forEach((ele,i,arr) => {
3 //arr代表数组 ele代表数组的元素 i代表数组的索引
4 console.log(ele);
5 });
八、Array.prototype上的方法 1、join() 1 var arr=[1,3,4,5]
2 console.log(arr.join(','));//'1,2,3,4'
2、reverse() 1 var arr=[1,3,4,5]
2 console.log(arr.reverse())//[5,4,3,1]
3、sort() 1 var arr=[undefined,'apple','banana','cherries']
2 console.log(arr.sort())//[ 'apple', 'banana', 'cherries',undefined ]
为了让数组不安字母表的顺序排序,可以给sort()传入一个函数。函数的参数大于0时,第二个参数在前。 1 var arr=[1,2,3,4,5]
2 console.log(arr.sort(function(a,b){
3 return b-a;
4 }))
5 //[5,4,3,2,1]
4、concat() 创建并返回一个新的数组。原始数组并未改变。 1 var arr=[1,2,3,4,5]
2 console.log(arr.concat(1,[2,3]))//[ 1, 2, 3, 4, 5, 1, 2, 3 ]
3 console.log(arr);//[ 1, 2, 3, 4, 5]
5、slice()
1 var arr=[1,2,3,4,5]
2 console.log(arr.slice(1,3))//[2, 3]
3 console.log(arr.slice(1,-1))//[2,3,4]
6、splice(start, deleteCount, item1, item2, ...) start指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数);若只使用start参数而不使用deleteCount、item,如:array.splice(start) ,表示删除[start,end]的元素。 deleteCount整数,表示要移除的数组元素的个数。如果 splice方法使用deleteCount参数来控制是删除还是添加: 返回值:由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。 var arr=[1,2,3,4,5]
arr.splice(1);
console.log(arr)//[1]
arr=[1,2,3,4,5]
arr.splice(1,3)//[1,5]
console.log(arr);
arr=[1,2,3,4,5]
arr.splice(1,3,1,2,3)
console.log(arr);//[1,1,2,3,5]
7.push()和pop() pop()方法从数组中删除最后一个元素,并返回该元素的值。 1 var arr=[1,2,3,4,5]
2 arr.push(6)
3 arr.pop();
4 console.log(arr);//[1,2,3,4,5]
8、shift()和unshift() 1 var arr=[1,2,3,4,5]
2 arr.unshift(6,4)
3 arr.shift();
4 console.log(arr);//[4,1,2,3,4,5]
9、toString()和toLocaleString() 1 var arr=[1,2,3,4,5]
2 console.log(arr.toString());//'1,2,3,4,5'
3 console.log(arr.toLocaleString())//'1,2,3,4,5'
10、遍历方法 在下面的众多遍历方法中,有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前,数组的length属性会被缓存在某个地方,所以,如果你在回调函数中为当前数组添加了新的元素,那么那些新添加的元素是不会被遍历到的。此外,如果在回调函数中对当前数组进行了其它修改,比如改变某个元素的值或者删掉某个元素,那么随后的遍历操作可能会受到未预期的影响。总之,不要尝试在遍历过程中对原数组进行任何修改,虽然规范对这样的操作进行了详细的定义,但为了可读性和可维护性,请不要这样做。 10.1、forEach() 1 array.forEach(callback(currentValue, index, array){
2 //do something
3 }, this)
4
5 array.forEach(callback[, thisArg])
currentValue 数组中正在处理的当前元素。 index(索引) 数组中正在处理的当前元素的索引。 array forEach()方法正在操作的数组。 1 function logArrayElements(element, index, array) {
2 console.log("a[" + index + "] = " + element);
3 }
4
5 // 注意索引2被跳过了,因为在数组的这个位置没有项
6 [2, 5, ,9].forEach(logArrayElements);
7
8 // a[0] = 2
9 // a[1] = 5
10 // a[3] = 9
10.2 map() 1 let new_array = arr.map(function callback(currentValue, index, array) {
2 // Return element for new_array
3 }[, thisArg])
参数和forEach()一样。 1 var arr=[1,2,3,4,5];
2 //数组的元素翻倍
3 var new_arr=arr.map((currentValue)=>{
4 return currentValue*2;
5 });
6 console.log(new_arr);//[2,4,6,8,10]
10.3 1 var new_array = arr.filter(callback[, thisArg])
callback() 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留。 1 var arr=[1,2,3,4,5];
2 //数组的元素翻倍
3 var new_arr=arr.filter((currentValue)=>{
4 return currentValue>3;
5 });
6 console.log(new_arr);//[4,5]
10.4、every() 1 arr.every(callback[, thisArg])
1 var arr=[1,2,3,4,5];
2 //检测数组的元素是否都大于3
3 var new_arr=arr.every((currentValue)=>{
4 return currentValue>3;
5 });
6 console.log(new_arr);//false
1 arr.some(callback[, thisArg])
1 var arr=[1,2,3,4,5];
2 //检测数组的元素是否都大于3
3 var new_arr=arr.some((currentValue)=>{
4 return currentValue>3;
5 });
6 console.log(new_arr);//true
10.5 reduce()和reduceRight() 1 arr.reduce(callback[, initialValue])
1 var arr=[1,2,3,4,5];
2 //检测数组的元素是否都大于3
3 var new_arr=arr.reduce((accumulator,currentValue)=>{
4 return currentValue*accumulator;
5 },10);
6 console.log(new_arr);//1200
7 var new_arr=arr.reduceRight((accumulator,currentValue)=>{
8 return currentValue*accumulator;
9 },10);
10 console.log(new_arr);//1200
10.6、 1 arr.indexOf(searchElement)
2 arr.indexOf(searchElement[, fromIndex = 0])
3 arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
1 var arr=[1,2,3,4,5,1];
2 //检测数组的元素是否都大于3
3 console.log(arr.indexOf(1));//0
4 console.log(arr.lastIndexOf(1));//5
九、数组类型 判断对象数组的方法: 1、Array.isArray()方法 2、instanceof 3,检查对象的类属性; 1 var arr=[1,2,3,4,5,1]; 2 //检测数组的元素是否都大于3 3 console.log(Array.isArray(arr));//true 4 console.log(arr instanceof Array);//true 5 console.log(Object.prototype.toString.call(arr).slice(8,-1)) //Array 十、类数组对象 把一个拥有数值length和非负整数属性的对象看做类数组对象,函数的argument对象、document.getElementByTagName()都是类数组对象。数组的方法时通用的,可以用Function.call()间接调用。 1 var arr={
2 '0':100,
3 '1':10,
4 '2':100,
5 length:3
6 };
7 //调用数组方法
8 console.log(Array.prototype.join.call(arr,"+"))//'100+10+100'
|
|