欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript数组常用方法学习介绍

程序员文章站 2022-06-29 08:25:58
数组中的常用方法总结: 能改变原数组的方法有:push,  pop,  shift,  unshift,  sort,  reverse, ...

数组中的常用方法总结:

能改变原数组的方法有:push,  pop,  shift,  unshift,  sort,  reverse,   splice

不能改变原数组的方法有:concat,  join,  split,  tostring,  slice

改变原数组方法:

1.push

作用:像数组的末尾添加一项或多项元素

参数:要添加的项

返回值:新数组的长度

是否改变原数组:改变

var ary = ['a','b','c'];

var res = ary.push('d','e');

console.log(ary);  // ["a", "b", "c", "d", "e"]

console.log(res);  // 5

2.pop

作用:删除数组的最后一项

参数:无

返回值:被删除的项

是否改变原数组:改变

var ary = ['1','2','3'];

var res = ary.pop();

console.log(ary);  // ['1','2']

console.log(res);  // 3

3.shift

作用:删除数组的首项

参数:无

返回值:被删除的项

是否改变原数组:改变

var ary = ['a','b','c'];

var res = ary.shift();

console.log(ary);  // ['b','c']

console.log(res);  // a

4.unshift

作用:向数组的开头添加一或多项

参数:要添加的项,多项用','隔开

返回值:新数组的长度

是否改变原数组:改变

var ary = ['a','b','c'];

var res = ary.unshift('d','e');

console.log(ary);  // ["d", "e", "a", "b", "c"]

console.log(res);  // 5

5.splice

作用:增删改

参数:ary.splice(index,howmany,item1,.....,itemx)

返回值:删除的项

是否改变原数组:改变

增加的功能

ary.splice(n,0,x,......,y);

从数组的索引n开始,删除0项,在索引n的后边增加新的项,第三个参数开始都是用来填补删除的项目位置的

var ary = [1,2,3,4,5];

var res = ary.splice(1,0,6,7);

console.log(ary);  // [1, 6, 7, 2, 3, 4, 5]

console.log(res);  // [] 删除0项,返回一个空数组

删除的功能

ary.splice(n,m);

从数组的索引n开始,删除m项

var ary = [1,2,3,4,5];

var res = ary.splice(1,2);

console.log(ary);  // [1,4,5]

console.log(res);  // [2,3]

修改的功能

ary.splice(n,m,x);

从数组的索引n开始,删除m项,把x添加到索引n前边

var ary = [1,2,3,4,5];

var res = ary.splice(1,2,6,7);

console.log(ary);  // [1, 6, 7, 4, 5]

console.log(res);  // [2,3]

//模拟 push(尾部添加)  和push二者返回值不同

ary.splice(ary.length,0,新的项) //因为splice是在索引前添加,所以第一个参数为ary.length

//模拟 pop(尾部删除)

ary.splice(arr.length-1,1);

//模拟 shift(首项删除)

ary.splice(0,1)

//模拟 unshift(首项添加) 和unshilft二者返回值不同

ary.splice(0,0,新的项)

此外:

ary.splice(n)  // 表示从索引n开始删除到末尾

ary.splice(0)  // 删除整个数组 有克隆数组的效果,利用返回值

6.sort

作用:对数组的元素进行排序 

参数:可选(函数) 规定排序规则 默认排序顺序为按字母升序

返回值:排好序的原数组

是否改变原数组:改变

var ary = [1,5,7,9,12,24,56,87,92];

var ary2 = [1,5,7,9,12,24,56,87,92];

var ary3 = [1,5,7,9,12,24,56,87,92];

var res = ary.sort();

var res2 = ary2.sort(function(a,b){

    return a-b;   //升序

})

var res3 = ary3.sort(function(a,b){

    return b-a;   //降序

})

// sort的参数函数总的形参a,b就是数组排序时候的相邻比较的两项

console.log(res);  // [1, 12, 24, 5, 56, 7, 87, 9, 92]

console.log(res2); // [1, 5, 7, 9, 12, 24, 56, 87, 92]

console.log(res3); // [92, 87, 56, 24, 12, 9, 7, 5, 1]

扩展:

a-b的值:1.返回值小于0,在排序后的数组中 a 应该出现在 b 之前

                2.返回值小于0,a,b在数组中顺序不变

                3.返回值大于0,在排序后的数组中 a 应该出现在 b 之后

7.reverse

作用:倒序数组

参数:无

返回值:倒序后的原数组

是否改变原数组:改变

var ary = [1,2,3,4,5];

var res = ary.reverse();

console.log(ary);  // [5, 4, 3, 2, 1]

console.log(res);  // [5, 4, 3, 2, 1]

不改变原数组方法:

1.concat

作用:用于连接两个或多个数组

参数:参数可以是具体的值,也可以是数组对象。可以是任意多个

返回值:返回连接后的新数组

是否改变原数组:不改变

var ary = [1,2,3,4,5];

var res = ary.concat(6,7);

var res2 = ary.concat(6,[7,8]);

var res3 = ary.concat(6,[7,[8,9]]);

var res4 = ary.concat();

console.log(ary);  // [1, 2, 3, 4, 5]

console.log(res);  // [1, 2, 3, 4, 5, 6, 7]

console.log(res2);  //[1, 2, 3, 4, 5, 6, 7, 8]

console.log(res3)  // [1, 2, 3, 4, 5, 6, 7, [8,9]]  concat() 如果操作的参数是数组,那么添加的是数组中的元素,而不是数组。 如果是二维(或以上)数组,concat只能'拆开'一层数组

console.log(res4) // [1, 2, 3, 4, 5]  如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的

2.join

作用:用指定的分隔符将数组每一项拼接为字符串

参数:指定的分隔符,如果省略该参数,则使用逗号作为分隔符

返回值:拼接好的字符串

是否改变原数组:不改变

var ary = [1,2,3,4,5];

var res = ary.join('-');

console.log(ary);  // [1, 2, 3, 4, 5]

console.log(res);  // 1-2-3-4-5

3.slice

作用:截取数组(复制数组)

参数:array.slice(start, end)

返回值:返回一个新数组

是否改变原数组:不改变

var ary = [1,2,3,4,5];

var res = ary.slice(1,3);

var res2 = ary.slice(-3,-1)

console.log(ary);  // [1,2,3,4,5]

console.log(res);  // [2,3]

console.log(res2)  //[3,4] slice支持负参数,从最后一项开始算起,-1为最后一项,-2为倒数第二项

slice(n) //从索引n开始复制到最后一项

slice()、 slice(0)  //复制整个数组

4.split

作用:把一个字符串分割成字符串数组

参数:array.split(separator, howmany) //separator: 字符串或正则表达式, howmany: 返回的数组最大长度

返回值:返回一个字符串数组

是否改变原数组:不改变

var str="how are you doing today?"

console.log(str.split(" "))

console.log(str.split(""))

console.log(str.split(" ",3))

结果为:

5.tostring

作用:把数组转化为字符串并返回结果

返回值:返回一个字符串

是否改变原数组:不改变

var arr = ['how','are','you'];

var str = arr.tostring();

console.log(str);     //how,are,you

console.log(typeof str);   //string

如果觉得好的话请点赞哦,或者扫描下边二维码打赏哦,谢谢