JavaScript Array Array Method Interpretation _ Basics

Source: Internet
Author: User
Tags prev shallow copy javascript array

Next is a "JavaScript array array Basics", which details all the methods of array.

The methods of all arrays are defined on Array.prototype, and the Array.prototype itself is an array.

Array.concat ()

Shallow copies the current array and attaches the received parameter to the end of the new array. The original array does not change.

Grammar

Array.concat (value1, value2, ..., Valuen)
parameter is an array or non-array value that needs to be merged

var arr1 = [1, 2, 3];
var obj = {animal: ' monkey '};
var arr2 = Arr1.concat ([4, 5, 6], obj, [7, 8, 9]);
arr1 [1, 2, 3]
//ARR2 [1, 2, 3, 4, 5, 6, {animal: ' monkey '}, 7, 8, 9]

obj.animal = ' Tiger ';
[1, 2, 3, 4, 5, 6, {animal: ' Tiger '}, 7, 8, 9]

You can combine an array or a non-array value, but be aware that if you include an object, the object still refers to the original object.

Array.join ()

Returns a string that separates all elements of an array by a delimiter, with the default delimiter as a comma.

Grammar

Array.join (Seperator)
parameter is a delimiter

var arr1 = [1, 2, 3];
var str = arr1.join (); 1,2,3
str = arr1.join (' # ');//1#2#3

When assembling a large number of string fragments, the join method is faster than the + element operator.

Using the new Array (3) will generate an empty array of length three, combining the join () method to implement repeating a segment string.

var str = new Array (3). Join ('-+ '); // -+-+

The number of repetitions is the length of the array minus one, because the string is a separator.

Since the array itself is an object and has the ToString () method, it can also be used to stitch the array into a string, except that the delimiter is only a comma.

var arr1 = [1, 2, 3];
Arr1.tostring (); 1,2,3

In fact, it will first call the ToString () method of each element.

Array.push ()

Appends one or more parameters to the end of the array, returning the length of the array. Change the array itself.

Grammar

Array.push (value1, value2, ..., Valuen);
Instance

var arr1 = [1, 2, 3];
var len = Arr1.push (4, 5);

Console.log (len); 5
Console.log (ARR1);//[1, 2, 3, 4, 5]

Another method can also implement inserting a value at the end of an array.

Arr1[arr1.length] = 6; [1, 2, 3, 4, 5, 6]  
Array.pop ()

Deletes the last item of the array and returns the deleted item. Change the array itself.

var arr1 = [1, 2, 3];
Arr.pop (); [1, 2] return 3

Returns undefined if the array is empty.

Array.unshift ()

Inserts one or more parameters into the array header, returning the length of the array. Change the array itself.

var arr1 = [1, 2, 3];
var len = Arr1.unshift (4, 5);

Console.log (len); 5
Console.log (ARR1);//[4, 5, 1, 2, 3]

Array.shift ()

Deletes the first item of the array and returns the deleted item. Change the array itself.

var arr1 = [1, 2, 3];
Arr.shift (); [2, 3] return 1

Returns undefined if the array is empty.

Array.Sort ()

This method is sorted according to the value returned by the ToString () method of each element, so the expected result is generally not obtained.

var arr1 = [1, 2, 3, n];
Arr1.sort (); [1, 14, 2, 24, 3]

But the sort () method can receive a comparison of our custom functions. The comparison function accepts two parameters, especially the sort () default is ascending, so if you want the first argument to precede the second argument, return a negative number, and the equality returns 0, which returns a positive number at the back.

var compare = function (A, b) {return
  a-b
}

var arr2 = [1, 2, 3, 5, 4];
Arr2.sort (Compare); [1, 2, 3, 4, 5, 12, 23]

The comparison string can be used in conjunction with the String.localecompare () method.

var arr3 = [' f ', ' e ', ' f ', ' e '];
Arr3.sort (function (A, b) {return
  a.localecompare (b);
});
[' E ', ' e ', ' f ', ' F '] 

Array.reverse ()

Reverses the order of the array elements, returning the array itself.

var arr1 = [1, 4, 3, 2];
Arr1.reverse (); [2, 3, 4, 1]

Array.slice ()

A shallow copy of an array does not alter itself.

Array.slice (start, end);
Method accepts two parameters, the last one can be omitted, and the default is the length of the array itself.

var arr1 = [1, 2, 3, 4, 5, 6];

Arr1.slice (4); [5, 6]
Arr1.slice (2, 4);//[3, 4]
Arr1.slice (-3);//[4, 5, 6]

If a negative number is passed in, it is automatically added to the length of the array, attempting to become non-negative.
Passing in a value that is less than the length of an array is the element that takes the number of negative values from the backward forward. For example, the latter three elements are taken.

Array.splice ()

This is the most powerful and commonly used method in the array, and can be deleted, inserted, and replaced.

Grammar

Array.slice (Start, count, item);
The method removes one or more elements and replaces them with new elements. Start is the starting position, count is the number of deletions, item is the newly added element (item more than one, can be omitted), and the deleted element is returned as an array.

var arr1 = [1, 2, 3, 4, 5];
Delete
Arr1.splice (2, 1);//[1, 2, 4, 5] return [3]
//Insert
Arr1.splice (3, 0, 6, 7);//[1, 2, 4, 6, 7, 5]
//Replace 
   arr1.splice (1, 2, 8, 9); [1, 8, 9, 6, 7, 5] return [2, 4]

Here are some ECMAScript5 new methods, mainly IE8 not supported.

IndexOf () and LastIndexOf ()

Finds the index position of the corresponding item in the array, the second parameter represents the starting position of the corresponding lookup direction, returns the first matching position, and returns 1 if it is not found;
IndexOf () is the previous lookup, LastIndexOf () is looking forward from the back.

var arr1 = [1, 2, 3, 4, 3, 2, 1];
Arr1.indexof (2); 1
arr1.indexof (2, 3);//5

Arr1.lastindexof (3);//4
Arr1.lastindexof (3, 4)//2

Iterative methods

The following methods accept two parameters, the first is the function that is run for each item, and the second function runs the scope.
The run function has three parameters, namely the current item, the position, and the array itself.

Array.every ()

Runs the given function, and returns True if each of the iterations returns TRUE.

var arr1 = [1, 2, 3, 4, 5];
Arr1.every (function (item, index, array) {return
  item > 3;
});
False

Array.some ()

Runs the given function, and returns True if one of the iterations returns TRUE.

Arr1.some (function (item, index, array) {return
  item > 3;
});
True

Array.map ()

Runs the given function to make an array of the values returned in the iteration, returning the array.

Arr1.map (function (item, index, array) {return
  item * 2;
});
[2, 4, 6, 8, 10]

Array.filter ()

Runs the given function, returning the element that returns true in the iteration as an array

Arr1.filter (function (item, index, array) {return
  item > 3;
});
[4, 5]

Array.foreach ()

Runs the given function without returning any values. Functions similar to the normal for loop.

Merge method

The function accepts two parameters, the first parameter is each run custom function, and the second is the initial value that is the base of the merge.
The custom function accepts four parameters, the previous item, the current item, the position, and the array.

Array.reduce () and Array.reduceright ()
var splitstr = function (prev, item, index, array) {return
  prev + ' # ' + item;< c4/>}

var arr1 = [1, 2, 3, 4, 5];
Arr1.reduce (SPLITSTR, 8); 8#1#2#3#4#5
arr1.reduceright (SPLITSTR, 8);//8#5#4#3#2#1

Summary

This article describes the various details of array methods and attention issues, the next will introduce the array of more advanced usage. Later in this article, we will add an introduction to ECMASCRIPT6 's newly added array method.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.