#Js篇：数组的方法es5和es6

数组方法学习

判断一个数组的方法

Array.isArray()

javascript内置的方法，用于检测给定的对象是否为数组类型。

  • 早期版本兼容性es5引入，对于不支持es5的老旧浏览器（如ie8及更早版本），该方法不可用。

es5实例方法

valueof()

表示对对象求值。

​ 数组的valueOf方法返回数组本身

toString()

​ 数组的toString方法返回数组的字符串形式----基本类型的数组

​ 复杂类型–JSON.stringify()

push

push—往数组末尾添加一个或多个元素—返回添加后的数组长度

unshift

unshift–往数组头部添加一个或多个元素–返回添加后的数组长度

pop

pop—删除数组最后一个元素，并返回删除的元素

Shift

Shift–删除头部元素

Join

指定参数作为分割符，将数组成员连接为一个字符串返回。默认用逗号。

join

Array.pototype.join.call([1,2],'-)

数组合并—浅拷贝concat

参数一

 let arr1 = [1, 2]let contact = arr1.concat(5, 6)console.log('contact: ', contact);

参数二

  let arr1 = [1, 2]let arr2 = [3, 4]let contact = arr1.concat(arr2)console.log('contact: ', contact);

reverse()

—颠倒数组

slice()

—提取数组，返回新数组，原数组不变

​ slice(start,end)—包含start，不包含end;

​ 如果省略第二个参数，则一直返回到原数组的最后一个成员

Splice()方法用于删除原数组的一部分，并可以在删除的位置添加新的数组成员，返回是被删除的元素。该方法会改变原数组

let arr = [1,2,3,4]
arr.splice(start,count,addE1,addE2)

​ splice参数

第一个参数是删除的开始元素位置

第二个参数是被删除的元素的个数，参数为0代表不删除为插入

后面的参数是被插入的新元素—这个参数可以没有

返回值是被删除的元素

 let arr = [1, 2, 3, 4, 5]let splice = arr.splice(1, 1, 33)console.log('splice: ', splice, arr);
// splice:  [2] (5) [1, 33, 3, 4, 5]

    let arr = [1, 2, 3, 4, 5]let splice = arr.splice(1, 1)console.log('splice: ', splice, arr);// splice:  [2] (4) [1, 3, 4, 5]

sort

作用： 对数组成员进行排序

排序后 ：原数组将会改变

参数：

  1. 可以不接收参数，默认按照字典顺序排序；
  2. 按照自定义方式排序，传入一个函数作为参数
 let arrObj = [{ name: "张三", age: 30 },{ name: "李四", age: 24 },{ name: "王五", age: 28 }]let sortAge = arrObj.sort((a, b) => {return b.age - a.age})console.log('sortAge: ', sortAge, arrObj);
// 从大到小

map

作用：将每次指行的结果作为一个新数组返回

参数：

  • 第一个参数：一个函数，

    函数传入三个参数

    第一个当前成员

    第二个当前位置

    第三个数组本身

  • 还一个接受第二个参数，用来绑定回调函数内部的this变量

map()方法不会跳过undefined和null，但是会跳过空位。

如果改变本身就有的属性 原数组也会变

返回值：一个新数组

forEach

作用：处理数据不返回数据，操作数据，不是为了得到返回值，而是为了在屏幕上输出内容

参数：

  • 第一个参数：一个函数，

    函数接受三个参数

    当前值、当前位置、整个数组

  • 也可以接受第二个参数用于绑定函数的this变量

返回：不返回

    var out = [];[1, 2, 3].forEach(function (elem) {this.push(elem * elem);}, out);out // [1, 4, 9]

forEach()方法无法中断，总是会讲所有成遍历完。

如果要中断解决办法

使用for循环

var arr = [1, 2, 3];for (var i = 0; i < arr.length; i++) {if (arr[i] === 2) break;console.log(arr[i]);
}
// 1

filter

作用：用于过滤数组成员，满足条件的成员组成一个新数组返回。

参数：

  • 第一个参数是一个函数

    函数接受三个参数

    当前值

    当前位置

    这个数组

  • 第二个参数可以绑定this

  •     let obj = { max: 3 }let arr = [1, 2, 3, 4, 5, 6]let filter = arr.filter(function (x) {return x > this.maxconsole.log('this: ', this);}, obj)console.log('filter: ', filter);
// filter:  (3) [4, 5, 6]

返回：

返回结果为true的成员组成一个新数组返回。

原数组不会改变

Some&every

reduce&reduceRight

reduce

定义: 处理数组的每个成员，最终累计为一个值。

reduce从左到右处理，从第一个成员到最后一个成员

作用： 用于一个数据求和。

参数：

  • 第一个参数，一个函数

    如果有n个成员这个参数函数就会指行n-1次

    函数的参数

    第一个参数–累计变量

    第二个参数 —当前变量

    第三个参数–当前位置

    第四个参数—原数组

    这四个参数之中，只有前两个是必须的

  • 第二个参数，给定初始值

建议总是加上第二个参数，这样比较符合直觉，每个数组成员都会依次执行reduce()方法的参数函数。另外，第二个参数可以防止空数组报错。

可以用于找出字符长度最长的数组成员

或者数组重最大的值

   let arr = ['aaa', 'bbbb', 'ccccc']// letfunction findMax(entried) {return entried.reduce((max, item) => {return max.length < item.length ? max : item})}findMax(arr)console.log('  findMax(arr): ', findMax(arr));
//   findMax(arr):  aaa

   let arr = [1, 2, 3, 4, 5, 6]// letfunction findMax(entried) {return entried.reduce((max, item) => {return max > item ? max : item})}findMax(arr)console.log('  findMax(arr): ', findMax(arr));
//   findMax(arr):  6

indexOf() lastIndexOf

定义：

返回给定元素在数组重第一次出现的位置，如果没有出现则返回-1。

参数：

  • 第一个参数给定元素
  • 第二个参数，表示搜索的开始位置
    let arr = [1, 2, 3, 4, 5, 6]let indexOf = arr.indexOf(2, 2)console.log('indexOf: ', indexOf);// indexOf:  -1

返回值：

位置下标

注意，这两个方法不能用来搜索NaN的位置，即它们无法确定数组成员是否包含NaN。

[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1

in运算–检查某个键名是否存在

for …in…

仅会遍历数组所有的数字键，还会遍历非数字键。

不推荐使用for…in遍历数组。

    let arr = [1, 2, 3]arr.foo = 123for (const key in arr) {console.log('key: ', key);}
// key:  0
01 function_jiantouhanshu.html:15 key:  1
01 function_jiantouhanshu.html:15 key:  2
01 function_jiantouhanshu.html:15 key:  foo

数组的空位

当某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位。

let a = [1,,2]

es6数组的扩展

扩展运算符

定义:
三个点…

作用：

  • 复制数组—的便捷方法
  • 合并数组
  • 与解构赋值结合
    let arr = [1, 2, 3]let [a, ...rest] = arrconsole.log('rest: ', rest);console.log('a: ', a);// rest:  (2) [2, 3]
01 function_jiantouhanshu.html:15 a:  1

  • 字符串

     let hellon = 'hellon'console.log('hellon: ', [...hellon]);
// hellon:  (6) ['h', 'e', 'l', 'l', 'o', 'n']

  • 实现iterator接口对象

Array.from

作用:

将用于将两类对象转为真正的数组

第一类—类似数组的对象

第二类—可遍历的对象（包括ES6新增的数据结构Set和Map）

参数：

第一个参数当前对象

第二个参数可以接受一个函数

任何有length属性的对象，都可以通过Array.from()方法转为数组，而此时扩展运算符就无法转换。

类似数组的解释

在Javascript中是指哪些具有数字键和length属性，且可以像数组一项进行索引访问，但并非真正的Array实例对象。

例如

let arrayLike = {0:'apple',1: 'banana',length:2
}

这样的对象虽然可以模拟数组的行为，但由于不是真正的数组，所以不能直接使用诸如map、forEach、push等的数组方法

Array.prototype.slice.call(arr)

Array.of()

定义：
用于将一组值转为数组----特定元素的数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.from和Array.of区别

Array.of 接受的参数是原始值或对象，直接作为数组的元素

Array.from接受的参数是类数组对象或可迭代对象，并且可以接受一个可选的映射函数对每个元素进行转换。

copyWithin()

定义：
–将指定位置成员复制到其它位置。

参数：

接受三个参数

第一个必须 从该位置开始替换数据。为负，表示从倒数开始；

第二个可选 从该位置开始读取数据，默认为0.为负数，表示从末尾开始计算

第三个参数可选，道该位置前挺尸读取数据，默认为数组长度。

返回：

复制后的数组

find findIndex findLast findLastIndex

find

定义

用于找出第一个符合条件的数据成员

参数

  • 第一个参数回掉函数

​ 函数参数

​ 依次为当前的值、当前的位置和原数组。

  • 第二个参数绑定this

返回：

返回第一个符合该条件的成员值，不符合返回undefined

function f(v){return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26
findIndex

定义

返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

fill

定义：
使用给定值填充一个数组

参数：

第一个参数给定值

第二个参数 填充起始位置

第三个参数填充结束位置—不包含

let arr = [1, 2, 3, 4]
let fill = arr.fill(10)
console.log('fill: ', fill);
// [10,10,10,10]

entries,keys,values

entries

定义：
对键值对的遍历

keys

定义：

对键名的遍历

values

定义：

对键值的遍历

includes

定义：

返回一个布尔值。表示某个数组是否包含给定的值，与字符串的inclueds方法类似。

参数：
第一个参数给定值

第二个可选表示搜索的奇石位置

indexOf和includes区别

indexOf方法有两个缺点

第一个它不够语义话；

第二个内部使用严格相等运算符===进行判断，会导致NaN误判

[NaN].indexOf(NaN)
// -1

includes

[NaN].includes(NaN)
// true

flat flatMap

flat

定义：

用于将嵌套数组“拉平”，变成一维数组。

参数：

  • 参数写成一个整数，表示想要拉平的层数，不传参数默认为1
  • 如果不管有多少嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。

作用：

该方法返回一个新数组，

对原数据没有影响。

flat方法会跳过空位

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
flatMap

定义：

对原数组的每个成员执行一个函数，

(相当于=== Array.prototype.map())

然后对返回值组成的数组执行flat()方法

参数：

  • 函数三个参数
  • 第二个参数this

返回：
该方法返回一个新数组，

原数组不变

flatMap只能展开一层数组

at()

解决js不支持数组的负索引，如果要应用数组的最后一个成员，不能写成arr[-1],只能使用arr[arr.length-1]

定义：
取索引对应的值

参数：

接受一个整数作为参数，支持负索引

返回：

返回对应位置的成员值

toReversed toSorted toSpliced with

  • toReversed()对应reverse()，用来颠倒数组成员的位置。

  • toSorted()对应sort()，用来对数组成员排序。

  • toSpliced()对应splice()，用来在指定位置，删除指定数量的成员，并插入新成员。

  • with(index, value)对应splice(index, 1, value)，用来将指定位置的成员替换为新的值。

  • const sequence = [1, 2, 3];
sequence.toReversed() // [3, 2, 1]
sequence // [1, 2, 3]const outOfOrder = [3, 1, 2];
outOfOrder.toSorted() // [1, 2, 3]
outOfOrder // [3, 1, 2]const array = [1, 2, 3, 4];
array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array // [1, 2, 3, 4]const correctionNeeded = [1, 1, 3];
correctionNeeded.with(1, 2) // [1, 2, 3]
correctionNeeded // [1, 1, 3]

这些方法不会改变原数组

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/674115.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

跨品牌智能家居控制_从原理到实现_HomeAssistant

跨品牌智能家居控制_从原理到实现_HomeAssistant

项目地址&#xff1a;https://github.com/home-assistant/core Star&#xff1a;67 K 1 引言 最近去南方玩&#xff0c;住了一些智能酒店&#xff0c;自动开关电视、窗帘、灯、空调&#xff0c;还挺好用的&#xff0c;尤其喜欢关灯这功能。先不说它的理解能力&#xff08;对同…
阅读更多...
豪掷770亿！华为员工集体“分红大狂欢”：至少14万人受益

豪掷770亿！华为员工集体“分红大狂欢”：至少14万人受益

豪掷770亿&#xff01;华为员工集体“分红大狂欢”&#xff1a;至少14万人受益 近日&#xff0c;华为宣布了其2023年度分红计划&#xff0c;总金额高达770.85亿元&#xff0c;预计至少将惠及14万员工。这一消息引发了广泛关注和热议&#xff0c;成为业界的一大亮点。作为中国领…
阅读更多...
Go 语言中如何大小端字节序？int 转 byte 是如何进行的？

Go 语言中如何大小端字节序？int 转 byte 是如何进行的？

嗨&#xff0c;大家好&#xff01;我是波罗学。 本文是系列文章 Go 技巧第十五篇&#xff0c;系列文章查看&#xff1a;Go 语言技巧。 我们先看这样一个问题&#xff1a;“Go 语言中&#xff0c;将 byte 转换为 int 时是否涉及字节序&#xff08;endianness&#xff09;&#x…
阅读更多...
代码随想录算法训练营第42天 | 01背包理论基础 416.分割等和子集

代码随想录算法训练营第42天 | 01背包理论基础 416.分割等和子集

01背包理论基础 问题定义&#xff1a;有n件物品和一个能装重量为w的背包&#xff0c;第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i]。每件物品只能用一次&#xff0c;求解将哪些物品装入背包获得的总价值最大。dp数组含义&#xff1a;dp[i][j] 表示从下标为 [0…
阅读更多...
PHP安装后错误处理

PHP安装后错误处理

一&#xff1a;问题 安装PHP后提示错误如下 二&#xff1a;解决 1&#xff1a;Warning: Module mysqli already loaded in Unknown on line 0解决 原因&#xff1a;通过php.ini配置文件开启mysqli扩展的时候&#xff0c;开启了多次 解决&#xff1a;将php.ini配置文件中多个…
阅读更多...
层层深入揭示C语言指针的底层机制

层层深入揭示C语言指针的底层机制

理解C语言指针的底层机制需要我们从硬件、操作系统和编译器三个层次逐步展开。 1. 硬件层次 计算机硬件是实现内存管理的基础。内存是一个由无数个存储单元组成的线性空间&#xff0c;每个存储单元都有一个唯一的地址。这个地址通常是一个二进制数&#xff0c;表示该存储单元…
阅读更多...
Linux网络编程——udp套接字

Linux网络编程——udp套接字

本章Gitee地址&#xff1a;udp套接字 文章目录 创建套接字绑定端口号读取数据发送数据聊天框输入框 创建套接字 #include <sys/types.h> #include <sys/socket.h> int socket(int domain, int type, int protocol);int domain参数&#xff1a;表面要创建套接字的域…
阅读更多...
windows 10 手写板画线会出现圈圈问题如何解决？

windows 10 手写板画线会出现圈圈问题如何解决？

文章目录 1.方法一-控制面板解决2. 方法二-针对Windows Ink工作区 在Windows中&#xff0c;手写板或数位板的笔长按时出现圈圈或将其识别为右键单击的问题通常是在系统设置或者特定软件&#xff08;如Wacom驱动程序&#xff09;中进行调整的。如果您需要通过C代码来解决这个问题…
阅读更多...
Netty中使用编解码器框架

Netty中使用编解码器框架

目录 什么是编解码器&#xff1f; 解码器 将字节解码为消息 将一种消息类型解码为另一种 TooLongFrameException 编码器 将消息编码为字节 将消息编码为消息 编解码器类 通过http协议实现SSL/TLS和Web服务 什么是编解码器&#xff1f; 每个网络应用程序都必须定义如何…
阅读更多...
【npm】修改npm全局安装包的位置路径

【npm】修改npm全局安装包的位置路径

问题 全局安装的默认安装路径为&#xff1a;C:\Users\admin\AppData\Roaming\npm&#xff0c;缓存路径为&#xff1a;C:\Users\admin\AppData\Roaming\npm_cache&#xff08;其中admin为自己的用户名&#xff09;。 由于默认的安装路径在C盘&#xff0c;太浪费C盘内存啦&#…
阅读更多...
《小狗钱钱2》读书笔记

《小狗钱钱2》读书笔记

目录 前言 作者简介 经典语句摘录 前言 尽管[ 智慧是无法传授的], 但读书可以启发思路&#xff0c;开拓解题方法。 《小狗钱钱2》这本书是在《小狗钱钱》的基础上&#xff0c;作业进一步阐述了关于人生出生的智慧。 当然了&#xff0c;这本书感觉更适合成年人来看&#xff0…
阅读更多...
C++三剑客之std::any(一) : 使用

C++三剑客之std::any(一) : 使用

相关系列文章 C三剑客之std::any(一) : 使用 C之std::tuple(一) : 使用精讲(全) C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二)&#xff1a;深入剖析​​​​​​​ 目录 1.概述 2.构建方式 2.1.构造函数 2.2.std::make_any 2.3.operator分配新值 3.访问值…
阅读更多...
【python绘图】爱心、樱花树、饼图、折线图、雷达图

【python绘图】爱心、樱花树、饼图、折线图、雷达图

一、爱心 import turtledef curvemove():for i in range(200):turtle.speed(0)turtle.right(1) # 光标向右偏1度turtle.forward(1)# 前进1pxturtle.penup() turtle.goto(0, -70) turtle.pendown()turtle.color(red) turtle.begin_fill() turtle.left(140) turtle.forward(111…
阅读更多...
【从Python基础到深度学习】1. Python PyCharm安装及激活

【从Python基础到深度学习】1. Python PyCharm安装及激活

前言&#xff1a; 为了帮助大家快速入门机器学习-深度学习&#xff0c;从今天起我将用100天的时间将大学本科期间的所学所想分享给大家&#xff0c;和大家共同进步。【从Python基础到深度学习】系列博客中我将从python基础开始通过知识和代码实践结合的方式进行知识的分享和记…
阅读更多...
【递归】【前序中序后序遍历】【递归调用栈空间与二叉树深度有关】【斐波那契数】Leetcode 94 144 145

【递归】【前序中序后序遍历】【递归调用栈空间与二叉树深度有关】【斐波那契数】Leetcode 94 144 145

【递归】【前序中序后序遍历】【递归调用栈空间与二叉树深度有关】Leetcode 94 144 145 1.前序遍历&#xff08;递归&#xff09; preorder2.中序遍历&#xff08;递归&#xff09;inorder3.后序遍历&#xff08;递归&#xff09;postorder4. 斐波那契数 ---------------&…
阅读更多...
学习 Redis 基础数据结构，不讲虚的。

学习 Redis 基础数据结构，不讲虚的。

学习 Redis 基础数据结构&#xff0c;不讲虚的。 一个群友给我发消息&#xff0c;“该学的都学了&#xff0c;怎么就找不到心意的工作&#xff0c;太难了”。 很多在近期找过工作的同学一定都知道了&#xff0c;背诵八股文已经不是找工作的绝对王牌。企业最终要的是可以创造价…
阅读更多...
【服务器数据恢复】HP EVA虚拟化磁盘阵列数据恢复原理方案

【服务器数据恢复】HP EVA虚拟化磁盘阵列数据恢复原理方案

EVA存储结构&原理&#xff1a; EVA是虚拟化存储&#xff0c;在工作过程中&#xff0c;EVA存储中的数据会不断地迁移&#xff0c;再加上运行在EVA上的应用都比较繁重&#xff0c;磁盘负载高&#xff0c;很容易出现故障。EVA是通过大量磁盘的冗余空间和故障后rss冗余磁盘动态…
阅读更多...
实例分割论文阅读之：《Mask Transfiner for High-Quality Instance Segmentation》

实例分割论文阅读之：《Mask Transfiner for High-Quality Instance Segmentation》

1.摘要 两阶段和基于查询的实例分割方法取得了显著的效果。然而&#xff0c;它们的分段掩模仍然非常粗糙。在本文中&#xff0c;我们提出了一种高质量和高效的实例分割Mask Transfiner。我们的Mask Transfiner不是在规则的密集张量上操作&#xff0c;而是将图像区域分解并表示…
阅读更多...
TCP相关知识点

TCP相关知识点

TCP相关知识点 参考&#xff1a; 《计算机网络》 (建议收藏)TCP协议灵魂之问&#xff0c;巩固你的网路底层基础 关于 TCP 三次握手和四次挥手&#xff0c;满分回答在此 (值得看) TCP处于网络体系结构中的运输层。 运输层主要为应用进程提供端到端的逻辑通信&#xff0c;然后对…
阅读更多...
zzzzzzzzzzzzzzzzz

zzzzzzzzzzzzzzzzz

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 磁盘满的本质分析 专栏&#xff1a;《Linux从小白到大神》 | 系统学习Linux开发、VIM/GCC/GDB/Make工具…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023