AntChen Front-end Dev Engineer

Javascript数组


join()

原理:把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

语法

arrayObject.join(separator)
// separator可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
var arr = ["hello", "haha"]
console.log(arr.join(''))
// "hellohaha"

concat()

原理:将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

语法

arrayObject.concat(arr1, arr2, ...arrN)
var a = [1,2,3];
var b = a.concat(4,5)
console.log(b)
console.log(b.join(''))
// [1,2,3,4,5]
// "12345"

pop()

原理:删除并返回数组的最后一个元素

语法:

arrayObject.pop()
var a = [1,2,3]
var b = a.pop()
console.log(b)
// 3

shift()

原理:删除并返回数组的第一个元素

语法:

arrayObject.shift()
var a = [1, 2, 3]
console.log(a.shift())
// 1

push()

原理:向数组的末尾添加一个或更多元素,并返回新的长度。新数组还是以前的数组名称

语法:

arrayObject.push(newelement1,newelement2,....,newelementX)
var a = [1, 2, 3]
var b = a.push(4, 5, 6)
console.log(a)
// [1,2,3,4,5,6]

var a = [1, 2, 3]
var b = a.push(4, 5, 6)
console.log(b)
// 6

reverse()

原理:颠倒数组中元素的顺序。

语法:

arrayObject.reverse()
var a = [1, 2, 3]
console.log(a.reverse())
// 3,2,1

var a = [1, 2, 3]
console.log(a.reverse().join(''))
// "321"

/* 字符串方法split("") 把每个字符串切割成数组 */

slice()

原理:从某个已有的数组返回选定的元素

语法:

arrayObject.slice(start,end)
// start  必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

// end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

说明:

请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

提示和注释:

注释:您可使用负值从数组的尾部选取元素。

注释:如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

var a = [1, 2, 3]
console.log(a.slice(1))
// [2, 3]

splice()

原理:向/从数组中添加/删除项目,然后返回被删除的项目。注释:该方法会改变原始数组。

语法:

arrayObject.splice(index, howmany, item1,.....,itemX)
// index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

// howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。

// item1, ..., itemX 可选。向数组添加的新项目。
var a = ['a', 'b', 'c']
a.splice(1, 1, 'd')
console.log(a)
// ['a', 'd', 'c']

sort()

原理:用于对数组的元素进行排序。

语法:

arrayObject.sort(sortby)

// sortby 可选。规定排序顺序。必须是函数。

注意:

对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

var a = ['d', 'c', 'e', 'l', 'g']
console.log(a.sort())
// 从小到大排序

var a = ['10', '3', '1', '7', '19']

function sortNum(a, b){
    return a - b
}
console.log(a.sort(sortNum))

// 从大到小排序
var a = ['10', '3', '1', '7', '19']

function sortNum(a, b){
    return b - a
}
console.log(a.sort(sortNum))

toString()

原理:可把数组转换为字符串,并返回结果。

语法:

arrayObject.toString()

注释:数组中的元素之间用逗号分隔。

var a = ['a', 'b', 'c']
console.log(a.toString())
// "a,b,c"

var a = ['a', 'b', 'c']
console.log(a.toString().replace(/,/g, ''))
// "abc"

unshift()

原理:向数组的开头添加一个或更多元素,并返回新的长度。

语法:

arrayObject.unshift(newelement1,newelement2,....,newelementX)
var a = ['b', 'c', 'd']
a.unshift('a')
console.log(a)
// Array [ "a", "b", "c", "d" ]

valueOf()

原理:返回数组对象的原始值

语法:

arrayObject.valueOf()

indexOf()

原理:String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置

语法:

arrObj.indexOf(val)
// val 检索字符串
var arr = ['10', '20', '5']
console.log(arr.indexOf('10'))
// 0
// 0代表找到一个,索引值
// -1代表没找到

map()

原理:实现对数组的每一项运行给定函数,返回每次函数调用的结果组成的数组

var a = [1, 2, 3];
console.log(a.map(function (item, index, arr) {
  return item;
}));
// Array [ 1, 2, 3 ]

// 还可以接受第二个参数,表示回调函数执行时this所指向的对象
var arr = ['a', 'b', 'c'];
console.log([1, 2].map(function (item, index, arr) {
  return this[item];
}, arr)); //['b','c']

filter()

原理:对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。该方法常用于查询符合条件的所有数组项

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
});// [4, 5]

// 同map一样还可以接受第二个参数,指定测试函数所在的上下文对象(this对象)
var Obj = function () {
  this.MAX = 3;
};
[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > this.MAX);
}, new Obj());// [4, 5]

可以改变原数组的方法总共有7种:包括unshift()、shift()、push()、pop()这4种栈和队列方法,reverse()和sort()这2种数组排列方法,数组删改方法splice()

一点总结:

  • pop,push,reverse,shift,sort,splice,unshift 会改变原数组
  • join,concat,indexOf,lastIndexOf,slice,toString 不会改变原数组
  • map,filter,some,every,reduce,forEach这些迭代方法不会改变原数组

几个注意点:

  • shift,pop会返回那个被删除的元素
  • splice 会返回被删除元素组成的数组,或者为空数组
  • push 会返回新数组长度
  • some 在有true的时候停止
  • every 在有false的时候停止 上述的迭代方法可以在最后追加一个参数thisArg,它是执行 callback 时的 this 值。

Comments