JSでよく使われる15個の操作配列の方法

4039 ワード

JSでよく使われる配列方法:
配列の添削:
*push(挿入された要素)作用:配列の末尾に要素を挿入する*
let arr = [1, 2, 3]
arr.push(4, 5)
let res = arr.push(4, 5) //              (res:5)
console.log(arr) // [1, 2, 3, 4, 5]
*unshift(挿入された要素)作用:配列の頭に要素を挿入します.*
let arr = [1, 2, 3]
arr.unshift(-2, -1, 0)
let res = arr.unshift(-2, -1, 0) //              (res:6)
console.log(arr) // [-2, -1, 0, 1, 2, 3]
*pop()の役割:配列の最後の要素を削除*
let arr = [1, 2, 3]
arr.pop()
let res = arr.pop() //          (res: [3])
console.log(arr) // [1, 2]
**shift()作用:配列の最初の要素を削除**
let arr = [1, 2, 3]
arr.shift()
let res = arr.shift() //          (res: [1])
console.log(arr) // [2, 3]
*slice(開始要素の下付き、終了要素の下付き)作用:切り取り配列の特定要素(元の配列を変えず、浅いコピーとして使用可能)**
//    
let arr = [1, 2, 3]
let newArr = arr.slice() //            
console.log(newArr) // [1, 2, 3] 

//    
let arr = [1, 2, 3]
let newArr = arr.slice(0, 2) //      0       ,      2   ( :         2   )
console.log(newArr) // [1, 2]
console.log(arr) // [1, 2, 3] //       
*splice(開始要素の下付き、削除された要素の個数、追加された要素...)の役割:要素の追加、または削除、*
//     
let arr = [1, 3, 5]
arr.splice(1, 0, 2) //       1           2
let res = arr.splice(1, 0, 2) //          ,       [](res: []) 
console.log(arr) // [1, 2, 3, 5]

//    
let arr = [1, 2, 3]
arr.splice(1, 1) //       1           
let res = arr.splice(1, 1) //          (res: [2])
console.log(arr) // [1, 3]
**join(各要素を分割するための入力フラグ)の役割:行列を文字列に変換します.
let arr = ['zbw', 'cyl']
let res = arr.join(',') 
console.log(res) // 'zbw, cyl'

let res = arr.join('-')
console.log(res) // 'zbw-cyl'
**concat()の役割:複数の配列または値*を接続する
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]

let res = arr1.concat(arr2)
console.log(res) // [1, 2, 3, 4, 5, 6]

let res = arr1.concat(4, arr2, 7, 8)
console.log(res) // [1, 2, 3, 4, 4, 5, 6, 7, 8]
操作配列の高次関数
高次関数:関数をパラメータとして伝えたり、関数を戻り値の関数として高次関数としたりします.
*map()の役割:操作配列は、処理後の配列*を返します.
let arr = [1, 2, 3, 4]
let res = arr.map(item => item * 2)
console.log(res) // [2, 4, 6, 8]
**filter()作用:フィルタリング配列、戻り操作式はtrueの配列要素*.
let arr = [1, 2, 3, 4]
let res = arr.filter(item => item >= 2)
console.log(res) // [2, 3, 4]
**reduce(pre,cur,arr,)作用:和を求めて、行列は対象を回転します.*
//   
let arr = [1, 2, 3, 4]
let res = arr.reduce((pre, cur) => {
  return pre += cur
}, 0) //             0
console.log(res) // 10

//      
let arr = [
  { id: 1, name: 'zbw', age: 18 },
  { id: 2, name: 'cyl', age: 18 },
]

let obj = arr.reduce((pre, cur) => {
   pre[cur.id] = cur.name
   return pre
}, {}) //                   {}

console.log(obj) // {1: 'zbw', 2: 'cyl'} 
**forEach()の役割:map()と似ていますが、forEach()は元の配列を変えて、元の値を返していないという違いがあります.
let arr = [
  { name: 'zbw', age: 22 },
  { name: 'cyl', age: 18 },
]

arr.forEach(item => item.age = 20)
console.log(arr) // [{ name: 'zbw', age: 20 },{ name: 'cyl', age:20 }]
**some()の役割:条件式に該当する配列があるかどうかを判断します.trueを返す条件に該当するものがあれば、false*を返します.
let arr = [1, 2, 3, 4]
let bool = arr.some(item => item > 2)
console.log(bool) // true       2   

let bool = arr.some(item => item > 5)
console.log(bool) // false        5   
**every()の役割:配列中のすべての要素が式の条件に合致しているかどうかを判断し、すべてtrueに戻ります.そうでないとfalse**に戻ります.
let arr = [1, 2, 3, 4]
let bool = arr.every(item => item > 0)
console.log(bool) // true          0

let bool = arr.every(item => item > 1)
console.log(bool) // false        1   
**find()作用:配列中の条件に合致する最初の要素を見つけます.*
let arr = [{ id: 1, name: 'zbw', age: 18 }, { id: 2, name: 'cyl', age: 18 }]

let res = arr.find(item => item.age === 18)
console.log(res) // { id: 1, name: 'zbw', age: 18 }

let res = arr.find(item => item.id === 2)
console.log(res) // { id: 2, name: 'cyl', age: 18 }