摘要:不會修改原數組參數在每一項上調用的函數和作為歸并基礎的初始值可選的。改函數接收個參數前一個值當前值項的索引和數組對象。
數組API(1) 棧方法 (后進先出)
在棧的頂部進行插入和移除操作,使用 push 和 pop 方法結合(會修改原始數組)
在數組末尾插入(push可以添加多項) push
var arr=[1,2,3]; var m=arr.push("m"); console.log(m); // 4 ,插入末尾,并返回修改后數組的長度 console.log(arr); // [1, 2, 3, "m"]
移除最后一項 pop
var arr=[1,2,3]; var n=arr.pop(); console.log(n); // 3 移除最后一項,并返回這一項 console.log(arr); // [1, 2]隊列方法 (先進先出)
使用 shift 方法(移除數組第一個項并返回該項,用時數組長度減1)結合 push ,就可以像操作隊列一樣操作數組(會修改原始數組)
移除數組第一個項并返回該項 shift
var arr=[1,2,3]; var s=arr.shift(); console.log(s); // 1 移除第一項,并返回這一項 console.log(arr); // [2, 3]
在數組前端添加任意個項并返回新數組的長度 unshift,使用 unshift 和 pop可以從相反的方向來模擬隊列
var arr=[1,2,3]; var l=arr.unshift(4,5); console.log(l); // 5 向數組前端添加兩項,并返回修改后的數組長度 console.log(arr); // [4, 5, 1, 2, 3]重排序方法 (會修改原始數組)
reverse
var arr=[1,2,3]; arr.reverse(); console.log(arr); // [3,2,1]
sort
var arr=[1,8,10,22,31,3]; arr.sort(); console.log(arr); // [1, 10, 22, 3, 31, 8]
sort并沒有像我們預期的進行排序, sort 排序時,會調用數組每一項的 toString() 方法,即使數組的所有項都是數字,也是轉換成字符串進行比較的,一般 sort 方法會接受一個比較函數,以便我們進行排序。
var arr = [1, 8, 10, 22, 31, 3]; function compare(v1, v2) { if (v1 < v2) { return -1; } else if (v1 > v2) { return 1; } else { return 0; } } arr.sort(compare); console.log(arr); // [1, 3, 8, 10, 22, 31] // 比較函數還可以這樣寫 function compare(v1, v2) { return v1 - v2; }
reverse 和 sort 的返回值是經過排序后的數組;操作方法
concat 基于當前數組的所有項創建一個新數組 (不會修改原數組)
var arr = ["a", "b", "c"] // 當添加空數組時 var arr1 = arr.concat([]); var arr2 = arr.concat(); // 添加普通項 var arr3 = arr.concat(""); var arr4 = arr.concat(null, undefined); var arr5 = arr.concat("d"); // 添加數組 var arr6 = arr.concat(["d", "e", "f"]); // 添加普通項和數組 var arr7 = arr.concat("m", "n", ",", ["d", "e", "f"]); // 添加子項為數組的數組 var arr8 = arr.concat(["d", "e", "f", ["x", "y"]]); // 添加兩個數組 var arr9 = arr.concat(["m", "n", ","], ["d", "e", "f"]); console.log(arr) // ["a", "b", "c"] console.log(arr1) // ["a", "b", "c"] console.log(arr2) // ["a", "b", "c"] console.log(arr3) // ["a", "b", "c", ""] console.log(arr4) // ["a", "b", "c", null, undefined] console.log(arr5) // ["a", "b", "c", "d"] console.log(arr6) // ["a", "b", "c", "d", "e", "f"] console.log(arr7) // ["a", "b", "c", "m", "n", ",", "d", "e", "f"] console.log(arr8) // ["a", "b", "c", "d", "e", "f", Array(2)] console.log(arr9) // ["a", "b", "c", "m", "n", ",", "d", "e", "f"]
slice 基于當前數組中的一或多個項創建一個新數組,返回值是新數組(會修改原數組)
刪除 需要兩個參數,起始位置和要刪除的項數
// 從第三項開始,刪除0項 var arr = ["a", "b", "c", "1", "2", "s"] var arr1 = arr.splice(3, 0) console.log(arr); // ["a", "b", "c", "1", "2", "s"] console.log(arr1); // [] // 從第三項開始,刪除2項 var arr = ["a", "b", "c", "1", "2", "s"] var arr2 = arr.splice(3, 2) console.log(arr); // ["a", "b", "c", "s"] console.log(arr2); // ?["1", "2"] // 起始值大于數組長度 var arr = ["a", "b", "c", "1", "2", "s"] var arr3 = arr.splice(7, 1) console.log(arr); console.log(arr3); // 為負數的情況 從倒數項開始計算 var arr = ["a", "b", "c", "1", "2", "s"] var arr4 = arr.splice(-2, 2) console.log(arr); // ["a", "b", "c", "1"] console.log(arr4); // ["2", "s"] // 項數為負,返回為空 var arr = ["a", "b", "c", "1", "2", "s"] var arr5 = arr.splice(2,-2) console.log(arr); // ["a", "b", "c", "1", "2", "s"] console.log(arr5);// []
插入 需要三個參數,起始位置、要刪除的項數(0)和要插入的項
// 不刪除,插入 var arr = ["a", "b", "c", "1", "2", "s"] var arr2 = arr.splice(2,0,"x") console.log(arr); //["a", "b", "x", "c", "1", "2", "s"] console.log(arr2); // []
替換 需要三個參數,起始位置、要刪除的項數(0)和要插入的項
// 刪除并插入 var arr = ["a", "b", "c", "1", "2", "s"] var arr1 = arr.splice(2,2,"x") console.log(arr); // ["a", "b", "x", "2", "s"] console.log(arr1); // ?["c", "1"] // 插入數組 var arr = ["a", "b", "c", "1", "2", "s"] var arr3 = arr.splice(2, 0, "x", [1, 2, 3]) console.log(arr); // ["a", "b", "x", Array(3), "c", "1", "2", "s"] console.log(arr3); // []位置方法 (不會修改原數組)
參數 要查找的項和起始位置(可選),查找的項用 === 操作,必須完全相等,查找到,返回位置下標,未找到,返回 -1
indexOf 從數組開始位置向后查找
lastIndexOf 從數組末尾向前查找
迭代方法 (不會修改原數組)參數 兩個參數,要在每一項上運行的函數和運行該函數的作用域對象(可選)——影響 this 的值;
some 對數組中的每一項運行給定函數,如果任一項都返回 true,則返回 true;
every 對數組中的每一項運行給定函數,如果每一項都返回 true,則返回 true;
filter 對數組中的每一項運行給定函數,返回該函數返回值為 true 的項所組成的數組;
var arr = [-1, 22, 4, -2, 19, 0] var result = arr.filter(function(ele, index, arr) { return (ele > 0) }) console.log(arr); // [-1, 22, 4, -2, 19, 0] console.log(result); // [22, 4, 19]
forEach 對數組中的每一項運行給定函數,該方法沒有返回值;
map 對數組中的每一項運行給定函數,返回該函數每次調用結果組成的數組;(如果map函數中沒有 return ,則返回一個長度等于元素組的值為 undefined 的數組)
var arr = [-1, 22, 4, -2, 19, 0] var result = arr.map(function(ele, index, arr) { return (ele * 2) }) console.log(arr); // [-1, 22, 4, -2, 19, 0] console.log(result); // [-2, 44, 8, -4, 38, 0]歸并方法(ES5新增)
兩個方法都會迭代數組所有項,然后構建一個最終返回的值。(不會修改原數組)
參數:在每一項上調用的函數和作為歸并基礎的初始值(可選的)。改函數接收4個參數:前一個值、當前值、項的索引和數組對象。
reduce 從數組第一項開始,逐個遍歷到最后
reduceRight 從數組最后一項開始,逐個遍歷到最后
// 一個數組自動求和方法 var arr = [1, 2, 3, 4, 5] var result = arr.reduce(function(pre, cur, index, arr) { return pre + cur }, 0) console.log(arr); //[1, 2, 3, 4, 5] console.log(result); //15
// 計算一個數組中,同一個字符出現的次數(當然for循環也很容易實現) var arr = ["A","B", "C", "A", "D", "C", "B", "E", "C", "D"] var result = arr.reduce(function(pre, cur, index) { pre[cur] = pre[cur] ? ++pre[cur] : 1; return pre; }, {}) console.log(result); // {A: 2, B: 2, C: 3, D: 2, E: 1}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95484.html
摘要:在標簽中添加屬性,本質上是跟在標簽里面寫屬性時一樣的,所以屬性值最終都會編譯為字符串類型。這個節點包括很多,比如,以及一些方法等方法。一個對象有很多,該集合名字為,里面有其他以及,里面有很多。 一、變量類型和計算 JS中使用typeof能得到哪些類型 變量類型 值類型:變量本身就是含有賦予給它的數值的,它的變量本身及保存的數據都存儲在棧的內存塊當中 引用類型:引用類型當然是分配到...
摘要:返回數組內容的字符串表示形式將數組中每個元素轉為字符串,并用逗號連接。拍照連接符將數組中每個元素轉為字符串,用自定義的連接符連接每個元素需要用變量借助。 關于數組篇的記錄,純自己總結,會持續更新~ 原生js方法 1:創建數組的幾種方法: var arr = []; var arr = new Array(); var arr = [1,2]; var arr = new Arr...
摘要:其實這個能做的事不光是音頻可視化。其實這次寫博客之前還完善了一下,給加上了通過設備的麥克風獲取音頻并可視化的方法。世界晚安參考基于實現音頻可視化效果本文作者本文鏈接利用實現音頻可視化 音頻可視化實現之后真的很酷,雖然這次只是跟著MDN上的教程學習了一下,照著Demo敲了一遍而已。但收獲頗多,記錄于此。 web audio api 先來感受一下 web audio api 的基礎概念,下...
摘要:基本概念學習目標學會如何使用,掌握的常用,能夠使用實現常見的效果。想要實現簡單的動畫效果,也很麻煩代碼冗余。實現動畫非常簡單,而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念 學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現常見的效果。 為什么要學習jQuery? 【01-讓div顯示與設置內容.html】 使用javasc...
摘要:基本概念學習目標學會如何使用,掌握的常用,能夠使用實現常見的效果。想要實現簡單的動畫效果,也很麻煩代碼冗余。實現動畫非常簡單,而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念 學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現常見的效果。 為什么要學習jQuery? 【01-讓div顯示與設置內容.html】 使用javasc...
閱讀 2260·2021-10-09 09:41
閱讀 3409·2021-09-13 10:34
閱讀 1920·2019-08-30 12:59
閱讀 557·2019-08-29 17:27
閱讀 1063·2019-08-29 16:07
閱讀 2956·2019-08-29 13:15
閱讀 1306·2019-08-29 13:14
閱讀 1561·2019-08-26 12:18