那些JS的高级单行代码

1. 从数组中删除虚假值

布尔构造函数用作 filter() 方法的回调函数。如果值为真，则布尔构造函数返回真，如果值为假，则返回假。因此，filter() 方法从原始数组中删除所有虚假值。

  const realitv = (arr) => arr.filter(Boolean)

  let arr1 = [false, 0, "", null, undefined, NaN]
  let arr2 = [true, false, {}, 0, [], "", "0", null, "false", undefined, 999]

  console.log('arr1', realitv(arr1))    // []
  console.log('arr2', realitv(arr2))    // [ true, {}, [], "0", "false", 999]

2. 通过键对对象数组进行分组

定义一个名为 groupBy 的函数，它以一个对象数组和一个键作为参数。该函数的目的是将数组中的对象按指定的键进行分组。

 const groupBy = (arr, key) =>
    arr.reduce(
      (acc, obj) => ({ ...acc, [obj[key]]: [...(acc[obj[key]] || []), obj] }),
      {}
    )

  const people = [
    { name: "Alice", age: 21 },
    { name: "Bob", age: 22 },
    { name: "Charlie", age: 21 },
    { name: "David", age: 23 },
    { name: "Eve", age: 22 }
  ]

  console.log(groupBy(people, "age"))

  //   输出结果：
    //  {
    //     21: [
    //       { name: "Alice", age: 21 },
    //       { name: "Charlie", age: 21 }
    //      ],
    //      22: [
    //       { name: "Bob", age: 22 },
    //       { name: "Eve", age: 22 }
    //      ],
    //      23: [{ name: "David", age: 23 }]
    //     }

acc 参数是累加分组对象的累加器。obj 参数表示数组中的每个对象。

在 reduce() 方法内部，使用扩展运算符 (...acc) 返回一个新对象。这将创建 accumulator 对象的浅表副本，以便可以在不更改原始对象的情况下对其进行修改。

新对象的属性设置为与 key 参数的值相匹配的键。该属性的值是一个包含被迭代对象的数组。

(acc[obj[key]] || []) 表达式检查该属性是否存在于累加器对象中。如果不存在，则返回一个空数组。展开运算符用于将数组与正在迭代的当前对象连接起来。

最后，groupBy() 函数返回包含分组对象的累加器对象。

3. 获取数组的第一个和最后一个元素

shift()：删除原数组第一项，并返回删除元素的值；

pop()：移除数组最后一项，返回移除的那个值；

   const first = (arr) => [...arr].shift()
    const last = (arr) => [...arr].pop()

    const arr = [1, 2, 3, 4, 5, 6, 7]

    console.log(first(arr))  //  1
    console.log(last(arr))   //  7 

4. 返回数组中的中位数

我们先声明一个名为middleValue的函数，然后将一个数字数组进行输入

先对数组进行升序，然后返回数组的中值

  const middleValue = (arr) => {
    // 先对数组进行排序
    const sortList = arr.sort()
    const middle = Math.floor(sortList.length / 2)
    // 对数组进行进行数组长度的判断，数组元素的个数是偶数还是奇数
    return sortList.length % 2 === 0
      ? (sortList[middle - 1] + sortList[middle]) / 2
      : sortList[middle]
  }

  const arr1 = [3, 1, 4, 2, 5]
  console.log(middleValue(arr1))   // 3

  const arr2 = [1, 2, 5, 6]
  console.log(middleValue(arr2))   // 3.5

5. 返回数组的众数

数组的众数是数组中出现频率最高的值。如果有多个值具有相同的最高频率，则所有这些值都被视为众数。

    const mode = (arr) => {
      const counts = arr.reduce(
        (acc, curr) => ({ ...acc, [curr]: (acc[curr] || 0) + 1 }),
        {}
      )

      const maxCount = Math.max(...Object.values(counts))

      return Object.keys(counts)
        .filter((key) => counts[key] === maxCount)
        .map(Number)
    }

    const arr1 = [1, 2, 3, 2, 4, 4, 2, 5, 4]
    console.log(mode(arr1)) // [2, 4]

    const arr2 = [1, 2, 3, 3, 2, 4, 4, 5]
    console.log(mode(arr2)) // [2, 3, 4]

6. Array.from 创建一个长度为 n 的数组

通过Array的form静态方法传递两个参数，第一个为数组，第二个参数为处理各项值的回调函数

    const n = 5
    //  1.创建长度为n，值为索引的数组
    const arr1 = Array.from(new Array(n), (...c) => c[1])
    const arr2 = Array.from(new Array(n), (val, i) => i)
    //  2.创建长度为n，值为''的数组
    const arr3 = Array.from(new Array(n), () => '')

    console.log(arr1) // [ 0, 1, 2, 3, 4 ]
    console.log(arr2) // [ 0, 1, 2, 3, 4 ]
    console.log(arr3) // [ '', '', '', '', '' ]

7. 将字符串转换为数字

函数的目的是将字符串数组转换为数字数组。Number 构造函数用作 map() 方法的回调函数。Number 构造函数将字符串转换为数字。

同样的方法可将数字转换为字符串

    // Number和String相互转化
    const toNumbers = (arr) => arr.map(Number)
    const toString = (arr) => arr.map(String)
    const strArr = ["1", "2", "3", "4", "5"]
    const numArr = [1, 2, 3, 4, 5]
    console.log(toNumbers(strArr)) // [ 1, 2, 3, 4, 5 ]
    console.log(toString(numArr)) // ["1", "2", "3", "4", "5"]

8. 返回一个键值翻转的对象

此函数的目的是返回一个新对象，其中翻转了原始对象的键和值。

就是先通过对象的entries()方法，先将对象转成数组，然后使用数组的map()方法，遍历每一个键值对，并且返回一个新的翻转过后的键值对数组，最后在通过fromEntries()方法将这个翻转过后的键值对数组转成对象。

fromEntries()方法和entries()方法是一对互逆的方法，键值对数组和对象的相互转化

    const flip = (obj) =>
      Object.fromEntries(Object.entries(obj).map(([key, value]) => [value, key]))

    const myDog = {
      firstName: "oscar",
      lastName: "king",
      age: 3
    }

    console.log(flip(myDog)) // { 3: 'age', oscar: 'firstName', king: 'lastName' }

9. 返回一个只有特定键的对象

此函数的目的是返回一个新对象，该对象仅包含原始对象中指定的键及其对应的值。

    const pick = (obj, keys) =>
      Object.fromEntries(
        Object.entries(obj).filter(([key]) => keys.includes(key))
      )

    const myDog = {
      firstName: "oscar",
      lastName: "king",
      age: 3
    }

    console.log(pick(myDog, [])) // {}
    console.log(pick(myDog, ['age'])) // { age: 3 }
    console.log(pick(myDog, ["firstName"])) // { firstName: 'oscar' }
    console.log(pick(myDog, ["firstName", "lastName"])) // { firstName: 'oscar', lastName: 'king' }

在 pick() 函数内部，对 obj 参数调用 Object.entries() 方法以创建键值对数组。然后，在键值对数组上调用 filter() 方法。对于每个键值对，filter() 方法解构键变量，如果键数组包含键则返回 true。这将创建一个过滤后的键值对数组。

最后，在过滤后的键值对数组上调用 Object.fromEntries() 方法来创建一个仅包含指定键及其对应值的新对象。pick() 函数返回新对象。

10. 返回一个只有唯一值的对象

此函数 uniqueValues 将一个对象作为参数并返回一个新对象，该对象仅包含来自输入对象的唯一值。

    const uniqueValues = (obj) =>
      Object.fromEntries(
        Object.entries(obj).filter(
          ([key, value], index, entries) =>
            entries.findIndex(([k, v]) => v === value) === index
        )
      )

    const myDog = {
      id: 3,
      firstName: "oscar",
      lastName: "oscar",
      age: 3,
      sex: 'boy'
    }

    console.log(uniqueValues(myDog)) // { id: 3, firstName: 'oscar', sex: 'boy' }

注：具体详情可参考wxgzh：web前端开发