成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS基礎——數(shù)組API(1)

AbnerMing / 842人閱讀

摘要:不會修改原數(shù)組參數(shù)在每一項上調(diào)用的函數(shù)和作為歸并基礎的初始值可選的。改函數(shù)接收個參數(shù)前一個值當前值項的索引和數(shù)組對象。

數(shù)組API(1) 棧方法 (后進先出)
在棧的頂部進行插入和移除操作,使用 pushpop 方法結(jié)合(會修改原始數(shù)組)

在數(shù)組末尾插入(push可以添加多項) push

var arr=[1,2,3];
var m=arr.push("m");
console.log(m);  // 4 ,插入末尾,并返回修改后數(shù)組的長度
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 方法(移除數(shù)組第一個項并返回該項,用時數(shù)組長度減1)結(jié)合 push ,就可以像操作隊列一樣操作數(shù)組(會修改原始數(shù)組)

移除數(shù)組第一個項并返回該項 shift

var arr=[1,2,3];
var s=arr.shift();
console.log(s);  // 1 移除第一項,并返回這一項
console.log(arr); // [2, 3]

在數(shù)組前端添加任意個項并返回新數(shù)組的長度 unshift,使用 unshiftpop可以從相反的方向來模擬隊列

var arr=[1,2,3];
var l=arr.unshift(4,5);
console.log(l);  // 5 向數(shù)組前端添加兩項,并返回修改后的數(shù)組長度
console.log(arr); // [4, 5, 1, 2, 3]

重排序方法 (會修改原始數(shù)組)

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 排序時,會調(diào)用數(shù)組每一項的 toString() 方法,即使數(shù)組的所有項都是數(shù)字,也是轉(zhuǎn)換成字符串進行比較的,一般 sort 方法會接受一個比較函數(shù),以便我們進行排序。
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]
// 比較函數(shù)還可以這樣寫
function compare(v1, v2) {
  return v1 - v2;
}

reversesort 的返回值是經(jīng)過排序后的數(shù)組;
操作方法

concat 基于當前數(shù)組的所有項創(chuàng)建一個新數(shù)組 (不會修改原數(shù)組)

var arr = ["a", "b", "c"]
// 當添加空數(shù)組時
var arr1 = arr.concat([]);
var arr2 = arr.concat();
// 添加普通項
var arr3 = arr.concat("");
var arr4 = arr.concat(null, undefined);
var arr5 = arr.concat("d");
// 添加數(shù)組
var arr6 = arr.concat(["d", "e", "f"]);
// 添加普通項和數(shù)組
var arr7 = arr.concat("m", "n", ",", ["d", "e", "f"]);
// 添加子項為數(shù)組的數(shù)組
var arr8 = arr.concat(["d", "e", "f", ["x", "y"]]);
// 添加兩個數(shù)組
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 基于當前數(shù)組中的一或多個項創(chuàng)建一個新數(shù)組,返回值是新數(shù)組(會修改原數(shù)組)

刪除 需要兩個參數(shù),起始位置和要刪除的項數(shù)

// 從第三項開始,刪除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"]
// 起始值大于數(shù)組長度
var arr = ["a", "b", "c", "1", "2", "s"]
var arr3 = arr.splice(7, 1)
console.log(arr);
console.log(arr3);
// 為負數(shù)的情況 從倒數(shù)項開始計算
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"]
// 項數(shù)為負,返回為空
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);// []

插入 需要三個參數(shù),起始位置、要刪除的項數(shù)(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); // []

替換 需要三個參數(shù),起始位置、要刪除的項數(shù)(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"]
// 插入數(shù)組
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); // []

位置方法 (不會修改原數(shù)組)
參數(shù) 要查找的項和起始位置(可選),查找的項用 === 操作,必須完全相等,查找到,返回位置下標,未找到,返回 -1

indexOf 從數(shù)組開始位置向后查找

lastIndexOf 從數(shù)組末尾向前查找

迭代方法 (不會修改原數(shù)組)
參數(shù) 兩個參數(shù),要在每一項上運行的函數(shù)和運行該函數(shù)的作用域?qū)ο?可選)——影響 this 的值;

some 對數(shù)組中的每一項運行給定函數(shù),如果任一項都返回 true,則返回 true;

every 對數(shù)組中的每一項運行給定函數(shù),如果每一項都返回 true,則返回 true;

filter 對數(shù)組中的每一項運行給定函數(shù),返回該函數(shù)返回值為 true 的項所組成的數(shù)組;

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 對數(shù)組中的每一項運行給定函數(shù),該方法沒有返回值;

map 對數(shù)組中的每一項運行給定函數(shù),返回該函數(shù)每次調(diào)用結(jié)果組成的數(shù)組;(如果map函數(shù)中沒有 return ,則返回一個長度等于元素組的值為 undefined 的數(shù)組)

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新增)
兩個方法都會迭代數(shù)組所有項,然后構(gòu)建一個最終返回的值。(不會修改原數(shù)組)
參數(shù):在每一項上調(diào)用的函數(shù)和作為歸并基礎的初始值(可選的)。改函數(shù)接收4個參數(shù):前一個值、當前值、項的索引和數(shù)組對象。

reduce 從數(shù)組第一項開始,逐個遍歷到最后

reduceRight 從數(shù)組最后一項開始,逐個遍歷到最后

// 一個數(shù)組自動求和方法
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
// 計算一個數(shù)組中,同一個字符出現(xiàn)的次數(shù)(當然for循環(huán)也很容易實現(xiàn))
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}

文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/95484.html

相關文章

  • 前端面試之路二(javaScript基礎整理)

    摘要:在標簽中添加屬性,本質(zhì)上是跟在標簽里面寫屬性時一樣的,所以屬性值最終都會編譯為字符串類型。這個節(jié)點包括很多,比如,以及一些方法等方法。一個對象有很多,該集合名字為,里面有其他以及,里面有很多。 一、變量類型和計算 JS中使用typeof能得到哪些類型 變量類型 值類型:變量本身就是含有賦予給它的數(shù)值的,它的變量本身及保存的數(shù)據(jù)都存儲在棧的內(nèi)存塊當中 引用類型:引用類型當然是分配到...

    AbnerMing 評論0 收藏0
  • JS】JavaScript數(shù)組以及數(shù)組API學習總結(jié)

    摘要:返回數(shù)組內(nèi)容的字符串表示形式將數(shù)組中每個元素轉(zhuǎn)為字符串,并用逗號連接。拍照連接符將數(shù)組中每個元素轉(zhuǎn)為字符串,用自定義的連接符連接每個元素需要用變量借助。 關于數(shù)組篇的記錄,純自己總結(jié),會持續(xù)更新~ 原生js方法 1:創(chuàng)建數(shù)組的幾種方法: var arr = []; var arr = new Array(); var arr = [1,2]; var arr = new Arr...

    roundstones 評論0 收藏0
  • 利用 web audio api 實現(xiàn)音頻可視化

    摘要:其實這個能做的事不光是音頻可視化。其實這次寫博客之前還完善了一下,給加上了通過設備的麥克風獲取音頻并可視化的方法。世界晚安參考基于實現(xiàn)音頻可視化效果本文作者本文鏈接利用實現(xiàn)音頻可視化 音頻可視化實現(xiàn)之后真的很酷,雖然這次只是跟著MDN上的教程學習了一下,照著Demo敲了一遍而已。但收獲頗多,記錄于此。 web audio api 先來感受一下 web audio api 的基礎概念,下...

    PingCAP 評論0 收藏0
  • 前端基礎入門五(掌握jQuery的常用api,實現(xiàn)動態(tài)效果)

    摘要:基本概念學習目標學會如何使用,掌握的常用,能夠使用實現(xiàn)常見的效果。想要實現(xiàn)簡單的動畫效果,也很麻煩代碼冗余。實現(xiàn)動畫非常簡單,而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念 學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現(xiàn)常見的效果。 為什么要學習jQuery? 【01-讓div顯示與設置內(nèi)容.html】 使用javasc...

    nevermind 評論0 收藏0
  • 前端基礎入門五(掌握jQuery的常用api,實現(xiàn)動態(tài)效果)

    摘要:基本概念學習目標學會如何使用,掌握的常用,能夠使用實現(xiàn)常見的效果。想要實現(xiàn)簡單的動畫效果,也很麻煩代碼冗余。實現(xiàn)動畫非常簡單,而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念 學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現(xiàn)常見的效果。 為什么要學習jQuery? 【01-讓div顯示與設置內(nèi)容.html】 使用javasc...

    codecook 評論0 收藏0

發(fā)表評論

0條評論

AbnerMing

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<