Based on ES7, there are a total of 9 methods that will not change themselves, including concat, Join, slice, toString, toLocateString, indexOf, lastIndexOf, non-standard toSource and the newly added method includes.

A, concat

The concat() method merges the array or element passed in with the original array to form a new array and returns it.

Arr. Concat (value1, value2… , valueN)

var array = [1.2.3]; 
var array2 = array.concat(4[5.6], [7.8.9]); 
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9] 
console.log(array); // [1, 2, 3] the original array is not modified
Copy the code

2. If no arguments are passed to the concat method, a new array (pointing to the new address space) is generated based on a shallow copy of the original array.

var array = [{a: 1}]; 
var array3 = array.concat(); 
console.log(array3); // [{a: 1}] 
console.log(array3 === array); // false 
console.log(array[0] === array3[0]); // true, the first element of the old and new arrays still share a reference to the same object
Copy the code

3. As above, Concat also benefits from duck discrimination, but it may not be as effective as we’d like, as follows:

As you can see, the array-like object is still returned as an array, but it is not what we expect an array to look like.

Second, the join

The join() method joins all the elements in the array into a single string.

Arr. join([separator = ‘, ‘]) separator Optional. The default value is comma.

var array = ['We'.'are'.'Chinese']; 
console.log(array.join()); // "We,are,Chinese" 
console.log(array.join('+')); // "We+are+Chinese" 
console.log(array.join(' ')); // "WeareChinese"
Copy the code

2. As above, JOIN benefits from duck type discrimination as follows:

var o = {0:"We".1:"are".2:"Chinese".length:3}; 
console.log(Array.prototype.join.call(o,'+')); // "We+are+Chinese" 
console.log(Array.prototype.join.call('abc')); // "a,b,c"
Copy the code

Third, slice

The slice() method shallow-copies a portion of the array into a new array object and returns the array object.

Arr. Slice ([start[, end]])

(1) The start argument is the index of the element to start the replication, and end is the index of the element to end the replication

Note that the copied elements include start, not end

(2) Without changing the array itself, slice returns a new array of shallow-copied elements.

Examples are as follows:

(3) If the value of start is negative, if the array length is length, it means that the copy starts from the position of length+start. In this case, if the parameter end has a value, it must be a negative value greater than start. Otherwise, the empty array will be returned.

(4) When the slice method parameter is empty, it will generate a new array just like concat method.

Shallow copy refers to copying only the reference to the object when the object is copied, but it still refers to the same object. Here’s why slice is a shallow copy.

var array = [{color:"yellow"}, 2.3]; 
var array2 = array.slice(0.1); 
console.log(array2); // [{color:"yellow"}] 
array[0] ["color"] = "blue"; 
console.log(array2); // [{color:"bule"}]
Copy the code

Since slice is a shallow copy, the copied object is just a reference. If you change the value of array, array2 also changes.

(5) At the same time, we can easily get the last element of the array by using the property of the slice method when the first parameter is negative, as shown in the following example:

console.log([1.2.3].slice(-1));/ / [3]
Copy the code

Slice also benefits from duck differentiation. Examples are as follows:

The object also needs to have the length attribute. If it does not have the length attribute, undefined will be displayed and the copy will fail.

Fourth, the toString

The toString() method returns an array as a string consisting of the return values of toString() for each element in the array joined (separated by commas) by the call to join().

Syntax: arr.tostring ()

var array = ['Jan'.'Feb'.'Mar'.'Apr']; 
var str = array.toString(); 
console.log(str); // Jan,Feb,Mar,Apr
Copy the code

(2) When an array is concatenated directly to a string, its toString() method is automatically called.

var str = ['Jan'.'Feb'.'Mar'.'Apr'] + ',May'; 
console.log(str); // "Jan,Feb,Mar,Apr,May"
Copy the code

(3) Let’s take a look at duck type discrimination:

var o = {0:'Jan'.1:'Feb'.2:'Mar'.length:3}; 
var o2 = Array.prototype.toString.call(o); 
console.log(o2); // [object Object] 
console.log(o.toString()==o2); // true
Copy the code

Visible, Array. The prototype. The toString () method when handling class Array Object, with class Array Object directly call Object. The prototype. The toString () method is completely consistent.

According to ES5 semantics, the toString() method is generic and can be used with any object. If the Object has a join () method, which will be called, the return value is returned, not the call Object. The prototype. The toString (), to that end, we add a join to o Object method. Examples are as follows:

Fifth, toLocateString

ToLocaleString () is a similar variant of toString(), which consists of the toLocaleString() return values for each element in the array joined (separated by commas) by the call to join().

Arr. ToLocaleString ()

The elements in the array call their respective toLocaleString methods:

  • Object:Object.prototype.toLocaleString()
  • Number:Number.prototype.toLocaleString()
  • Date:Date.prototype.toLocaleString()

Examples are as follows:

(2) The writing method of duck type discrimination is also consistent with toString. Examples are as follows:

Six, indexOf

The indexOf() method finds the indexOf the element when it first appears in the array, or returns -1 if it does not.

Arr.indexof (element, fromIndex=0)

Element is the element to be searched.

FromIndex is the starting position, which defaults to 0.

If the array length is exceeded, -1 is returned.

If the value is negative, and the array length is length, the search starts from the first item of the array length + fromIndex to the end of the array. If length + fromIndex<0, the entire array will be searched.

IndexOf uses strict equality (that is, use === to match elements in an array with the same type and value).

var array = ['abc'.'def'.'ghi'.'123']; 

console.log(array.indexOf('def')); / / 1

console.log(array.indexOf('def', -1)); // -1 means to look up from the last element, so -1 is returned on failure, similar to lastIndexOf

console.log(array.indexOf('def', -4)); // 1 Since 4 is larger than the array length, the entire array will be searched, so return 1

console.log(array.indexOf(123)); String '123' is not matched because it is a strict match
Copy the code

(2) indexOf can handle array-like objects thanks to duck discrimination. Examples are as follows:

var o = {0:'abc'.1:'def'.2:'ghi'.length:3}; 
console.log(Array.prototype.indexOf.call(o,'ghi', -4));/ / 2
Copy the code

However, this method does not support IE9 or lower versions. For better support for earlier Versions of IE (IE6~8), please refer to Polyfill.

Seven, lastIndexOf

The lastIndexOf() method finds the index of the element when it was last seen in the array, or returns -1 if it was not. And it is the reverse lookup of indexOf, that is, looking from the end of the array forward.

Arr. LastIndexOf (element, fromIndex=length-1)

Element is the element to be searched.

FromIndex is the location to start the search. The default value is array length-1. If it exceeds the length of the array, the entire array is searched because it is looking backwards. If length + fromIndex is less than 0, the array will not be searched.

(2) Like indexOf, lastIndexOf strictly matches array elements.

For an example, see indexOf,

(3) Compatible with Internet Explorer of earlier versions (IE6~8), please refer to Polyfill.

Viii. ToSource (not standard)

The nonstandard toSource() method, which returns the source code for an array, is currently only implemented by Firefox.

Grammar: arr. ToSource ()

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

var o = {0:'a'.1:'b'.2:'c'.length:3}; 
console.log(Array.prototype.toSource.call(o)); // ["a","b","c"]
Copy the code

Ix, includes (new in ES7)

The includes() method, based on the ECMAScript 2016 (ES7) specification, determines whether the current array contains a specified value and returns true if so, false otherwise.

Arr. Includes (element, fromIndex=0)

Element is the element to be searched.

FromIndex means that element is searched from the index. The default value is 0. FromIndex is forward lookup, that is, from the index to the end of the array.

var array = [-0.1.2]; console.log(array.includes(+0)); // true 
console.log(array.includes(1)); // true 
console.log(array.includes(2, -4)); // true
Copy the code

Above, includes seems to ignore the difference between -0 and +0, which is not a problem because JavaScript has always been indifferent to -0 and +0.

Arr.indexof (x)>-1 includes(x). It seems so, almost all the time they are equivalent, the only difference being that Includes can find nans and indexOf can’t.

This method also benefits from duck discrimination. Examples are as follows:

var o = {0:'a'.1:'b'.2:'c'.length:3}; 
var bool = Array.prototype.includes.call(o, 'a'); 
console.log(bool); // true
Copy the code

This method is only implemented in Chrome 47, Opera 34, Safari 9 and later. To support other browsers, please refer to Polyfill.