JavaScript中的数组详解
JavaScript中的数组前端
1、数组的定义数组
数组是值的有序集合，或者说数组都是数据的有序列表。浏览器
2、建立数组数据结构
【字面量形式】ide
1、空数组函数
var arr=[];测试
2、带有元素的数组spa
var arr=[1,2,3,1,2];对象
3、数组值能够是任意类型blog
var arr=[1,2.3,'foodoir',true,null,undefined,[1,2,3],{name:'foodoir',age:21}];
注意：
一、数组字面量中的值不必定是常量，它们能够是任意表达式；
二、它能够包含对象字面量（{name:'foodoir',age:21}）和其它数组字面量（[1,2,3]）；
三、若是数组的元素仍是数组，就造成了多维数组,如：var arr=[[1,2,3],[4,[5,6]]];
四、使用数字字面量表示法时，不会调用Array构造函数。
4、省略数组中的某个值，默认值为undefined
var arr=[1,,3]//至关于[1,undefined,3]
省略数组中的某个值，从而致使该数组变为了稀疏数组，此时须要注意的是
一、var arr=[,,]，这种方法在不一样的浏览器下面，运行的结果不同
在ie8中，会在末尾添加undefined的值,好比说var arr=[1,2,]，至关于[1,2,undefined]，此时数组的长度为3
在其它浏览器中会自动忽略最后的逗号，好比说var arr=[1,2,]，至关于[1,2]，此时数组的长度为2
二、除了经过字面量的方式直接构造稀疏数组以外，还能够经过delete操做符来构造，具体见后面关于delete的介绍
！import：足够稀疏的数组一般在实现上比稠密数组（连续数组）更慢，内存利用率更高，在这样的数组中查找元素的时间与常规对象属性的查找时间同样长！
【经过构造函数Array()建立数组】
1、调用时没有参数
var arr=new Array()
注意
空数组，等同于arr=[];
2、调用时传递一个参数
var arr=new Array(5)；
注意
一、表明指定了数组的长度为5，等同于var arr=[];arr.length=5;
二、若是是：var arr=new Array[5]; //输出：undefined is not a function 此时应该注意到Array后面的符号，否则容易出错
三、若是是：var arr=new Array('5');console.log(a[0],a.length); //5,1 说明此时建立的数组只有一项，它的长度为1，值为5
若是预先知道数组元素个数，能够经过参数指定，这种形式的Array()构造函数能够用来分配一个数组空间。
3、超过两个参数
var arr=new Array(1,2.3,'foodoir',null,undefined,true,false,[1,23,4]);
注意
显示指定了数组中的值，能够为多种类型，与var arr=[1,2.3,'foodoir',true,null,undefined,[1,2,3],{name:'foodoir',age:21}];相似；
另外：在使用Array()构造函数时，能够省略new操做符，好比：var arr=Array(1,2,3);
3、使用数组
1、根据下标找到对应的值
arr[下标]=值;
//经过下标读取值 var arr = [1,2,3,4]; console.log(arr[0]);//1，说明数组的下标从0开始 console.log(arr[4]);//undefined，数组的长度为4，取不到arr[4]的值 //修改以前的值 arr[0] = 'hello'; console.log(arr);//hello,2,3
注意：数组中的下标是从0开始
2、向数组中添加元素
arr[下标]=值;
arr.push(值,...):数组末尾添加元素
arr.unshift(值,...):数组开始添加元素
//经过下标向数组中添加一个值
var arr = [1,2,3,4];
arr[4] = 'world';
console.log(arr);//1,2,3,4,world
arr[9] = 10;
console.log(arr);//1,2,3,4,world,,,,,10
//也能够这样
var x= 2;
console.log(arr[x]);//3
arr[x] = 333;
console.log(arr);//1,2,333,4,world,,,,,10
//在数组的末尾添加一个或多个元素push()
var arr = [];
arr[0] = 'a';
arr[0] = 'a';
arr.push('c');
arr.push('d','e','f',123,4.5,'foodoir');
console.log(arr);
console.log(arr.length);//8
//向数组的首部添加一个或多个元素unshift()
arr.unshift(1,2,3);
console.log(arr);//1,2,3,a,c,d,e,f,123,4.5,foodoir
console.log(arr.length);//11
3、读取数组中元素
arr[下标]，同1
4、修改数组中的元素
arr[下标]=值;同1
5、删除数组中元素
delete arr[下标]
注意：使用delete删除数组元素不会改变数组的length属性
arr.pop()：删除数组的元素
arr.shift()：删除数组开头的元素
能够经过设置length属性，删除数组后面的元素
//经过数组下标来删除数组中的元素 var arr = [1,2,3,'a','hello']; console.log(arr); delete arr[1];//删除数组中第二个元素 console.log(arr);//1,,3,a,hello console.log(arr.length);//5数组的长度没变 //删除数组末尾的元素pop(); var arr = [1,2,3,4.5,'foodoir']; var a = arr.pop();//弹出最后一个元素 console.log(a);//foodoir，此时数组中最后一元素为4.5 arr.pop();//再删除最后一个元素 console.log(arr);//结果为：1,2,3 console.log(arr.length);//3 //删除数组中的首部 var a = arr.shift(); console.log(a);//1 console.log(arr);//2,3 //经过设置length属性，删除数组后面的元素 var arr = [1,2,3,4,5,6]; arr.length = 3;//设置了数组的长度为3 //console.log(arr);//1,2,3 arr.length = 0;//将数组中全部的数据都删除 console.log(arr);//Array[0]
补充：有些资料上在使用数组的方法上提到了栈方法队列方法，这里咱们也对以前的例子进行理解
栈方法：
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度。
队列方法 ：
shift()删除并返回数组的第一个元素
push()向数组的末尾添加一个或更多元素，并返回新的长度
unshift()向数组的开头添加一个或更多元素，并返回新的长度。
一、栈是一种LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最新添加的项最先被移除。栈中项的插入（push）和移除，只发生在一个位置——栈的顶部。ECMAScript为数组提供了push()和pop()方法，能够实现相似栈的行为。
push()方法能够接收任意数据的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度。pop()方法从数组末尾移除最后一项，减小数组的length值
二、栈数据结构的访问规则是LIFO（后进先出），而队列数据结构的访问规则是FIFO（First-In-First-Out，先进先出）。队列在列表的末端添加项，从列表的前端移除项。push()方法是向数组末端添加项的方法，所以要模拟队列只需一个从数组前端取得项的方法——shift()，其可以移除数组中的第一个项并返回该项，同时数组的length-1。结合使用shift()和push()方法，能够像使用队列同样使用数组。
此外，ECMAScript还提供了unshift()方法，它能在数组前端添加任意个项并返回新数组的长度。所以，结合使用unshift()和pop()方法，能够从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项
4、遍历数组
1、for循环遍历下标连续的数组
2、for-in遍历数组
3、经过forEach()遍历数组
语法：Array.forEach(function(value[,index[,array]]){函数体})
//数组中如何进行遍历
//当索引连续时，能够用for循环遍历
var arr = ['a','b','c',123];
for(var i = 0 ; i<arr.length;i++){
console.log(arr[i]);//a,b,c,123
}
//当索引不连续时，能够用for/in循环
var arr1 = [];
arr1[1] = 'x';
arr1[22] = 'y';
arr1[333] = 'z';
for(var i in arr1){
console.log(arr1[i]);//x,y,z
}//这种方法遍历的是继承下来的属性，若不想遍历继承下来的属性能够用hasOwnProperty()函数
for(var i in arr1){
if(arr1.hasOwnProperty(i)){
console.log(arr1[i]);//x,y,z
}
}//这种方法遍历的不是继承下来的属性
//咱们还能够经过forEach()方法来遍历数组
//语法：Array.forEach(function(value[,index[,array]]){函数体})
var arr2 = [1,2,3,4,5,6];
//方法一：
arr2.forEach(function(x){
console.log(x);
});1,2,3,4,5,6
//方法二：
function Test(element,index,array){
console.log('要处理的数组为：'+array);
console.log('索引：'+index+'--值为：'+element);
}
arr2.forEach(Test);
5、数组的经常使用方法
1、Array.join([delimiter])
描述
将数组中的值链接成字符串
参数
以指定分隔符链接，若是不指定，默认以,链接
返回值
返回链接以后的字符串
注意
Array.join()是string.split()方法的逆向操做
小结：数组转换方法：join
在通常默认状况下，会以逗号分隔的字符形式返回数组项；而join方法可使用不一样的分隔符来构建字符串，join方法只接受一个参数，用做分隔符的字符串，而后返回全部包含数组项的字符串
2、Array.reverse()
描述
数组倒置
返回值
返回倒置以后的数组
3、Array.sort()
描述
数组排序函数
参数
若是不带参数调用sort，数组以字母顺序进行排序，升序
返回值
返回排序以后的数组
注意
若是数组中包含undefined元素，它们会被排到数组的尾部，好比：
var a = [1,2,4,undefined,3,5];
console.log(a.sort());//0 : 1 1 : 2 2 : 3 3 : 4 4 : 5 5 : undefined
小结：reverse()和sort()是数组中存在的两个能够用来重排序的方法
4、Array.concat(value,...)
描述
建立并返回一个新数组，数组中包含调用concat的原始数组的元素和concat的每一个参数。
返回值
返回链接以后的新数组
注意
若是这些参数中的任何一个自身是数组，则链接的是数组的元素，而非数组自己
5、Array.slice(start[,end])
描述
返回数组中的部分
参数
start起始点
end结束位置
返回值
返回数组中的部分
6、Array.splice(index , howMany[, element1[, ...[, elementN]]])
描述
添加或删除数组中的一个或多个元素
参数
index从数组的哪一位开始修改内容。若是超出了数组的长度，则自动从数组末尾开始添加内容；若是是负值，则表示从数组末位开始的第几位。
howMany是整数，表示要移除的数组元素的个数。若是 howmany 是 0，则不移除元素。这种状况下，至少应添加一个新元素。若是 howmany 超出了 index 位以后的元素的总数，则从 index 向后至数组末尾的所有元素都将被删除（含第 index 位）。若是没有指定 howmany 参数（如上第二种语法，是 SpiderMonkey 的扩展功能），将会删除第 index 位以后的全部元素（不含第 index 位）
element1...要添加进数组的元素。若是不指定，则 splice 只删除数组元素。
返回值
由被删除的元素组成的一个数组。若是只删除了一个元素，则返回只包含一个元素的数组。若是没有删除元素，则返回空数组。
注意
若是添加进数组的元素个数不等于被删除的元素个数，数组的长度会发生相应的改变。
7、Array.push(value,...)
描述
像数组末尾添加一个或者多个元素
参数
添加的值
返回值
返回数组的长度
8、Array.pop()
描述
弹出数组的最后的元素
返回值
返回弹出的元素
9、Array.unshift(value,...)
描述
向数组开始添加一个或者多个元素
参数
添加的值
返回值
返回数组的长度
10、Array.shift()
描述
弹出数组开始的元素
返回值
返回弹出以后的值
小结：这四种方法称为：栈和队列方法，
11、Array.map()
描述
返回一个由原数组中的每一个元素调用一个指定方法后的返回值组成的新数组
语法
Array.map(callback)
参数
callback回调函数
currentValue,callback的第一个参数,数组中当前被传递的元素
index，callback的第二个参数，数组中当前被传递的元素的索引
array，callback的第三个参数，调用map方法的数组
注意
map 方法会给原数组中的每一个元素都按顺序调用一次 callback 函数
callback 每次执行后的返回值组合起来造成一个新数组
callback 函数只会在有值的索引上被调用，那些历来没被赋过值或者使用 delete 删除的索引则不会被调用
12、Array.filter()
描述
方法使用指定的函数测试全部元素，并建立一个包含全部经过测试的元素的新数组
语法
arr.filter(callback)
注意
filter 为数组中的每一个元素调用一次 callback 函数，并利用全部使得 callback 返回 true 或 等价于 true 的值 的元素建立一个新数组
callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有经过 callback 测试的元素会被跳过，不会被包含在新数组中。
13、Array.reduce()
描述
reduce方法接收一个函数做为累加器，数组中的每一个值（从左到右）开始缩减，最终为一个值
语法
arr.reduce(callback,[initialValue])
参数
callback
previousValue，上一次调用返回的值或者是提供的初始值(initialValue)
currentValue,数组中当前被处理的元素
index,当前元素在数组中得索引
array，调用reduce的数组
initialValue，做为第一次调用callback的第一个参数
注意
reduce 为数组中的每个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组
回调函数第一次执行时，previousValue 和 currentValue 能够是一个值，若是 initialValue 在调用 reduce 时被提供，那么第一个 previousValue 等于 initialValue ，而且currentValue 等于数组中的第一个值；若是initialValue 未被提供，那么previousValue 等于数组中的第一个值，currentValue等于数组中的第二个值。
14、Array.reduceRight()
描述
与reduce()方法的执行方向相反
15、Array.some()
描述
测试数组中的某些元素是否经过了指定函数的测试
语法
arr.some(callback)
注意
some 为数组中的每个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个真值（便可转换为布尔值 true 的值）
16、Array.every()
描述
测试数组的全部元素是否都经过了指定函数的测试。
语法
arr.every(callback)
注意
every 方法为数组中的每一个元素执行一次 callback 函数，直到它找到一个使 callback 返回 falsy（表示可转换为布尔值 false 的值）的元素。若是发现了一个这样的元素，every 方法将会当即返回 false。不然，callback 为每个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或历来没被赋值的索引调用
17、Array.indexOf()
28、Array.lastIndexOf()
19、Array.isArray()
描述
检测某个值是否为数组
20、Array.toString()
描述
返回一个字符串，表示指定的数组及其元素。
返回值
返回一个字符串，表示指定的数组及其元素。
注意：
一、该方法的返回值与不使用任何参数调用join的方法一致，如[1,2,3].toString();//'1,2,3
二、因为alert要接收字符串参数，它会在后台调用toString()方法，会获得与toString()方法相同的结果，如alert([1,2,3]);//1,2,3
2一、Array.toLocaleString()
toLocaleString()是toString()方法的本地化版本，他常常会返回到与toString()方法相同的结果
若是数组中的某一项值为null或是undefined，该值在toLocaleString()和toString()方法返回的结果以空字符串表示，如：
var a=[1,null,2,undefined,3];
console.log(a.toLocaleString());//1,,2,,3
console.log(a.toString());//1,,2,,3
关于两者的区别，能够经过下面的例子来理解：
toLocaleString 方法返回一个 String 对象，这个对象中包含了用当前区域设置的默认格式表示的日期。
对于公元 1601 和 1999 之间的时间，日期格式要按照用户的“控制面板”中“区域设置”来肯定。
F对于此区间外的其余时间，使用 toString 方法的默认格式。
例如，一样是 3 月 21 日，在美国，toLocaleString 可能会返回 "03/21/08 01:02:03"，而在欧洲，返回值则多是 "21/03/08 01:02:03"，由于欧洲的惯例是将日期放在月份前面。
toLocaleString 只是用来显示结果给用户；最好不要在脚本中用来作基本计算，由于返回的结果是随机器不一样而不一样的。
2二、Array.valueOf()
valueOf()方法返回数组对象自己
var a=[1,2,3];
console.log(a.valueOf());//[1,2,3]
console.log(a.valueOf() instanceof Array);//true
小结：toString，toLocaleString和valueOf方法，都是属于对象的继承方法！
它们的具体使用方法以下：
//数组中经常使用的方法
var arr = ['a','b','c','d','e'];
//join
var a = arr.join();//a,b,c,d,e 默认为","
a = arr.join(",");//a,b,c,d,e
a = arr.join("");//abcde 修改成空
console.log(a);
//reverse反转
a = arr.reverse();
console.log(a);
//sort()排序
var arr1 = ['a','b','c','A','B','C'];
var a = arr1.sort();
console.log(a);//A,B,C,a,b,c 默认排序是按照码排序
//也能够本身指定排序的顺序
var arr2 = [1,2,3,11,15,20,23,30];
var a = arr2.sort();
console.log(a);//1,11,15,2,20,23,3,30
var a = arr2.sort(function(a,b){
return a-b;
});
console.log(a);//1,2,3,11,15,20,23,30
var a = arr2.sort(function(a,b){
return b-a;
});
console.log(a);//30,23,20,15,11,3,2,1
var users = [
{name:'foodoir',age:21},
{name:'hello',age:33},
{name:'world',age:44},
{name:'jake',age:55},
];
// console.log(users);
users.sort(function(a,b){
if(a.name>b.name) return 1;
if(a.name<b.name) return -1;
return 0;
});
// console.log(users);
for(var i in users){
console.log(users[i]['name']);//注意是访问的数组里面的name属性方法是users[i]['name']
}
//concat数组的连接
var arr = [1,2,3];
var a = arr.concat('a');//1,2,3,a
var a = arr.concat([4,5,6]);
var a = arr.concat([4,[5,['a','b','c']]]);
console.log(a);
//slice()
var arr = ['a','b','c','d','e','f','g','h','i'];
var a = arr.slice(0,3);
console.log(a);//a,b,c
var a = arr.slice(0,-2);
console.log(a);//a,b,c,d,e,f,g
var a = arr.slice(-5,-3);//
console.log(a);//e,f
var a = arr.slice(-5,3);//不存在
console.log(a);//e,f
var a = arr.slice(-5,0);//不存在
console.log(a);//e,f
var a = arr.slice(4);//表示从左边第五个开始，一直到数组末尾
console.log(a);//e,f,g,h,i
var a = arr.slice(-4);//表示从右边第四个开始，一直到数组末尾
console.log(a);//f,g,h,i
console.log(arr);//原数组并无变化
//splice
var arr = ['a','b','c','d','e','f','g','h','i'];
console.log(arr.length);//9
var a = arr.splice(0,1);
console.log(a);//a
console.log(arr);//b,c,d,e,f,g,h,i
console.log(arr.length);//8
//此种方法将数组中的值取出来了，致使数组长度减小
var a = arr.splice(5);
console.log(a);//g,h,i
console.log(arr);//b,c,d,e,f
console.log(arr.length);//5
var a = arr.splice(0,2,'!','?','%');
console.log(a);//b,c 截取的值为b,c ，而且在b,c 的基础上，加上了!,?,%,
console.log(arr);//!,?,%,d,e,f
console.log(arr.length);//6
//map
var arr = [1,2,3,4,5];
var a = arr.map(function(x){
return x*x;
});
console.log(a);//1,4,9,16,25
var arr = ['a!','b!','c','d','e!'];
var a = arr.map(demo);
function demo(x){
return x.replace(/!/g,'?').toUpperCase();//将！改成？，将小写变为大写
}
console.log(a);
//filter过滤
var arr = [1,2,4,8,16,32,22];
var a = arr.filter(function(x){
return x<=10;
});
console.log(a);//1,2,4,8 只输出值小于10 的
var arr1 = [1,2,4,8,16,32,21,true,false,null,undefined];
var a1 = arr1.filter(function(x){
//过滤掉奇数
return x%2 == 0;
});
console.log(a1);//0：2 1:4 2:8 3:16 4:32 5:false 6:null length : 7
var arr1 = [1,2,4,8,16,32,21,true,false,null,undefined];
var a1 = arr1.filter(function(x){
//过滤掉null/undefined
return x!== null && x!==undefined;
});
console.log(a1);//1,2,4,8,16,32,21,true,false
//reduce
var arr = [1,2,3,4,5];
var a = arr.reduce(function(a,b){
return a+b;
});
console.log(a);//15
var a = arr.reduce(function(a,b){
return a+b;
},10); //传入初始值10
console.log(a);//25
//every和some
var age = [11,22,33,44,55];
//every，当数组中全部的值都知足条件时，返回true，不然返回false
var a = arr.every(function(x){
return x>=18;
});
console.log(a);//false
//若将age里面的11改成18，则为true
//some ，当数组中只要有值知足条件，就返回true
var b = arr.some(function(y){
return y<18;
});
console.log(b);//true
//indexOf,a最早出现的位置
var arr = ['a','b','c','d','e'];
var res = arr.indexOf(a);
console.log(res);//没有的话，返回的是-1
var res = arr.indexOf('a');
console.log(res);//有的话，返回的是该值对应数组中的索引
var arr = ['a','b','c','d','e','a','bc','a'];
var res = arr.indexOf('a',2);//表示从第二个开始索引
console.log(res);//5
//lastIndexOf(),a最后出现的位置
var res = arr.lastIndexOf('a');
console.log(res);
//Array.isArray()
var arr = ['a','b','c','d','e'];
console.log(Array.isArray(arr));//true
console.log(Array.isArray([]));//true
console.log(Array.isArray({}));//false,空的对象不是数组，
//数组是对象，可是对象不是数组
//toString
var arr = ['a','b','c','d','e'];
console.log(arr.toString());//a,b,c,d,e
console.log(arr.join());//a,b,c,d,e
- 1. JavaScript数组详解
- 2. Javascript数组详解
- 3. JavaScript 数组详解
- 4. 详解JavaScript数组
- 5. JavaScript中数组对象详解
- 6. Javascript Array数组详解
- 7. JavaScript数组方法详解
- 8. JavaScript数组结构与算法——数组详解（中）
- 9. JavaScript中的数组
- 10. Javascript中的数组
- 更多相关文章...
- • 免费ARP详解 - TCP/IP教程
- • ARP协议的工作机制详解 - TCP/IP教程
- • Flink 数据传输及反压详解
- • Scala 中文乱码解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案