浅谈数组的原型方法

已于 2022-08-10 23:41:11 修改
阅读量2.6k 收藏 5
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2022-07-23 13:57:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CYHLLF/article/details/125944190
版权

目录

at()

concat()

copyWithin()

entries()

every() 

fill()

filter()

find()

findIndex()

findLast() 

findLastIndex() 

flat()

flatMap()

forEach()

includes()

at()

说明：

一般获取数组中最后一位元素会采用以下方法：

let a =[1,2,3,4,5,6];
console.log(a[a.length-1]);//6

现在使用at()方法可以更方便地获取：

console.log(a.at(-1)); //6

并且 at() 方法里面的参数 >=0 时也可以正常使用：

console.log(a.at(5)); //6

但是当参数大于等于数组长度时，会返回undefined：

console.log(a.at(6)); //undefined

可以说使用 at() 简化了获取数组末尾元素的代码，如填写的负数 "-2" 可以理解成方法自动帮你计算 arr.length-2。

兼容性：

concat()

说明：

用于连接两个或多个数组；返回值是拼接后的数组，不改变原数组的值

let a = [1, 2, 3, 4, 5, 6];
let b = [7, 8, 9, 10, 11, 12];

let result1=a.concat(b);
console.log(result1); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

兼容性： 

copyWithin()

说明：

copyWithin(target，start，end)

target：必须

start：可选，默认0

end：可选，默认等于数组长度

可以复制数组的一部分（该一部分默认是从数组第一个到最后一个元素）粘贴到规定了的数组的起始位置，并返回改变后的数组。该方法会改变原数组的内容，但是不会改变数组的长度。

 target(必需):代表粘贴数据时数组起始下标，也就是从哪里开始粘贴内容：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(2);
console.log("从第三个位置开始替换：", a); //[1, 2, 1, 2, 3, 4]

 当target大于数组长度时，则不会替换：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(10);
console.log("target大于数组长度：", a); //[1, 2, 3, 4, 5, 6]

 当target为负数时，代表从数组倒数第几个开始粘贴内容：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(-2);
console.log("代表从数组倒数第二个开始粘贴内容：", a); //[1, 2, 3, 4, 1, 2]

 start(可选)：从该位置开始复制数据：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(2, 4);
console.log("从数组下标为4的位置开始复制：", a); //[1, 2, 5, 6, 5, 6]

 当start为负数时，复制的起始点从数组的末尾开始计算：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(2, -2);
console.log("从数组倒数第二个开始复制", a); //[1, 2, 5, 6, 5, 6]

 end(可选)，到该位置前停止复制数据：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(2, 1, 4);
console.log("在数组下标为4的数据前停止复制：", a); //[1, 2, 2, 3, 4, 6]

 end为负数时，代表复制数据的终点从数组末尾开始计算：

let a = [1, 2, 3, 4, 5, 6];
a.copyWithin(2, 1, -2);
console.log("复制到数组倒数第2个数据前", a); //[1, 2, 2, 3, 4, 6]

兼容性：

entries()

说明：

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

其中key代表数组的索引值，value代表索引值对应的元素。

此方法并不会改变原数组

下面使用for...of对其进行遍历输出

let a = [1, 2, 3, 4, 5, 6];
for(let [index,val] of a.entries()){
    console.log(index,val);
}
// 输出：
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// 5 6

 

every() 

说明：

用于遍历检测数组所有元素是否都符合指定条件（通过函数提供）。

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测，并直接返回true

注意： every() 不会改变原始数组。

语法：

array.every(function(currentValue,index,arr), thisValue)

currentValue（必需）：当前元素的值

index（可选）：对应的索引值

arr（可选）：被遍历的数组

thiaValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"。例如填入另一个数组b，则this指向数组b。

let a = [1, 2, 3, 4, 5, 6];
let b = [7, 8, 9, 10, 11, 12];
let result2 = a.every(function (item, index, arr) {
    console.log(this); //[7, 8, 9, 10, 11, 12]
    return item > 0;
},b);
console.log(result2); //true

fill()

说明：

用于将一个固定值替换数组内的元素，会改变原数组

语法：

array.fill(value, start, end)

value（必需）：填充的值。

start（可选）：开始填充的位置

end（可选）：停止填充的位置 (默认为 array.length)

let a = [1, 2, 3, 4, 5, 6];
a.fill(11,1,5);
console.log("fill()方法填充后的结果：",a); //[1, 11, 11, 11, 11, 6]

 兼容性：

filter()

说明：

用于过滤一个数组，规定过滤条件，结果返回一个符合条件的新数组，不会改变原数组。

注意：filter() 不会对空数组进行检测。

语法：

array.filter(function(currentValue,index,arr), thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
let result = a.filter((item) => {
  return item > 2;
});
console.log(result); //[3, 4, 5, 6]

兼容性： 

find()

说明：

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组，函数是不会执行的，并且返回的是undefined。

注意: find() 并没有改变数组的原始值。

 语法：

array.find(function(currentValue, index, arr),thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
let result4 = a.find((item) => {
  return item > 3;
});
console.log(result4); // 4

兼容性： 

findIndex()

说明：

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的，返回值为-1。

注意: findIndex() 并没有改变数组的原始值。

 语法：

array.findIndex(function(currentValue, index, arr),thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
let result5 = a.findIndex((item) => {
  return item > 3;
});
console.log(result5); // 3

兼容性： 

findLast() 

说明：

findLast() 方法和find()方法相反，是从数组最后一个元素开始遍历，然后返回通过测试（函数内判断）的数组的第一个元素的值。

findLast() 方法为数组中的每个元素都调用一次函数执行：

  • 当数组中的元素在测试条件时返回 true 时, findLast() 返回符合条件的元素，之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意: findLast() 对于空数组，函数是不会执行的，并且返回的是undefined。

注意: findLast() 并没有改变数组的原始值。

 语法：

array.findLast(function(currentValue, index, arr),thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
let result6 = a.findLast((item) => {
  return item < 3;
});
console.log(result6); // 2

 兼容性：

findLastIndex() 

说明：

findLastIndex() 方法和findIndex()方法相反，是从数组最后一个元素开始遍历，然后返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findLastIndex() 方法为数组中的每个元素都调用一次函数执行：

  • 当数组中的元素在测试条件时返回 true 时, findLastIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1

注意: findLastIndex() 对于空数组，函数是不会执行的，返回值为-1。

注意: findLastIndex() 并没有改变数组的原始值。

 语法：

array.findLastIndex(function(currentValue, index, arr),thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
let result7 = a.findLastIndex((item) => {
  return item < 3;
});
console.log(result7); // 1

兼容性： 

flat()

说明： 

能将嵌套数组转一维数组，默认转换一层，如果需要转换更多层，那么需要传入参数；

方法不会改变原数组，会返回一个新数组；

语法：

 array.flat(string)

string（可选）：代表转换几层，默认1层

let c=[1,[2,[3,[4,5]]]];

let result8 = c.flat();
console.log(result8); //[1,2,[3,[4,5]]]

let result9 = c.flat(2);
console.log(result9); //[1,2,3,[4,5]]

//自动跳过空位
let d =[1, ,[2,[3,[4,5]]]];
let result10 = d.flat();
console.log(result10); //[1,2,[3,[4,5]]]

兼容性：

 

flatMap()

 说明：

遍历数组的每一项，每一项的返回值由我们自行决定，可以试原数组元素，或是进行加减乘除运算后的，或是符合某个条件的，或是其他自定义的值，最后返回一个新数组，不改变原数组。

语法：

 array.flatMap(function(currentValue, index, arr),thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
let result11 = a.flatMap((item) => {
  return item * 2;
});
console.log(result11); //[2, 4, 6, 8, 10, 12]

兼容性：

 

forEach()

说明： 

遍历数组，对每个元素进行操作，没有返回值，不会改变原数组。

注意：forEach() 对于空数组是不会执行回调函数的。

 语法：

array.forEach(function(currentValue, index, arr), thisValue)

currentValue（必需）：当前元素的值

index（可选）：当前元素的索引值

arr（可选）：当前元素属于的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

let a = [1, 2, 3, 4, 5, 6];
a.forEach((item) => {
  item = item * 2;
  console.log(item);
 console.log(a);
});
// 2
// [1, 2, 3, 4, 5, 6]
// 4
// [1, 2, 3, 4, 5, 6]
// 6
// [1, 2, 3, 4, 5, 6]
// 8
// [1, 2, 3, 4, 5, 6]
// 10
// [1, 2, 3, 4, 5, 6]
// 12
// [1, 2, 3, 4, 5, 6]

兼容性： 

includes()

说明：

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false，不改变原数组。

语法：

 arr.includes(searchElement, fromIndex)

 searchElement（必须）：需要查找的元素值。

 fromIndex（可选）：从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let a = [1, 2, 3, 4, 5, 6];
let result12 = a.includes(2);
console.log(result12); // true

result12 = a.includes(2, -3);
console.log(result12); // false

兼容性：

 

indexOf() 

说明：

未完待续。。。。 

 

join()

说明： 

用于把数组中的所有元素转换一个字符串。不改变原数组。

语法：

array.join(separator)

separator（可选）：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

let a = [1, 2, 3, 4, 5, 6];
let result13 = a.join();
console.log(result13) // 1,2,3,4,5,6

result13 = a.join("-");
console.log(result13) // 1-2-3-4-5-6

兼容性：

 

成遗憾
关注
专栏目录
数组findLastIndex()方法
高先生的猫
07-27 5984
_.findLastIndex(array, [predicate=_.identity], [fromIndex=array.length-1]) 这个方式类似_.findIndex, 区别是它是从右到左的迭代集合array中的元素。 引入版本 2.0.0 参数 array（Array）: 要搜索的数组。 [predicate=_.identity](Array| Function | Object| string): 这个函数会在每一次迭代调用。 [fromIndex=array.length.
实现一个数组的findLastIndex的方法
weixin_41489378的博客
06-23 2172
Js 数组为我们提供了很多的数据查找与遍历的方法 例如：find,findIndex, 但是没有一个倒序查找的方法，我们可以模拟实现一个 findLast 和 findLastIndex的方法 const findLast = function(array, cb){ if(!Array.isArray(array)){ return undefined } if(array.length === 0){ return undefined } for(var i = ar
【JavaScript】引用类型Array数组相关方法
最新发布
weixin_53649241的博客
08-27 511
js中引用类型数组的操作业务方法，以及ES新增的方法等的整理，方便个人后续使用时观看，也可以通过文章了解数组的使用以及处理
ES6 入门教程 9 数组的扩展 9.3 Array.of() ~ copyWithin() & 9.5 find()，findIndex()，findLast()，findLastIndex()
谢谢你们的关注
11-16 375
ES6 入门教程 9 数组的扩展 9.3 Array.of() ~ copyWithin() & 9.5 find()，findIndex()，findLast()，findLastIndex()
ES2023新特性！
JudyC的博客
07-25 636
/ 库存低时返回 true function isNotEnough(item) {// undefined，没有找到 console . log([ 4 , 5 , 7 , 8 , 9 , 11 , 12 ] . findLast(isPrime));// 11。
数组五种查询条件方法(find、findindex、indexOf、lastindexOf 、includes)
热门推荐
gs981600308的博客
05-28 2万+
方法一、find() 方法返回数组中满足提供的测试函数的第一个元素的值。 语法： arr.find(callback[, thisArg]) 例一、find()方法 查找数组中第一个大于等于15的元素 var num = [10,3,5,15,100,1].find(function(elem, index){ return elem>=15; }); console.lo...
浅谈Java中复制数组的方式
08-29
arraycopy 方法的函数原型是：`public static void arraycopy(Object src, int srcPos, Object dest, int destPos, int length)`，其中： * `src`：源数组 * `srcPos`：源数组要复制的起始位置 * `dest`：目的数组 ...
深入数组原型方法，看完这篇就足够了！
qq_43750501的博客
07-14 705
数组是一个超常用的数据结构，JavaScript的数组方法都有什么怎样的特性呢？ 是时候一探究竟了。 JavaScript中数组是一个对象，默认的赋值是传了一个引用。针对结果是引用还是拷贝，对原数组的变更与否，分为两类方法：必写方法、只读方法。 必写方法 列举了一些会造成数组本身的内容发生改变的方法。 splice Array.prototype.splice(start: number, deleteCount: number, ...items: any[]): any[] arr.splice(st
浅谈C#各种数组直接的数据复制/转换
12-26
之前做Opengl程序，用的的C#的SharpGL这个库，里面有各种奇怪绑定的函数，比如原型为： void glInterleavedArrays(uint format, int stride, void * pointer);...下面是我写的各种数组赋值转换的方法
数组原型方法汇总方便自己查看
qq_41773964的博客
01-20 132
1 join() join(separator): 拼接，将数组的元素拼接成一个字符串，以separator为分隔符，省略的话则默认用逗号分隔，该方法只接受一个参数：即分隔符separator let arr: number[] = [1, 2, 3] console.log(arr.join()) //1,2,3 console.log(arr.join('-')) //1-2-3 consol...
浅谈js数据类型判断与数组判断
10-21
然而，这种方法依赖于原型链，如果数组是由另一个构造函数创建的，结果可能会出乎意料。 另一种常见的数组判断方法是通过检查对象的`constructor`属性。数组的`constructor`属性指向Array构造函数，所以我们可以...
ie8兼容indexOf与lastIndexOf
贾世鑫的博客
07-17 1013
ie8兼容indexOf与lastIndexOf //ie8 兼容indexOf if(!Array.indexOf){ Array.prototype.indexOf = function(obj){ for(var i=0; i<this.length; i++){ if(this[i]==obj){ return i; } } return -1;...
IE不兼容findIndex
Moria
06-30 1383
var arr = [ {id: 1, name: 'java'}, {id: 2, name: 'c++'}, {id: 3, name: 'js'}, {id: 4, name: 'c#'} ] // Array.prototype._find_ = function(cb){ for(var i=0; i< this.length; i++){ if(cb(this.
ES6(2015)~ES14(2023)语法新特性
qq_72626212的博客
08-29 1605
ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。平时经常编写的JavaScript，是ECMAScript 的一种实现，所以ES新特性其实指的就是JavaScript的新特性。​ES6 加入许多新的语法特性，使编程的实现更简单、高效​ES标准列表：​​ES兼容性：​1、一定要赋初始值。2、一般常量名使用大写。3、常量的值不能修改。4、const也遵循块级作用域。5、对于数组和对象的修改，不算做对常量的修改，不会报错。
ES 2023新特性速解
luxigaola的博客
09-18 1621
JavaScript 中的 hashbang 注释类似于 Unix 中的 shebang，它提供了一个特定的 JavaScript 解释器的路径，用它来执行这个脚本。如果省略，则将数组元素转换为字符串，然后根据每个字符的 Unicode 码位值进行排序。只有当脚本直接在 shell 中运行时，Hashbang 语法才有语意意义，其他环境下 JavaScript 解释器会把它视为普通注释。指定的位置到数组末尾的元素数量，将会删除从。，表示已找到匹配的元素，否则返回一个。之后的所有元素，因为显式的。
原型、数组
qq_34983808的博客
05-23 564
1.原型（prototype） - 创建一个函数以后，解析器都会默认在函数中添加一个数prototype prototype属性指向的是一个对象，这个对象我们称为原型对象。 - 当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。 这个隐含的属性可以通过对象.__proto__来访问。 - 原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他...
浅谈原型对象与原型链
weixin_64214997的博客
05-13 463
1.为什么需要原型对象? 构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。 因为多个构造函数会开辟多个内存空间,这样会导致内存浪费的问题,那么如何解决这个问题呢? 方案一:使用全局函数解决,但是会导致变量污染 方案二:使用全局对象解决,解决了变量污染，但是这个对象本身也会造成污染 所以原型对象来啦! 原型对象的作用 ： 解决内存浪费 + 变量污染(共享方法) 2.什么是原型对象呢? 任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应.
ES6笔记
weixin_73696461的博客
01-25 81
class函数类似于将函数添加到原函数中,class类本质上就是一个函数，自身指向的就是构造函数，也是构造函数的一种写法，仍然存在prototype方法，可以通过原型prototype修改类的方法和新增方法：Preson.prototype.函数名=function(){}get将对象属性和函数绑定时直接执行，set在对象属性和函数绑定，当属性被赋值时，函数被执行。也可以对实例对象的__protot__属性新增类的方法：preson.用来在命名时，属性名和变量名之间的冲突。属于Map对象的方法。
qlist的遍历_List集合操作一：遍历与查找
weixin_30166691的博客
01-30 7987
首先声明本文不是讨论Linq，在Framwork2.0中也不支持linq操作的，主要是记录一下List集合的使用方法。List 一般主要用到的查找遍历方法：Find：搜索指定谓词所定义条件相匹配的元素，并返回整个List中的第一个匹配元素。FindLast：搜索指定谓词所定义条件相匹配的元素，并返回整个List中的最后一个匹配元素。Find：搜索指定谓词所定义条件相匹配的元素，并返回整个List中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值