This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

ES series of articles

  • ES6 variable constant (let const)
  • Deconstruction assignment
  • ES5 Array traversal mode
  • ES6 Array traversal mode
  • Extension of arrays

Extension of the ES6 array

  • Class array/pseudoarray
  • Array.from()
  • Array.of()
  • copyWithin()
  • fill()
  • includes()

Class array/pseudo-array (not really an array)

Pseudo-arrays have two characteristics:

  1. Store data by index
  2. Has length attribute
/ / HTMLCollection is pseudo array let divs = document. The getElementsByTagName (' div ') console. The log (divs) / / HTMLCollection let divs2=document.getElementsByClassName('xxx') console.log(divs2)//HTMLCollectionCopy the code
// The querySelectorAll() method returns all elements in the document that match the specified CSS selector, returning the NodeList object. let divs3=document.querySelectorAll('.xxx') console.log(divs3)//NodeList console.log(divs3 instanceof Array)//falseCopy the code

Use instanceof to check if an object is an instanceof an array, returning true or false

Function foo(){console.log(arguments)//1 mooc true console.log(arguments instanceof Array)//false} function foo(){console.log(arguments)// mooc true console.log(arguments instanceof Array)//false} foo(1,'mooc',true)Copy the code

Pseudo-arrays do not have array methods

  • The arr.push() method adds items to the end of the array
  • Push () is not a method. Push () is an Array

Array.from() converts a pseudo-array to an Array

ES5: practice

let arr = Array.prototype.slice.call(divs3)
console.log(arr)
arr.push(123)
console.log(arr)
Copy the code

ES5: practice

let arrayList={
    0:"es6",
    1:"es7",
    2:"es8",
    length:3
}
let arr = Array.from(arrayLike)
arr.push("es9")
console.log(arr)
Copy the code

Array.of() constructs an Array

There are two ways to construct an array:

  1. Array constructor
//new Array() let arr=new Array(1,2) console.log(arr)Copy the code
  1. Array.of() constructs an Array
// array.of () let arr= array.of (1,2) console.log(arr) //[1,2] let arr2= array.of (3) console.log(arr2) //[3] let Arr = Array of (1, true, 'hello, [1, 2, 3]. {name:' WDL}) console. The log (arr) / / [1, true, "hello", Array (3), {name: 'WDL}]Copy the code

Array. The prototype. CopyWithin shallow copy () Array

Array. The prototype. CopyWithin (target, start, end) shallow copy part of an Array to another location in the same Array, and returns it, change the length of the original Array without changing the original Array

parameter describe
target Copy the sequence to that location
start Start copying the starting position of the element. If start is ignored, copyWithin will start copying from 0.
end Start the end position of the copy element. CopyWithin will be copied to that location, but not to the end element. 
/ / copyWithin () let arr = [1, 2, 3, 4, 5]. The console log (arr. CopyWithin (1, 3)) / /,4,5,4,5 [1] the console log (arr) / /,4,5,4,5 [1]Copy the code

Array.prototype.fill() fills the Array

Array.prototype.fill(value,start,end) changes the original Array and returns the modified Array

parameter describe
value The value used to populate an array element.
start Start index. Default value is 0.
end Terminates the index. Default is this.length. 
Let arr1=new Array(3).fill(7) console.log(arr1)//[7,7,7] let arr2=[1,2,3,4,5] arr2.fill('hello',1,3) console.log(arr2)//[1, "hello", "hello", 4, 5]Copy the code

Array.prototype.includes() determines whether an Array contains the target value

IndexOf () :

  • IndexOf returns an array subscript, and includes() returns a Boolean value
  • IndexOf does not verify NaN, includes() does
Log (arr.indexof (NaN))//-1 console.log(arr.includes(NaN))//true console.log(NaN==NaN)//falseCopy the code

A front end small white, if the article has the wrong content, welcome big guy to give directions to discuss!