Learn about the built-in extension objects of ES6

Array extension method

Extension operators (expansion syntax)

The extension operator converts an array or object into a comma-separated sequence of arguments

// The extension operator splits an array into comma-separated sequences of arguments
let arr = [1.2.3]
console.log(... arr)/ / 1 2 3
Copy the code

Extension operators can be applied to merge arrays

// The extension operator applies to array merges
let arr1 = [1.2.3]
let arr2 = [4.5.6]
let arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]

// The second way to merge arrays
let arr1 = [1.2.3]
let arr2 = [4.5.6] arr1.push(... arr2)console.log(arr1) // [1, 2, 3, 4, 5, 6]
Copy the code

Use the extension operator to convert an array of classes or a traversable object into a true array

  <div>1</div>
  <div>2</div>
  <div>3</div>
Copy the code

let oDivs = document.getElementsByTagName('div')
console.log(oDivs) //HTMLCollection(3) [div, div, div]
const arr  = [...oDivs];
console.log(arr) //(3) [div, div, div]
Copy the code

Constructor method: array.from ()

Convert a class array or traversable object into a true array

let arrLike = {
	'0': 'a'.'1': 'b'.'2': 'c'.length: 3
}
let arr2 = Array.from(arrayLike) //['a', 'b', 'c']
Copy the code

The map method can also take a second argument, which acts like an array and is used to process the element, putting the processed value into the returned array.

let arrLike = {
	'0': 1.'1': 2.'2': 3.length: 3
}
let arr2 = Array.from(arrLike, item => item * 2) 
console.log(arr2) / / (3) [2, 4, 6]
Copy the code

Instance method: find()

Used to find the first eligible array member, returns undefined if none is found

let arr = [{
            id: 1.name: 'lanfeng'
            },
           {
           	id: 2.name: 'qiuqiu'}];let target = arr.find((item, index) = > item.id === 2)
console.log(target) //{id: 2, name: "qiuqiu"}
Copy the code

Instance method: findIndex()

Used to find the location of the first eligible array member, or -1 if not found

let arr = [1.5.10.15]
let index = arr.findIndex(value= > value > 9)
console.log(index); / / 2
Copy the code

Example method: includes()

Indicates whether an array contains a given value, returning a Boolean value

[1.2.3].includes(2) // true
[1.2.3].includes(4) // false
Copy the code

String extension methods

Template string

In ES6, the new way to create strings is to use a backboot number to define a line break in a template string and to call a function in a template string

let name = `zhangsan`
let sayHello = `hello, my name is ${name}`
console.log(sayHello ) // hello, my name is zhangsan
Copy the code

// The template string can be newline
let result = {
	name: 'zhangsan'.age: 20.sex: 'male'
}
let html=`<div>
	<span>${result.name}</span>
	<span>${result.age}</span>
	<span>${result.sex}</span>
</div>`;
console.log(html)
Copy the code

// Functions can be called in template strings
const sayHello = function() {
	return 'hello'
}
let greet = `${sayHello()}, lanfeng`
console.log(greet) //hello, lanfeng
Copy the code

Instance methods: startsWith() and endsWith()

StartsWith (): indicates whether the argument string is at the beginning of the original string, and returns a Boolean endsWith(): indicates whether the argument string is at the end of the original string, and returns a Boolean

let str = 'hello world ! '
str.startsWith('hello') // true
str.endsWith('! ') //true
Copy the code

Instance method: repeat()

The repeat method means that the original string is repeated n times, returning a new string

const str1 = 'x'.repeat(3)
console.log(str1) // xxx
const str2 = 'hello'.repeat(2)
console.log(str2) // hellohello
Copy the code

Set data structure

ES6 provides a new data structure called Set. It is similar to an array, but the values of the members are unique and there are no duplicate values. The Set itself is a constructor used to generate the Set

const set = new Set([1.2.3.4.4])
console.log(set.size) // 4 array decrement
console.log(set) //Set(4) {1, 2, 3, 4}
// Convert to an array
console.log([...set]) / / [1, 2, 3, 4]
Copy the code

Instance methods

Add (value) : Adds a value and returns the Set structure itself
Delete (value) : deletes a value and returns a Boolean value indicating whether the deletion is successful
Has (value) : Returns a Boolean value indicating whether the value is
Set member clear() : Clears all members with no return value

 const s = new Set(a); s.add(1).add(2).add(3); // Add values to the set structure
 s.delete(2)             // Delete the 2 value from the set structure
 s.has(1)                // Returns a Boolean value indicating whether there is 1 in the set structure
 s.clear()               // Clear all values in the set structure

Copy the code

traverse

An instance of a Set structure, like an array, has a forEach method that performs some operation on each member and returns no value

const set = new Set([a, b, c])
set.forEach(item= > {
	console.log(item)
})
Copy the code

conclusion

This article mainly shares the usage and examples of ES6’s built-in extension object’s Array extension method, String extension method, Set data structure and so on. If you want to know more, please scan the qr code below and follow our official account.