JavaScript 中数组的一些常用方法

Posted jyfeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 中数组的一些常用方法相关的知识,希望对你有一定的参考价值。

  在javascript 中,除了Object 之外,Array 类型应该是最常用的类型了。它的每一项可以保存任何类型的数据,也就是说,可以用数组的第一个位置来保存字符串、第二个位置来保存数值、第三个位置来保存一个对象等。  

  JavaScript 中数组的一些常用方法

  1,有一些方法在调用的时候会改变调用它们的对象自身的值,如:push、pop、unshift、shift、sort、splice、reverse等, 下面说一下各个方法的功能。

  push() 方法是在数组的末尾添加一个或多个元素,并放回新数组的长度。   

let arr=["red","green","blue"];
let len=arr.push("yellow");
console.log(arr);//["red","green","blue","yellow"]
console.log(len);//4

  

  pop() 方法是在数组的末尾删除一个元素,并且返回这个元素。

let arr=["red","green","blue","yellow"];
let elem=arr.pop();
console.log(arr);//["red", "green", "blue"]
console.log(elem);//"yellow"

  

  unshift() 方法是在数组的开始处添加一个或多个元素,并返回新数组的长度

let arr=["red","green","blue"];
let len=arr.unshift("yellow","white");
console.log(arr);//["yellow","white","red","green","blue"]
console.log(len);//5

 

  shift() 方法是删除数组的第一个元素,并返回该元素

let arr=["red","green","blue"];
let elem=arr.shift();
console.log(arr);//["green","blue"] 
console.log(elem);//"red"

 

  sort() 方法是对数组中的元素进行排序,并返回当前数组。默认排序顺序是根据字符串的Unicode 码点

let arr=["red","green","blue"];
let result=arr.sort();
console.log(arr);//["blue","green","blue"]
console.log(result);//["blue","green","blue"]

let arrNum=[10,5,20,7,1];
let resultNum=arrNum.sort();//这里比较时数字会先被转换为字符串
console.log(arrNum);//[1, 10, 20, 5, 7]
console.log(resultNum);//[1, 10, 20, 5, 7]

  sort() 方法有一个参数,是可以按指定规则进行排序的函数。如果指明了比较函数,那么数组会按照该比较函数的返回值进行排序。如compareFunction( a , b ),即a 和 b 是两个将要比较的元素,返回值如下。

  1,如果 a < b ,则返回值小于 0 ,即 a 排在 b 的前面

  2,如果 a = b ,则返回值等于 0 。

  3,如果 a > b ,则返回值大于 0 。即 a 排在 b 的后面

  如果比较的数组全是数字,可以比较函数可以简单的以 a - b ,如下的数组将会以升序排列

let arrNum=[10,5,20,7,1];
let result=arrNum.sort(compareNumbers);
function compareNumbers(a,b){
    return a-b;
}
console.log(arrNum);//[1, 5, 7, 10, 20]
console.log(result);//[1, 5, 7, 10, 20]

   

  splice() 方法通过删除现有元素和添加新元素改变数组的值。返回值是被删除元素组成的数组。如果只删除了一个元素,则返回只包含这个元素的数组。如果没有删除元素,则返回空数组。该方法有三个参数,第1个参数表示添加/删除的元素的位置。第2个参数表示要删除的元素的个数,如果为0,则表示不删除元素。第3个参数表示要添加的元素的内容。第2个参数和第3个参数是可选的,如果省略表示删除从第1个参数到数组末尾的元素。

let arr=[1,2,3,4,5,6,7];
let result=arr.splice(3);
console.log(arr);//[1, 2, 3]
console.log(result);//[4, 5, 6, 7]
let result=arr.splice(3,1); console.log(arr);//[1, 2, 3, 5, 6, 7] console.log(result);//[4]
let result=arr.splice(3,1,8,9); console.log(arr);//[1, 2, 3, 8, 9, 5, 6, 7] console.log(result);//[4]

let result=arr.splice(-3,1,8,9);
console.log(arr);//[1, 2, 3, 4, 8, 9, 6, 7]
console.log(result);//[5]

 

  reverse() 方法将数组的元素位置进行颠倒,即原先的第一个元素变为最后一个,原先的最后一个元素变为第一个

let arr=["red","green","blue"];
let result=arr.reverse();
console.log(arr);//["blue", "green", "red"]
console.log(result);//["blue", "green", "red"]

 

  2,下面的方法绝对不会改变调用它们的对象的值,只会返回一个新的数组或者一个其它的期望值。如:concat、 join、slice、indexOf、lastIndexOf、toString

  concat() 方法返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。此方法不会改变现有的数组而是返回一个新的数组 

let arr=["red","green","blue"];
let conArr=["yellow","white"];
let result=arr.concat(conArr);
console.log(arr);//["red", "green", "blue"]
console.log(result);//["red", "green", "blue", "yellow", "white"]

 

  join() 方法将数组元素连接到一个字符串中

let arr=["red","green","blue"];
let result=arr.join();//可以指定一个分隔符 默认为 ,
console.log(arr);//["red", "green", "blue"]
console.log(result);//red,green,blue
let resultSep=arr.join("#");//指定分隔符为 #
console.log(resultSep);//red#green#blue

 

  slice() 方法截取当前数组中的一部分元素组成一个新的数组。(截取的部分包括开始不包括结束) 

let arr=[1,2,3,4,5,6,7];
let sliceArr=arr.slice(2,5);//数字代表索引,从0开始
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]
console.log(sliceArr);//[3, 4, 5]
            
//参数是可选的,如果不写begin,从0开始。不写end,会截取到数组末尾。
//如果 begin 为负数,则表示从数组的倒数第几个元素开始截取,slice(-2)表示截取数组中倒数第2个元素到最后一个元素(包含最后一个元素)。
//如果 end 为负数,则表示在数组中倒数第几个元素结束截取,slice(-2,-1)表示截取了倒数第2个元素到倒数第1个元素(不包含最后一个元素)
let sliceArr=arr.slice(-3,-1);
console.log(sliceArr);
//[5, 6]

 

  indexOf() 方法返回第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1;

let arr=["red","green","blue","white","green"];
let result=arr.indexOf("blue");
console.log(result);//2
let result=arr.indexOf("yellow");
console.log(result);//-1
//indexOf() 方法有可选的第二个参数,表示从何处开始查找。如果该索引值大于或等于数组长度,则表示不在数组里查找,返回 -1。
如果参数中提供的是一个负值,则将其作为数组长度的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第2个元素开始查找,以此类推。
注意:如果参数中提供的是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查找数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。
console.log(arr.indexOf("blue",10));//-1 console.log(arr.indexOf("green",2));//4 console.log(arr.indexOf("blue",-2));//-1 console.log(arr.indexOf("red",-10));//0

 

  lastIndexOf() 方法从数组的最后一位元素开始查找与指定元素相等的元素的索引,如果找不到则返回 -1 。

let arr=["red","green","blue","white","green"];
console.log(arr.lastIndexOf("green"));//4
//第2个参数为查找位置。默认为数组的长度减 1,即整个数组都将被查找。
如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将视为数组末尾向前的偏移。
即使该值为负,数组仍然会从末尾向前查找。如果该值为负时,绝对值大于数组长度,则返回 -1,即数组不会被查找。
console.log(arr.lastIndexOf("green",1));//1 console.log(arr.lastIndexOf("white",-2));//3

 

  toString() 方法返回一个有所有数组元素组合而成的字符串

let arr=[1,2,3,4,5];
let result=arr.toString();
console.log(arr);//[1, 2, 3, 4, 5]
console.log(result);//1,2,3,4,5

 

另外还有一些迭代 方法和继承的方法在这里就不说了。(由于水平和能力有限,如有错误还请多多指正)

 




















以上是关于JavaScript 中数组的一些常用方法的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

几个关于js数组方法reduce的经典片段

JavaScript 中数组的一些常用方法

36个工作中常用的JavaScript函数片段

JavaScript的一些基础语法和常用方法(附代码)

18个常用的JavaScript片段分享