常用方法:1、push();2、unshift();3、pop();4、shift();5、splic();6、slice();7、sort() ;8、concat();9、reverse();10、join();11、forEach()等。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
javascript數組的常用方法
數組提供了一些常用方法,可實現數組元素的添加、刪除、替換以及排序等功能。
1) push(元素1,…,元素n)
push() 方法可將參數指定的元素依序加入陣列的結尾,並傳回加元素後的陣列長度(此方法必須至少有一個參數)。範例如下:
var arr = [1,2,3]; alert(arr.push(4));//返回最终数组的长度:4 alert(arr);//返回:1,2,3,4 alert(arr.push(5,6,7));//返回最终数组的长度:7 alert(arr);//返回:1,2,3,4,5,6,7
2) unshift(元素1,…,元素n)
unshift() 方法可把參數指定的元素依序加到陣列的前面,並傳回新增元素後的陣列長度。此方法必須至少有一個參數。注意:IE6、IE7 不支援方法的回傳值。範例如下:
var arr = [1,2,3]; alert(arr.unshift('a'));//返回最终数组的长度:4 alert(arr);//返回:a,1,2,3 alert(arr.unshift('b','c','d'));//返回最终数组的长度:7 alert(arr);//返回:b,c,d,a,1,2,3
3) pop()
#pop() 方法可彈出(刪除)陣列最後一個元素,並傳回彈出的元素。範例如下:
var arr = ['A','B','C','D']; alert(arr.pop());//返回:D alert(arr);//返回:A,B,C
4) shift()
shift() 方法可刪除陣列第一個元素,並傳回刪除的元素。範例如下:
var arr = ['A','B','C','D']; alert(arr.shift());//返回:A alert(arr);//返回:B,C,D
5) splice(index,count[,元素1,…,元素n])
splic() 方法功能比較強,它可以實作刪除指定數量的元素、替換指定元素以及在指定位置新增元素。這些不同功能的實作需要結合方法參數來決定:
當參數只有index 和count 兩個參數時,如果count 不等於0,splice() 方法實作刪除功能,同時傳回所刪除的元素:從index參數指定位置開始刪除count 參數指定個數的元素;
當參數為3 個以上,且count 參數不為0時,splice() 方法實作替換功能,同時傳回所替換的元素:以第三個及其之後的參數取代index 參數指定位置開始的count 參數指定個數的元素;
當參數為3 個以上,且count 參數為0 時,splice() 方法的實作新增功能:用第三個及其之後的參數加入到index 參數指定位置。
splice() 方法實作的各個功能範例如下。
① 使用splice() 從指定位置刪除指定個數的元素:
var arr = ['A','B','C','D']; //2个参数,第二个参数不为 0,实现删除功能 alert(arr.splice(0,2)); alert(arr); //返回C,D
② 使用splice() 以指定元素取代從指定位置開始的指定個數的元素:
var arr = ['A','B','C','D']; //3个参数,第二个参数不为 0,实现替换功能:用 a 替换掉 A,返回:A alert(arr.splice(0,1,'a')); alert(arr); //返回:a,B,C,D alert(arr.splice(0,2,'a or b'));//用a or b替换掉a和B,返回a,B alert(arr); //返回:a or b,C,D
③ 使用splice() 在指定位置新增指定的元素:
var arr = ['A','B','C','D']; //4个参数,第二个参数为 0,实现添加功能:在下标为 1 处添加 aaa,bbb,没有返回值 alert(arr.splice(1,0,'aaa','bbb')); alert(arr);//返回:A,aaa,bbb,B,C,D
【範例1】使用splice() 方法實作陣列去重。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用splice方法实现数组去重</title> <script> var arr = [1,2,2,2,4,2]; for(var i = 0; i < arr.length; i++){ for(var j = i + 1; j < arr.length; j++){ if(arr[i] == arr[j]){ arr.splice(j,1);//删除 j 位置处的元素 j--; } } } alert(arr);//返回1,2,4三个元素 </script> </head> <body> </body> </html>
上述程式碼使用了具有兩個參數的 splice(),實現了刪除指定元素的功能。
6) slice(index1[,index2])
slice() 方法傳回包含從陣列物件中的第index1~index2-1 之間的元素的數組。 index2 參數可以省略,省略時表示傳回從 index1 位置開始一直到最後位置的元素。需要注意的是,該方法只是讀取指定的元素,並不會對原始數組作任何修改。
範例如下:
var arr = ['A','B','C','D']; alert(arr.slice(0,3)); //返回:A,B,C alert(arr); //返回A,B,C,D alert(arr.slice(0)); //返回数组全部元素:A,B,C,D alert(arr); //返回A,B,C,D
7) sort()、sort(compareFunction)
sort() 方法用於以某種規則排序數組:當方法的參數為空時,按字典序(即元素的Unicode 編碼從小到大排序順序)排序數組元素;當參數為一個匿名函數時,將按匿名函數指定的規則排序數組元素。 sort() 排序後將傳回排序後的數組,範例如下。
① 依字典序排序陣列。
var arr = ['c','d','a','e']; alert(arr.sort()); //返回排序后的数组:a,c,d,e alert(arr); //返回排序后的数组:a,c,d,e
從上述程式碼,我們看到沒有參數時,sort() 會依照字典序排列陣列中的各個元素。
下面我們再用元素的sort() 對幾個數字排序,看看結果如何:
var arr = [4,3,5,76,2,0,8]; arr.sort(); alert(arr); //返回排序后的数组:0,2,3,4,5,76,8
我們看到排序後,結果並不是所預期的76 最大應排在最後,反而是8 排在最後,似乎8 在這些元素中是最大的,即元素並沒有按數字大小進行排序。
為什麼會出現這樣的結果呢?這是因為sort() 預設是對每個元素按字串進行排序,排序時會從左到右按位比較元素的每位字符,對應位的Unicode 編碼大的就意味著這個元素大,此時將不再對後面的字元進行比較;對應位元字元相同時才比較後面位置的字元。顯然上述數組的排序使用了 sort() 的預設排序規則。此時要讓陣列中的元素依數字大小排序,就必須透過匿名函數參數來修改排序規則。
② 依匿名函數參數指定的規則排序數組。
下面透過定義匿名函數來修改 sort() 的預設排序規則,實作對上面數字元素按數字大小進行排序:
var arr = [4,3,5,76,2,0,8]; arr2.sort(function(a,b){ return a-b;//从小到大排序 //return b-a;//从大到小排序 }); alert(arr);//返回排序后的数组:0,2,3,4,5,8,76
说明:匿名函数中返回第一个参数减第二个参数的值,此时将按元素数值从小到大的规则排序各个元素:当两个参数的差为正数时,前后比较的两个元素将调换位置排序;否则元素不调换位置。如果返回第二个参数减第一个参数的值,则按元素数值从大到小的规则排序各个元素,元素调换规则和从小到大类似。
当数组元素的前缀为数字而后缀为字符串时,如果希望这些元素能按数字大小进行排序,此时需对匿名函数中的参数作一些变通处理。因为这些参数代表了数组元素,所以它们也是一个包含数字和字符的字符串,因此要按数字大小来排序它们,就需要将参数解析为一个数字,然后再返回这些解析结果的差。
示例如下:
var arrWidth = ['345px','23px','10px','1000px']; arrWidth.sort(function(a,b){ return parseInt(a)-parseInt(b); }); alert(arrWidth);//排序后的结果为:10px,23px,345px,1000px
此外,我们通过匿名函数,还可以实现随机排序数组元素。示例如下:
var arr = [1,2,3,4,5,6,7,8]; arr.sort(function(a,b){ return Math.random()-0.5;//random()返回:0~1之间的一个值 }); alert(arr);//排序后的结果为:4,3,1,2,6,5,7,8。注意:每次执行的结果可能会不一样
上述代码中的匿名函数并没有返回两个参数的差值,而是返回 Math 对象中的 random() 随机函数和 0.5 的差值,这就使得元素的排序将不是根据元素大小来排序。由于 random() 的值为 0~1 之间的一个随机值,所以它和 0.5 的差时正时负,这就导致数组元素位置的调换很随机,所以排序后的数组是随机排序的。
8) concat(数组1,…,数组n)
concat() 将参数指定的数组和当前数组连成一个新数组。示例如下:
var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = [7,8,9]; alert(arr1.concat(arr2,arr3));//最终获得连接后的数组:1,2,3,4,5,6,7,8,9
9) reverse()
reverse() 方法可返回当前数组倒序排序形式。示例如下:
var arr = [1,2,3,4,5,6]; alert(arr.reverse());//返回:6,5,4,3,2,1
10) join(分隔符)
join() 方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。参数可以省略,省略参数时,分隔符默认为“逗号”。
11) forEach()
forEach() 方法用于对数组的每个元素执行一次回调函数。
语法如下:
array对象.forEach(function(currentValue[,index[,array]])[,thisArg])
forEach() 方法的第一个参数为 array 对象中每个元素需要调用的函数。
forEach() 方法中的各个参数说明如下:
currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);
index 参数:可选参数,表示正在处理的当前元素的索引;
array 参数:可选参数,表示方法正在操作的数组;
thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。
forEach() 函数的返回值为 undefined。示例如下:
var fruit = ["苹果","橙子","梨子"]; fruit.forEach(function(item,index){ console.log("fruit[" + index + "] = " + item); });
上述示例的运行后将在控制台中分别显示:fruit[0]=苹果、fruit[1]=橙子和fruit[2]=梨子。
12) filter()
filter() 方法用于创建一个新的数组,其中的元素是指定数组中所有符合指定函数要求的元素。
语法如下:
array对象.filter(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数,filter() 会返回所有使回调函数返回值为 true 的元素。
filter() 方法中的各个参数说明如下:
currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);
index 参数:可选参数,表示正在处理的当前元素的索引;
array 参数:可选参数,表示方法正在操作的数组;
thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。
filter() 函数返回一个新数组,其中包含了指定数组中的所有符合条件的元素。如果没有符合条件的元素则返回空数组。
示例如下:
var names1 = ["张山","张小天","李四","张萌萌","王宁","陈浩"];//原数组 function checkName(name){ //定义回调函数,判断名字是否姓“张” if(name.indexOf("张") != -1){ return true; }else{ return false; } } var names2 = names1.filter(checkName);//对names1执行回调用函数,返回所有姓张的名字 names2.forEach(function(item,index){//遍历names2数组中的每个元素 console.log("names2[" + index + "] = " + item); });
上述示例运行后将在控制台中分别显示:names2[0]=张山、names2[1]=张小天和names2[2]=张萌萌。
13) map()
map() 方法用于创建一个新的数组,其中的每个元素是指定数组的对应元素调用指定函数处理后的值。
语法如下:
array对象.map(function(currentValue[,index[,array]])[,thisArg])
map() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数。
map() 方法中的各个参数说明如下:
currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);
index 参数:可选参数,表示正在处理的当前元素的索引;
array 参数:可选参数,表示方法正在操作的数组;
thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。
map() 函数返回一个新数组,其中的元素为原始数组元素调用回调函数处理后的值。示例如下:
var number = [1,2,3];//原数组 var num=number.map(function(item){//对原数组中的每个元素*2,将值分别存储在num数组中 return item * 2; }); num.forEach(function(item,index){//遍历num中的每个元素 console.log("num[" + index + "]=" + item); });
上述示例运行后将在控制台中分别显示:num[0]=2、num[1]=4和num[2]=6。
14) reduce()
reduce() 用于使用回调函数对数组中的每个元素进行处理,并将处理进行汇总返回。语法如下:
array对象.reduce(function(result,currentValue[,index[,array]])[,initialValue])
reduce() 方法的第一个参数为回调函数。
reduce() 方法中的各个参数说明如下。
result 参数:必需参数,表示初始值或回调函数执行后的返回值。在第一次调用回调函数前,result 参数表示初始值;在调用回调函数之后,result 参数表示回调函数执行后的返回值。
需要注意的是,如果指定了 initialValue 参数,则初始值就是 initialValue 参数值,否则初始值为数组的第一个元素。
currentValue 参数:必需参数,表示正在处理的数组元素(当前元素)。
需要注意的是,如果指定了 initialValue 参数,则第一次执行回调函数时的 currentValue 为数组的第一个元素,否则为第二个元素。
index 参数:可选参数,表示正在处理的当前元素的索引。
array 参数:可选参数,表示方法正在操作的数组。
initialValue 参数,可选参数,作为第一次调用回调函数时的第一个参数的值。如果没有提供该参数,第一次调用回调函数时的第一个参数将使用数组中的第一个元素。
需要注意的是:对一个空数组调用 reduce() 方法时,如果没有指定 initialValue 参数此时将会报错。
reduce() 的使用示例如下:
var num1 = [1,3,6,9]; //reduce()没有initialValue参数 var num2 = num1.reduce(function(v1,v2){ //① return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加 }); console.log("num2=" + num2);//输出:num2=37 //reduce()提供了initialValue参数 var num3 = num1.reduce(function(v1,v2){ //② return v1 + 2 * v2;//将当前元素值*2后和初始值或函数的前一次执行结果进行相加 },2); console.log("num3=" + num3); //输出:num3=40
上述示例中,① 处调用的 reduce() 没有指定 initialValue 参数,因而初始值为数组的第一个元素,即 1,此时 reduce() 的执行过程等效于:1+2*3+2*6+2*9 运算表达式的执行,结果返回 37。② 处调用的 reduce() 指定了值为 2 的 initialValue 参数,因而初始值为 2,此时 reduce() 的执行过程等效于:2+2*1+2*3+2*6+2*9 运算表达式的执行,结果返回 40。
15) find()
find() 用于获取使回调函数值为 true 的第一个数组元素。如果没有符合条件的元素,将返回 undefined。
语法如下:
array对象.find(function(currentValue[,index[,array]])[,thisArg])
filter() 方法的第一个参数为回调函数,array 对象中每个元素都需要调用该函数,filter() 会返回所有使回调函数返回值为 true 的元素。
filter() 方法中的各个参数说明如下:
currentValue 参数:必需参数,表示正在处理的数组元素(当前元素);
index 参数:可选参数,表示正在处理的当前元素的索引;
array 参数:可选参数,表示方法正在操作的数组;
thisArg 参数,可选参数,取值通常为 this,为空时取值为 undefined。
find() 函数使用示例如下:
var names = ["Tom","Jane","Marry","John","Marissa"]; //定义回调函数 function checkLength(item){ return item.length >= 4; } var name = names.find(checkLength);//返回名字数组中名字长度大于或等于4的第一个名字 console.log("name: " + name);
上述示例运行后将在控制台中输出 name:Jane。
【相关推荐:javascript学习教程】
以上是javascript數組常用方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!