Javascript -- 数组prototype方法探究

一、数组prototype方法探究

1、不改变原数组

1. concat()

这个是数组拼接方法,可以将两个数组或多个数组拼接并返回一个包含两个数组或多个数组内容的新数组,不会改变原数组

方法里面理论上可以写入n个参数,

const arr = [1,2];
var str = 'Hello';
var newArr = [3,4,5];
const ComArr = arr.concat(str, newArr)
console.log(ComArr)// 打印结果
[1, 2, "Hello", 3, 4, 5]

2.find()

这个方法是遍历查找数组里面第一个满足条件的值,并将这个值返回回来,该方法有两个参数:

第一个是数组每一项都会执行的回调函数,这个函数有三个参数,第一个是数组的每一项,第二个是数组每一项的下表索引,第三个就是遍历的原数组

第二个是回调时this的指向对象

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(item => item > 3)
console.log(result)// 打印结果
5

改变this

const obj = {filt: function (val) {return val > 3}
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)// 打印结果
5

Tips 这个方法只要找到满足条件的值,就会立即返回,并停止后续操作,如果没有找到则返回undefined

3.findIndex()

这个方法跟上面的方法可以说是一样的,唯一不同的是这个方法返回的不是第一个满足条件的值,而是这个值所在位置的下标索引,如果没有找到则返回-1

const obj = {filt: function (val) {return val > 3}
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)// 打印结果,注意这个是索引值
3

4.flat()

这个方法省去了自己去递归深度拷贝,可以将数组的里面所有项都遍历并添加到第一层数组中返回一个新数组,这个方法只有一个参数,这个参数可以是数值,默认是1,数值是多少,就表示深入递归几次,也可以是一个固定的词(Infinity),表示任意深入递归

const arr = [1, 2, 3, 5, 4, [3, 2, 1]]
const newArr = arr.flat()
console.log(newArr)// 打印结果
[1, 2, 3, 5, 4, 3, 2, 1]

Tips 这个方法也可以移除数组里面的空值

5.flatMap()

不说了,有兴趣可以自己了解flatMap

6.includes()

这个方法说有用有用,说没用也没用,因为有很多数组其他的方法也可以达到目的

这个方法就是用来检测数组里面是否存在某个数据,存在则返回true,不存在则返回false,这个方法有两个参数,第一个就是我们要查找的数据,第二个是查询的起始位置(index),没有则按照length+index的方法继续,默认为0

Tips 对象数组不能使用该方法

Tips 该方法是个通用方法

Tips 查找数据区分大小写

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.includes(5))
console.log(arr2.includes('王翠花'))
console.log(arr3.includes({age: 23}))// 打印结果
true
true
false

http://www.developcls.com/qa/1795d18c9ce344deb99915557494befd.html

7.indexOf()

这个方法跟includes是一样的,只不过这个方法是返回的指定查找元素的索引,没有则返回-1,该方法有两个参数,第一个就是要查询的数据,第二个就是查找的起始位置索引

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.indexOf(5))
console.log(arr2.indexOf('王翠花'))
console.log(arr3.indexOf({age: 23}))// 打印结果
3
1
-1

8.lastIndexOf()

这个方法可以看作是indexOf方法的一个查找方向相反的一个相同方法,indexOf是从数组第一项查找到最后一项,而lastIndexOf方法是从数组最后一项查找到数组第一项

该方法有两个参数,第一个就是要查询的数据,第二个就是查找的起始位置索引

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.lastIndexOf(5))
console.log(arr2.lastIndexOf('王翠花'))
console.log(arr3.lastIndexOf({age: 23}))// 打印结果
3
1
-1

Tips 虽然这个查找是最后一项,从后面开始,但是索引值依旧是从第一项开始,而不是从最后开始算的

9.join()

方法是通过指定的分割符号将数组里面的每一项分割并拼接成一个字符串返回,如果没有写入任何符号,则默认是逗号,

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.join())
console.log(arr2.join(''))
console.log(arr3.join('+'))// 打印结果
1,2,3,5,4,3,2,1
李狗蛋王翠花李二丫
[object Object]+[object Object]+[object Object]

10.keys()

这个方法不知道有什么卵用?返回的是个Array Iterator对象,这个对象看不出什么东西,但是可以同for...in或者for...of方法打印其key值,发现是数组的索引值

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
for(var key of arr2.keys()) {console.log(key)
}// 打印结果
0
1
2

11.slice()

数组浅拷贝,拷贝指定范围内得数组元素并返回一个新数组,但是原数组并不会改变

这个方法有两个参数,第一个开始拷贝得索引值(包括),默认是0,第二个是结束拷贝得索引值(不包括),默认数组长度

如果参数是负数则表示从数组后面往前拷贝

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.slice(1, 2)
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "王翠花", "李二丫"]
["王翠花"]

12.toString()

将一个指定数组的所有元素,提取出来返回成一个用逗号隔开的字符串,和join方法一样

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.toString()
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋,王翠花,李二丫

13.values()

这个方法返回一个包含数组每一项元素的Array Iterator对象

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.values()
console.log(arr2)
console.log(arr4.next().value)
console.log(arr4.next().value)
console.log(arr4.next().value)// 打印结果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋
王翠花
李二丫

2、改变原数组

1.copyWithin()

这个数组方法是复制替换,有点类似splice()方法,这个方法接收三个参数,第一个参数是替换的起始位置,第二个参数是要开始复制的数据索引,包括该项,第三个参数是结束复制的数据索引,不包括该项,没有则一直到最后一项

const arr = [1, 2, 3, 4, 5];
const newArr = arr.copyWithin(0, 3, 5);
console.log(newArr)// 打印结果
[4, 5, 3, 4, 5]

这段代码就是将数组里面从索引3开始(包括)到索引5结束(不包括)中间所有的数据复制,然后从数组索引为0的位置开始赋值

Tips

1、这个方法只能改变数组自身内容,不能改变其他数组

2、原数组会改变,但是长度不会改变

3、三个参数必须是整数,如果是负数,则从数组最后一项开始往前计算

4、如果开始和结束参数都没有,则复制整个数组内容,最后多余的被清除

2.fill()

这个方法跟上面的copyWithin相似,也是替换,不过不是用数组自己的数据去替换,而是用户自己传入一个数据,去替换指定范围的数据

这个方法接收三个参数,第一个参数是用户传入的数据,第二个参数是要开始替换的数据索引,包括该项,默认为0,第三个参数是结束替换的数据索引,不包括该项,没有则一直到最后一项,默认是数组长度

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const newArr = arr.fill('?', 5, arr.length)
console.log(newArr)// 打印结果
[1, 2, 3, 5, 4, "?", "?", "?"]

Tips

1.原数组会改变,但长度不会改变

2.这个方法是通用方法,所以该方法不要求this是数组对象(不理解)

3.如果开始和结束参数是负数,不是从后面开始,而是以:length+start,length+end的方式来计算替换的范围

3.pop()

这个方法是删除数组最后一项元素,并返回该元素值,同时原数组将减少该项元素,所以会改变原数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.pop()
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "王翠花"]
李二丫

4.push()

这个方法跟pop方法相反,是在数组最后一项元素后面新增一个元素或者多个元素,原数组会添加新增的元素,但是这个方法返回的新增之后的数组的长度,而不是数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.push('二狗子')
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "王翠花", "李二丫", "二狗子"]
4

5.shift()

这个方法是删除数组第一项元素,并返回该元素值,同时原数组将减少该项元素

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.shift()
console.log(arr2)
console.log(arr4)// 打印结果
["王翠花", "李二丫"]
李狗蛋

6.unshift()

这个方法跟shift方法相反,是在数组第一项元素前面新增一个元素或者多个元素,原数组会添加新增的元素,但是这个方法返回的新增之后的数组的长度,而不是数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.unshift('二狗子')
console.log(arr2)
console.log(arr4)// 打印结果
["二狗子", "李狗蛋", "王翠花", "李二丫"]
4

7.reverse()

这个方法是将数组的值得顺序颠倒过来,也就是原来最后一项元素变成第一项元素,以此类推,返回一个新数组,改变了原数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.reverse()
console.log(arr2)
console.log(arr4)// 打印结果
["李二丫", "王翠花", "李狗蛋"]
["李二丫", "王翠花", "李狗蛋"]

8.sort()

数组排序,通过原地算法,根据字符得unicode码进行排序,该方法有个比较函数参数,如果用户传入了自己得排序函数,则以这个函数进行排序,函数有两个参数,第一个是元素一,第二个是元素二,两者进行比较,会改变原数组

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr4 = arr1.sort()
console.log(arr1)
console.log(arr4)// 打印结果
[1, 2, 3, Array(3), 4, 5]
[1, 2, 3, Array(3), 4, 5]

自定义

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
function Compare(a, b) {return a-b
}
const arr4 = arr1.sort(Compare)
console.log(arr1)
console.log(arr4)// 打印结果
[1, 2, 3, 4, 5, Array(3)]
[1, 2, 3, 4, 5, Array(3)]

9.splice()

这个方法既可以删除数组内容,也可以替换数组内容,都是会返回一个数组

删除

用来删除,该方法只有两个参数,第一个参数就是要删除起始位置(包括),第二个参数就要要删除数据个数,返回得删除得数据组成得数组,原数组相应得回减少被删除得数据

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1,1)
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "李二丫"]
["王翠花"]

Tips

如果删除个数为0,则返回个空数组

替换

其实不仅可以用来替换,也可以用来增加数据,而且是任意位置得添加,比原始方法如:unshift,push更灵活

用来替换,该方法至少有三个参数,第一个参数是要开始删除位置,第二个参数是要删除的数量,第三个到第n个是用来替换的数据,从开始删除的位置开始替换,返回的是被替换的数据组成的新数组

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 1, '二狗子')
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "二狗子", "李二丫"]
["王翠花"]

Tips

1.不论删除的个数是多少,替换的数据是多少个,就会替换多少个

2.如果删除个数为0的话,则是新增,原来的要删除位置的数据被替换数据代替,原来的数据顺势往后挪,同时返回一个空数组,因为没有删除任何东西,就没有数据

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 0, '二狗子', '三狗子', '死狗仔')
console.log(arr2)
console.log(arr4)// 打印结果
["李狗蛋", "二狗子", "三狗子", "死狗仔", "王翠花", "李二丫"]
[]

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

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

相关文章

Abaqus 导出单元刚度矩阵和全局刚度矩阵

Abaqus 导出单元刚度矩阵和全局刚度矩阵 首次创建:2023.7.29 最后更新:2023.7.29 如有什么改进的地方,欢迎大家讨论! 详细情况请查阅:Abaqus Analysis User’s Guide 一、Abaqus 导出单元刚度矩阵 1.生成单元刚度矩阵…

Linux CentOS快速安装VNC并开启服务

以下是在 CentOS 上安装并开启 VNC 服务的步骤: 安装 VNC 服务器软件包。运行以下命令: sudo yum install tigervnc-server 输出 $ sudo yum install tigervnc-server Loaded plugins: fastestmirror, langpacks Repository epel is missing name i…

教雅川学缠论04-笔

笔由3部分组成: 顶分型K线底分型,或者 底分型K线顶分型 注意:笔加一起至少7根K线,因为一个底分型至少3根,K先至少1个,顶分型至少3根 下图中红色线段就是一个标准的笔,它始于一个底分型&#xff…

[点微]同城原生微信小程序 小程序原生版 1.0.7(tom_xiaofenlei)

注意!!!这是点微后出的原生版小程序!!! 依赖点微同城分类主插件、点微同城小程序后端插件!!! 【以下为模块路径】 同城首页 pages/index/index 个人中心 pages/index/my 好店首页 pages/module/tcshop 商城首页 pages/module/tcmall 抢购首页 pages/module/tcqianggou…

什么是Java中的领域驱动设计?

Java中的GUI编程是使用Java图形用户界面(Java Graphical User Interface,简称Java GUI)来创建应用程序界面的一种方式。GUI编程可以让用户通过图形界面来与应用程序进行交互,从而更加直观地使用应用程序。 下面是一个简单的Java …

Visual C++中的虚函数和纯虚函数(以外观设计模式为例)

我是荔园微风,作为一名在IT界整整25年的老兵,今天来说说Visual C中的虚函数和纯虚函数。该系列帖子全部使用我本人自创的对比学习法。也就是当C学不下去的时候,就用JAVA实现同样的代码,然后再用对比的方法把C学会。 直接说虚函数…

【SpringCloud Alibaba】(四)使用 Feign 实现服务调用的负载均衡

在上一文中,我们实现了服务的自动注册与发现功能。但是还存在一个很明显的问题:如果用户微服务和商品微服务在服务器上部署多份的话,之前的程序无法实现服务调用的负载均衡功能。 本文就带着大家一起实现服务调用的负载均衡功能 1. 负载均衡…

go常用知识点

go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct 打包一个目录下的多个包时 go build ./… go install ./… 测试时,命令行:go test . //目录下所有单元测试都会执行 go test -v 目录 //测试覆盖率 go test -cover //使用cove…

LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

如题。 效果图&#xff1a; //lazy属性为true&#xff0c;点开时才加载 引用代码&#xff1a; <link href"~/Content/layui-new/css/layui.css" rel"stylesheet" /><form id"form" class"layui-form" style"margin-to…

自动驾驶和机器人学习和总结专栏汇总

汇总如下&#xff1a; 一. 器件选型心得&#xff08;系统设计&#xff09;--1_goldqiu的博客-CSDN博客 一. 器件选型心得&#xff08;系统设计&#xff09;--2_goldqiu的博客-CSDN博客 二. 多传感器时间同步方案&#xff08;时序闭环&#xff09;--1 三. 多传感器标定方案&…

AC695-按键处理-带UI

AC695-按键修改 消息发出 对应界面处理

【算法和数据结构】257、LeetCode二叉树的所有路径

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;首先看这道题的输出结果&#xff0c;是前序遍历。然后需要找到从根节点到叶子节点的所有路径&#xff…

C#设计模式之---适配器模式

适配器模式&#xff08;Adapter Pattern&#xff09; 适配器模式&#xff08;Adapter Pattern&#xff09;也称包装样式或者包装(wrapper)。将一个类的接口转接成用户所期待的。适配器模式是一种结构型模式&#xff0c;一个适配使得因接口不兼容而不能在一起工作的类工作在一起…

【图论】树上差分(点差分)

一.题目 输入样例&#xff1a; 5 10 3 4 1 5 4 2 5 4 5 4 5 4 3 5 4 3 4 3 1 3 3 5 5 4 1 5 3 4 输出样例&#xff1a;9 二 .分析 我们可以先建一棵树 但我们发现&#xff0c;这样会超时。 所以&#xff0c;我们想到树上差分 三.代码 /* 5 10 3 4 1 5 4 2 5 4 5 4 5 4 3 5 …

IOS UICollectionView 设置cell大小不生效问题

代码设置flowLayout.itemSize 单元格并没有改变布局大小&#xff0c; 解决办法如下图&#xff1a;把View flow layout 的estimate size 设置为None&#xff0c;上面设置的itemSize 生效了。

WPF实战学习笔记29-登录数据绑定,编写登录服务

添加登录绑定字段、命令、方法 修改对象&#xff1a;Mytodo.ViewModels.ViewModels using Mytodo.Service; using Prism.Commands; using Prism.Events; using Prism.Mvvm; using Prism.Services.Dialogs; using System; using System.CodeDom.Compiler; using System.Collec…

原型设计模式go实现尝试

文章目录 前言代码结果总结 前言 本文章尝试使用go实现“原型”。 代码 package mainimport ("fmt" )// 不同原型标志枚举 type Type intconst (PROTOTYPE_1 Type iotaPROTOTYPE_2 )// 原型接口 type IPrototype interface {Clone() IPrototypeMethod(value int)P…

物联网阀控水表计量准确度如何?

物联网阀控水表是一种新型的智能水表&#xff0c;它采用了先进的物联网技术&#xff0c;可以通过远程控制和监测水表的运行情况&#xff0c;实现更加精准的水量计量和费用结算。那么&#xff0c;物联网阀控水表的计量准确度如何呢&#xff1f;下面我们将从以下几个方面进行详细…

PHP 3des加解密新旧方法可对接加密

一、旧3des加解密方法 <?php class Encrypt_3DES {//加密秘钥&#xff0c;private $_key;private $_iv;public function __construct($key, $iv){$this->_key $key;$this->_iv $iv;}/*** 对字符串进行3DES加密* param string 要加密的字符串* return mixed 加密成…

地理信息系统(GIS)

地理信息系统&#xff08;GIS&#xff09; 1.1 地理信息系统1.1.1 GIS概述1.1.1.1 GIS的基本概念&#xff08;1&#xff09;地理信息。&#xff08;2&#xff09;信息系统。&#xff08;3&#xff09;地理信息系统。GIS的发展简史1.1.1.3 GIS的组成部分&#xff08;1&#xff0…