'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;