ホームページ > Java > &#&チュートリアル > Javascriptで配列を変換およびソートするにはどうすればよいですか?

Javascriptで配列を変換およびソートするにはどうすればよいですか?

青灯夜游
リリース: 2018-09-15 16:05:17
オリジナル
1552 人が閲覧しました

この章では、JavaScript での配列変換と並べ替えの方法を理解できるように、JavaScript で配列変換と並べ替えを実行する方法を紹介します。困っている友人は参考にしていただければ幸いです。

配列変換

私たちのプロジェクト開発プロセスでは、データ型間の変換が非常に重要な役割を果たしており、配列を他のデータ型に変換することが重要です。私たちにとっては共通のものです。

toString

このメソッドは、配列を文字列に変換し、配列の各要素が「toString」メソッドを呼び出して新しい値を返します。弦。文字列は配列内の各要素の文字列の形式で連結され、要素はカンマで区切られます。

定義がわかりません。例を見てみましょう。すぐに理解できます。

//语法
array.toString()
ログイン後にコピー

ケース 1

const numbers = [1, 2, 3, 4, 5];
const result = numbers.toString();
console.log(result); //1,2,3,4,5
console.log(typeof  result); //string
ログイン後にコピー

ケース 2

const numbers = ["A", "B", "C"];
const result = numbers.toString();
console.log(result); //A,B,C
console.log(typeof  result); //string
ログイン後にコピー
//利用 reduce 方法模拟 toString 的执行过程
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((prev, current) => {
    return  prev.toString() + "," + current.toString();
});
console.log(result); //1,2,3,4,5
ログイン後にコピー

これを見て疑問に思う人もいるかもしれませんが、カンマでしか区切ることはできませんか?他のキャラと分けても可能でしょうか? 「toString」メソッドは間違いなく機能しませんが、他のメソッドを使用することはできます。

古いルールでは、引き続き各メソッドの最後に互換性を確認します。

Javascriptで配列を変換およびソートするにはどうすればよいですか?

#join

このメソッドは、配列を文字列に変換し、新しい文字列を返します。

メソッドは、配列の各要素を文字列に変換し、指定された文字を使用してそれを新しい文字列に結合して返します。

このメソッドは 1 つのパラメータ、つまり指定した区切り文字を受け入れます。

//语法
array.join(separator)
ログイン後にコピー

構文は比較的単純に見えますが、注意する必要がある点がいくつかあります。

パラメータがない場合、デフォルトはカンマ (,) です。 )

パラメータ 空の文字列 ("") にすることもできます。この場合、配列の要素に未定義または null がある場合は、文字区切り文字のない文字列が返されます。の場合、空の文字列 ("") に変換されます。

パラメータにはスペースを使用でき、要素はスペースで区切られます。

const numbers = [1, 2, 3, 4, 5];
const result1 = numbers.join();
console.log(result1);//1,2,3,4,5
const result2 = numbers.join("");
console.log(result2);//12345
const result3 = numbers.join(" ");
console.log(result3);//1 2 3 4 5
const result4 = numbers.join("-");
console.log(result4);//1-2-3-4-5
const result5 = numbers.join("A");
console.log(result5);//1A2A3A4A5
ログイン後にコピー

「sort」メソッドの互換性は何ですか? ?写真の真上です。

Javascriptで配列を変換およびソートするにはどうすればよいですか?

配列の並べ替え

配列の並べ替えは、配列の昇順など、多くのシナリオで使用されます。テーブル 並べ替えは、データを大きいものから小さいものへ並べ替えたり、特定のルールに従って並べ替えたりするために使用されます。 データの並べ替え方法を効果的に使用するには、まず、より適切な方法を使用する前に、これらの方法をある程度理解する必要があります。

reverse

このメソッドの機能は名前から推測できるはずです。このメソッドは要素の順序を逆にするものです。配列内で。

//语法
array.reverse()
ログイン後にコピー
//案例
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); //[5, 4, 3, 2, 1]
ログイン後にコピー

この方法は比較的単純であり、説明する必要はありませんが、実際のプロジェクトでは、このような単純なデータ構造と単純な並べ替えルールを使用するシナリオは比較的少ないです。非常にクールで柔軟な並べ替え方法です。

「リバース」メソッドの互換性。

Javascriptで配列を変換およびソートするにはどうすればよいですか?#sort

このメソッドは、デフォルトでは配列の要素を昇順に並べ替えます。まず 2 つの例を見てみましょう

//案例1
const numbers = [1, 3, 5, 2, 4];
numbers.sort();
console.log(numbers); //[1, 2, 3, 4, 5]
ログイン後にコピー
//案例2
const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort();
console.log(numbers2);//[1, 15, 2, 20, 3]
ログイン後にコピー
並べ替えルールが私たちが考えていたものと異なることがわかります。何が起こっているのでしょうか?

実際には、「sort」メソッドが実行されると、配列の各要素はまず toString() メソッドを 1 回実行し、次に文字列の Unicode エンコードに従って並べ替えます。

では、どうすれば自分の希望やルールに従って分類できるのでしょうか?

其实「sort」方法还接受一个可选的参数:该参数是一个函数,它可以用来指定我们数组排序的规则。

//语法
array.sort([callback])
ログイン後にコピー

那么我们应该如何利用这个参数去指定我们排序的规则呢?参数函数接受两个参数,然后会根据返回的两个参数的比较值进行排序。

array.sort(compare(a, b){
    return a- b
});
ログイン後にコピー

排序的规则如下:

  • 如果 a - b 小于 0 ,那么 a 在 b 的前面,也就是会按照升序排列

  • 如果 a - b 等于 0 ,那么 a 和 b 的位置相对不变

  • 如果 a - b 大于 0 ,那么 b 在 a 的前面,也就是会按照降序排列。

例如我们想把上面的案例2中的数组按照数字的大小进行排列,我们只需要加入上面我们说的比较函数

const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort(function(a ,b){
    return a- b;
});
console.log(numbers2);//[1, 2, 3, 15, 20]
ログイン後にコピー

是不是 so easy!如果我们想要进行降序排列也很简单,调换一个我们的计算方法就行。

const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort(function(a ,b){
    return b - a;
});
console.log(numbers2);//[20, 15, 3, 2, 1]
ログイン後にコピー

但是在实际的使用当中我们不仅仅比较的是数字与字符类型,也可以能是比较的是对象,不过没关系我们依旧可以使用对象的属性去进行排序。

const friends = [{
    name: "大B哥",
    age: 25
}, {
    name: "二B哥",
    age: 30
}, {
    name: "三B哥",
    age: 28
}, {
    name: "我",
    age: 14
}];
friends.sort(function(a, b){
    return b.age - a.age;
});
console.log(friends);
ログイン後にコピー
//排序之后
//[{name: "二B哥", age: 30},
//{name: "三B哥", age: 28},
//{name: "大B哥", age: 25},
//{name: "我", age: 14}]
ログイン後にコピー

可以看到我交的朋友一般都比较偏大,一眼就能看出哪个是最大的,哪个是最小的,不过我相信大家也看出来了,最小的哪个就是我(… 哈哈)。

至于 sort 更多更有趣的方法,小伙伴们不妨自己去寻找尝试吧。

继续来看看「sort」方法的兼容性。

Javascriptで配列を変換およびソートするにはどうすればよいですか?

以上がJavascriptで配列を変換およびソートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート