JS針對(duì)Array的各種操作匯總
Array應(yīng)該是我們?cè)谄綍r(shí)寫js代碼中,使用頻率最高的,在平時(shí)的項(xiàng)目中,很多數(shù)據(jù)都是可以通過Array來存儲(chǔ)、操作等任務(wù)。除了Object之外,Array類型應(yīng)該是js中最常用的類型了。
今天總結(jié)一下Array的一些簡(jiǎn)單和基本的操作,也來鞏固下自己的基礎(chǔ)知識(shí)。
一、如何創(chuàng)建Array(下面直接說數(shù)組)
創(chuàng)建數(shù)組主要有兩種方法,第一種是使用數(shù)組構(gòu)造函數(shù),第二種是使用數(shù)組字面量表示法。
1、使用數(shù)組構(gòu)造函數(shù)
如:var arr = new Array();
如果預(yù)先知道數(shù)組的長(zhǎng)度,那么也可以直接給構(gòu)造函數(shù)傳遞該長(zhǎng)度。
如:var arr = new Array(20);
如果知道數(shù)組中應(yīng)該包含的項(xiàng),就直接在構(gòu)造的時(shí)候,傳遞數(shù)組中的應(yīng)該包含的項(xiàng)。
如:var arr = new Array(1,2,3);
2、使用數(shù)組字面量表示法
如:var arr = [1,2,3,4];
var arr2 = [];
二、數(shù)組的操作
1、 棧方法和隊(duì)列方法
1)棧操作的方式:先進(jìn)后出原則----通過重?cái)?shù)組尾部添加數(shù)據(jù)項(xiàng),然后在從數(shù)組的尾部獲取尾部數(shù)據(jù)項(xiàng)
push();----就是在數(shù)組的尾部添加數(shù)據(jù)項(xiàng),該方法的參數(shù)個(gè)數(shù)可以自定義;
pop();---該方法就是獲取數(shù)組的最尾部的一個(gè)數(shù)據(jù)項(xiàng),該函數(shù)無需傳遞任何參數(shù);
如:
var colors = new Array();//創(chuàng)建數(shù)組 var count = colors.push("red","green");//推入兩項(xiàng) console.log(count); var color = ["red","black"]; color.push("brown");//推入另一項(xiàng) color[3]="yellow"; //添加一項(xiàng) console.log(color); console.log(color.push("blue")); console.log(color.pop());//取得最后一項(xiàng)
2)隊(duì)列操作的方式:先進(jìn)先出原則---通過從數(shù)組的頭部插入數(shù)據(jù)和獲取數(shù)據(jù)項(xiàng)來模擬實(shí)現(xiàn)
push();--向數(shù)組末端添加數(shù)據(jù)項(xiàng);
shift();---獲取數(shù)組的頭部一項(xiàng)的數(shù)據(jù)信息;
unshift();--與shift完全相反,就是向數(shù)組的頭部插入數(shù)據(jù)項(xiàng)信息;
var colorArr = new Array();//創(chuàng)建數(shù)組 colorArr.push("red","yellow");//推入兩項(xiàng) console.log(colorArr); var length = colorArr.push("blue"); console.log(length); var item = colorArr.shift();//取得第一項(xiàng) console.log(item); console.log(colorArr.length);
2、檢測(cè)驗(yàn)證數(shù)組
在平時(shí)項(xiàng)目開發(fā)中,我們往往會(huì)遇到,判斷一個(gè)對(duì)象是否為數(shù)組(函數(shù)的參數(shù)傳遞中),那么如果判斷一個(gè)對(duì)象是否為數(shù)組呢,有以下兩種方式
1)第一種方法
if(value instanseof Array){
}
2)第二種方法
if(Array.isArray(value)){
}//該方法只使用與高版本的瀏覽器:IE9+、Firefox4+/Chrome
3、具體的編程實(shí)例
1)添加元素(數(shù)組末尾添加元素)
在數(shù)組 arr 末尾添加元素 item。不要直接修改數(shù)組 arr,結(jié)果返回新的數(shù)組 .
方法一:slice()和push()結(jié)合
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,結(jié)果返回新的數(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()結(jié)合
function insert(arr, item, index) { var newArr=arr.slice(0); newArr.splice(index,0,item); return newArr; }
方法三:concat()和splice()結(jié)合
function insert(arr, item, index) { var newArr=arr.concat(); newArr.splice(index,0,item); return newArr; }
3、刪除元素(刪除數(shù)組最后一個(gè)元素)
刪除數(shù)組 arr 最后一個(gè)元素。不要直接修改數(shù)組 arr,結(jié)果返回新的數(shù)組 。
方法一:使用普通的迭代拷貝
function truncate(arr, item) { var newArr=[]; for(var i=0;i<arr.length-1;i++){ newArr.push(arr[i]); } return newArr; }
方法二:concat()和pop()結(jié)合
function truncate(arr) { var newArr = arr.concat(); newArr.pop(); return newArr; }
4、刪除元素(刪除數(shù)組第一個(gè)元素)
刪除數(shù)組 arr 第一個(gè)元素。不要直接修改數(shù)組 arr,結(jié)果返回新的數(shù)組 。
方法一:使用普通的迭代拷貝
function curtail(arr) { var newArr=[]; for(var i=1;i<arr.length;i++){ newArr.push(arr[i]); } return newArr; }
方法二:concat()和shift()結(jié)合
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,結(jié)果返回新的數(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()結(jié)合
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,結(jié)果返回新的數(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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對(duì)回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09淺談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問題
下面小編就為大家?guī)硪黄獪\談在fetch方法中添加header后遇到的預(yù)檢請(qǐng)求問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08JS實(shí)現(xiàn)星星評(píng)分功能實(shí)例代碼(兩種方法)
這篇文章主要介紹了JS實(shí)現(xiàn)星星評(píng)分功能實(shí)例代碼(兩種方法)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JS數(shù)組搜索之折半搜索實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS數(shù)組搜索之折半搜索實(shí)現(xiàn)方法,結(jié)合具體實(shí)例形式分析了javascript數(shù)組折半搜索算法的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03javascript無刷新評(píng)論實(shí)現(xiàn)方法
這篇文章主要介紹了javascript無刷新評(píng)論實(shí)現(xiàn)方法,涉及javascript動(dòng)態(tài)添加表格元素的技巧,需要的朋友可以參考下2015-05-05學(xué)習(xí)使用bootstrap3柵格系統(tǒng)
這篇文章主要教會(huì)大家學(xué)習(xí)使用bootstrap3柵格系統(tǒng),bootstrap開發(fā)環(huán)境搭建,還介紹了柵格系統(tǒng)的類型,感興趣的小伙伴們可以參考一下2016-04-04