Rumah > Java > javaTutorial > Javascript如何进行数组转换与排序?

Javascript如何进行数组转换与排序?

青灯夜游
Lepaskan: 2018-09-15 16:05:17
asal
1541 orang telah melayarinya

本章给大家介绍Javascript如何进行数组转换与排序,让大家了解Javascript中数组转换与排序的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

数组的转换

我们在项目的开发过程中,数据类型之间的转换有着非常重要的作用,而数组转换成其他数据类型是我们常见的一种。

toString

该方法是对数组转换成字符串,数组的每一个元素都会调用 「toString」方法 ,返回一个新字符串。该字符串是以数组中的每一个元素的字符串形式拼接而成,且元素之间用逗号分隔。

定义没看懂,我们看一个例子肯定立刻就明白!

//语法
array.toString()
Salin selepas log masuk

案例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
Salin selepas log masuk

案例2

const numbers = ["A", "B", "C"];
const result = numbers.toString();
console.log(result); //A,B,C
console.log(typeof  result); //string
Salin selepas log masuk
//利用 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
Salin selepas log masuk

看到这里应该会有人疑问,是不是只能用逗号分隔呢?如果我用其它字符分隔可行吗?可以告诉你「toString」方法肯定是不行了,但是我们可以利用其他方法进行。

老规矩,我们还是会在每个方法的后面看看兼容。

1.png

join

该方法也是将一个数组转换成字符串,返回一个新的字符串。

方法会将数组的每一个元素转换成字符串,然后再用给定的字符去拼接成一个新的字符串返回给我们。

该方法接受一个参数:就是我们给定的分隔符。

//语法
array.join(separator)
Salin selepas log masuk

虽说语法看上去比较简单,但是有几点我们需要注意的

参数是可选的,如果没有参数默认为逗号(,)

参数可以为空字符串(""),这时会返回一个没有任何字符分隔的字符串

如果数组的元素中有 undefined 或者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
Salin selepas log masuk

「sort」方法的兼容性如何呢?直接上图。

2.png

数组的排序

数组的排序用到的场景有很多,比如表格的升序与降序,数据从大到小排列或者按照某些规则去排列等等都会用到排序,如何有效到使用数据到排序方法,首先你要对这些方法有一定的了解才能使用比较恰当的方法。

reverse

从名称我们应该就能猜出该方法的作用,该方法就是将数组中的元素颠倒顺序。

//语法
array.reverse()
Salin selepas log masuk
//案例
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); //[5, 4, 3, 2, 1]
Salin selepas log masuk

方法相对比较简单,也没什么好解释的,但是应用场景比较少,在实际的项目中我们并不是那么简单的数据结构,那么简单的排序规则,下面我们来重点介绍一个非常牛逼而且非常灵活的一个排序方法。

「reverse」方法的兼容性。

3.png

sort

该方法对数组的元素进行排序,默认情况下按照升序排列。先看看两个例子吧

//案例1
const numbers = [1, 3, 5, 2, 4];
numbers.sort();
console.log(numbers); //[1, 2, 3, 4, 5]
Salin selepas log masuk
//案例2
const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort();
console.log(numbers2);//[1, 15, 2, 20, 3]
Salin selepas log masuk

你会发现排序规则并不是我们想想的那样,究竟是怎么一回事情呢?
其实在「sort」方法执行的时候,数组的每个元素会先执行一次 toString() 方法,然后在根据字符串的 Unicode 编码进行排序。

那么我们怎么样做才能按照我们自己的意愿或者说规则进行排序呢?

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

//语法
array.sort([callback])
Salin selepas log masuk

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

array.sort(compare(a, b){
    return a- b
});
Salin selepas log masuk

排序的规则如下:

  • 如果 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]
Salin selepas log masuk

是不是 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]
Salin selepas log masuk

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

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);
Salin selepas log masuk
//排序之后
//[{name: "二B哥", age: 30},
//{name: "三B哥", age: 28},
//{name: "大B哥", age: 25},
//{name: "我", age: 14}]
Salin selepas log masuk

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

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

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

4.png

Atas ialah kandungan terperinci Javascript如何进行数组转换与排序?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan