This is the second day of my participation in the August Text Challenge.More challenges in August

preface

Some array methods have been added to ES6, some of which address some of the shortcomings of ES5, which will be discussed below. Let’s take a quick look at some of the new array methods in ES6 and summarize them. If there are any problems, you can point them out in the comments section. Specific definitions and usage of other new methods can also be found on the ES6 website, here

Extended operator

  • The extension operator is three points (.), turns an array into a comma-separated sequence of arguments. 
    console.log(... [1.2.3]) / / 1 2 3
console.log([...[1.2.3]]) //  [1, 2, 3]
function fun(x, y) {
    console.log(x + y) / / 32} fun(... [4.28])
Copy the code

    The extension operator makes a deep copy of an array. Shallow copy: refers to the same memory address

    const arr1 = [1.2.3]
const arr2 = arr1 / / shallow copy
arr1[0] = 5
console.log(arr2) // [5, 2, 3], the modified values will affect each other
Copy the code

    在ES5To implement a deep copy of an array

    const arr1 = [1.2.3]
const arr2 = arr1.concat()
arr1[0] = 5
console.log(arr2) //  [1, 2, 3]
Copy the code

    在ES6To implement a deep copy of an array

    const arr1 = [1.2.3]
const arr2 = [...arr1]
arr1[0] = 5
console.log(arr2) //  [1, 2, 3]
Copy the code

Array.from()

  • This method is a method on an Array object, not a prototype method. Assembles array-like objects (arrays are special objects) as arrays.

    Array-like object: an ordinary object (an array is a special object) whose property names are also ordered numbers and have a length property is an array-like object. Like a common DOM collection, or a handwritten object that contains a number property and a length property.

    <p class="p">1</p>
<p class="p">2</p>
<p class="p">3</p>
<p class="p">4</p>
Copy the code
    const items = document.getElementsByClassName('p')
console.log(items)
// methods in ES5
console.log([].slice.call(items));
// These are both methods in ES6
console.log(Array.from(items))
console.log([...items])
Copy the code

Array.of()

  • Array.of()The getValue () method converts a set of values to an array. 
    Array.of(3.4.5) / / / three, four, five
Array.of(3) / / [3]
Array.of(3).length / / 1
Copy the code

    In ES5, there is also a way to convert a set of values to an array, but it is a bit inadequate. When the number of values is less than 2, an empty array with several elements is created. inES6,Array.of()It’s basically a substituteArray()ornew Array(), and there is no array difference caused by different parameters. It’s very uniform in its behavior.

    Array(3) / / /,,,
Array(1.3) / / [1, 3]
Array(1.3.4) / / [1 4]
Copy the code

find()andfindIndex()

  • Find () finds the first eligible member of the array. Its argument is a callback function that is executed by all members of the array until it finds the first member that returns true, and returns that member. If there is no qualified member, undefined is returned.

  • FindIndex () returns the location of the first qualified array member, or -1 if all members fail.

  • IndexOf () is in ES5, which provides the location of an array element. A flaw in this method is that if the array contains NaN, it cannot be found and returns -1.

        const arr = [1.2.4.NaN]
    console.log(arr.find(e= > e < 4)) // Returns the member 1
    console.log(arr.indexOf(4)) / / 2
    console.log(arr.indexOf(NaN)) // -1
    console.log(arr.findIndex(e= > Object.is(NaN, e))) / / 3
Copy the code

    Extension: object. is(value1, value2)): Checks whether value1, value2 are equal, returns a Boolean value, this “equal” rule, neither ===, nor ==. We can tell that NaN is equal to NaN. (NaN is not equal to any number),indexOf() uses the strict equality operator internally (===), which causes NaN to be misjudged.

    So you can replace indexOf() in ES5 with findIndex() in ES6.

Array.prototype.fill()

  • You replace all the elements of the array with a fixed value, you can write positions, you can replace them from where, but you don’t include termination positions.

    ['a'.'b'.'c'].fill(7)
/ / (7, 7, 7)
new Array(3).fill(7)
/ / (7, 7, 7)
Copy the code

    The important thing to note here is that if you want to replace an object or an array, because it is a shallow copy of the past, so you are operating on the same memory address, changing one of the values will be affected.

    const arr = [1.2.4.NaN]
const obj = {
    aaa: 111
}
arr.fill(obj, 0.1)
console.log(arr) / / [{aaa: 111}, 2, 4, NaN]
arr[0].aaa = 222
console.log(obj) // {aaa:222}
Copy the code

Array.prototype.includes()

  • This method returns a Boolean value indicating whether an array contains a given value. And stringincludes()The method is similar. 
    [1.2.3].includes(2)     // true
[1.2.3].includes(4)     // false
/ / ES6
[1.2.NaN].includes(NaN) // true
/ / ES5
[1.2.NaN].indexOf(NaN) // -1
if([1.2.NaN].indexOf(e) ! = = -1) {/ / found
}
Copy the code

    It was much more convenient to have this methodES5In, use the one mentioned aboveindexOf()And there’s no telling if they can be foundNaN.

The last

Methods are constantly being updated, so compare the differences and think about why they are being added and what features are being optimized.