您的位置:首页 > Web前端 > JavaScript

JavaScript Array对象方法梳理

2017-06-15 17:50 190 查看

Array方法系统学习

这篇博文仅仅是自己想系统的把数组的方法再过一遍,过了很长时间,有一些方法又不是很经常用就容易忘记,就用写下来的形式加深自己的印象。会持续更新。

其中的内容引用了http://louiszhai.github.io/2017/04/28/array/https://www.w3cplus.com/javascript/array-part-3.html 的一些内容,也有一些自己的简单理解。如果想看详细的关于数组的知识,还是直接去看原文。

另外有什么不对的地方希望大神指出,不喜勿喷~~

concat() 方法

用于连接两个或多个数组
该方法不会改变先有的数组,而仅仅返回连接数组的一个副本。
语法:arrayObject.concat(array1,array2,array3) 里面可以是任意多个数组,或者是单独的项。
若参数为数组时,concat方法操作的是数组里的元素,而不是数组本身
总结:
1. conat()方法是为数不多的不改变数组本身的方法,当然里面的参数也可以为空,那就相当于是复制这个数组。


在项目中有这样的需求:改变一个数组的顺序(倒序)然后展示,但是又不能改变原数组顺序。只使用reverse()方法显然不可行。

var recognitionData1 = recognitionData.concat().reverse();
// recognitionData是原始数组,不能改变,所以加上concat()方法,这样就不会改变原始数组。


join()方法

join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分割的。
语法:


arrayObject.join(separator)


参数separator可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
返回值:返回一个字符串,该字符串是通过把arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入separator 字符而生成的。
总结:根据网上查找的资料显示,在进行大量的字符串拼接时,join() 方法要比 'str' + 'str' 快,而且内存占用少,内存空间利用率高。但是在一般的项目中,大量拼接字符串的需求并不多。所以还是根据实际情况而定。
字符串相关知识拓展:JavaScript 里,字符串是不可变的。即使是 'str' + 'str' 这样的操作,也是新创建了一个字符串。其实对字符串的任何操作都是重新创建了一个新的字符串。


pop() 方法

pop() 方法用于删除并返回数组的最后一个元素,把数组的长度减1,并且返回它删除的元素的值。如果数组已经为空了,则 pop() 不改变数组,并返回 undefined 。
语法:arrayObject.pop()


push() 方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
语法:arrayObject.push(newElement1, newElement2, ....,newElementx)


var array = [1, 2, 3];
var length = array.push(4)
// array [1,2,3,4]
// length === 4


shift() 方法

shift()方法用于把数组的第一个元素从其中删除,并返回删除的第一个元素的值。
如果是空数组,shift() 方法将不进行任何操作,返回undefined。
语法:arrayObject.shift()


unshift() 方法

unshift() 方法是向数组的开头添加一个或多个元素,并且返回新的长度。
unshift() 方法在IE里面无法正常工作。但是这个具体到哪个版本没有验证。

语法:arrayObject.unshift(newElement1, newElement, .....);


关于内存的堆栈和队列操作

1.栈的概念
栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最新添加的项最早被移除。而栈中项的插入(叫做推入)和移除(弹出),发生在同一个地方,就是栈的顶部。当栈中没有数据的时候,称为空栈。
这种数据结构可以简单的理解为一个子弹夹!

ECMAScript为数组提供了push() 和 pop() 方法,以便实现类似栈的行为。
2.队列的概念
队列数据结构的访问规则是FIFO(First-In-First-Out).队列在队列的末端添加项,在队列的前端移除项。
队列就像羽毛球筒,两头通着的羽毛球筒。
ECMAScript为数组专门提供了 shift() 和 unshift() 方法,以便实现类似队列的行为。由于 push() 是向数组末端添加数组项的方法,因此要模拟队列只需一个从数组前端取得数组项的方法。实现这一操作的数组方法就是 shift() ,它能够移除数组中的第一个项并返回该项,同时将数组长度减1。著作权归作者所有。

3.push() 和 unshift()方法的性能测试
Array的push()与unshift()方法都能给当前数组添加元素,不同的是,push()是在末尾添加,而unshift()则是在开头添加,从原理就可以知道,unshift()的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。unshift() 方法要比 push() 方法慢100倍左右。平时还是要慎用unshift(),特别是对大数组。那如果一定要达到unshift()的效果,可以借助于Array的reverse()方法,Array的reverse()的方法能够把一个数组反转。先把要放进数组的元素用push()添加,再执行一次reverse(),就达到了unshift()的效果。  而且reverse()方法的效率特别高。所以不用担心多一步操作会比直接用unshift() 更慢。


slice() 方法

slice(‘star’,’end’) 方法可以从已有的数组中返回从开始到结束(不包括结束)的元素。

语法:

arrayObject.slice(start,end)


start参数是必须的,规定了从arrayObject的哪一项开始选取,如果是-1那就从数组的最后一项开始,如果是-2就从数组的倒数第二项开始,以此类推。
end参数相同,但是end参数可省略。当end参数省略时,那么slice() 方法会选取从start到数组结尾的所有元素。
它返回一个新的数组,包含从start到end(再次注意,不包括end)的元素,而且它不会改变原数组。

sort() 方法

sort(function) 方法用于对数组的元素进行排序。

语法:

arrayObject.sort(sortByFunction)


sortByFunction参数可选,但如果有,必须是一个函数,这个函数接收两个参数,sort()方法会自动把数组中的前一项和后一项作为这个函数的参数然后调用该函数,函数返回值将自动隐式转换为三种值:

- sortByFunction(a, b) < 0 ,那么a将排到b前面;

- sortByFunction(a, b) = 0 ,那么a b 位置不变;

- sortByFunction(a, b) > 0 ,那么b将排到a前面;

(注意:因为各浏览器实现 sort() 方法的算法不一致,所以尽量返回 -1, 0,1 这三个值。)

如果调用该方法的时候,没有使用参数,那么数组元素将按照各自转换为字符串的 Unicode(万国码)顺序进行排序,例如”Boy”将排到”apple”之前(因为在Unicode中大学的B字母排在小写a字母的前面)。

如果使用了参数,那么数组将按照调用该函数的返回值来排序(如上)。

总结:

个人感觉 sort() 方法在数组方法中算比较难理解的一个了,就是因为这个参数。项目中的需求比较多的是一个数组,里面的元素是包含了许多信息的json,例如

arr = [
{
key1:1,
key2:2
},
{
key1:2,
key2:5
}
]


给这样的数据按照key1的大小重新排序。

var arr = [
{
key1:1,
key2:2
},
{
key1:2,
key2:5
}
];
arr.sort(function(a,b) {
return a.key1 - b.key1
})
console.log(arr)
/*arr = [
{
key1:2,
key2:5
},
{
key1:1,
key2:2
}
];*/


当然他还能是更复杂的排序,那就看你怎么来设计这个作为参数的函数了!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息