1. 程式人生 > >javascript陣列方法

javascript陣列方法

一.陣列物件作用:使用單獨的變數名來儲存一系列的值。JavaScript中建立陣列有兩種方式(一)使用 Array 建構函式:var arr1 = new Array(); //建立一個空陣列var arr2 = new Array(20); // 建立一個包含20項的陣列var arr3 = new Array("lily","lucy","Tom"); // 建立一個包含3個字串的陣列(二)使用陣列字面量表示法:var arr4 = []; //建立一個空陣列var arr5 = [20]; // 建立一個包含1項的陣列var arr6 = ["lily","lucy","Tom"]; // 建立一個包含3個字串的陣列
二.陣列方法陣列轉換方法1.join() 把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。Array.join()join()方法只接收一個引數,用作分隔符的字串,然後返回包含所有陣列項的字串如果不給join()方法傳入任何值,則使用逗號作為分隔符var a = [1,2,3];console.log(a.join());//'1,2,3'console.log(a.join(' '));//'1 2 3'console.log(a.join(''));//'123'var b = new Array(10);b.join('-');//'---------',9個連字元組成的字串
  • 若join()方法的引數是undefined,標準瀏覽器以逗號為分隔符返回字串,而IE7-瀏覽器以'undefined'為分隔符返回字串
  • 如果陣列中的某一項的值是null或者undefined,則該值在join()方法返回的結果中以空字串表示
棧和佇列方法 push()和pop()方法允許將陣列當作棧來使用。push和pop從陣列的尾部新增,從尾部刪除。棧是一種LIFO(Last-First-Out,後進先出)的資料結構,也就是最新新增的項最早被移除。而棧中項的插入和移除,只發生在一個位置——棧的頂部。棧只能從棧頂操作,半開口。push()和shift()可以構成類似佇列的方法。push從陣列尾部新增,shift從陣列前端刪除。佇列資料結構的訪問規則是FIFO(first-in-first-out,先進先出)。佇列在列表的末端新增項,從列表的前端移除項。
1.push()方法可以接收任意數量的引數,把它們逐個新增到陣列末尾,並返回修改後陣列的長度。vara = [];console.log(a,a.push(1));//[1] 1console.log(a,a.push('a'));//[1,'a'] 2console.log(a,a.push(true, {}));//[1,'a',true,{}] 4console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 52.pop()方法從陣列末尾移除最後一項,減少陣列的length值,然後返回移除的項vara = ['a', 'b', 'c'];console.log(a,a.pop()); // ['a', 'b'] 'c'
  • 給pop引數傳其他數字不起作用,也不報錯。還是隻刪除最後一項。
  • 對空陣列使用pop()方法,不會報錯,而是返回undefined
3.shift()方法移除陣列中的第一個項並返回該項,同時陣列的長度減1。vara = ['a', 'b', 'c'];console.log(a,a.shift());//['b', 'c'] 'a'vararr6 = [1];console.log(arr6,arr6.shift()); //[] 1對空陣列使用shift()方法,不會報錯,而是返回undefinedvara = [];console.log(a,a.shift());// [] undefined4.unshift()方法在陣列前端新增任意個項並返回新陣列長度vara = ['a', 'b', 'c'];console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4當傳入多個引數時,是一次性插入這意味著最終的陣列中插入的元素的順序和它們在引數列表中的順序一致vara = ['a', 'b', 'c'];console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6
  • 在IE7-瀏覽器中,unshift()方法的返回值總是undefined
總結:p開頭(屁股hhh)的是在陣列尾部操作,長的是新增(push,unshift),短的是刪除(pop,shift)。新增的可以接收多個引數並返回增加後陣列的長度,刪除的一次只能刪一個並返回刪除項。刪除操作對空陣列使用,不會報錯,會返回undefined。陣列排序方法陣列中存在兩個可以直接用來重排序的方法: reverse()和sort() 5.reverse()方法用於反轉陣列的順序,返回經過排序之後的陣列;而原陣列順序也發生改變vararray = [1,2,4,3,5];console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]vararray = ['str',true,3];console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']6.sort()(1)沒有使用引數,將按字母順序對陣列中的元素進行排序,說得更精確點,是按照字元編碼的順序進行排序。sort方法會呼叫每個陣列項的toString()方法,然後比較得到的字串排序,返回經過排序之後的陣列,而原陣列順序也發生改變。vararray = [2,1,4,3,5];console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]vararray = ['3str',3,2,'2'];console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
  • 如果陣列包含undefined元素,它們會被排到陣列的尾部
sort()方法比較的也是字串,因此會出現以下的這種情況:vararray = [1,5,10,50];console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]為了解決上述問題,sort()方法可以接收一個比較函式作為引數,以便我們指定哪個值位於哪個值的前面。(2)arrayObject.sort(sortby) 引數可選。規定排序順序。必須是函式。比較函式接收兩個引數,如果第一個引數應該位於第二個之前則返回一個負數,如果兩個引數相等則返回 0,如果第一個引數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函式:var arr7 = [45,6,21,4,10]; console.log(arr7.sort(compare)); function compare (a,b) { if(a<b){ return -1; }else if(a>b){ return 1; }else return 0; }總結://升序function com(value1,value2){ if(value1<value2){ return -1; }else if(value1>value2){ return 1; }else{ return 0; }}var values=[0,1,3,5,15,10]; values.sort(com);alert(values); //0,1,3,5,10,15如果需要通過比較函式產生降序排序的結果,只要交換比較函式返回的值即可。//逆序function com1(value1,value2){ if(value1<value2){ return 1; }else if(value1>value2){ return -1; }else{ return 0; }}var values=[0,1,3,5,15,10];values.sort(com1);alert(values); //15,10,5,3,1,0對於數值型別或valueOf()方法會返回數值型別的物件型別,比較函式可以簡化functioncompare(value1,value2){returnvalue1 - value2;}vararray = ['5px',50,1,10];//當數字與字串比較大小時,字串'5px'會被轉換成NaN,這樣結果就是falseconsole.log(array.sort(compare));//["5px",1, 10, 50]【tips】使用sort()方法建立一個隨機陣列functioncompare(){returnMath.random() - 0.5;}vararray = [1,2,3,4,5];console.log(array.sort(compare));//[2,1,5,4,3]陣列拼接方法7.concat()方法基於當前陣列中的所有項建立一個新陣列,先建立當前陣列一個副本,然後將接收到的引數新增到這個副本的末尾,最後返回新構建的陣列。所以concat()不影響原陣列如果不給concat()方法傳遞引數時,它只是複製當前的陣列;var arr = [1,2,3];console.log(arr,arr.concat()); //[1,2,3] [1,2,3]如果引數是一個或多個數組,則該方法會將這些陣列中的每一項都新增到結果陣列中;console.log(arr,arr.concat([6,7,8],[77,33,44]));//[1, 2, 3] [1, 2, 3, 6, 7, 8, 77, 33, 44]var arr1 = [4,5,6];console.log(arr,arr.concat(arr1)); //[1,2,3] [1,2,3,4,5,6]如果傳遞的值不是陣列,這些值就會被簡單地新增到結果陣列的末尾。console.log(arr,arr.concat(4,5));//[1,2,3] [1,2,3,4,5]console.log(arr,arr.concat(4,[5,[6,7]]));//[1,2,3] [1, 2, 3, 4, 5, [6,7]]淺拷貝如果不提供引數,concat()方法返回當前陣列的一個淺拷貝。所謂“淺拷貝”,指的是如果陣列成員包括複合型別的值(比如物件),則新陣列拷貝的是該值的引用。//該方法實際只複製了陣列的第一維。陣列第一維存放的是第二維的引用,而第二維才是實際存放他們的內容varnumbers = [1,2];varnewNumbers = numbers.concat();console.log(numbers,newNumbers);//[1,2] [1,2]numbers[0] = 0;console.log(numbers,newNumbers);//[0,2] [1,2]varnumbers = [[1,2]];varnewNumbers = numbers.concat();console.log(numbers,newNumbers);//[[1,2]] [[1,2]]numbers[0][0] = 0;console.log(numbers,newNumbers);//[[0,2]] [[0,2]]建立子陣列方法8.slice()方法基於當前陣列中的一個或多個項建立一個新陣列,接受一個或兩個引數,最後返回新陣列,所以slice()不影響原陣列slice(start,end)方法需要兩個引數start和end,返回這個陣列中從start位置到(但不包含)end位置的一個子陣列。左閉右開。
  • 如果end為undefined或不存在,則返回從start位置到陣列結尾的所有項
  • 如果沒有引數,則返回原陣列
  • start和end無法交換位置
  • 如果start是負數,則start = max(length + start,0)
  • 如果end是負數,則end = max(length + end,0)
如果不提供引數,slice()方法返回當前陣列的一個淺拷貝陣列刪改方法9.splice()方法用於刪除原陣列的一部分成員,並可以在被刪除的位置新增入新的陣列成員,該方法會改變原陣列。splice()返回一個由刪除元素組成的陣列,或者如果沒有刪除元素就返回一個空陣列
  • 如果只提供一個元素,相當於將原陣列在指定位置拆分成兩個陣列
splice()的第一個引數start指定了插入或刪除的起始位置。第二個引數number指定了應該從陣列中刪除的元素的個數。如果後面還有更多的引數,則表示這些就是要被插入陣列的新元素陣列位置方法10.indexOf(search,start)方法接收search和start兩個引數,返回search首次出現的位置,如果沒有找到則返回-1。search引數表示要搜尋的項;使用嚴格相等運算子(===)進行比較11.lastIndexOf(search,start)方法與indexOf()不同,lastIndexOf()從右向左查詢。接收search和start兩個引數,返回search第一次出現的位置,如果沒有找到則返回-1陣列歸併方法陣列歸併方法包括reduce()和reduceRight()方法兩種,它們使用指定的函式將陣列元素進行組合,生成單個值。reduce()方法需要兩個引數。第一個是執行化簡操作的函式。化簡函式的任務就是用某種方法把兩個值組合或化簡為一個值,並返回化簡後的值陣列迭代方法map()方法對陣列的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列map()方法還可以接受第二個引數,表示回撥函式執行時this所指向的物件forEach()方法對陣列中的每一項執行給定函式,這個方法沒有返回值。本質上與for迴圈迭代陣列一樣。如果需要有返回值,一般使用map方法  forEach()方法除了接受一個必須的回撥函式引數,第二個引數還可以接受一個可選的上下文引數(改變回調函式裡面的this指向)filter()方法對陣列中的每一項執行給定函式,返回該函式會返回true的項組成的陣列。該方法常用於查詢符合條件的所有陣列項filter()方法還可以接受第二個引數,指定測試函式所在的上下文物件(this物件)some()方法對陣列中的每一項執行給定函式,如果該函式對任一項返回true,則返回true。並且當且僅當數值中的所有元素呼叫判定函式都返回false,它才返回false 在空陣列上呼叫some()方法會返回falseevery()方法對陣列中的每一項執行給定函式,如果該函式對每一項都返回true,則返回true;只要有一項返回false,則返回false
http://www.jb51.net/article/88899.htm JavaScript中陣列的22種方法必學http://www.cnblogs.com/xiao-hong/p/3194027.html    Js 陣列——filter()map()some()every()forEach()lastIndexOf()indexOf()http://www.w3school.com.cn/jsref/jsref_obj_array.asp   JavaScript Array 物件

相關推薦

JavaScript 陣列方法總結

內建方法Array from 將其他遍歷物件轉換為陣列 isArray判斷是否陣列 of建立陣列 原型方法Arrayprot

JavaScript陣列方法陣列檢測方法

方法總覽 concat 連線兩個或者更多陣列,並返回結果 var array = [1,3,4]; var array2 = [2, 4, 6]; array.concat(array2); //

JavaScript陣列方法總結

一.建立陣列的方式 1.使用Array建構函式 var color=new Array();     注意:括號裡面引數可以有引數,若為一個數字,表示該陣列的長度,如果為多個數字或者一個(多個)非數字表示的是傳遞陣列中應該包含的值。 2.使用陣列字面量 var co

JavaScript 陣列方法集合及示例!

陣列基礎知識 你應該知道陣列是什麼,但以下是一個簡單的概述:陣列就像放東西的盒子,你可以放進東西(新增),拿出東西(刪除)或者擺放它們的位置及拿出我們想要的東西。 陣列的建立 以下是建立陣列的幾種方式: 陣列的新增和刪除 常用的方法 對常見場景的概述以及用於每個場

javascript陣列方法

一.陣列物件作用:使用單獨的變數名來儲存一系列的值。JavaScript中建立陣列有兩種方式(一)使用 Array 建構函式:var arr1 = new Array(); //建立一個空陣列var arr2 = new Array(20); // 建立一個包含20項的陣列v

JavaScript陣列方法綜合應用案例

業務背景: 專案上有一個價格庫的概念,對應於某個地區的某個時間段。即:在某年的某個季度或者月份,專案公司會對各個地區建立該地區的人工、材料、機械的價格庫。 呈現檢視如下: 資料庫設計 對於上面的業務,由於地區和價格期數是作為字典維護的,有獨立的前端模

JavaScript陣列方法總結篇

方法在陣列的尾部新增一個或多個元素,並返回陣列的長度 引數: item1, item2, …, itemX ,要新增到陣列末尾的元素 let arr = [1,2,3]; let length = arr.push('末尾1','末尾2'); // 返回陣列長度 con

JavaScript 陣列方法

ECMAScript 3在Array.prototype中定義了一些很有用的運算元組的函式: Array.join()方法將陣列中所有元素轉化為字串並連線在一起: var a = [1,2,3];                           // 建立一個包含三個

JavaScript 陣列方法大全

陣列在筆試題中出現的概率最高的型別之一,JavaScript中的陣列與其他語言中的陣列有些區別,為了方便以後檢視陣列的方法,現將對陣列的操作方法進行彙總整理。 陣列建立 JavaScript中建立陣列有兩種方式,第一種是使用 Array 建構函式:

JavaScript陣列方法詳解

JavaScript陣列方法詳解 JavaScript中陣列的方法種類眾多,在ES3-ES7不同版本時期都有新方法;並且陣列的方法還有原型方法和從object繼承的方法,這裡我們只介紹陣列在每個版本中原型上的方法,本文舉例介紹了從ES3到ES7幾乎所有的陣列方法。這大概是最全的陣列方法詳解了。希望讀者能從中有

JavaScript 陣列常用方法

有一天被問到了一個題,感覺很有意思,如下: new Array(6) new Array(6, 6) //上訴兩行程式碼,分別建立了什麼? 檢測陣列 var arr = []; arr instanceof Array Array.isArray(a

javascript 陣列 常用方法

 前言    學學忘忘  閒來做個筆記 整理下陣列常用方法。    Array 陣列常用方法    建立陣列的基本方式有兩種       1.第一種是使用Array建構函式,  var arr = new Array()

javascript常用陣列方法

1、join()方法:  Array.join()方法將陣列中所以元素都轉化為字串連結在一起,返回最後生成的字串。也可以指定可選的字串在生成的字串中來分隔陣列的各個元素。如果不指定分隔符,預設使用逗號。案例如下: ? 1 2 3 4 va

JavaScript陣列常用方法2

1.forEach()方法列出每個元素 <button onclick="numbers.forEach(myFunction)">點我</button> <p id="demo"></p> <script> demoP = do

JavaScript陣列去重的四種方法

今天,剛剛參加了公司的筆試,關於陣列去重,後來簡單總結了幾種方法,希共勉,為我打call....... es5四種方式: 方式一: Array.prototype.unique1 = function() { // 1. 定義陣列 var temp = []; // 2. 遍歷當前陣列 f

JavaScript陣列去重12中方法

陣列去重,一般都是在面試的時候才會碰到,一般是要求手寫陣列去重方法的程式碼。如果是被提問到,陣列去重的方法有哪些?你能答出其中的10種,面試官很有可能對你刮目相看。 在真實的專案中碰到的陣列去重,一般都是後臺去處理,很少讓前端處理陣列去重。雖然日常專案用到的概率比較低,但還是需要了解一下,以防面

JavaScript陣列求和高效率方法

求陣列中n個元素和的方法 傳統方法: var sum = 0; for( var i = 0 ; i < arr.length ; i++) sum += arr[ i ]; 這種方法在陣列元素較少的時候比較實用,但當元素很多時,效率就不是很高。 高效率的方法

JavaScript陣列的迭代方法

JavaScript陣列的迭代方法 every():對陣列中的每一項執行給定函式,如果該函式對每一項都返回 true,則返回 true some():對陣列中的每一項執行給定函式,如果該函式對任一項返回 true,則返回 true filter():對陣列中的每一項執

javascript 陣列遍歷方法對比

for方法 for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 優缺點: 這種寫法比較麻煩 forEach方法 myArray.forEach(function (val

JavaScript陣列去重(12種方法

陣列去重,一般都是在面試的時候才會碰到,一般是要求手寫陣列去重方法的程式碼。如果是被提問到,陣列去重的方法有哪些?你能答出其中的10種,面試官很有可能對你刮目相看。 在真實的專案中碰到的陣列去重,一般都是後臺去處理,很少讓前端處理陣列去重。雖然日常專案用到的概率比較低,但還是需要了解一下,以防面試的