Home > Web Front-end > JS Tutorial > body text

Common methods for JavaScript arrays_javascript skills

WBOY
Release: 2016-05-16 16:11:39
Original
1232 people have browsed it

Determine whether an object is an array: instanceof, Array.isArray()

For a web page or a global scope, you can use the instanceof operator.

if(value instanceof Array){ //Determine whether value is an array
 
}
The instanceof operator assumes that there is only one global execution environment. If the web page contains multiple frames, the new Array.isArray() method of ECMAScript5 is used.

if(Array.isArray(value)){//Determine whether value is an array

}
The browsers supported by the Array.isArray() method include IE9, Firefor 4, Safari5, Opera 10.5, and Chrome.

If you want to check an array in a browser that does not implement this method, use:

if(Object.prototype.toString.call(value)=="[object Array]"){
}

Convert array to string: toLocaleString(), toString(), valueOf(), join()

Copy code The code is as follows:

var test=['a','b','c'];
alert(test.toString());//a,b,c
alert(test.toLocaleString());//a,b,c
alert(test.valueOf());//a,b,c
alert(test);//a,b,c call toString() method by default
alert(test.join(','));//a,b,c
alert(test.join('|'));//a|b|c

Methods for adding and removing array elements: push(), pop(), unshift(), shift()

The push() method can accept any number of parameters, add them to the end of the array one by one, and return the modified array length.

The pop() method removes the last item from the end of the array and returns the removed item.

The unshift() method adds any number of parameters to the front of the array and returns the new array length.

The shift() method removes the first item in the array and returns the removed item.

Copy code The code is as follows:

var test=[];
var count = test.push('a','b');//Add
one by one from the end of the array count =test.push('c');
alert(count);//3
alert(test);//
var item = test.pop();
alert(item);//c
alert(test.length);//2

Sort methods: reverse() and sort()

The reverse() method will reverse the order of the array terms and operate on the array itself.

The sort() method sorts the array items in ascending order by default and operates on the array itself.

Copy code The code is as follows:

var test=[1,2,3,4,5];
test.reverse();
alert(test);//5,4,3,2,1
var test2=[0,1,5,10,15];
test2.sort();
alert(test2);//0,1,10,15,5 The sort() method will call the toString() method of each array item and compare the strings to determine the sorting. So the sorting here is string sorting

The sort() method can also pass in a comparison function.

The comparison function returns a negative number if the first parameter should be before the second, 0 if the two parameters are equal, and a positive number if the first parameter should be after the second.

Copy code The code is as follows:

function compare(value1,value2){
If(value1          return -1;
}else if(value1>value2){
Return 1;
}else{
           return 0;
}

var test=[0,1,5,10,15];
test.sort(compare);
alert(test);//0,1,5,10,15

Operation methods: concat(), slice(), splice()

The concat() method is used to concatenate two or more arrays. This method does not modify the existing array, but simply returns a copy of the concatenated array. Return a new array.

Copy code The code is as follows:

var a = [1,2,3];
alert(a.concat(4,5));//1,2,3,4,5
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
alert(arr.concat(arr2));
//George,John,Thomas,James,Adrew,Martin
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
alert(arr.concat(arr2,arr3))
//George,John,Thomas,James,Adrew,Martin,William,Franklin

The slice() method returns selected elements from an existing array. Returns a new array containing the elements in arrayObject from start to end (exclusive).

Copy code The code is as follows:

var test =['a','b','c','d','e'];
var arr1=test.slice(1);
var arr2=test.slice(1,4);
alert(arr1);//b,c,d,e
alert(arr2);//b,c,d

The splice() method adds/removes items to/from an array and returns the removed item. Operate on the array itself.

The first parameter: the starting position, the second parameter: the number of interceptions, the third parameter: the new element to be appended.

Copy code The code is as follows:

//Delete
var test=['a','b','c'];
var removed=test.splice(0,1)//Delete the first item
alert(test);//b,c
alert(removed);//a returns the deleted item
//Insert
var test2=['a','b','c'];
var removed2=test2.splice(1,0,'d','e')//Insert d,e from position 1
alert(test2);//a,d,e,b,c
alert(removed2)//Empty array
//Replace
var test3=['a','b','c'];
var removed3=test3.splice(1,1,'d','e')//Insert d,e from position 1
alert(test3);//a,d,e,c
alert(removed3)//b

Position methods: indexOf(), lastIndexOf()

ECMAScript5 provides methods to support browsers: IE9, Firefox 2, Safari 3, Opera 9.5, Chrome

The indexOf() method returns the position of the first occurrence of a specified string value in the string.

lastIndexOf() method can return the last occurrence position of a specified string value, searching from back to front at the specified position in a string.

When there is one parameter: it represents the value to be found, and the index position is returned (starting from 0). When there are two parameters: the first parameter represents the starting position, and the second parameter represents the value to be found.

Copy code The code is as follows:

var numbers=[1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));//3
alert(numbers.lastIndexOf(4));//5

alert(numbers.IndexOf(4,4));//5
alert(numbers.lastIndexOf(4,4));//3

Iteration methods: every(), filter(), forEach(), map(), some()

ECMAScript5 provides methods to support browsers: IE9, Firefox 2, Safari 3, Opera 9.5, Chrome

every(): Run the given function on each item in the array, and return true if the function returns true for each item.

filter(): Runs the given function on each item in the array and returns an array of items that the function will return true.

forEach(): Runs the given function on each item in the array. This method has no return value.

map(): Runs the given function on each item in the array and returns an array composed of the results of each function call.

some(): Runs the given function on each item in the array and returns true if the function returns true for any item.

None of the above functions will modify the values ​​contained in the array.

Copy code The code is as follows:

var numbers=[1,2,3,4,5,4,3,2,1];
//every()
var everyResult=numbers.every(function(item,index,array){
Return (item>2);
})
alert(everyResult);//false
//some()
var someResult=numbers.some(function(item,index,array){
Return (item>2);
})
alert(someResult);//true
//filter()
var filterResult=numbers.filter(function(item,index,array){
Return (item>2);
})
alert(filterResult);//[3,4,5,4,3]

//map()
var mapResult=numbers.map(function(item,index,array){
Return (item*2);
})
alert(mapResult);//[2,4,6,8,10,8,6,4,2]

//forEach()
numbers.forEach(function(item,index,array){
//Perform operation without return value
})

Merge methods: reduce(), reduceRight()

ECMAScript5 provides methods to support browsers: IE9, Firefox 3, Safari 4, Opera 10.5, Chrome

Both methods iterate over all items of the array and then construct a final returned value. The reduce() method starts from the first item in the array, and the reduceRight() method starts from the end of the array.

Copy code The code is as follows:

var values=[1,2,3,4,5];
var sum=value.reduce(function(prev,cur,index,array){
           prev cur;
});
alert(sum);//15

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template