'next'および'previous'プロパティによる並べ替え(JSコンパレーター関数)
これがオブジェクトのサンプル配列です。各オブジェクトはマルチページウェブサイトのページを表すものと見なします。各オブジェクトには、別のオブジェクトのIDと前のプロパティ(最初のプロパティを表す場合を除く)を指す次のプロパティ(最後のページを表す場合を除く)があります。ページ)前のオブジェクトのIDを指します。
現在、これらのオブジェクトはすべてランダムに配置されています。私たちの仕事は、オブジェクトを正しい位置に並べ替えることです-
let arr = [ { id: "1325asdfasdasd", next: "5345341fgdfgdd", previous:"545234123fsdfd" }, { id: "das987as9dya8s", next: "3j12k3b1231jkj" }, { id: "89ad8sasds9d8s", previous: "1j3b12k3jbasdd" }, { id: "5345341fgdfgdd", next: "1j3b12k3jbasdd", previous:"1325asdfasdasd" }, { id: "1423123123asfd", next: "545234123fsdfd", previous:"3j12k3b1231jkj" }, { id: "1j3b12k3jbasdd", next: "89ad8sasds9d8s", previous:"5345341fgdfgdd" }, { id: "3j12k3b1231jkj", next: "1423123123asfd", previous:"das987as9dya8s" }, { id: "545234123fsdfd", next: "1325asdfasdasd", previous:"1423123123asfd" }, ];
前のオブジェクトが最初に来て、次の来たるオブジェクトがなく、次と前のオブジェクトが正しいIDを指すように並べ替える必要があります
この問題には2つのステップで取り組みます-
ステップ1 −配列全体を反復処理し、IDをキーとして、オブジェクトを値としてマップに格納し、前のオブジェクトがないオブジェクトを別の変数に格納します-
const objectMap = new Map(); let firstObject; const sortedArray = []; for(const obj of arr){ objectMap.set(obj.id, obj); if(!obj.previous){ firstObject = obj; } }
ステップ2 −マップの要素のループを開始し、最後に到達するまで、各メンバーの次のオブジェクトへのアクセスとプッシュを開始します-
for(let start = firstObject; start; start = objectMap.get(start.next)){ sortedArray.push(start); }; console.log(sortedArray);
出力を含む完全な例を見てみましょう-
例
let arr = [ { id: "1325asdfasdasd", next: "5345341fgdfgdd", previous:"545234123fsdfd" }, { id: "das987as9dya8s", next: "3j12k3b1231jkj" }, { id: "89ad8sasds9d8s", previous: "1j3b12k3jbasdd" }, { id: "5345341fgdfgdd", next: "1j3b12k3jbasdd", previous:"1325asdfasdasd" }, { id: "1423123123asfd", next: "545234123fsdfd", previous:"3j12k3b1231jkj" }, { id: "1j3b12k3jbasdd", next: "89ad8sasds9d8s", previous:"5345341fgdfgdd" }, { id: "3j12k3b1231jkj", next: "1423123123asfd", previous:"das987as9dya8s" }, { id: "545234123fsdfd", next: "1325asdfasdasd", previous:"1423123123asfd" }, ]; const objectMap = new Map(); let firstObject; const sortedArray = []; for(const obj of arr){ objectMap.set(obj.id, obj); if(!obj.previous){ firstObject = obj; } } for(let start = firstObject; start; start = objectMap.get(start.next)){ sortedArray.push(start); }; console.log(sortedArray);
出力
コンソールでのコードの出力は-
になります[ { id: 'das987as9dya8s', next: '3j12k3b1231jkj' }, { id: '3j12k3b1231jkj', next: '1423123123asfd', previous: 'das987as9dya8s' }, { id: '1423123123asfd', next: '545234123fsdfd', previous: '3j12k3b1231jkj' }, { id: '545234123fsdfd', next: '1325asdfasdasd', previous: '1423123123asfd' }, { id: '1325asdfasdasd', next: '5345341fgdfgdd', previous: '545234123fsdfd' }, { id: '5345341fgdfgdd', next: '1j3b12k3jbasdd', previous: '1325asdfasdasd' }, { id: '1j3b12k3jbasdd', next: '89ad8sasds9d8s', previous: '5345341fgdfgdd' }, { id: '89ad8sasds9d8s', previous: '1j3b12k3jbasdd' } ]
-
配列プロパティの長さでJavaScriptオブジェクトを並べ替えます。
以下は、JavaScriptオブジェクトを配列プロパティの長さで並べ替えるコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&
-
CSSで次と前のボタンを作成するにはどうすればよいですか?
以下は、CSSで次と前のボタンを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> a { text-decoration: none; display: inline-block; padding: 20px;