Javascript -- 数组prototype方法探究

这篇具有很好参考价值的文章主要介绍了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的话,则是新增,原来的要删除位置的数据被替换数据代替,原来的数据顺势往后挪,同时返回一个空数组,因为没有删除任何东西,就没有数据文章来源地址https://www.toymoban.com/news/detail-614997.html

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

// 打印结果
["李狗蛋", "二狗子", "三狗子", "死狗仔", "王翠花", "李二丫"]
[]

到了这里,关于Javascript -- 数组prototype方法探究的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第2集丨JavaScript 中原型链(prototype chain)与继承

    对于使用过基于类的语言(如 Java 或 C++ )的开发者来说, JavaScript 实在是有些令人困惑—— JavaScript 是动态的且没有静态类型。一切都是对象(实例)或函数(构造函数),甚至函数本身也是 Function 构造函数的实例。即使是语法结构中的“类”也只是运行时的构造函数。

    2024年02月12日
    浏览(46)
  • 什么是原型链(Prototype Chain)?它在JavaScript中有什么作用?请解释一下JavaScript中的“this”关键字的含义和用法。

    原型链(Prototype Chain)是一种在JavaScript中创建对象的方式,它允许我们通过继承来扩展对象的属性和方法。 在原型链中,每个对象都有一个原型对象(也称为“原型”或“ proto ”),该对象继承了其父对象的属性和方法。当我们在一个对象上定义一个属性或方法时,如果该

    2024年02月11日
    浏览(59)
  • JavaScript中手动实现Array.prototype.map方法

    在前端开发中,我们经常需要对数组进行操作和处理。在JavaScript中,数组是常用的数据类型之一。而数组的map方法可以将一个数组中的每个元素都进行某种操作,并返回一个新的数组。今天,我们就来手动实现JavaScript中数组原型的map方法。 首先,让我们回顾一下map方法的基

    2024年02月21日
    浏览(41)
  • JavaScript设计模式(一)——构造器模式、原型模式、类模式

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月11日
    浏览(45)
  • 【前端知识】JavaScript——设计模式(工厂模式、构造函数模式、原型模式)

    工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。 优点:可以解决创建多个类似对象的问题 缺点:没有解决对象标识问题(即新创建的对象是什么类型) 示例: 构造函数模式与工厂模式相比,没有显式地创建对象,其属性和方

    2024年02月15日
    浏览(49)
  • 设计模式—原型模式(Prototype)

    目录 一、什么是原型模式? 二、原型模式具有什么优缺点吗? 三、有什么缺点? 四、什么时候用原型模式? 五、代码展示 ①、简历代码初步实现 ②、原型模式 ③、简历的原型实现 ④、深复制 ⑤、浅复制 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的

    2024年02月11日
    浏览(45)
  • 【设计模式】4、prototype 原型模式

    https://refactoringguru.cn/design-patterns/prototype 如果希望 复制对象, 可使用 “prototype 模式” 如果 “待复制的对象” 是 interface 而不是 class, 或者如果 class 有 private 变量时. 无法知道 \\\"待复制的对象\\\"的细节, 则需要其实现 “clone()” 方法供外部调用. 本例希望实现文件系统的复制功能

    2024年04月15日
    浏览(42)
  • 原型模式(Prototype)

    原型模式是一种创建型设计模式,使调用方能够复制已有对象,而又无需使代码依赖它们所属的类。当有一个类的实例(原型),并且想通过复制原型来创建新对象时,通常会使用原型模式。 原型模式包含如下角色: Prototype,原型类,用来声明克隆方法。在绝大多数情况下

    2024年02月14日
    浏览(44)
  • 原型模式(Prototype Pattern)

    原型模式(Prototype Pattern)结构较为简单,它是一种特殊的创建型模式, 当需要创建大量相同或者相似对象时 ,可以 通过对一个已有对象的复制获取更多对象 。Java语言提供了较为简单的原型模式解决方案,只需要创建一个原型对象,然后通过在类中定义的克隆方法复制自己

    2024年02月03日
    浏览(40)
  • 原型模式(Prototype Pattern)

    原型模式(Prototype Pattern)是一种创建型设计模式,它用于通过复制现有对象来创建新对象,而无需依赖显式的构造函数。 在原型模式中,我们创建一个原型对象,并通过复制该原型对象来创建新的对象。这样做的好处是,我们可以避免创建对象时的复杂实例化过程,而是通

    2024年02月15日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包