JS針對Array的各種操作匯總
Array應該是我們在平時寫js代碼中,使用頻率最高的,在平時的項目中,很多數(shù)據都是可以通過Array來存儲、操作等任務。除了Object之外,Array類型應該是js中最常用的類型了。
今天總結一下Array的一些簡單和基本的操作,也來鞏固下自己的基礎知識。
一、如何創(chuàng)建Array(下面直接說數(shù)組)
創(chuàng)建數(shù)組主要有兩種方法,第一種是使用數(shù)組構造函數(shù),第二種是使用數(shù)組字面量表示法。
1、使用數(shù)組構造函數(shù)
如:var arr = new Array();
如果預先知道數(shù)組的長度,那么也可以直接給構造函數(shù)傳遞該長度。
如:var arr = new Array(20);
如果知道數(shù)組中應該包含的項,就直接在構造的時候,傳遞數(shù)組中的應該包含的項。
如:var arr = new Array(1,2,3);
2、使用數(shù)組字面量表示法
如:var arr = [1,2,3,4];
var arr2 = [];
二、數(shù)組的操作
1、 棧方法和隊列方法
1)棧操作的方式:先進后出原則----通過重數(shù)組尾部添加數(shù)據項,然后在從數(shù)組的尾部獲取尾部數(shù)據項
push();----就是在數(shù)組的尾部添加數(shù)據項,該方法的參數(shù)個數(shù)可以自定義;
pop();---該方法就是獲取數(shù)組的最尾部的一個數(shù)據項,該函數(shù)無需傳遞任何參數(shù);
如:
var colors = new Array();//創(chuàng)建數(shù)組
var count = colors.push("red","green");//推入兩項
console.log(count);
var color = ["red","black"];
color.push("brown");//推入另一項
color[3]="yellow"; //添加一項
console.log(color);
console.log(color.push("blue"));
console.log(color.pop());//取得最后一項
2)隊列操作的方式:先進先出原則---通過從數(shù)組的頭部插入數(shù)據和獲取數(shù)據項來模擬實現(xiàn)
push();--向數(shù)組末端添加數(shù)據項;
shift();---獲取數(shù)組的頭部一項的數(shù)據信息;
unshift();--與shift完全相反,就是向數(shù)組的頭部插入數(shù)據項信息;
var colorArr = new Array();//創(chuàng)建數(shù)組
colorArr.push("red","yellow");//推入兩項
console.log(colorArr);
var length = colorArr.push("blue");
console.log(length);
var item = colorArr.shift();//取得第一項
console.log(item);
console.log(colorArr.length);
2、檢測驗證數(shù)組
在平時項目開發(fā)中,我們往往會遇到,判斷一個對象是否為數(shù)組(函數(shù)的參數(shù)傳遞中),那么如果判斷一個對象是否為數(shù)組呢,有以下兩種方式
1)第一種方法
if(value instanseof Array){
}
2)第二種方法
if(Array.isArray(value)){
}//該方法只使用與高版本的瀏覽器:IE9+、Firefox4+/Chrome
3、具體的編程實例
1)添加元素(數(shù)組末尾添加元素)
在數(shù)組 arr 末尾添加元素 item。不要直接修改數(shù)組 arr,結果返回新的數(shù)組 .
方法一:slice()和push()結合
function append(arr, item) {
var newArr = arr.slice(0); // slice(start, end)淺拷貝數(shù)組
newArr.push(item);
return newArr;
};
方法二:普通的迭代拷貝
function append(arr, item) {
var length = arr.length,
newArr = [];
for (var i = 0; i < length; i++) {
newArr.push(arr[i]);
}
newArr.push(item);
return newArr;
};
方法三:使用concat
function append(arr, item) {
return arr.concat(item);
}
2)添加元素(添加任意位置的元素)
在數(shù)組 arr 的 index 處添加元素 item。不要直接修改數(shù)組 arr,結果返回新的數(shù)組。
方法一:使用普通的迭代拷貝
function insert(arr, item, index) {
var newArr=[];
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]);
}
newArr.splice(index,0,item);
return newArr;
}
方法二:slice()和splice()結合
function insert(arr, item, index) {
var newArr=arr.slice(0);
newArr.splice(index,0,item);
return newArr;
}
方法三:concat()和splice()結合
function insert(arr, item, index) {
var newArr=arr.concat();
newArr.splice(index,0,item);
return newArr;
}
3、刪除元素(刪除數(shù)組最后一個元素)
刪除數(shù)組 arr 最后一個元素。不要直接修改數(shù)組 arr,結果返回新的數(shù)組 。
方法一:使用普通的迭代拷貝
function truncate(arr, item) {
var newArr=[];
for(var i=0;i<arr.length-1;i++){
newArr.push(arr[i]);
}
return newArr;
}
方法二:concat()和pop()結合
function truncate(arr) {
var newArr = arr.concat();
newArr.pop();
return newArr;
}
4、刪除元素(刪除數(shù)組第一個元素)
刪除數(shù)組 arr 第一個元素。不要直接修改數(shù)組 arr,結果返回新的數(shù)組 。
方法一:使用普通的迭代拷貝
function curtail(arr) {
var newArr=[];
for(var i=1;i<arr.length;i++){
newArr.push(arr[i]);
}
return newArr;
}
方法二:concat()和shift()結合
function curtail(arr) {
var newArr = arr.concat();
newArr.shift();
return newArr;
}
方法三:slice()
function curtail(arr) {
return arr.slice(1);
}
5、合并數(shù)組
合并數(shù)組 arr1 和數(shù)組 arr2。不要直接修改數(shù)組 arr,結果返回新的數(shù)組 。
方法一:使用普通的迭代拷貝
function concat(arr1, arr2) {
var newArr=[];
for(var i=0;i<arr1.length;i++){
newArr.push(arr1[i]);
}
for(var j=0;j<arr2.length;j++){
newArr.push(arr2[j]);
}
return newArr;
}
方法二:concat()方法
function concat(arr1, arr2) {
return arr1.concat(arr2);
}
方法三:slice()和push()結合
function concat(arr1, arr2) {
var newArr=arr1.slice(0);
for(var i=0;i<arr2.length;i++){
newArr.push(arr2[i]);
}
return newArr;
}
5、移除數(shù)組中的元素
移除數(shù)組 arr 中的所有值與 item 相等的元素。不要直接修改數(shù)組 arr,結果返回新的數(shù)組 。
方法一:splice()方法
function remove(arr, item) {
var newArr = arr.slice(0);
for(var i=0; i<newArr.length; i++) {
if(newArr[i] == item) {
newArr.splice(i, 1);
}
}
return newArr;
}
var arr = [1,2,3,4,2];
var item = 2;
console.log(remove(arr, item));
console.log(arr);
方法二:push()方法
function remove(arr,item){
var newarr = [];
for(var i=0;i<arr.length;i++){
if(arr[i] != item){
newarr.push(arr[i]);
}
}
return newarr;
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS動態(tài)添加option和刪除option(附實例代碼)
option的添加和刪除通過js實現(xiàn)及動態(tài)創(chuàng)建select,本例提供實例的完整代碼,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04
django admin 使用SimpleUI自定義按鈕彈窗框示例
Django 后臺admin有大量的屬性和方法,擁有強大的功能和自定義能力,這篇文章主要介紹了django admin 使用SimpleUI自定義按鈕彈窗框示例,需要的朋友可以參考下2023-04-04
JavaScript實現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細介紹了JavaScript如何實現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
js實現(xiàn)數(shù)組內數(shù)據的上移和下移的實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)數(shù)組內數(shù)據的上移和下移的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時,發(fā)現(xiàn)IE與FF在動態(tài)加載Html元素時,有一些差別,一起過來看看下面的代碼吧2014-01-01

