当前位置: 首页 > article >正文

数组扩展【ES6】

迈克尔·德尔 :“困难只是暂时的,放弃则是永恒的。坚持下去,你会找到解决的办法。”

目录

  • 数组扩展:
    • 扩展运算符:
    • Array.from():
    • Array.of():
    • find:
    • findIndex:
    • 与find相对比的findLast【ES13】:
    • 与findIndex相对比的findLastIndex【ES13】:
    • fill:
    • flat:
    • flatMap:

数组扩展:

扩展运算符:

能够快速的进行数组的复制、数组的合并、与解构进行结合。

数组的复制:

let arr1 = [1, 2, 3];
let arr2 = arr1.concat();
console.log(arr2.pop());// 3
console.log(arr1);  // [1, 2, 3] 因为concat()方法复制的不会之后的操作不会改变原数组
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.pop();
console.log(arr2); //[1, 2]
console.log(arr1); //[1, 2, 3]

数组的合并:

let arr1 = [1, 2, 3];
let arr2 = arr1.concat(4, 5, 6);
console.log(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(...arr1, ...arr2); // 1 2 3 4 5 6

与解构进行结合:

let myarr = [1, 2, 3, 4, 5, 6, 7, 8];
let [a, b, ...c] = myarr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5, 6, 7, 8]

Array.from():

我们之前经常用 arguments 获取函数被调用时传入的所有参数。arguments 对象不是真正的数组,但它具有类似数组的属性和方法,如 length 属性和通过索引访问元素的能力。然而,它不支持数组的其他方法,如 push、pop、slice 等。

function myFunction () {
      console.log(arguments); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
      console.log(arguments[0]); // 1
}
 myFunction(1, 2, 3);

而我们的Array.from可以将类似数组的东西转化为真正的数组。

function myFunction () {
      console.log(Array.from(arguments));// [1, 2, 3]
}
myFunction(1, 2, 3);
<ul>
    <li>111111111111</li>
    <li>111111111111</li>
    <li>111111111111</li>
  </ul>
 <script>
    let olis = document.querySelectorAll('li');
    console.log(Array.from(olis));
 </script>

Array.of():

将一组值转化为数组,即新建数组。弥补 Array 创建数组只传一个参数的时候的短板,Array 传一个参数的时候,你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性。

let arr = [1, 2, 3];
let arr1 = Array(5, 6, 7);
let arr2 = Array(3); // 传一个参数的时候,你会创建一个具有指定长度但元素均为 undefined 的新数组。这个参数定义了数组的长度属性
let arr3 = Array.of(8, 9, 10);
let arr4 = Array.of(1);

console.log(arr); // [1, 2, 3]
console.log(arr1); // [5, 6, 7]
console.log(arr2); // [empty × 3]
console.log(arr3); // [8, 9, 10]
console.log(arr4); // [1] 就算传一个参数也可以创建成数组

find:

返回满足条件的第一个元素。

let arr = [11, 12, 13, 14, 15];
let res = arr.find((item) => {
      return item > 13
})
console.log(res); //14

findIndex:

返回第一个满足条件元素的索引值。

let arr = [11, 12, 13, 14, 15];
let res = arr.findIndex((item) => {
      return item > 13
})
console.log(res); //3

与find相对比的findLast【ES13】:

从后往前找,返回后面第一个满足条件的元素。

let arr = [11, 12, 13, 14, 15];
let res = arr.findLast((item) => {
      return item > 13
})
console.log(res); //15

与findIndex相对比的findLastIndex【ES13】:

从后往前找,返回后面第一个满足条件元素的索引值。

let arr = [11, 12, 13, 14, 15];
let res = arr.findLastIndex((item) => {
      return item > 13
)
console.log(res); //4

fill:

可以充当填充的作用!

let arr = new Array(3).fill('kitty');
console.log(arr);// ['kitty', 'kitty', 'kitty']

可以用来替换元素(可以全部替换也可以选择起始位置和结束为止来进行替换元素):

let arr = [11, 22, 33];
let arr1 = [11, 22, 33];
console.log(arr.fill('Alice')); // ['Alice', 'Alice', 'Alice']
console.log(arr1.fill('Alice', 1, 2)); //[11, 'Alice', 33]

flat:

flat 方法用于将嵌套数组“展平”成一个新数组,即移除数组的嵌套层级。它接受一个可选的深度参数,表示要展平的嵌套层数。如果未指定深度,则默认为 1,意味着它只会展平一层嵌套的数组。

let arr = [1, 2, 3, [4, 5, 6]]
console.log(arr.flat());// [1, 2, 3, 4, 5, 6]
console.log(arr);// [1, 2, 3, [4, 5, 6]] flat不会改变原数组
let arr = [
      ['安庆', '安阳', '鞍山'],
      ['北京', '保定', '包头']
    ]
console.log(arr.flat()); // ['安庆', '安阳', '鞍山', '北京', '保定', '包头']

flatMap:

flatMap 方法首先使用提供的映射函数对数组中的每个元素进行映射,然后将结果展平到一个新数组中。与 map 方法不同,flatMap 会将映射函数返回的每个数组展平,而不是保留它们作为嵌套数组。这使得 flatMap 特别适合于处理嵌套数组,并且想要将嵌套的元素映射到一个单一的数组中的情况。

let arr = [
      {
        name: "A",
        list: ['安庆', '安阳', '鞍山']
      }, {
        name: "B",
        list: ['北京', '保定', '包头']
      }
    ]
let res = arr.flatMap(function (item) {
      return item.list
 })

console.log(res); //  ['安庆', '安阳', '鞍山', '北京', '保定', '包头']

http://www.kler.cn/a/576446.html

相关文章:

  • 青少年编程与数学 02-010 C++程序设计基础 30课题、操作符重载
  • Cursor + IDEA 双开极速交互
  • 1658. 将 x 减到 0 的最小操作数
  • 代码随想录第五十天| 图论理论基础
  • Java集合框架之Collections工具类
  • 人工智能之数学基础:线性代数中的行列式的介绍
  • Node.js 报错 ENOBUFS 处理方案
  • Manus AI:从爆火到争议,AI Agent的未来之路
  • 服务器分区调整方案(不影响服务)
  • 网络安全规划重安全性需求
  • MySQL 连接报错: “Public Key Retrieval is not allowed“ 问题解决方案
  • Ubuntu 下 nginx-1.24.0 源码分析 - ngx_init_cycle 函数
  • PPT 小黑第21套
  • 【AI赋能】AI 工具生成视频教材:从创意到成品的全流程指南
  • 扩展------项目中集成阿里云短信服务
  • vLLM + Open-WebUI 本地私有化部署 DeepSeek-R1-Distill-Qwen-32B 方案
  • 深入解析PHP性能瓶颈:识别与优化策略
  • element-ui popover 组件源码分享
  • 安装与配置 STK-MATLAB 接口
  • 红果短剧安卓+IOS双端源码,专业短剧开发公司