コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

【まとめ】開発効率アップに役立つJS配列の一般的な操作方法！

青灯夜游
リリース： 2022-08-04 18:53:00
転載
1295 人が閲覧しました

開発では配列の使用シナリオが数多くあり、日常生活でも配列関連の操作が数多く行われます。この記事では一般的な操作方法をまとめて共有しますので、開発時にすぐに活用できると開発効率が大幅に向上します。

【まとめ】開発効率アップに役立つJS配列の一般的な操作方法！

ランダムな並べ替え

1. 乱数を生成します

配列を走査します。 each 各サイクルは配列の長さの範囲内の数値をランダムに選択し、このサイクルの位置を乱数の位置

function randomSort1(arr) {
  for (let i = 0, l = arr.length; i < l; i++) {
    let rc = parseInt(Math.random() * l)
    // 让当前循环的数组元素和随机出来的数组元素交换位置
    const empty = arr[i]
    arr[i] = arr[rc]
    arr[rc] = empty
  }
  return arr
}

var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 下面两次的结果肯定是不一样的；
console.log(randomSort1(arr1))
console.log(randomSort1(arr1))
ログイン後にコピー

2の要素と交換します。新しい配列を生成します

  • 新しい空の配列を宣言し、while ループを使用します。配列の長さが 0 より大きい場合は、ループを続けます。

  • 各ループで 1 つがランダム化されます。配列の長さの範囲内の数値。乱数の位置にある要素を新しい配列

  • にプッシュし、splice を使用します (splice を理解していない学生はここを読むことができます)。乱数の位置要素をインターセプトし、元の配列の長さも変更します; 

function randomSort2(arr) {
  var mixedArr = []
  while (arr.length > 0) {
    let rc = parseInt(Math.random() * arr.length)
    mixedArr.push(arr[rc])
    arr.splice(rc, 1)
  }
  return mixedArr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(randomSort2(arr1))
ログイン後にコピー

3, arr.sort

  • If CompareFunction (a, b) の戻り値が 0 より小さい場合、a は b の前に配置されます;

  • If 戻り値 CompareFunction(a, b) ) が 0 に等しい場合、a と b 相対位置は変更されません;

  • compareFunction(a, b) の戻り値が 0 より大きい場合、b は前に配置されますa;

    • #
function randomSort3(arr) {
  arr.sort(function (a, b) {
    return Math.random() - 0.5
  })
  return arr
}
// 例子
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(randomSort3(arr1))
ログイン後にコピー

配列オブジェクトの並べ替え

##1. 単一属性の並べ替え

##

function compare(property) {
  return function (a, b) {
    let value1 = a[property]
    let value2 = b[property]
    return value1 - value2
  }
}

let arr = [
  { name: 'zopp', age: 10 },
  { name: 'gpp', age: 18 },
  { name: 'yjj', age: 8 },
]

console.log(arr.sort(compare('age')))
ログイン後にコピー

2. 複数の属性の並べ替え 

function by(name, minor) {
  return function(o, p) {
    let a, b
    if (o && p && typeof o === 'object' && typeof p === 'object') {
      a = o[name]
      b = p[name]
      if (a === b) {
        return typeof minor === 'function' ? minor(o, p) : 0
      }
      if (typeof a === typeof b) {
        return a < b ? -1 : 1
      }
      return typeof a < typeof b ? -1 : 1
    } else {
      thro(&#39;error&#39;)
    }
  }
},
ログイン後にコピー
配列の平坦化

1. フラットの呼び出しES6 のメソッド

ary = arr.flat(Infinity)

console.log([1, [2, 3, [4, 5, [6, 7]]]].flat(Infinity))
ログイン後にコピー

2. 通常の再帰

let result = []
let flatten = function (arr) {
  for (let i = 0; i < arr.length; i++) {
    let item = arr[i]
    if (Array.isArray(arr[i])) {
      flatten(item)
    } else {
      result.push(item)
    }
  }
  return result
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))
ログイン後にコピー
3. Reduce 関数を使用した反復

function flatten(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
  }, [])
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))
ログイン後にコピー
4.拡張演算子

function flatten(arr) {
  while (arr.some((item) => Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}

let arr = [1, 2, [3, 4], [5, [6, 7]]]
console.log(flatten(arr))
ログイン後にコピー
#配列の重複排除

##1. 配列の IndexOf 添字属性を使用して、 query

function unique(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
ログイン後にコピー

2. まず元の配列を並べ替えて、隣接する配列と比較し、異なる場合は新しい配列に格納します。 

function unique(arr) {
  var formArr = arr.sort()
  var newArr = [formArr[0]]
  for (let i = 1; i < formArr.length; i++) {
    if (formArr[i] !== formArr[i - 1]) {
      newArr.push(formArr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
ログイン後にコピー

3. オブジェクトの属性の既存の特性を使用します。そのような属性がない場合は、新しい配列に保存します。 

function unique(arr) {
  var obj = {}
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
ログイン後にコピー

4. 配列プロトタイプ オブジェクトで include メソッドを使用します。 

function unique(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
ログイン後にコピー

5. フィルターを使用し、配列プロトタイプ オブジェクトのメソッドを含めます。 

function unique(arr) {
  var newArr = []
  newArr = arr.filter(function (item) {
    return newArr.includes(item) ? &#39;&#39; : newArr.push(item)
  })
  return newArr
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
ログイン後にコピー

6. ES6のsetメソッドを使用します。 

function unique(arr) {
  return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
ログイン後にコピー

属性に基づく重複排除

方法 1

function unique(arr) {
  const res = new Map()
  return arr.filter((item) => !res.has(item.productName) && res.set(item.productName, 1))
}
ログイン後にコピー

メソッド 2

function unique(arr) {
  let result = {}
  let obj = {}
  for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i].key]) {
      result.push(arr[i])
      obj[arr[i].key] = true
    }
  }
}
ログイン後にコピー

Intersection/Union/Difference

1. フィルター メソッドと組み合わせたメソッドが含まれます

let a = [1, 2, 3]
let b = [2, 4, 5]

// 并集
let union = a.concat(b.filter((v) => !a.includes(v)))
// [1,2,3,4,5]

// 交集
let intersection = a.filter((v) => b.includes(v))
// [2]

// 差集
let difference = a.concat(b).filter((v) => !a.includes(v) || !b.includes(v))
// [1,3,4,5]
ログイン後にコピー

2. ES6 データ構造の設定

let a = new Set([1, 2, 3])
let b = new Set([2, 4, 5])

// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4,5}

// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2}

// a 相对于 b 的）差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1, 3}
ログイン後にコピー

配列の合計

1. ユニバーサル for ループ

#
function sum(arr) {
  var s = 0
  for (var i = arr.length - 1; i >= 0; i--) {
    s += arr[i]
  }
  return s
}

sum([1, 2, 3, 4, 5]) // 15
ログイン後にコピー

2.再帰的メソッド

function sum(arr) {
  var len = arr.length
  if (len == 0) {
    return 0
  } else if (len == 1) {
    return arr[0]
  } else {
    return arr[0] + sum(arr.slice(1))
  }
}

sum([1, 2, 3, 4, 5]) // 15
ログイン後にコピー

3.ES6 削減メソッド

function sum(arr) {
  return arr.reduce(function (prev, curr) {
    return prev + curr
  }, 0)
}

sum([1, 2, 3, 4, 5]) // 15
ログイン後にコピー

配列のような変換

1. 配列のスライス メソッド 

let arr = Array.prototype.slice.call(arguments)
ログイン後にコピー

2. ES6 の Array.from()

let arr = Array.from(arguments)
ログイン後にコピー

3. 拡張演算子

....

let arr = [...arguments]
ログイン後にコピー

#配列を上下に移動

function swapItems(arr, index1, index2) {
  arr[index1] = arr.splice(index2, 1, arr[index1])[0]
  return arr
}

function up(arr, index) {
  if (index === 0) {
    return
  }
  this.swapItems(arr, index, index - 1)
}

function down(arr, index) {
  if (index === this.list.length - 1) {
    return
  }
  this.swapItems(arr, index, index + 1)
}
ログイン後にコピー

配列を木構造に変換

##以下のデータを木構造に変換

##
let arr = [
  {
    id: 1,
    name: '1',
    pid: 0,
  },
  {
    id: 2,
    name: '1-1',
    pid: 1,
  },
  {
    id: 3,
    name: '1-1-1',
    pid: 2,
  },
  {
    id: 4,
    name: '1-2',
    pid: 1,
  },
  {
    id: 5,
    name: '1-2-2',
    pid: 4,
  },
  {
    id: 6,
    name: '1-1-1-1',
    pid: 3,
  },
  {
    id: 7,
    name: '2',
  },
]
ログイン後にコピー
実装方法 

function toTree(data, parentId = 0) {
  var itemArr = []
  for (var i = 0; i < data.length; i++) {
    var node = data[i]
    if (node.pid === parentId) {
      var newNode = {
        ...node,
        name: node.name,
        id: node.id,
        children: toTree(data, node.id),
      }
      itemArr.push(newNode)
    }
  }
  return itemArr
}

console.log(toTree(arr))
ログイン後にコピー
[関連する推奨事項: JavaScript 学習チュートリアル

#]

以上が【まとめ】開発効率アップに役立つJS配列の一般的な操作方法！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript js配列
ソース：juejin.cn
前の記事：JavaScript インスタンス解析クリアタイマー 次の記事：要素にイベントを追加するにはどうすればよいですか? JS バインディング イベントを解析する 3 つの方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
URL パラメータから取得した PHP 配列が期待どおりに動作しない カテゴリ ID を含む URL パラメータがあり、それを次のような配列として扱いたいと考えています: http://example.com?cat[]=3,9,13 PHP では、...
から 2024-04-06 22:09:02
0
1
1428
戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
から 2024-04-06 21:55:20
0
1
778
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
MySQL でグループ化してカウントするにはどうすればよいですか? 友人に送信され、削除されていないメッセージの合計数を抽出するクエリを作成しようとしています。これはテーブル構造のスクリーンショットです。 達成したい出力は次のとおりです。 idme...
から 2024-04-06 18:30:17
0
1
353
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート