浅谈数组的原型方法

已于 2022-08-10 23:41:11 修改
阅读量2.2k 收藏 4
点赞数
分类专栏： 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

兼容性：

 

成遗憾
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组findLastIndex()方法
高先生的猫
07-27 5834
_.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 2051
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
JS数组方法：lastIndexOf
最新发布
不熬夜的臭宝的博客
05-17 526
前端javascript中lastIndexOf数组方法
ES6 入门教程 9 数组的扩展 9.3 Array.of() ~ copyWithin() & 9.5 find()，findIndex()，findLast()，findLastIndex()
谢谢你们的关注
11-16 353
ES6 入门教程 9 数组的扩展 9.3 Array.of() ~ copyWithin() & 9.5 find()，findIndex()，findLast()，findLastIndex()
ES2023新特性！
JudyC的博客
07-25 572
/ 库存低时返回 true function isNotEnough(item) {// undefined，没有找到 console . log([ 4 , 5 , 7 , 8 , 9 , 11 , 12 ] . findLast(isPrime));// 11。
ie8兼容indexOf与lastIndexOf
贾世鑫的博客
07-17 971
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;...
浅谈Java中复制数组的方式
08-29
arraycopy 方法的函数原型是：`public static void arraycopy(Object src, int srcPos, Object dest, int destPos, int length)`，其中： * `src`：源数组 * `srcPos`：源数组要复制的起始位置 * `dest`：目的数组 ...
浅谈js数据类型判断与数组判断
10-21
然而，这种方法依赖于原型链，如果数组是由另一个构造函数创建的，结果可能会出乎意料。 另一种常见的数组判断方法是通过检查对象的`constructor`属性。数组的`constructor`属性指向Array构造函数，所以我们可以...
浅谈javascript 函数属性和方法
10-24
函数的实例可以通过原型访问共享的方法和属性。`prototype`通常用于实现面向对象编程中的继承机制。 ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function() { ...
浅谈C#各种数组直接的数据复制/转换
12-26
之前做Opengl程序，用的的C#的SharpGL这个库，里面有各种奇怪绑定的函数，比如原型为： void glInterleavedArrays(uint format, int stride, void * pointer);...下面是我写的各种数组赋值转换的方法
浅谈Javascript实现继承的方法
12-03
这种方法通过设置`Son.prototype`为一个新的`Parent`实例，使得`Son`的原型链上包含了`Parent`的属性和方法。当创建`Son`的实例时，可以访问到`Parent`的`getName`方法。然而，这种方式存在一个问题：所有`Son`的...
详解ES6数组方法find()、findIndex()的总结
10-15
主要介绍了详解ES6数组方法find()、findIndex()的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
IE不兼容findIndex
Moria
06-30 1314
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.
解决findindex、includes等不兼容ie的解决方案附代码
m0_45456399的博客
06-03 4778
解决findindex、includes兼容ie方法附代码 前提：今天遇到兼容性问题，写了半天代码，在谷歌上测试没问题，然而被告知还要考虑IE的兼容！ 瞬间爆炸，记得写了好多findIndex、includes 可怎么办，百度了好多解决办法，也没有解决。翻到了个个好的网站，上面的解决办法，参考了下，下面进入正题。 上代码！ //这个是判断 没有findindex 方法的 if (!Array.prototype.findIndex) { Object.defineProperty(Arra
ES6(2015)~ES14(2023)语法新特性
qq_72626212的博客
08-29 1394
ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。平时经常编写的JavaScript，是ECMAScript 的一种实现，所以ES新特性其实指的就是JavaScript的新特性。​ES6 加入许多新的语法特性，使编程的实现更简单、高效​ES标准列表：​​ES兼容性：​1、一定要赋初始值。2、一般常量名使用大写。3、常量的值不能修改。4、const也遵循块级作用域。5、对于数组和对象的修改，不算做对常量的修改，不会报错。
ES 2023新特性速解
luxigaola的博客
09-18 1563
JavaScript 中的 hashbang 注释类似于 Unix 中的 shebang，它提供了一个特定的 JavaScript 解释器的路径，用它来执行这个脚本。如果省略，则将数组元素转换为字符串，然后根据每个字符的 Unicode 码位值进行排序。只有当脚本直接在 shell 中运行时，Hashbang 语法才有语意意义，其他环境下 JavaScript 解释器会把它视为普通注释。指定的位置到数组末尾的元素数量，将会删除从。，表示已找到匹配的元素，否则返回一个。之后的所有元素，因为显式的。
js数组的5种查询方式——find(),findIndex(),indexOf(),lastIndexOf(),include()
weixin_42062766的博客
07-27 3498
var num = [10, 20, 30, 40, 50, 60, 70, 80, 90]; 1.find() 返回数组中第一个满足条件的数据 // var num = [10, 20, 30, 40, 50, 60, 70, 80, 90]; var newNum1 = num.find((item, index) => { return item > 40; }) console.log("newNum1 = " + newNum1);//50 2.findIndex.
数组五种查询条件方法(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...
qlist的遍历_List集合操作一：遍历与查找
weixin_30166691的博客
01-30 7870
首先声明本文不是讨论Linq，在Framwork2.0中也不支持linq操作的，主要是记录一下List集合的使用方法。List 一般主要用到的查找遍历方法：Find：搜索指定谓词所定义条件相匹配的元素，并返回整个List中的第一个匹配元素。FindLast：搜索指定谓词所定义条件相匹配的元素，并返回整个List中的最后一个匹配元素。Find：搜索指定谓词所定义条件相匹配的元素，并返回整个List中...
js如何给数组原型上添加自定义方法
07-14
要给 JavaScript 数组的原型上添加自定义方法，可以使用 `Array.prototype` 对象来实现。以下是一个示例： ```javascript // 在 Array.prototype 上添加自定义方法 Array.prototype.customMethod = function() { // 在这里编写自定义方法的逻辑 console.log('This is a custom method added to Array.prototype'); }; // 使用自定义方法 const arr = [1, 2, 3]; arr.customMethod(); // 输出: "This is a custom method added to Array.prototype" ``` 在上面的示例中，我们通过给 `Array.prototype` 添加 `customMethod` 方法来扩展数组对象。然后，我们可以直接在数组实例上调用这个自定义方法。 需要注意的是，修改原型对象可能会影响到整个应用程序，因此在添加自定义方法时需要谨慎。确保自定义方法的命名与现有方法不冲突，并且考虑到可能的命名冲突或重写现有方法的风险。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值