JavaScript中原生Array数组方法详解
JS中,数组可以通过阵列构造函数或[]字面量的方式创建。数组是一个特殊的对象,继承自对象原型,但用typeof运算判断时,并没有一个特定的值,仍然返回’对象’。但使用[] instanceof Array返回true。这说明,js中存在一个类数组的对象,就像字符串对象或arguments对象。
arguments对象不是数组的实例,但仍然有length属性,值也可以被索引,因此也可以像一张一样被循环遍历。
- 循环.forEach
- 断言.some,.every
- 连接与合并.join,.concat
- .pop,.push,.shift,.unshift
- 模型映射.map
- 过滤.filter
- 排序.sort
- 聚合.reduce,.reduceRight
- 截取.slice
- 删除插入.splice
- 发现值.indexOf
- 在操作符中发现键
- 颠倒.reverse
1.forEach()
forEach对数组的所有成员依次执行且只执行一次参数函数,参数函数包含以下3个参数:
- 值当前值
- index当前位置,索引值
- array当前数组
进一步,可以传递一个可选参数用作指定函数里的这个。
['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) {this.push(String.fromCharCode(value.charCodeAt() + index + 2))
}, out = [])out.join('')
// <- 'awesome
forEach的缺陷是既不能中断循环,也不能引发异常。
2.some(),every()
这两个方法类似“断言”(assert),返回一个布尔值,表示判断数组成员是否符合
某种条件。对于foreach,同样接受一个包含值,索引和数组的变量函数作为参数,而且也可以指定上下文中的这一点。
有些方法是只要一个成员的返回值是真,则整个某些方法的返回值就是真实的,否则返回假。
每个方法是所有成员的返回值都是真实的,整个每一个方法才返回真,否则返回false。
max = -Infinity
satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) {if (value > max) max = valuereturn value < 10
})console.log(max)
// <- 12satisfied
// <- true
3.join()和concat()
这两个方法容易搞混,加入是将多个内部各个成员用分隔符连接成一个串联,分隔符交替是,, concat用于多个交错的合并。成员的后部,然后返回一个新副本,原副本不变。
var a = { foo: 'bar' }
var b = [1, 2, 3, a]
var c = b.concat()console.log(b === c)
// <- falseb[3] === a && c[3] === a
// <- true
4.pop,.push,.shift和.unshift
每个人都知道往上面的末尾添加一个元素是用push方法,但你知道可以一次性添加多个元素吗,像这样[] .push(‘a’,‘b’,‘c’,‘d’, ‘z’)。
pop是push方法的逆操作,移除了多个最后一个元素同时返回这个元素,如果是空分配则返回undefined,使用这两个方法很容易实现LIFO(后进先出)栈结构。
function Stack () {this._stack = []
}Stack.prototype.next = function () {return this._stack.pop()
}Stack.prototype.add = function () {return this._stack.push.apply(this._stack, arguments)
}stack = new Stack()
stack.add(1,2,3)stack.next()
// <- 3
相应的,我们可以通过.unshift和.shift实现一个FIFO(先进先出)类型。
function Queue () {this._queue = []
}Queue.prototype.next = function () {return this._queue.shift()
}Queue.prototype.add = function () {return this._queue.unshift.apply(this._queue, arguments)
}queue = new Queue()
queue.add(1,2,3)queue.next()
// <- 1
使用.shift(或.pop)很容易用while循环清空一个数组,如下:
list = [1,2,3,4,5,6,7,8,9,10]while (item = list.shift()) {console.log(item)
}list
// <- []
5.map()
方法
签名为forEach,.map(fn(value,index,array),thisArgument)。
values = [void 0, null, false, '']
values[7] = void 0
result = values.map(function(value, index, array){console.log(value)return value
})
// <- [undefined, null, false, '', undefined × 3, undefined]
undefined×3表明在某种程度上函数不会在已删除或未赋值的成员执行,而是自己返回包含在返回数组中。地图在映射或转换排列时非常有用,下面有个例子:
// casting
[1, '2', '30', '9'].map(function (value) {return parseInt(value, 10)
})
// 1, 2, 30, 9[97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')
// <- 'awesome'// a commonly used pattern is mapping to new objects
items.map(function (item) {return {id: item.id,name: computeName(item)}
})
6.filter()
filter方法用于过滤数组成员,满足条件的成员组成一个新副本返回。
正在使用,.filter(fn(value,index,array),thisArgument)。
[void 0, null, false, '', 1].filter(function (value) {return value
})
// <- [1][void 0, null, false, '', 1].filter(function (value) {return !value
})
// <- [void 0, null, false, '']
7.sort(compareFunction)
排序方法对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。
像大多数的排序函数一样,Array.prototype.sort(FN(A,B))接受一个回调函数用于比较a,b的大小,而且为以下三种情况之一:
- 如果a在b之前,则返回值<0
- 如果a和b都等效,则返回值=== 0
- 如果a在b之后,则返回值> 0
[9,80,3,10,5,6].sort()
// <- [10, 3, 5, 6, 80, 9][9,80,3,10,5,6].sort(function (a, b) {return a - b
})
// <- [3, 5, 6, 9, 10, 80]
8.reduce(),reduceRight()
Reduce函数一开始很难理解,这些函数会循环数组,从左向右(.reduce)或从右向左(.reduceRight),每次函数执行时会接受之前的部分结果,最终返回值是单一聚合的值。
两个方法具有相同的语法:
reduce(callback(previousValue, currentValue, index, array), initialValue)
previousValue是上次变量函数执行的返回值,或者第一次执行时的初始值; currentValue是当前值; index是当前值位置; array是执行reduce方法分解的引用; initialValue是初始值;
.reduce方法的一个典型应用场景是多个成员求和:
Array.prototype.sum = function () {return this.reduce(function (partial, value) {return partial + value}, 0)
};[3,4,5,6,10].sum()
// <- 28
9.slice()
slice()方法用于提取目标片段的一部分,返回一个新副本,原先的位置不变。
arr.slice(start, end)
它的第一个参数为起始位置(从0开始,会包括在返回的新细分之中),第二个参数为终止位置(但该位置的元素本身不包括内部)。如果省略第二一个参数,则一直返回到原始副本的最后一个成员。
与concat()类似,slice()如果没有任何参数则返回原始数组的浅表副本。Array.prototype.slice可以用作将类的对象转换成真正的数组。
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// <- ['a', 'b']
concat做不到,它会返回一个包含目标对象的层叠。
Array.prototype.concat.call({ 0: 'a', 1: 'b', length: 2 })
// <- [{ 0: 'a', 1: 'b', length: 2 }]
10.splice()
.splice是我最喜欢的数组原始数组方法,它允许您在一次性在同一个位置删除,插入元素,注意:这个函数会改变原数组。
var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
var spliced = source.splice(3, 4, 4, 5, 6, 7)console.log(source)
// <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]spliced
// <- [8, 8, 8, 8]
你可能注意到了,它会返回被删除的元素,这个常用于循环被删除的元素,你之前可能忘记了。
var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
var spliced = source.splice(9)spliced.forEach(function (value) {console.log('removed', value)
})
// <- removed 10
// <- removed 11
// <- removed 12
// <- removed 13console.log(source)
// <- [1, 2, 3, 8, 8, 8, 8, 8, 9]
11.indexOf(),lastIndexOf()
indexOf方法返回给定元素在多个中第一次出现的位置,如果没有出现则返回-1。
var a = { foo: 'bar' }
var b = [a, 2]console.log(b.indexOf(1))
// <- -1console.log(b.indexOf({ foo: 'bar' }))
// <- -1console.log(b.indexOf(a))
// <- 0console.log(b.indexOf(a, 1))
// <- -1b.indexOf(2, 1)
// <- 1
lastIndexOf方法返回给定元素在多个中最后一次出现的位置,如果没有出现则返回-1。
注意,这两个方法不能用来搜索NaN的位置,即无法确定该成员是否包含NaN。
这是因为这两个方法内部,使用严格的内部运算符(===)进行比较,而NaN是唯一一个不等于自身的值。
12.在操作符中
在用于查找关键中,索引速度则是查找值。当然速度快于indexOf。
var a = [1, 2, 5]1 in a
// <- true, but because of the 2!5 in a
// <- false
var a = [3, 7, 6]1 in a === !!a[1]
// <- true
在操作符跟把相应位置的值转换为布尔值类似。表达式常用于将一个值取反然后再取反,这是一种高效的将真值转为布尔值的方式。
13.reverse()
注意,该方法将更改原始数组。
var a = ['a', 'b', 'c'];a.reverse() // ["c", "b", "a"]a // ["c", "b", "a"]
JavaScript中原生Array数组方法详解相关推荐
- c++ 数组截取_【学习教程】JavaScript中原生Array数组方法详解
来源 | http://www.fly63.com/article/detial/9692 JS中,数组可以通过阵列构造函数或[]字面量的方式创建.数组是一个特殊的对象,继承自对象原型,但用typeo ...
- php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
- JavaScript中this关键字使用方法详解
在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScrip ...
- php中get和set区别,javascript中set与get方法详解
uva1588kickdown 题目要求简述:给定长度分别为n1,n2(n1,n2<=100)且每列的高度只为1或者2的长条.需要将他们放入一个高度为3的容器,问能够容纳它们的最短容器长度. 思 ...
- JavaScript中split()方法详解
欢迎访问我的个人博客 http://xiaolongwu.cn/ split()方法在js处理字符串是很常见,也是很重要的一种方法必须熟练掌握 split() 方法用于把一个字符串分割成字符串数组. ...
- android json mysql_Android通过json向MySQL中读写数据的方法详解【读取篇】
本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先 要定义几个解析json的方法parseJsonMulti,代码如下: private vo ...
- java中迭代器要导包吗_java 中迭代器的使用方法详解
java 中迭代器的使用方法详解 前言: 迭代器模式将一个集合给封装起来,主要是为用户提供了一种遍历其内部元素的方式.迭代器模式有两个优点:①提供给用户一个遍历的方式,而没有暴露其内部实现细节:②把元 ...
- 无刷新跳转—关于history中pushState和replaceState方法详解
〝 古人学问遗无力,少壮功夫老始成 〞 **关于history中pushState和replaceState方法详解,**常码字不易,出精品更难,没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫 ...
- webconfig的解决方案怎么添加_解决在Web.config或App.config中添加自定义配置的方法详解...
文档从网络中收集,已重新整理排版 .word 版本可编辑 . 欢迎下载支持 . 1 word 版本可编辑 . 欢迎下载支持 . 解决在 Web.config 或 App.config 中添 加自定义配 ...
最新文章
- 9patch的用法,简单两句就会用了。
- 近世代数--整环上的唯一分解问题--唯一分解整环中元素的标准分解式
- React 学习第二天 2018-07-21
- python列表间隔合并_Python使用zip合并相邻列表项的方法示例
- jQuery 购物车
- mysql慢查询工具
- 超越Android:探索Kotlin的应用领域
- powerquery加载pdf_PowerQuery技巧之自学教程
- Dijkstra求最短路 II
- ado 阿里云 mysql_ADO 操作数据库(一)--Ado简介
- mysql 当前用户连接数,查看mysql当前连接数的方法详解
- 新上手的Mac怎么开始盘?
- 推动数据开放共享,释放数字经济创新活力
- python梦幻西游辅助_GitHub - fanxueqian/mhxy_fz: 一个基于计算机视觉开发的梦幻西游辅助脚本...
- java 汇率换算_[java] 汇率换算器实现(2)
- 汇编条件判断 eq neq
- linux美元符号含义
- 制作一个电影分享网站的微信公众号
- 822D My pretty girl Noora
- 自建视频流媒体服务器需要满足哪些条件?
热门文章
- Android 打造炫目的圆形菜单 秒秒钟高仿建行圆形菜单
- 科研写作——常见句式(二)
- wps 2019个人版 创建布尔运算
- [USACO10OCT]汽水机Soda Machine
- Eclipse基础知识
- 体积小性能强悍能吃鸡的电脑主机 NUC8I7HVK
- 地震勘探原理(二)之时距曲线
- 风火轮树莓派3卡片电脑介绍
- putty 显示鼠标
- module ‘win32com.gen_py.00020813-0000-0000-C000-000000000046x0x1x9‘ has no attribute ‘CLSIDToClassM