ES6 learning notes (5): easy to understand ES6's built-in extension objects

I shared four articles about ES6 Related technologies , If you want to know more , You can see the following links
《ES6 Learning notes （ One ）： Easy to understand object-oriented programming 、 Classes and objects 》
《ES6 Learning notes （ Two ）： Teach you how to play with class inheritance and class objects 》
《ES6 Learning notes （ 3、 ... and ）： Teach you how to use js Object oriented thinking to achieve tab Column add, delete, modify and search function 》
《ES6 Learning notes （ Four ）： Teach you to understand ES6 New syntax for 》

Array Extension method of

Extension operator （ Expand grammar ）

Extension operators can convert arrays or objects into a comma separated sequence of parameters

//  The extension operator splits an array into a comma separated sequence of parameters 
let arr = [1, 2, 3]
console.log(...arr) // 1 2 3

Extension operators can be applied to merge arrays

//  Extension operators are applied 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]

The extension operator is used to convert a class array or traversable object into a real array

<div>1</div>
  <div>2</div>
  <div>3</div>

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

Constructor method ： Array.from()

Convert an array of classes or traversable objects into a real array

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

Method can also accept the second parameter , Act like an array map Method , Used to process elements , Put 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]

Example method ：find()

To find the first qualified member of the array , If no return is found undefined

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"}

Example method ： findIndex()

Used to find the location of the first eligible array member , If no return is found -1

let arr = [1, 5, 10, 15]
let index = arr.findIndex(value => value > 9)
console.log(index); //2

Example method ： includes()

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

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

String Extension method of

Template string

ES6 New ways to create strings , Use the anti boot number to define
The template string can wrap
Function can be called in template string

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

// The template string can wrap 
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)

//  Function can be called in template string 
const sayHello = function() {
   
	return 'hello'
}
let greet = `${ sayHello()}, lanfeng`
console.log(greet) //hello, lanfeng

Example method ： startsWith() and endsWith()

startsWith(): Indicates whether the parameter string is in the header of the original string , Returns a Boolean value
endsWith(): Indicates whether the parameter string is at the end of the original string , Returns a Boolean value

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

Example method ：repeat()

repeat Method to repeat the original string n Time , Returns a new string

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

Set data structure

ES6 Provides a new data structure Set. It's like an array , But the values of the members are unique , There is no repetition value
Set Itself is a constructor , Used to generate Set data structure
Set Function can take an array as an argument , Used to initialize

const set = new Set([1, 2, 3, 4, 4])
console.log(set.size) // 4  Array weight removal 
console.log(set) //Set(4) {1, 2, 3, 4}
// Convert to array 
console.log([...set]) //[1, 2, 3, 4] 

Example method

• add(value)： Add a value , return Set Structure itself
• delete(value)： Delete a value , Returns a Boolean value , Indicates whether the deletion is successful
• has(value)： Returns a Boolean value , Indicates whether the value is
• Set Members of
  clear()： Clear all members , no return value

const s = new Set();
 s.add(1).add(2).add(3); //  towards  set  Add value to structure  
 s.delete(2)             //  Delete  set  The structure of the 2 value  
 s.has(1)                //  Express  set  Whether there is... In the structure 1 This value   Returns a Boolean value  
 s.clear()               //  eliminate  set  All values in the structure 

Traverse

Set An instance of a structure is the same as an array , Also have forEach Method , Used to perform some kind of operation on each member , no return value

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

summary

This article mainly shares ES6 Built in extension object of Array Extension method of 、String Extension method of 、Set Data structure and other aspects of the use of some methods and examples .