JS常用方法-數(shù)組篇

會(huì)改變?cè)瓟?shù)組的方法

以下七種：

push(),pop(),shift(),unshift(),splice(),sort(),reserve()，我自己比較常用的有unshfit(),splice()

01 -?添加數(shù)組元素方法

????push()方法：

????在數(shù)組結(jié)尾處向數(shù)組添加一個(gè)新的元素（其余元素索引未改變），參數(shù)為被添加元素

let fruits = ['蘋(píng)果','香蕉','橘子']
fruits.push('西瓜') ?// 向數(shù)組添加一個(gè)新元素
console.log(fruits); ?// ['蘋(píng)果','香蕉','橘子','西瓜']

????返回值為改變后新數(shù)組的長(zhǎng)度

let fruits = ['蘋(píng)果','香蕉','橘子']
let x = fruits.push('西瓜') ?// x的值為4

??? unshift()方法：

????在數(shù)組開(kāi)頭處添加一個(gè)新元素（其余元素索引都向后移一位），參數(shù)為被添加元素

let fruits = ['蘋(píng)果','香蕉','橘子']
fruits.unshift('西瓜') ?// 向數(shù)組開(kāi)頭添加一個(gè)新元素
console.log(fruits); ?// ['西瓜','蘋(píng)果','香蕉','橘子']

????返回值為改變后新數(shù)組的長(zhǎng)度

let fruits = ['蘋(píng)果','香蕉','橘子']
let x = fruits.unshift('西瓜') ?// x的值為4

02?-?刪除數(shù)組元素方法

??? pop()方法：

????刪除數(shù)組中最后一個(gè)元素（其余元素索引未改變）

let fruits = ['蘋(píng)果','香蕉','橘子']
fruits.pop() ?// 刪除數(shù)組的最末尾元素
console.log(fruits); ?// ['蘋(píng)果','香蕉']

????返回值為被刪除元素

let fruits = ['蘋(píng)果','香蕉','橘子']
let x = fruits.pop() ?// x的值為'橘子'

????shift()方法：

????刪除數(shù)組首個(gè)元素（其余元素索引都向前移一位）

let fruits = ['蘋(píng)果','香蕉','橘子']
fruits.shift() ?// 刪除數(shù)組的首位元素
console.log(fruits); ?// ['香蕉','橘子']

????返回值為被刪除元素

let fruits = ['蘋(píng)果','香蕉','橘子']
let x = fruits.shift() ?//x的值為'蘋(píng)果'

03?-?特殊方法splice()

????1、用于向數(shù)組添加新項(xiàng)

????第一個(gè)參數(shù)定義添加新元素的位置（索引號(hào)）；第二個(gè)參數(shù)定義刪除元素?cái)?shù)目；第三個(gè)及之后的參數(shù)定義新添加元素。

let fruits = ['蘋(píng)果','香蕉','橘子']
fruits.splice(1,0,'西瓜','芒果') ?// 在索引號(hào)為1的位置添加'西瓜'和'芒果'
console.log(fruits); ?// ["蘋(píng)果", "西瓜", "芒果", "香蕉", "橘子"]

????返回值為被刪除元素組成的數(shù)組（如果有）

let fruits = ['蘋(píng)果','香蕉','橘子']
x = fruits.splice(1,1,'西瓜','芒果') // 在索引號(hào)為1的位置刪除一個(gè)元素并在該位置添加'西瓜'和'芒果'
console.log(x); ?// ["香蕉"]
console.log(fruits); ? // ["蘋(píng)果", "西瓜", "芒果", "橘子"]

????2、用于刪除數(shù)組元素

????只定義第一個(gè)和第二個(gè)參數(shù)（刪除元素個(gè)數(shù)，不為0）。

let fruits = ['蘋(píng)果','香蕉','橘子']
fruits.splice(1,1) ?//在索引號(hào)為1的位置刪除1個(gè)元素
console.log(fruits); ?//["蘋(píng)果", "橘子"]

04?-?數(shù)組排序方法

??? sort()方法：

????默認(rèn)讓數(shù)組按照字母排序，返回值為排序后的新數(shù)組

let fruits = ["Banana", "Orange", "Apple", "Mango"]
x = fruits.sort() ?// 讓數(shù)組按照字母排序
console.log(x); ? // ["Apple", "Banana", "Mango", "Orange"]
console.log(fruits); ?// ["Apple", "Banana", "Mango", "Orange"]

????給數(shù)值數(shù)組排序

let nums = [98, 57, 87, 36, 7]
x = nums.sort(function(a, b){return a - b}) ?//從小到大
console.log(x); ?// [7, 36, 57, 87, 98]
y = nums.sort(function(a, b){return b - a}) ?//從大到小
console.log(y); ?// [98, 87, 57, 36, 7]

??? reverse()方法：

????將原數(shù)組順序翻轉(zhuǎn)，返回值為翻轉(zhuǎn)后的新數(shù)組

let fruits = ["Banana", "Orange", "Apple", "Mango"]
x = fruits.reverse() ?// 讓數(shù)組順序翻轉(zhuǎn)
console.log(x); ? //?["Mango","Apple","Orange","Banana"]

不改變?cè)瓟?shù)組的方法

01 -?數(shù)組合并和裁剪

??? concat()方法：

????合并兩個(gè)數(shù)組或是一個(gè)數(shù)組和多個(gè)元素，類(lèi)似于向數(shù)組添加元素參數(shù)可以為一個(gè)數(shù)組或是元素，返回值為合并后的新數(shù)組

let fruits = ["Banana", "Orange", "Mango"]
let fruits2 = ['葡萄','香蕉','西瓜']
fruitsArr = fruits.concat(fruits2) ?// 合并fruits和fruits2
console.log(fruitsArr); ?// ["Banana", "Orange", "Mango", "葡萄", "香蕉", "西瓜"]

??? slice()方法：

????用數(shù)組的某個(gè)片段切出新數(shù)組，參數(shù)：第一個(gè)為開(kāi)始索引，第二個(gè)為結(jié)束參數(shù)（不包括）

let fruits = ["Banana", "Orange", "Mango", "Apple", "Pear", "Lemon"]
fruitsCut = fruits.slice(1,3) ?// 剪切索引從1到3之前的元素作為新數(shù)組
console.log(fruitsCut); ? // ["Orange", "Mango"]

????不定義第二個(gè)參數(shù)時(shí)，裁剪從開(kāi)始參數(shù)之后所有元素作為新數(shù)組

let fruits = ["Banana", "Orange", "Mango", "Apple", "Pear", "Lemon"]
fruitsCut = fruits.slice(3) ?// 剪切索引從3開(kāi)始的所有元素作為新數(shù)組
console.log(fruitsCut); ? // ["Apple", "Pear", "Lemon"]

02?- 數(shù)組迭代方法

????對(duì)每個(gè)數(shù)組項(xiàng)進(jìn)行操作

??? forEach()：

????遍歷數(shù)組的每個(gè)元素參數(shù)：第一個(gè)為每個(gè)元素，第二個(gè)為該元素索引號(hào)，第三個(gè)為數(shù)組本身常用的為前兩個(gè)參數(shù)接受回調(diào)函數(shù)對(duì)數(shù)組進(jìn)行操作

let fruits = ["Banana", "Orange", "Orange"]
fruits.forEach((item,index) => {
 ? ? ?console.log(item); ?// 分別輸出Banana，Orange，Orange
 ? ? ?console.log(index); ?// 分別輸出0，1，2
});

??? indexOf()：

????搜索元素值在數(shù)組中第一次出現(xiàn)的位置，返回索引值，沒(méi)有找到返回-1參數(shù)為被查找元素

let fruits = ["Banana", "Orange", "Mango"]
let x = fruits.indexOf('Mango') // 查找'Mango'
console.log(x); ?// x值為2
let y = fruits.indexOf('Apple') ?// 查找'Apple'
console.log(y); ?// y值為-1

??? filter()：

????過(guò)濾出符合條件的元素組成一個(gè)新數(shù)組參數(shù)：第一個(gè)為每個(gè)元素，第二個(gè)為該元素索引號(hào)，第三個(gè)為數(shù)組本身回調(diào)函數(shù)中return限制條件

let nums = [98, 57, 87, 36, 7]
let numsFil = nums.filter((item,index) => {
 ? ? ? return item > 50 ?// 過(guò)濾出大于50的元素成為新數(shù)組
})
console.log(numsFil); ?// [98, 57, 87]

??? reduce()：

????可以用統(tǒng)計(jì)符合條件元素總數(shù)參數(shù)：第一個(gè)為總數(shù)（初始值/先前返回值），第二個(gè)參數(shù)為每個(gè)元素，第三個(gè)參數(shù)為元素索引號(hào)，第四個(gè)參數(shù)為數(shù)組本身常用的為前兩個(gè)參數(shù)

let nums = [98, 57, 87, 36, 7]
let total = nums.reduce((pre,val) => {
 ? ? ? if(val<50){ ?// 條件為值小于50
 ? ? ? ? ? ?pre++ ? // 符合條件時(shí)pre加1
 ? ? ? }
 ? ? ? return pre ?// 不符合時(shí)返回pre
},0) ? ? ? ? ? ? ? // 接收初始值，不寫(xiě)時(shí)默認(rèn)為0
console.log(total); ? // total值為2