2024-12-29 日报 Day50

2024-12-29 日报 Day50

Yuyang 前端小白🥬

今日的鸡汤

愿你历经风霜,依然初心不改,坚定走在自己的路上。

今日学习内容

1、JS红皮书P148-151 第六章:集合引用类型

今日笔记

1、排序方法:数组有2个方法对元素进行重新排序reverse()和sort()。

1
2
3
let values = [1, 2, 3, 4, 5]; 
values.reverse();
alert(values); // 5,4,3,2,1

默认情况下,sort()会按照升序重新排列数组元素,即最小的值在前面,最大的值在后面。为此,sort()会在每一项上调用 String()转型函数,然后比较字符串来决定顺序。即使数组的元素都是数值,也会先把数组转换为字符串再比较、排序。比如:

1
2
3
let values = [0, 1, 5, 10, 15];
values.sort();
alert(values); // 0,1,10,15,5

一开始数组中数值的顺序是正确的,但调用 sort()会按照这些数值的字符串形式重新排序。因此,即使 5 小于 10,但字符串”10”在字符串”5”的前头,所以 10 还是会排到 5 前面。很明显,这在多数情况下都不是最合适的。为此,sort()方法可以接收一个比较函数,用于判断哪个值应该排在前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。比如:

1
2
3
4
5
6
7
8
9
10
11
12
function compare(value1, value2) { 
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15

在给 sort()方法传入比较函数后,数组中的数值在排序后保持了正确的顺序。当然,比较函数也
可以产生降序效果,只要把返回值交换一下即可:

1
2
3
4
5
6
7
8
9
10
11
12
function compare(value1, value2) { 
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 15,10,5,1,0

此外,这个比较函数还可简写为一个箭头函数:
let values = [0, 1, 5, 10, 15];
values.sort((a, b) => a < b ? 1 : a > b ? -1 : 0);
alert(values); // 15,10,5,1,0
如果数组的元素是数值,或者是其 valueOf()方法返回数值的对象(如 Date 对象),这个比较函数还可以写得更简单,因为这时可以直接用第二个值减去第一个值:
function compare(value1, value2){
return value2 - value1;
}
2、数组操作方法:

  • concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组,则 concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组,则直接把它们添加到结果数组末尾。
    1
    2
    3
    4
    let colors = ["red", "green", "blue"]; 
    let colors2 = colors.concat("yellow", ["black", "brown"]);
    console.log(colors); // ["red", "green","blue"]
    console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"]
    打平数组参数的行为可以重写,方法是在参数数组上指定一个特殊的符号:Symbol.isConcatSpreadable。这个符号能够阻止 concat()打平参数数组。相反,把这个值设置为 true 可以强制打平类数组对象:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    let colors = ["red", "green", "blue"]; 
    let newColors = ["black", "brown"];
    let moreNewColors = {
    [Symbol.isConcatSpreadable]: true,
    length: 2,
    0: "pink",
    1: "cyan"
    };
    newColors[Symbol.isConcatSpreadable] = false;
    // 强制不打平数组
    let colors2 = colors.concat("yellow", newColors);
    // 强制打平类数组对象
    let colors3 = colors.concat(moreNewColors);
    console.log(colors); // ["red", "green", "blue"]
    console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]]
    console.log(colors3); // ["red", "green", "blue", "pink", "cyan"]
  • slice()用于创建一个包含原有数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数:返回元素的开始索引和结束索引。如果只有一个参数,则 slice()会返回该索引到数组末尾的所有元素。如果有两个参数,则 slice()返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素。记住,这个操作不影响原始数组。来看下面的例子:
    1
    2
    3
    4
    5
    let colors = ["red", "green", "blue", "yellow", "purple"]; 
    let colors2 = colors.slice(1);
    let colors3 = colors.slice(1, 4);
    alert(colors2); // green,blue,yellow,purple
    alert(colors3); // green,blue,yellow
    注意 如果 slice()的参数有负值,那么就以数值长度加上这个负值的结果确定位置。比如,在包含 5 个元素的数组上调用 slice(-2,-1),就相当于调用 slice(3,4)。如果结束位置小于开始位置,则返回空数组。
  • 最强大的数组方法就属 splice()了,使用它的方式可以有很多种。splice()的主要目的是在数组中间插入元素,但有 3 种不同的方式使用这个方法。
     删除。需要给 splice()传 2 个参数:要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素,比如 splice(0, 2)会删除前两个元素。
     插入。需要给 splice()传 3 个参数:开始位置、0(要删除的元素数量)和要插入的元素,可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数,乃至任意多个要插入的元素。比如,splice(2, 0, “red”, “green”)会从数组位置 2 开始插入字符串”red”和”green”。
     替换。splice()在删除元素的同时可以在指定位置插入新元素,同样要传入 3 个参数:开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如,splice(2, 1, “red”, “green”)会在位置 2 删除一个元素,然后从该位置开始向数组中插入”red”和”green”。
    splice()方法始终返回这样一个数组,它包含从数组中被删除的元素(如果没有删除元素,则返回空数组)。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    let colors = ["red", "green", "blue"]; 
    let removed = colors.splice(0,1); // 删除第一项
    alert(colors); // green,blue
    alert(removed); // red,只有一个元素的数组
    removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
    alert(colors); // green,yellow,orange,blue
    alert(removed); // 空数组
    removed = colors.splice(1, 1, "red", "purple"); // 插入两个值,删除一个元素
    alert(colors); // green,red,purple,orange,blue
    alert(removed); // yellow,只有一个元素的数组
此页目录
2024-12-29 日报 Day50