1.arr.push()? -末尾添加
- 該方法可以向數組末尾添加一個或多個元素,并返回數組新的長度
- 可以將要添加的元素作為方法的參數傳遞,這樣這些元素將會自動添加到元素的末尾
- 原數組會發生變化
var arr = [ 1, 2, 3, 4 ]
arr.push(5)
console.log(arr)? //?[ 1, 2, 3, 4, 5?]
2.arr.unshift()? -開頭添加
-
向數組開頭添加一個或者多個元素,并返回新的數組長度
-
向前邊插入元素后,其他的元素索引會依次調整
-
原數組會發生變化
var arr = [1, 2, 3, 4]
arr.unshift(0)
console.log(arr)? ?// [ 0, 1, 2, 3, 4 ]
3.arr.pop()? -刪除最后一個
-
該方法可以刪除數組的最后一個元素 ,一次就刪除一個元素
-
pop()沒有參數
-
將被刪除的元素作為返回值返回
-
原數組會發生變化
var arr = [1, 2, 3, 4]
arr.pop()
console.log(arr)? // [ 1, 2, 3?]
4.arr.shift()? -刪除第一個
-
可以刪除數組的第一個元素,一次就刪除一個元素
-
shift()沒有參數
-
被刪除的元素作為返回值返回
-
原數組會發生變化
var arr = [1, 2, 3, 4]
arr.shift()
console.log(arr)? // [ 2, 3, 4 ]
5.arr.forEach()? -遍歷數組
- 遍歷數組
-
數組中有幾個元素函數就執行幾次,每次執行時,瀏覽器會將遍歷到的元素,
? ? ? ? ? ? ? ?以實參的形式傳遞進來,我們可以來定義行參,來讀取這些內容
-
有三個參數:
? ? ? ? ? ? ? 第一個參數:就是當前正在遍歷的元素
? ? ? ? ? ? ? 第二個參數:就是當前正在遍歷的元素的索引
? ? ? ? ? ? ? 第三個參數:就是當前正在遍歷的數組
var arr = [1, 2, 3, 4]
arr.forEach(function (item, value, array) {
? ? ? ? ? ? console.log(item); ?// 1 2 3 4
? ? ? ? ? ? console.log(value); ?// 0 1 2 3
? ? ? ? ? ? console.log(array); ?// 會打印四遍 [1, 2, 3, 4]
? ? ? ? })
6.arr.map()? -遍歷數組
- 映射數組(遍歷數組),有return 返回一個新數組 。
- 參數:
? ? ? ? ? value --當前索引的值
? ? ? ? ? index --索引
? ? ? ? ? array --原數組
var arr = [1, 2, 3, 4, 5]
var newArr = arr.map(function (item) {
? ? ? ? ? ? return item += 2
? ? ? ? })
console.log(newArr); ?// [ 3, 4, 5 , 6, 7 ]
7.arr.slice()? -截取指定元素
-
可以用來從數組提取指定元素
-
不會改變元素原數組,而是將截取到的元素封裝到一個新數組中返回
-
可以寫兩個參數:
? ? ? ? ? ? 1:截取開始的位置的索引,包含開始索引
? ? ? ? ? ? 2:截取結束的位置的索引,不包含結束索引
-
第二個參數,可以省略不寫,此時會截取從開始索引往后的所有元素
-
索引可以傳遞一個負值,如果傳遞一個負值,則從后往前計算
? ? ? ? ? ? ? ? ? ? ?如:-1:倒數第一個,-2:倒數第二個
var arr = [1, 2, 3, 4]
var newArr = arr.slice(0, 2)
console.log(arr); ?// [1, 2, 3, 4]
console.log(newArr); ?// [1, 2]
8.arr.aplice()? -刪除指定元素
-
可以用來刪除數組中的指定元素
-
會影響到原數組,會將指定元素從原數組中刪除,并將刪除的元素作為返回值返回
-
參數:
? ? ? ? ? ? ? 第一個,表示開始位置的索引
? ? ? ? ? ? ? 第二個,表示刪除的數量
? ? ? ? ? ? ? 第三個及以后...
? ? ? ? ? ? ? ? ? 可以傳遞一些新的元素,這些元素將會自動插入到
? ? ? ? ? ? ? ? ? ? ?開始位置,索引前邊
var arr = [1, 2, 3, 4]
arr.splice(0, 2)
console.log(arr); ?// [3, 4]
9.arr.indexOf()? -查找元素
-
返回在數組中可以找到的一個給定元素的第一個索引,如果不存在,則返回-1
-
它只返回第一個滿足條件的索引號
var arr = [1, 2, 3, 4]
var index1 = arr.indexOf(3)
var index2 = arr.indexOf(99)
console.log(index1); ?// 2
console.log(index2); ?// -1
10.arr.lastIndexOf()? -查找元素
- 和arr.indexOf()的功能一樣,只不過是從后往前查找
var arr = [1, 2, 3, 4]
var index1 = arr.indexOf(3)
var index2 = arr.indexOf(99)
console.log(index1); ?// 2
console.log(index2); ?// -1
11.arr.concat()? -合并數組
-
可以合并兩個或多個數組,并將新的數組返回,也可以傳其他數據類型
-
該方法不會對原數組產生影響
var arr1 = [1, 2, 3, 4]
var arr2 = [6, 7, 8, 9]
var arr3 = arr1.concat(arr2)
console.log(arr3); ?// [1, 2, 3, 4, 6, 7, 8, 9]
12.arr.join()? -數組轉成字符串
-
該方法可以將數組轉成一個字符串
-
該方法不會對原數組產生影響,而是將轉換后的字符串作為結果返回
-
在join()中可以指定一個字符串作為參數,這個字符串將會成為數組中元素的連接符
? ? ? ? ? ? ? ? 如果不指定連接符,則默認使用“,”,作為連接符
var arr = [1, 2, 3, 4]
var str = arr.join('')
console.log(str); ?// 1234
13.arr.split()? -字符串轉數組
-
使用指定的分隔符字符串將一個String對象分割成子字符串數組
-
以一個指定的分割字串來決定每個拆分的位置
var str = "red,orange,yellow"
var arr = str.split(',')
console.log(arr); ?// [ 'red', 'orange', 'yellow' ]
14.arr.reverse()? -反轉數組
-
該方法用來反轉數組(前邊的去后邊,后邊的去前邊)
-
該方法會直接修改原數組!
var arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr); ?// [ 5, 4, 3, 2, 1 ]
15.arr.sort()? -排序
-
可以用來對數組中的元素進行排序
-
會影響原數組,默認會按照Unicode編碼進行排序
-
可以在sort()添加回調函數,來制定排序規則
-
如果需要升序,則返回a-b
-
如果需要降序排列,則返回b-a
var arr = [3, 6, 2, 8, 5, 4]
arr.sort(function (a, b) {
? ? ? ? ? ? return a - b ?// 升序(從小到大)
? ? ? ? })
console.log(arr); ?// [ 2,3,4,5,6,8 ]
var arr = [3, 6, 2, 8, 5, 4]
arr.sort(function (a, b) {
? ? ? ? ? ? return b - a ?// 降序(從大到小)
? ? ? ? })
console.log(arr); ?// [ 8,6,5,4,3,2 ]
16.arr.filter()? -過濾
-
過濾數組,返回一個滿足要求的數組
-
兩個參數:
? ? ? ? ? value --當前索引的值
? ? ? ? ? index --索引
var arr = [3, 6, 2, 8, 5, 4]
var newArr = arr.filter(function (item, index) {
? ? ? ? ? ? return item > 5
? ? ? ? })
console.log(newArr); ?// [ 8,6 ]
17.arr.find()? -查找元素
- 從數組中找到符合條件的第一個元素
var arr = [1, 2, 3, 4, 5]
var newArr = arr.find(function (item) {
? ? ? ? ? ? return item > 3
? ? ? ? })
console.log(newArr); ?// 4
18.arr.findIndex()? -查找元素
- 從數組中找到符合條件的第一個元素的索引值
var arr = [1, 2, 3, 4, 5]
var newArr = arr.findIndex(function (item) {
? ? ? ? ? ? return item > 3
? ? ? ? })
console.log(newArr); ?// 3
19.arr.every()? -判斷所有元素
- 根據條件判斷數組中所有元素滿不滿足,如果滿足則返回 true 不滿足返回 false
var arr = [1, 2, 3, 4, 5]
var newArr = arr.every(function (item) {
? ? ? ? ? ? return item <= 5
? ? ? ? })
console.log(newArr); ?// true
20.arr.some()? -判斷元素
- 根據條件判斷數組中有沒有一個滿足條件的,只要有一個滿足條件的則返回 ture 否則返回 false
var arr = [1, 2, 3, 4, 5]
var newArr = arr.some(function (item) {
? ? ? ? ? ? return item < 3
? ? ? ? })
console.log(newArr); ?// true
21.arr.reduce()? -累加器
- 可以為數組中的每個元素依次執行回調函數
- 常用于函數的計算
- 有四個參數:初始值(或者上次回調函數的返回值)、當前元素值、當前元素的索引、當前元素所屬的對象
var arr = [1, 2, 3]
var newArr = arr.reduce(function (prev, cur, index, array) {
? ? ? ? ? ? return prev + cur
? ? ? ? })
console.log(newArr); ?// 6