JavaScript数组方法总结,本文是根据数组原型上的方法进行总结,由于方法太多将会分篇章发布
通过浏览器控制台 console 可查看到 Array 数组上原型的所有方法(如下图)。对于原型问题此文章暂不过多叙述,单针对对象中的方法进行自我看法的总结;细心的同学可以发现对象原型上所携带的方法基本上是我们敲代码时所使用过的,文章部门叙述引用于MDN;第一篇章,后面会陆续发布第二篇第三篇预计在8月15号左右总结完数组的所有方法,总结起来发现很多方法在之前工作中某个场景使用很合适但是当时总是想不起来,想在趁有空对一些方法进行重新回顾,温故而知新
Array.prototype.at()
at()
方法接收一个下标并返回该下标所对应的数组的数据,下标值允许是正数或者负数。如果是负整数则会从数组的最后开始向前进行搜索并返回对应下标的数组数据,如果下标值超过数组的长度则返回 undefined。
let arr = ['aaa','bbb','ccc','ddd','fff'];
console.log(arr.at(0)); // 'aaa'
console.log(arr.at(1)); // 'bbb'
console.log(arr.at(-1)); // 'fff'
console.log(arr.at(5)); // undefined
Array.prototype.concat()
concat()
方法用于合并两个或多个数组,并且此方法不会更改原数组,而是返回一个新数组由被调用的对象中的元素组成,每个参数的顺序依次是该参数的元素或参数本身。嵌套数组不会对里面的数组进行展开合并,仅对数组的单层数据进行合并处理,而且改方法不会改变this
或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。 原始数组的元素将复制到新数组中。
- 对象引用(而不是实际对象):
concat
将对象引用复制到新数组中。 原始数组和新数组都引用相同的对象。 也就是说,如果引用的对象被修改,则更改对于新数组和原始数组都是可见的。 这包括也是数组的数组参数的元素。
- 数据类型如字符串,数字和布尔:
concat
将字符串和数字的值复制到新数组中。
例:
let arr = ['aaa','bbb'],
arr2 = ['ccc','ddd','fff'];
console.log(arr.concat(arr2)); // ['aaa', 'bbb', 'ccc', 'ddd', 'fff'] // 可定义一个新的变量进行接收
let arr = ['aaa','bbb']
console.log(arr.concat(1,[2,3])); // ['aaa','bbb',1,2,3]
let arr = ['aaa','bbb'],
arr2 = ['ccc','ddd','fff'],
arr3 = [1,2,3],
arr4 = arr.concat(arr2,arr3);
console.log(arr.concat(arr2,arr3)); // ['aaa', 'bbb', 'ccc', 'ddd', 'fff',1,2,3]
console.log(arr4); // ['aaa', 'bbb', 'ccc', 'ddd', 'fff',1,2,3]
var num1 = [[1]], num2 = [2, [3]], num3=[5,[6]];
var nums = num1.concat(num2);
console.log(nums); // [[1], 2, [3]]
var nums2=num1.concat(4,num3);
console.log(nums2); // [[1], 4, 5,[6]];
Array.prototype.constructor()
consrtuctor()
不做过多叙述可 点击此处 前往了解具体描述;
Array.prototype.copyWithin()
copyWithin()
方法会浅复制数组的一部分到同一数组中的另一个位置,并返回一个新的数组,不会改变原数组的长度。
例:
let arr = ['a',1,'b',2,'c',3];
console.log(arr.copyWithin(0,3,4)); // [2,1,'b',2,'c',3] 此处是将原数组中的第3项赋值给第0项
console.log(arr.copyWithin(1,3)); // [2, 2, 'c', 3, 'c', 3]
Array.prototype.copyWithin()
copyWithin()
方法会浅复制数组的一部分到同一数组中的另一个位置,并返回一个新的数组,不会改变原数组的长度。
let arr = ['a',1,'b',2,'c',3];
console.log(arr.copyWithin(0,3,4)); // [2,1,'b',2,'c',3] 此处是将原数组中的第3项赋值给第0项
console.log(arr.copyWithin(1,3)); // [2, 2, 'c', 3, 'c', 3]
Array.prototype.entries()
entries()
方法返回一个新的 Array Iterator 对象,该对象包含数组中每个索引的键/值对。其原型上有一个 next方法可供调用,可用于获取原数组的 【key value】;
let arr = ['aaa','bbb','ccc'],
arr2 = arr.entries();
console.log(arr2); // 得到一个 Array Iterator
console.log(arr2.next()); // 可复制到浏览器控制台中进行测试
console.log(arr2.next().value); // [0,'aaa']
console.log(arr2.next().value); // [1,'bbb']
//
Array.prototype.every()
every()
方法用于测试调用其的数组是否通过传入的函数的校验;
/* 语法 arr.every(callback(element[index[array]])[thisArg])
callback 回调函数;可接受三个参数
1. element 用于测试的当前的值;
2. index 用于测试的当前的索引值;
3. array 调用 every 的函数;
thisArg 执行 callback 时的 this 值;
every
方法为数组中的每个元素执行一次 callback
函数,直到它找到一个会使 callback
返回 falsy(虚值假值)的元素。如果发现了一个这样的元素,every
方法将会立即返回 false
。否则,callback
为每一个元素返回 true
,every
就会返回 true
。callback
只会为那些已经被赋值的索引调用。不会为那些被删除或从未被赋值的索引调用。
callback
在被调用时可传入三个参数:元素值,元素的索引,原数组。
如果为 every
提供一个 thisArg
参数,则该参数为调用 callback
时的 this
值。如果省略该参数,则 callback
被调用时的 this
值,在非严格模式下为全局对象,在严格模式下传入 undefined
。
every
不会改变原数组。
every
遍历的元素范围在第一次调用 callback
之前就已确定了。在调用 every
之后添加到数组中的元素不会被 callback
访问到。如果数组中存在的元素被更改,则他们传入 callback
的值是 every
访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
every
和数学中的"所有"类似,当所有的元素都符合条件才会返回 true
。正因如此,若传入一个空数组,无论如何都会返回 true
。*/
---------------------------------------------------------------
let arr = ['aaa','bbb','ccc'];
let fn = (value)=> !value;
console.log(arr.every(fn)); // false
let arr = ['aaa','bbb','ccc'];
let fn = (value)=> typeof value === 'string';
console.log(arr.every(fn)); // true
let arr = ['aaa','bbb','ccc',111];
let fn = (value)=> typeof value === 'string';
console.log(arr.every(fn)); // false
fill()
方法用于固定一个值并填充数组从开始下标到结束下标的全部元素,且不包括结束索引;并返回操作后的数组;
/* 语法 arr.every(value(start[end]))
value 用来填充数组元素的值;
start 起始下标;
end 结束下标;
fill
方法接受三个参数 value
、start
以及 end
、start
和 end
参数是可选的,其默认值分别为 0
和 this
对象的 length
属性值。
如果 start
是个负数,则开始索引会被自动计算成为 length + start
,其中 length
是 this
对象的 length
属性值。如果 end
是个负数,则结束索引会被自动计算成为 length + end
。
fill
方法故意被设计成通用方法,该方法不要求 this
是数组对象。
fill
方法是个可变方法,它会改变调用它的 this
对象本身,然后返回它,而并不是返回一个副本。
当一个对象被传递给 fill
方法的时候,填充数组的是这个对象的引用。*/
---------------------------------------------------------------
Array.prototype.filter()
filter()
方法经常用于过滤一个数组;并返回一个新的数组,其包含过滤后的所有元素;
/* 语法 let newArr = arr.filter(callback(element[index[array]])[thisArg])
callback 回调函数,用于过滤测试数组中的每一个元素的函数。根据定义的校验规则如果通过则返回 ture 保留该元素并添加进返回的新数组中。不通过校验规则返回 false 则不添加进返回的新数组中;其接受三个可选参数
element 数组中正在处理的元素;
index 正在处理的元素的下标;
array 调用其方法filter的数组本身;
thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
//从上面图片可以看出filter类似于for循环,循环对数组进行处理;其实现方法也可使用for循环实现,但是为什么还要用filter呢?最直白的理解因为简单省事代码少还凸显开发水平!!
// 例: let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];// 快速过滤出Number类型
- filter 实现 两行结束甚至代码优化合并下可以更少
- for 循环实现;这一对比结果一目了然;
// 当然filter的功能远不止过滤一个数字出来如此简单
// 过滤出数组中的奇数
let newArr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'].filter(function(item){
return item%2 && item>0
})
console.log(newArr) //[1,3,5,7,9]
console.log([1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'].filter(item => item%2&&item)) //此处得出的结果和上面是一样的,但是上面的代码太多了,不符合我摸鱼的个性,还是简写成这样更能体现出我的开发水平;
// 去除数组中的重复项
let newArr = [1,1,2,2,3,3,4,4,5,5].filter((element,index,array)=> array.indexOf(element)==index);
console.log(newArr) // [1,2,3,4,5]
find()
方法返回数组中满足提供的测试函数的第一个元素,如果没有返回 undefined;callback
函数会为数组中的每个索引调用即从 0
到 length - 1
,而不仅仅是那些被赋值的索引,这意味着对于稀疏数组来说,该方法的效率要低于那些只遍历有值的索 引的方法。 em... 似曾相识的 callback 似曾相识的参数
/* 语法 let value = arr.find(callback(element[index[array]])[thisArg])
callback 回调函数,其接受三个可选参数
element 数组中正在处理的元素;
index 正在处理的元素的下标;
array 调用其方法find的数组本身;
thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.find(item => item > 1)) // 2 你会发现数组中有好几个大于 1 的值;但是只返回了一个值2
// 也可以快速查找到匹配的对象数据
let arr =[
{name: '百度', id: 1},
{name: '谷歌', id: 2},
{name: 'EDG', id: 3}
]
;
arr.find(value => value.name == '谷歌') // {name: '谷歌', id: 2}
arr.find(value => value.name == '火狐') // undefined
Array.prototype.findIndex()
findIndex()
方法返回匹配到的第一个值得下标,如果没有匹配到则返回 -1;find()方法是返回其值,findIndex是返回其下标;调用参数基本上一致
/* 语法 let index = arr.findIndex(callback(element[index[array]])[thisArg])
callback 回调函数,其接受三个可选参数
element 数组中正在处理的元素;
index 正在处理的元素的下标;
array 调用其方法findIndex的数组本身;
thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.findIndex(item => item > 1)) // 1
// 也可以快速查找到匹配的对象数据的下标
let arr = [{name: '百度', id: 1},
{name: '谷歌', id: 2},
{name: 'EDG', id: 3}
]
;
arr.findIndex(value => value.name == '谷歌') // 1
arr.findIndex(value => value.name == '火狐') // -1
Array.prototype.findLast()
findLast()
方法返回匹配到的最后一个元素的值,如果没有匹配到则返回 undefiner;find()方法是从前往后查询,findLast是从后往前查询;调用参数基本上一致
/* 语法 let lastValue = arr.findLast(callback(element[index[array]])[thisArg])
callback 回调函数,其接受三个可选参数
element 数组中正在处理的元素;
index 正在处理的元素的下标;
array 调用其方法findLast的数组本身;
thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.findLast(item => item > 1)) // 9
Array.prototype.findLastIndex()
findLastIndex()
方法返回从后向前查询匹配到的第一个值得下标,如果没有匹配到则返回 -1;findIndex()方法是返回从前向后查询匹配其值的下标,findLastIndex是返回从后向前查询匹配其下标的下标;调用方法基本上一致
/* 语法 let lastIndex = arr.findLastIndex(callback(element[index[array]])[thisArg])
callback 回调函数,其接受三个可选参数
element 数组中正在处理的元素;
index 正在处理的元素的下标;
array 调用其方法findIndex的数组本身;
thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"*/
---------------------------------------------------------------
let arr = [1,2,'a',3,4,5,6,'aa',7,8,9,'aaa'];
console.log(arr.findLastIndex(item => item > 1)) // 返回数组中9的下标,打印结果为 10
Array.prototype.flat()
flat()
方法按照一个指定的深度递归遍历数组,并将其所有元素遍历到子数组中的元素上进行合并并返回一个新的数组; 将多维数组转为一维数组
/* 语法 let newArr = arr.flat([depth])
depth 默认为1,指定多层嵌套数组的深度*/
---------------------------------------------------------------
let arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
console.log(arr.flat()) // [1, 2, 3, 4, Array(3)]
console.log(arr.flat(4)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.fiat(100)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 这里就如果不知道数组层数的时候可直接传入一个很高的数值
console.log(arr.flat('a')) // 如果这里传入的不是数字或小于1的数字会使用默认值 0,并返回原来其调用的数组;如果传入小数不会对小数进行处理只对整数值进行处理
Array.prototype.flatMap()
flatMap()
方法与 flat 方法几乎相同,但是 faltMap方法会更高效一些
/* 语法 let newArr = arr.flatMap(callback[currentValue[index[]array]],[thisArg])
callback 回调函数可接收到三个参数
currentValue 当前正在处理的数组元素
index 当前正在处理的数组元素的下标
array 当前调用 flatMap 的数组
thisArg 调用执行callback回调函数时用于的this值,可选参数。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined
*/
---------------------------------------------------------------
let arr = [1,2,[3,4,[5,6,[7,8,[9,10]]]]];
console.log(arr.flat()) // [1, 2, 3, 4, Array(3)]
console.log(arr.flat(4)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr.fiat(100)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 这里就如果不知道数组层数的时候可直接传入一个很高的数值
console.log(arr.flat('a')) // 如果这里传入的不是数字或小于1的数字会使用默认值 0,并返回原来其调用的数组;如果传入小数不会对小数进行处理只对整数值进行处理
JavaScript数组方法总结,本文是根据数组原型上的方法进行总结,由于方法太多将会分篇章发布的更多相关文章
- JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法
JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和Chrome上无法动作. (当时,在Chrome35.0上的时候还是可以的,Chrome36.0上就无法动作了 ...
- Promise (2) 原型上的方法
"I'm Captain Jack Sparrow" 加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆). 为了周天能去看电影,要赶紧 ...
- JavaScript的json和Array及Array数组的使用方法
1.关于json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.也可以称为数据集和数组类似,能够存数据! //Ar ...
- JavaScript中的内置对象-8--1.Array(数组)-Array构造函数; 数组的栈方法; 数组的转换方法; 数组的操作方法; 删除-插入-替换数组项; ECMAScript为数组实例添加的两个位置方法;
JavaScript内置对象-1Array(数组) 学习目标 1.掌握任何创建数组 2.掌握数值元素的读和写 3.掌握数组的length属性 如何创建数组 创建数组的基本方式有两种: 1.使用Arra ...
- javascript里的几种常见的数组方法
Array()的几种方法 1.splice(2,3,4)删除数组中任意项(三个参数). 2.splice(1,3)删除从第一项开始的往后三项(两个参数).(splice可以结合pop(),unshif ...
- JavaScript利用数组原型,添加方法实现遍历多维数组每一个元素
原型就是提供给我们为了让我们扩展更多功能的. 今天学习了用js模拟底层代码,实现数组多维的遍历.思想是在数组原型上添加一个方法. // js中的数组forEach方法,传入回掉函数 能够帮助我们遍历数 ...
- JavaScript (JS)基础:DOM 浅析 (含数组Array、字符串String基本方法解析)
①文本对象document: 例如:document.getElementById() 只获取一个对象 document.getElementsByTagName() 获取 ...
- javascript对象深拷贝,浅拷贝 ,支持数组
javascript对象深拷贝,浅拷贝 ,支持数组 经常看到讨论c#深拷贝,浅拷贝的博客,最近js写的比较多, 所以也来玩玩js的对象拷贝. 下面是维基百科对深浅拷贝的解释: 浅拷贝 One meth ...
- javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
随机推荐
- TyepScript学习
前提 JS缺陷 (1)变量频繁变换类型,类型不明确难以维护 TS定义 (1)定义 以JavaScript为基础构建的语音,一个JavaScript的超集,扩展js添加了类型, 可以在任何支持js的平台 ...
- Java开发学习(一)----初识Spring及其核心概念
一. Spring系统架构 1.1 系统架构图 Spring Framework是Spring生态圈中最基础的项目,是其他项目的根基. Spring Framework的发展也经历了很多版本的变更,每 ...
- AI趋势量化系统(Binance升级版)
更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. B圈大跌行情,如何应对? 近期,伴随着美联储持续的加息进程,数字货币市场不论是市场焦点LUNA,还是BT ...
- 前端3JS1
内容概要 溢出属性 定位属性 z-index JavaScript简介 变量与注释 数据类型 内容详情 溢出属性 # 文本内容超出了标签的最大范围 overflow: hidden; 接隐藏文本内容 ...
- MCDF实验2
目录 接口的使用 仿真的结束 类的例化和类的成员 接口的使用 问题1.1:可以看到之前的实验 channel initiator 发送的数据例如 valid 和 data 与时钟 clk 均在同 ...
- php 正则获取字符串中的汉字(去除字符串中除汉字外的所有字符)
preg_match_all('/[\x{4e00}-\x{9fff}]+/u', $list[$i]['iparr'], $matches); $list[$i]['iparr'] = join(' ...
- JS:函数
Function:函数 1. 定义一个函数:function functionname(argument) { 代码块 return }: 调用此函数:fn() 2.函数是定义了一种方法,只有被调用才 ...
- SpringBoot 集成缓存性能之王 Caffeine
使用缓存的目的就是提高性能,今天码哥带大家实践运用 spring-boot-starter-cache 抽象的缓存组件去集成本地缓存性能之王 Caffeine. 大家需要注意的是:in-memeory ...
- python 基础知识-day10(面向对象)
1.面向对象的概念 拥有共同属性的一类进行归类的过程叫做面向对象. 2.注意事项 class定义类的时候,类名的首字母必须大写 3.面向对象案例 1 class Person(object): 2 d ...
- 好用到爆!GitHub 星标 32.5k+的命令行软件管理神器,功能真心强大!
前言(废话) 本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合 MongoDB 的文章,结果在通过 brew 安装 MongoDB 的时候竟然报错了.原因很简单,公司这台 Mac 上的 homebr ...