数组常用方法总结(二)

接着上一篇继续..

四. 转换方法

1. toLocaleString

toLocaleString用于将值转为字符串输出, 数组的toLocaleString方法将数组中的每一项调用其toLocaleString方法转成字符串最后以逗号拼接返回

    const arr = [1, 'a', 2, {
      toLocaleString: () => {
        return 123
      }
    }]
    console.log(arr.toLocaleString());// 1,a,2,123
    console.log('a'.toLocaleString());// a
    console.log(new Number(1).toLocaleString());// 1

注意: 数字不能直接调用 toLocaleString 方法

2. toString

toString方法将值转为字符串输出, 数组的 toString 方法将数组中的每一项调用其 toString 方法转成字符串最后以逗号拼接返回

    const arr = [1, 'a', 2, {
      toString: () => {
        return 123
      },
    }, [123]]
    console.log(arr.toString());// 1,a,2,123,123
    console.log('a'.toString());// a
    console.log(new Number(1).toString());// 1
    console.log([123].toString());// 123

五. 数组的增加和删减

1. push 往数组的最后一位之后追加

2. pop  删除数组的最后一位

3. shift 删除数组的第一位

4. unshift 往数组的第一位之前追加

    const arr = []
    arr.push(1, 2, 3)
    console.log(arr); // [1, 2, 3]
    arr.pop()
    console.log(arr); // [1, 2]
    arr.shift()
    console.log(arr); // [2]
    arr.unshift(4, 5)
    console.log(arr); // [4,5,2]

 如果觉得向删除数组的最后一位,你还可以手动将数组的length属性减一

    const arr = [1, 2, 3, 4]
    arr.length--
    console.log(arr); // [1, 2, 3]

5. concat 拼接数组或值

concat最常用在两个数组进行拼接, 但是concat不止可以拼接数组还可以拼接任意值, 返回拼接后的数组, 不修改原数组

    const arr = [1, 2, 3, 4]
    const newArr = arr.concat(1, 2, [3, [3]], { a: 1 })
    console.log(newArr); // [1, 2, 3, 4, 1, 2, 3, Array(1), {…}]

六. 数组排序

1. reverse

反转数组, 将数组倒过来, 不够灵活

    const arr = [1, 2, 3, 4, 1]
    console.log(arr.reverse()); // [1, 4, 3, 2, 1]

2. sort 

参数: 排序函数

将数组以升序的方式排列, 在排列时调用每一项的String()函数转型, 再进行比较

    const arr = [1, 2, 11]
    console.log(arr.sort()); //  [1, 11, 2]
    // 这样也不奇怪, 因为字符串11 < 字符串2

这样默认排序就有很大的缺点, 排序函数很好的弥补了这一点

    const arr = [1, 11, 2, 3, 222, 444, 55561, 23, 41, 2, 0, 1]
    // 排序函数接收两个参数 比较的双方
    // 函数返回值 < 0 a排到b之前
    // 函数返回值 > 0 a排到b之后
    // 函数返回值 = 0 ab位置不动
    console.log(arr.sort((a, b) => {
      console.log(a, b);
      return a > b ? 1 : -1
    })); //  [0, 1, 1, 2, 2, 3, 11, 23, 41, 222, 444, 55561]

剩下的明天再说..........

上一篇:网页前端第四次培训


下一篇:(二)CSS选择器