ホームページ > 記事 > ウェブフロントエンド > 【まとめ】開発効率アップに役立つ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))
##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('error') } } },配列の平坦化
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))#配列の重複排除
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) ? '' : 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]))
属性に基づく重複排除
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
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}
配列の合計
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
function sum(arr) {
return arr.reduce(function (prev, curr) {
return prev + curr
}, 0)
}
sum([1, 2, 3, 4, 5]) // 15
let arr = Array.prototype.slice.call(arguments)
2. ES6 の Array.from()
let arr = Array.from(arguments)
....
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 サイトの他の関連記事を参照してください。