美文网首页
30.ES10-flag和flagMap和Object.from

30.ES10-flag和flagMap和Object.from

作者: 静昕妈妈芦培培 | 来源:发表于2022-02-15 09:50 被阅读0次

flag

  • flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
  • 语法:
let newArr = arr.flat([depth])
  • depth 指定要提取嵌套数组的结构深度,默认值为 1。使用 Infinity,可展开任意深度的嵌套数组
const arr1 = [1, 2, 3, [4, 5, 6]];
console.log(arr1.flat()); // [ 1, 2, 3, 4, 5, 6 ]

const arr2 = [1, 2, 3, [[[4, 5, 6]]]];
console.log(arr2.flat()); // [1, 2, 3, [[4, 5, 6]]]
console.log(arr2.flat(2)); // [1, 2, 3, [4, 5, 6]]
console.log(arr2.flat(3)); // [1, 2, 3, 4, 5, 6]
let arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr3.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

flat() 方法会移除数组中的空项

const arr4 = [1,2,,3,4] 
console.log(arr4) // [ 1, 2, <1 empty item>, 3, 4 ]
console.log(arr4.flat()) // [ 1, 2, 3, 4 ]

flagMap

  • flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
  • 它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
const newArr = arr.flatMap(item => item)
//相当于下面:
const newArr = arr.map(item => item).flat()
  • 返回值:一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为1。
const arr = [1, 2, [3, 4], [5, [6]]];
const newArr1 = arr.map((item) => item);
const newArr2 = arr.flatMap((item) => item);
console.log(newArr1); // [1, 2, [3, 4], [5, [6]]]
console.log(newArr2); // [1, 2, 3, 4, 5, [6]]
const arr1 = ["it's Sunny in", "", "California"];
const newArr3 = arr1.map((item) => item.split(" "));
console.log(newArr3); // [ [ "it's", 'Sunny', 'in' ], [ '' ], [ 'California' ] ]
const newArr4 = arr1.flatMap((item) => item.split(" "));
console.log(newArr4); // [ "it's", 'Sunny', 'in', '', 'California' ]

flatMap可以用于在一个 map() 期间增加或去除一些项

//如下,想在3和4之前添加一个字符串'aaa',并且删除数字6
const arr2 = [1, 2, 3, 4, 5, 6, 7];
const newArr5 = arr2.flatMap((item) => {
  let res = item;
  if (item === 3) {
    res = [item, "aaa"];
  }
  if (item === 6) {
    res = [];
  }
  return res;
});
console.log(newArr5); //[1, 2, 3, "aaa", 4, 5, 7];

Object.fromEntries

  • Object.fromEntries() 方法把键值对列表转换为一个对象

把[['name', 'why'], ['age', 18]]转换为对象{name: 'why', age: 18}

const map = new Map([
  ["name", "why"],
  ["age", 18],
]);
console.log(map); // Map(2) { 'name' => 'why', 'age' => 18 }
const obj = Object.fromEntries(map);
console.log(obj); // { name: 'why', age: 18 }

把对象{name: 'why', age: 18}转换为[['name', 'why'], ['age', 18]]

const entries = Object.entries({ name: "why", age: 18 });
console.log(entries); // [ [ 'name', 'why' ], [ 'age', 18 ] ]

把name=why&age=18转换为对象

const params = new URLSearchParams("name=why&age=18");
console.log(params); // URLSearchParams { 'name' => 'why', 'age' => '18' }
const obj1 = Object.fromEntries(params);
console.log(obj1); //{ name: 'why', age: '18' }

trimStart和trimEnd

  • ES10之前,可以使用trim方法去除字符串头部和尾部空格
  • ES10新增了trimStart和trimEnd
  • trimStart 去除字符串头部空格
  • trimEnd 去除字符串尾部空格
const message = "   hello world ";

console.log(message.length); //15
console.log(message.trim(), message.trim().length); //hello world 11
console.log(message.trimStart(), message.trimStart().length); //hello world  12
console.log(message.trimEnd(), message.trimEnd().length); //   hello world 14

非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识

相关文章

网友评论

      本文标题:30.ES10-flag和flagMap和Object.from

      本文链接:https://www.haomeiwen.com/subject/lbyclrtx.html