Javascript에서 배열을 변환하고 정렬하는 방법은 무엇입니까?

이 장에서는 Javascript에서 배열을 변환하고 정렬하는 방법을 소개하여 Javascript에서 배열 변환 및 정렬 방법을 이해할 수 있도록 합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

배열 변환

저희 프로젝트 개발 과정에서 데이터 유형 간의 변환은 매우 중요한 역할을 하며, 배열을 다른 데이터 유형으로 변환하는 것은 우리에게 일반적인 일입니다.

toString

이 메서드는 배열을 문자열로 변환하는 것입니다. 배열의 각 요소는 "toString" 메서드를 호출하고 새 문자열을 반환합니다. 문자열은 배열의 각 요소를 문자열 형식으로 연결하며 요소는 쉼표로 구분됩니다.

정의가 이해가 안 되네요. 예를 보면 바로 이해가 되실 겁니다!

//语法
array.toString()

Case 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

Case 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" 메서드는 확실히 작동하지 않지만 다른 메서드를 사용할 수 있다고 말씀드릴 수 있습니다.

기존 규칙에 따라 각 방법이 끝날 때 호환성을 살펴보겠습니다.

join

이 메서드는 또한 배열을 문자열로 변환하고 새 문자열을 반환합니다.

메서드는 배열의 각 요소를 문자열로 변환한 다음, 주어진 문자를 사용하여 이를 새 문자열로 연결하고 우리에게 반환합니다.

이 메소드는 하나의 매개변수, 즉 우리가 제공한 구분자를 허용합니다.

//语法
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

　정렬 방법의 호환성은 어떻습니까? 그림 바로 위에 있습니다.

배열 정렬 배열 정렬은 테이블의 오름차순 및 내림차순, 큰 데이터에서 작은 데이터로 정렬 또는 특정 규칙에 따른 정렬 등과 ​​같은 다양한 시나리오에서 사용됩니다. 사용, 데이터 정렬 방법을 효과적으로 사용하는 방법, 우선 보다 적절한 방법을 사용하기 전에 이러한 방법에 대해 어느 정도 이해해야 합니다.

reverse이름에서 이 메소드의 기능을 추측할 수 있습니다. 이 메소드는 배열의 요소 순서를 바꾸는 것입니다.

//语法
array.reverse()

//案例
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); //[5, 4, 3, 2, 1]

방법은 비교적 간단하고 설명할 것도 없지만 실제 프로젝트에서는 이러한 간단한 데이터 구조와 간단한 정렬 규칙이 없습니다. 유연한 정렬 방법.

"역방향" 방식의 호환성.

sort이 방법은 기본적으로 배열의 요소를 오름차순으로 정렬합니다. 먼저 두 가지 예를 살펴보겠습니다

//案例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() 메서드를 한 번 실행한 다음 문자열의 유니코드 인코딩에 따라 정렬합니다.

그렇다면 우리가 원하는 대로나 규칙에 따라 분류하려면 어떻게 해야 할까요?

其实「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에서 배열을 변환하고 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!