鲁大师在线观看视频在线播放,私人毛片免费高清影视院,欧美丝袜自拍制服另类

JavaScript數組方法持續更新

作為 js 的重要一員，一定要好好了解一番，若有理解不到之處，還望不吝指教。

何為數組，是有序的集合。

一、如何判斷是否是數組

Array.isArray() 字面上的理解，是不是一個數組。

let arr = []
let str = '[]'
Array.isArray(arr) // true
Array.isArray(str) // false

instanceof 是不是 Array 的實例。

let arr = []
let str = '[]'
arr instanceof Array // true
str instanceof Array // false

constructor , 實例對象的隱式原型指向對象的構造函數。
```
let arr = []
arr.constructor === Array // true
```

Object.prototype.toString.call(arr) === '[object Array]'

let arr = []
Object.prototype.toString.call(arr) === '[object Array]' // true

二、創建數組

字面量
```
let arr = []
```
new Array()
```
let arr = new Array()
```

split()

let str = '1,2,3'
let arr = str.split(',')

Array.from()

// 將字符串轉換成數組
let str = '123'
let arr = Array.from(str) // ["1","2","3"]

// 將 arguments 偽數組轉換為數組
Array.from(arguments)

// 將 dom 元素偽數組轉換為數組
Array.from(document.querySelectorAll('div'))

Array.from 接受3個參數

第一個參數必填，需要轉換的對象

第二個可選，接受一個回調函數，數組中的每一項都會回調該函數

第三個可選，綁定回調函數的 this 指向

Array.of() 無論什么類型，包裹一層變成數組

Array.of() 
Array.of('') 
Array.of(null)
Array.of(undefined) 
Array.of(NaN) 
Array.of(()=>{}) 
Array.of({}) 
Array.of(123)

三、數組的方法

關注一個方法或者函數，主要關注以下幾點

參數

返回值

常用的數組方法

? 不改變原數組

? forEach map filter some every find findIndex concat indexOf lastindexOf slice flat includes

? join reduce

? 改變原數組

? push unshift pop shift splice fill sort reverse

forEach()

/*  接受 2 個參數
 *    第一個參數必填，回調函數
 *    第二個參數，綁定回調函數的 this 指向, (例子里的 obj)
 */
Array.forEach( (item,index,Array) => {
  // item 表示數組當前循環到的項
  // index 表示數組當前循環項的下標值
  // Array 表示原數組
},obj)

forEach 不能中斷循環（break）,只能跳過當前循環項，進入下一項的循環。

該方法返回值為 undefined

map() , 參數同 forEach 方法。

// 不能直接跳出循環 break 會報錯， return 也不行
let arr = [1,2,3]
let res = arr.map((item)=>{
 return item + 1
})

返回值為一個新的數組，不改變原來的數組。

filter(), 一般用來過濾數組中的元素,參數同 forEach 方法

let obj = {}
let arr = [
  {
    id: 1,
  },
  {
    id: 2,
  },
  {
    id: 3,
  },
]
let newArr = arr.filter((item, index, Array) => {
  // 必須 return ,且新數組只會含有條件為 true 的項
  return item.id == 2
}, obj)
console.log(newArr) // [{id: 2}]

返回值為一個新數組，不改變原數組

some() ，參數同 forEach

arr.some( (item, index, Array) => {
   // 有一項滿足條件，則返回 true ,剩余的項不在參與循環；沒有滿足條件，返回 false
   // 有點 邏輯 || 的意思,只是參與的項不同。
   return item.id === 2
}, obj)

返回值 Boolean 類型， true or false

every()，參數同 forEach

/* 和 some() 方法相似，有一項是 false 則終止循環，返回 false，每一項都是 true ,返回 true
 * 這個完全和 && 的思想一致
 */

返回值 Boolean 類型， true or false

tips: 空數組是個特例，始終返回 true

find()，參數同 forEach

/* 
 *  找到匹配的項則返回第一個匹配項，循環終止；找不到則返回 undefined
 */

返回值，匹配的項或者 undefined

findIndex()，參數同forEach

// 匹配到選項則返回第一個匹配項的索引，循環終止，否則返回 -1

返回值，匹配到的下標值或者 -1

push()

// 在數組的最后增加元素
let arr = [1,2]
arr.push(3) // 一個參數
let res = arr.push(4,5,6) // 多個參數
console.log(res) // [1, 2, 3, 4, 5, 6]
console.log(arr) // 6

返回數組的長度，并改變原數組

unshift()
```
let arr = [1,2]
arr.unshift(0) // 3
```
返回數組的長度，并改變原數組
pop(), 不需要參數
```
// 從數組的最后開始刪除一個元素
let arr = [1,2]
arr.pop()  // 2
```
返回被刪除元素，空數組刪除返回 undefined，改變原數組，
shift(), 不需要參數
```
// 從數組的開頭開始刪除一個元素
let arr = [1,2]
arr.shift() // 1
```
返回被刪除元素，空數組刪除返回 undefined，改變原數組，

concat(), 拼接數組

let arr = [1, 2]
let arr1 = [3, 4]
let arr2 = [5, 6]
let newArr = arr.concat(arr1, arr2) // 數組的拼接
let newArr2 = newArr.concat() // 數組的淺拷貝

返回值為新的數組，不改變原來的數組

indexOf() 與 lastIndexOf()

// 找到第一次匹配元素的索引值，否則返回 -1
let arr = [1,2,3,4]
arr.indexOf(2, 0) // 從索引為 0 的位置開始向數組的末尾查找
arr.lastIndexOf(2, arr.length-1) // 從索引為 arr.length-1 的位置開始向數組的開頭查找

返回值為匹配的下標或者 -1

slice(), 淺拷貝數組

let arr = [1,2,3,4,5,6]
// 包含開始位置， 不包含結束位置
arr.slice(1,2) // [2]

返回值新的數組，不改變原數組

splice()，萬金油的存在，增、刪、改功能。

let arr = [1, 2, 3]

/*  刪除功能，任意位置刪除
 *  參數1. 開始的索引位置，包含該位置
 *  參數2. 刪除的個數
 *  返回值：返回刪除的元素的一個數組，改變原數組
 */
arr.splice(0, 1)  // [1]
console.log(arr)  // [2, 3]

/*  增加功能，任意位置增加元素
 *  參數1. 開始的索引位置，也可以理解為新數組的索引位置上插入新的項。
 *  參數2. 刪除個數為 0
 *  參數3. 增加的項
 *  返回值：空數組，改變原數組
 */
arr.splice(1, 0, 1, 2, 3)  // []
console.log(arr)  // [2, 1, 2, 3, 3]

/*  修改功能，任意位置修改，這個就是增加功能的變形
 *  參數1. 開始索引位置，包含該位置
 *  參數2. 替換的個數 n，包含從索引參數1開始在內的向后 n 項將會從數組去除
 *  參數3. 替換的項， 在數組索引參數1位置，向后插入替換的項
 *  返回值： 空數組，改變原數組
 */
arr.splice(1, 2 ,{id:1},{id:2})

主要是參數的靈活運用，組成不同的功能，很實用。

copyWithin()

/* 從數組內部替換自身項
 * 參數1. 替換元素開始的位置
 * 參數2. 從該索引開始復制數據，默認是0
 * 參數3. 復制數據結束的索引值，不包含該位置，默認到數組的結束
 * 返回值：修改后的新數組
 */
let arr = [1, 2, 3, 4]
arr.copyWithin(0,1,2) // [2,2,3,4]

返回值為新的數組，改變原數組

fill()

/*  填充數組
 *  參數1. 用來填充數組的值
 *  參數2. 起始索引值，默認是 0 
 *  參數3. 終止索引值，不包含該項，默認是數組的長度
 */
let arr = []
arr.fill(1, 0, 10) // 無法改變空數組，只能改變已有的項
arr = [1, 2, 3, 4]
arr.fill(5, 1 ,2) // [1,5,3,4]

返回值為改變后的數組，改變原數組

flat()

/*  多維數組變成一維數組
 *  參數 指定展開嵌套數組的深度，Infinity 表示任意深度
 *  不傳可以去除數組中的空項
 *  返回值：新的的數組，不改變原數組
 */
let arr = [1, 2, [3, 4]]
arr.flat(1)   // [1, 2, 3, 4]

let arr1 = [1, 2, 3, , ,4]
arr1.flat() // [1, 2, 3, 4]

返回值：新的的數組，不改變原數組

flatMap(),參數同 forEach

/*  循環數組，每一項執行一個函數，最終執行以下flat()方法
 *  返回值：新的數組，不會改變原數組 
 */
let arr = [1, 2]
arr.flatMap( (item) => {
    [item, item * 2]
}) // [1,2,2,4]

flatMap 只能展開一層數組

includes()

/*  判斷數組是否含有某個指定的值
 *  參數1. 包含項
 *  參數2. 檢索的開始位置，包含該位置
 *  返回值：包含返回 true , 不包含返回 false
 */
console.log([1, 2, 3].includes(3));    // true
console.log([1, 2, 3].includes(3, 3))  // false
console.log([1, 2, 3].includes(3, 2))  // true

也可用于字符串的檢索，區分大小寫

sort()

/*  排序
 *  參數1. 
 *  參數2. 
 *  規則
 *    - 不傳值，則是轉化為字符串逐位比較 ASCII 大小
 *    - 接收一個函數，函數有個兩個參數 a b
 *        若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小于 0 的值。
 *        若 a 等于 b，則返回 0。
 *        若 a 大于 b，則返回一個大于 0 的值。
 *  返回值：新的排序后的數組
 */
let arr = [1,5,2,10]
arr.sort((a, b) => {
    // a - b 返回值為正數，則交換兩項的位置
    return a - b
}) // [1,2,5,10] 從小到大
arr.sort((a, b) => {
    return b - a
}) // [10,5,2,1] 從大到小

返回值為有序的新數組，改變原數組

reverse()

let arr = [1, 2, 3]
arr.reverse() // [3, 2, 1]

反轉數組，改變原數組

toLocaleString() 和 toString()

/*  將數組的每一項使用 toLocaleString 或者 toString
 *  不同點是語言環境的不同
 *  返回值：字符串，不改變原數組
 */
let arr = [1, 'a', { id: 1 }, new Date()]
// 1,a,[object Object],2020/5/22 下午2:44:40
console.log(arr.toLocaleString())
// 1,a,[object Object],Fri May 22 2020 14:44:40 GMT+0800 (中國標準時間)
console.log(arr.toString())

返回值：字符串，不改變原數組

join()

/*  將數組使用特定的符號進行分割
 *  返回值：字符串，不改變原數組
 */
let arr = [1, 2, 3]
arr.join() // 1,2,3
arr.join('') //123
arr.join('*') //1*2*3

和 split 更配哦

reduce()，實用且重要的方法。

/*  累加和累計這種描述特貼切
 *  參數1. 一個處理函數,接收 4 個參數
 *      - pre 第一次為參數2的值，然后是每次 處理函數 返回的值
 *    — val 當前循環項
 *    - index 當前循環項索引
 *    — arr 當前數組
 *  參數2. 第一次 pre 的值，默認是數組的第一個值。
 */
let str = '好好學習天天向上'
let arr = str.split('')
let i = 0
let res = arr.reduce((pre, val, index, arr) => {
  console.log(i++)
  console.log(`pre：${pre}`)
  console.log(`val：${val}`)
  return pre + val
}, '我會')
console.log(res) // 我會好好學習天天向上

返回值為累計的結果，不會改變原數組

reduceRight()

和 reduce 的結果一樣，不同的是從數組的最后開始。

參考

[ MDN ]:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
[ 掘金 ]: https://juejin.im/post/5d1ff6def265da1b855c777f#heading-22

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JavaScript數組方法持續更新

JavaScript數組方法持續更新

一、如何判斷是否是數組

二、創建數組

三、數組的方法

參考

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频