シナリオの問題
このような配列があるとします。配列は順序どおりに配置されておらず、配列内の各項目にはデータの型を示す型フィールドがあります。
-
// type表示类型 // 例如 1代表日任务，2代表周任务，3代表月任务 const orignList = [ { name: "1类型下的任务项...", type: 1 }, { name: "3类型下的任务项...", type: 3 }, { name: "3类型下的任务项...", type: 3 }, { name: "2类型下的任务项...", type: 2 }, { name: "1类型下的任务项...", type: 1 }, { name: "2类型下的任务项...", type: 2 }, { name: "1类型下的任务项...", type: 1 }, { name: "1类型下的任务项...", type: 1 }, { name: "1类型下的任务项...", type: 1 }, { name: "2类型下的任务项...", type: 2 }, { name: "2类型下的任务项...", type: 2 }, { name: "3类型下的任务项...", type: 3 }, { name: "3类型下的任务项...", type: 3 }, { name: "2类型下的任务项...", type: 2 }, { name: "3类型下的任务项...", type: 3 }, ]
次に、これらのタスクを分類して統合し、同じ種類のデータを統合して、大きいものから小さいものまでタイプ別に分類する、つまり、次のような結果に処理する必要があります。
-
当時は混乱しました。実際には、sort を使用して並べ替えるだけです。以下は強制メソッドの束です。これらはいくつかのメソッドの応用例にすぎません。知っていただければ幸いです。！
-
// type表示类型 // 例如 1代表日任务，2代表周任务，3代表月任务 const finalList = [ { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, ]
解決
-
まずデータをタイプ別に分類します
-
let orignObj = { } // 创建一个空对象 orignList.forEach(item => { if (Object.keys(orignObj).includes(item.type + '')) { // 如果orignObj存在属性名为当前遍历项type的属性，就直接追加数据 // 注意：因为type是数字，但Object.keys得到的数组每一项都是字符串，需要将遍历项的type转换成字符串，否则匹配失败 orignObj[item.type].push(item) } else { // 否则就是第一次添加该属性，做初始操作 orignObj[item.type] = [item] } }) -
最終的には以下のような構成に整理されました
-
{ "1": [ { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, { "name": "3类型下的任务项...", "type": 1 }, ], "2": [ { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, { "name": "3类型下的任务项...", "type": 2 }, ], "3": [ { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, ] } -
次に、属性名の降順でデータを並べ替えます。
-
使用される Object.entries メソッド
-
let temptArr = Object.entries(taskObj) // 转化成数组，数组每一项第一项都是属性名, 第二项是对应的属性值 temptArr.sort((a, b) => b[0] - a[0]) // 按照第一项也就输属性名进行排序 -
次のデータを取得します
-
[ [ "3", [ { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 }, { "name": "3类型下的任务项...", "type": 3 } ] ], [ "2", [ { "name": "2类型下的任务项...", "type": 2 }, { "name": "2类型下的任务项...", "type": 2 }, { "name": "2类型下的任务项...", "type": 2 }, { "name": "2类型下的任务项...", "type": 2 }, { "name": "2类型下的任务项...", "type": 2 } ] ], [ "1", [ { "name": "1类型下的任务项...", "type": 1 }, { "name": "1类型下的任务项...", "type": 1 }, { "name": "1类型下的任务项...", "type": 1 }, { "name": "1类型下的任务项...", "type": 1 }, { "name": "1类型下的任务项...", "type": 1 } ] ] ] -
次に、処理された配列を走査して、最終的な処理結果を取得します。
-
let finalArr = temptArr.reduce((prev, curr) => [...prev, ...curr[1]], []) -
Object.fromEntries()当初はソート済みのデータをオブジェクトに戻すメソッドを使おうと思ったのですが、リストアされたデータが属性名に従ってソートされておらず、前のデータに戻ってしまってうまくいかなかったので、処理済みのデータをトラバースすることを考えました。Object.entries()問題を解決する配列。
使用される方法
オブジェクト.キー(obj)
-
パラメータ: 処理対象のオブジェクト
-
戻り値：処理対象の属性名の配列を返します。
-
例えば
-
// 对象方法 const a = { name: '小kun', age: 2.5, hobby: ['唱', '跳', 'rap', '篮球'] } const b = [1, 2, 3] const c = '爱你孤身走暗巷' console.log('a.keys', Object.keys(a)) // a.keys (3) ['name', 'age', 'hobby'] console.log('a.values', Object.values(a)) // ["小kun",2.5,["唱","跳","rap","篮球"]] console.log('b.keys', Object.keys(b)) // 返回索引 b.keys (3) ['0', '1', '2'] console.log('b.values', Object.values(b)) // 返回每一项的值 b.values (3) [1, 2, 3] console.log('c.keys', Object.keys(c)) // 返回索引 c.keys (7) ['0', '1', '2', '3', '4', '5', '6'] console.log('c.values', Object.values(c)) // 返回每一项的值 c.values (7) ['爱', '你', '孤', '身', '走', '暗', '巷'] // Object.values(obj) 和Object.keys(obj)类似，参数是处理对象，返回该对象属性值所组成的数组
オブジェクト.エントリ(obj)
-
パラメータ: 処理対象のオブジェクト
-
戻り値: 処理されるオブジェクトの列挙可能なプロパティのキーと値のペアの配列
- 平たく言えば、戻り値は配列、配列の各項目は配列、各項目の最初の項目はオブジェクトのキー、2 番目の項目はオブジェクトの値です。
-
例えば
-
const a = { name: '小kun', age: 2.5, hobby: ['唱', '跳', 'rap', '篮球'] } const b = [1, 2, 3] const c = '爱你孤身走暗巷' console.log('a.entries', Object.entries(a)) /* [ [ "name", "小kun" ], [ "age", 2.5 ], [ "hobby", [ "唱", "跳", "rap", "篮球" ] ] ] */ console.log('b.entries', Object.entries(b)) /* [ [ "0", 1 ], [ "1", 2 ], [ "2", 3 ] ] */ console.log('c.entries', Object.entries(c)); /* [ [ "0", "爱" ], [ "1", "你" ], [ "2", "孤" ], [ "3", "身" ], [ "4", "走" ], [ "5", "暗" ], [ "6", "巷" ] ] */
Object.fromEntries(obj)
-
Object.entries(obj) に相当します
-
パラメータ: 処理対象の配列 (配列内の各項目は配列、各項目の最初の項目は属性名、2 番目の項目は属性値)
-
戻り値: オブジェクトを返します。
Array.reduce(fn)
// prev 上一次调用回调时的返回值，或者初始值 init;
// cur 当前处理的数组元素 ，类似于forEach, map之类的item
// index 当前遍历项的索引
// arr 代表arr数组
arr.reduce((prev,cur,index,arr) => {
...
}, init);
1.合計
let arr = [1, 2, 3, 4]
// 未指定初始值
let sum = arr.reduce((prev, cur) => {
return prev + cur
}) // 10
// 指定了初始值
let sum = arr.reduce((prev, cur) => {
return prev + cur
}, 10) // 20
2. 最大値を求める
let max = arr.reduce(function (prev, cur) {
return Math.max(prev,cur);
}); // 4
3. 重複を削除する
- アイデア
- 最初は空の配列
- 各項目を反復処理する
- この項目が prev に存在する場合は、prev を変更しないでください。
- それ以外の場合は、現在のトラバーサル項目を prev に追加します。
- トラバーサルが完了すると、prev が最後の重複排除されたアレイになります。
- つまり、reduce の戻り値は
const arr1 = [1, 2, 3, 4, 2, 1, 5]
const newArr = arr.reduce((prev, cur) => prev.indexOf(cur) ? [...prev, cur] : prev, [])
console.log(newArr); // [1, 2, 3, 4, 5]
4. 配列の結合
-
上記で使用した方法は配列結合方法です。
-
初期の空の配列
-
1 つの項目がトラバースされるたびに、データが prev 配列にマージされ、マージされた配列が最終的に取得されます。
-
let finalArr = temptArr.reduce((prev, curr) => [...prev, ...curr[1]], [])