1, Remaining parameters
1. Understanding residual parameters
The remaining parameters are always arrays, even if there are no values, they are empty arrays
// grammar
const add = (x, y, ...args) => {
console.log(x, y, args) // w 4 [5,45]
}
add('w', 4, 5, 45)
2. Remaining parameter considerations
- Remaining parameters of arrow function: parentheses cannot be omitted even if there is only one remaining parameter in the parameter part of arrow function
- Replace arguments with the remaining parameters to get the actual parameters
- Location of remaining parameters: the remaining parameters can only be the last parameter, and there can be no other parameters after that, otherwise an error will be reported
3. Application of residual parameters
The remaining parameters are used in conjunction with deconstruction assignment
const [b, z, ...arge] = [2, 3, 4, 5, 6, 6]
console.log(b, z, arge) //2 3 (4) [4, 5, 6, 6]
const fn = ([a, ...rest]) => {
console.log(a, rest)
}
fn([2, 3, 4, 5])
const { a, bs, ...agr } = { a: 10, bs: 'M', l: 'T', k: '55' }
console.log(agr) //{l: "T", k: "55"}
2, Usage of expansion operator
Basic usage:
console.log(Math.max(...[4, 3, 4, 5, 6])) //6
1. How to distinguish between remaining parameters and expansion operators
Expand operator:[1, 3, 4]=> 1, 2, 3
Remaining parameters: 1, 2, 3=> [1, 2, 3]
2. Application of array expansion operator
Basic Usage const str=...[1,3,3,45] //1,3,3,45
//Copy array
const nw = [2, 34, 4, 5]
const ol = [...nw]
ol[2] = 20000
console.log(nw) // [2, 34, 4, 5]
// Merge array
const c = [2, 3, 4, 54]
const m = [2, 4, 5, 6,]
console.log([...c, ...m]) //[2, 3, 4, 54, 2, 4, 5, 6]
// String to array
const str = 'HELLO'
console.log([...str]) //["H", "E", "L", "L", "O"]
//Class array to array (arguments, NodeList)
function fuu() {
console.log([...arguments]) //[4, 34, 5, 7678]
}
fuu(4, 34, 5, 7678)
//NodeList
console.log(document.querySelectorAll('p')); //NodeList(3) [p, p, p]
console.log([...document.querySelectorAll('p')]) //[p, p, p]
3. Object's extension operator
Object cannot be expanded directly. It needs to be expanded in {}
const tem = {
name: 'principal',
age: '500'
}
const tem1 = {
name: 'Big pot',
age: 80
}
// The new object has all the attributes. The attributes are the same, and the latter overrides the former
console.log({ ...tem, ...tem1 }) //{name: "big pot", age: 80}
1. Object deployment considerations
If you expand an empty object, there is no effect
If the expanded object is not an object, it will be automatically converted to an object and its attributes will be listed
console.log((....1)//{}
console.log(new Object(1));
console.log(....undefined })//{}
console.log(4...null })//{}
console.log((....true})//{}
If the expansion operator is followed by a string, it will be automatically converted to an array like object, so the returned object is not empty
console.log({...'HELLO'}) //{0: "H", 1: "E", 2: "L", 3: "L", 4: "O"}
console.log({...[3,4,5,6]}) //{0: 3, 1: 4, 2: 5, 3: 6}
3, set and Map data deconstruction
Set
1. What is Set
Collection ()
An array is a series of ordered data sets: [1,3,4,55]
Set is a series of unordered data sets without duplicate values
There are two ways to create an array:[1,2,3,4],new.Array(1,3,4,5) establish Set Method: const st = new Set(); // grammar
Set does not have a subscript to indicate each value, so set is unordered, and its members cannot be accessed through subscripts like arrays
2. Methods and properties of the Set instance
1,Method( add)
const s = new Set()
s.add(1).add(3)
console.log(s) //Set(2) {1, 3}
2,has(is Judge members)
console.log(s.has(2)) //false
console.log(s.has(1)) //true
3,delete(Delete member)
// If you use delete to delete a member that does not exist, nothing will happen and no error will be reported
s.delete(1)
console.log(s) //Set(1) {3}
4,clear(Delete all)
s.clear();
console.log(s) //Set(0) {}
5,forEach
const obj = { name: '55' }
// Non arrow function, forEach parameter 2, can change this
s.add(200).add(500).add(6)
s.forEach((value, key, set) => {
// value=key in Set
console.log(value, set)
console.log(this) //window
})
6, attribute(size)
console.log(s.size) //3
3. Arguments to the Set constructor
Array mode
const ar = new Set([1, 32, 3, 4, 5, 1])
console.log(ar) //Set(5) {1, 32, 3, 4, 5}
character string
const ar1 = new Set('HELLO')
console.log(ar1) //Set(4) {"H", "E", "L", "O"}
// arguments
function fun() {
console.log(new Set(arguments)) //Set(4) {14, 3, 4, 5}
}
fun(14, 3, 4, 5)
NodeList
const ar2 = new Set(document.querySelectorAll('p'))
console.log(ar2) //Set(3) {p, p, p}
//Set
const a = new Set([2, 4, 5, 6])
const b = new Set(s) //copy
console.log(b)
4. Set precautions
1. Judge duplicate value
console.log(1 === 1) //true
console.log(NaN )=== NaN) // false
//Set's judgment of duplicate values basically follows strict equality (= = =) / / but the judgment of NaN is different from = = =. NaN in set is equal to NaN
5. Usage scenario
1) Array or string de duplication
console.log([...new Set([1, 1, 3, 4, 5, 33, 3])]) //(5) [1, 3, 4, 5, 33]
2) Without subscript access, you can use forEach to traverse
3) In order to use the methods and attributes provided by Set (add delete clear has forEach size, etc.)
4) String de duplication
const str = new Set('bbdshdhhfss')
console.log([...str].join('')) //bdshf
Map
1. Recognize map
Map s and objects are collections of key value pairs
const m = new Map() // grammar
2. Difference between Map and object
Objects generally use strings as key values
const person={name:"",age:"30"}
Basic data type:Numbers and characters,Boolean undefined, nul ;
Reference data type:object(1.1,Functions Set, Map etc.) ===>All of the above can be used as Map Key value of;
const objs = { name: '512', [{}]: 'Objeck' }
const m = new Map()
m.set({ name: '25' }, 18)
m.set(true, 18)
m.set([1, 2, 3, 4], 18)
console.log(m) //Map(3) {{...} => 18, true => 18, Array(4) => 18}
3. Map instance properties and methods
add to(set)
//If a new member added by set already exists, the newly added key value pair overwrites the existing one
m.set('age', 18)
obtain(get)
console.log(m.get('age')) //18
has
console.log(m.has('age'))// true
delete(delete)
m.delete('age')
Clear( clear)
m.clear()
Traversal( forEach)
Attributes( size)
4. Map constructor parameters (array, Set, map)
Map array can only be transferred to two-dimensional array, and must reflect keys and values
console.log(new Map([['name', 'principal'], ['age', '19']])) //Map (2) {"name" = > "principal", "age" = > "19"}
//Set and Map as parameters
const bb = new Map([['name', 'principal'], ['age', '19']])
const aa = new Set([['name', 'principal'], ['age', '19']])
console.log(new Map(bb)) //Map (2) {"name" = > "principal", "age" = > "19"}
console.log(new Map(aa)) //Map (2) {"name" = > "principal", "age" = > "19"}
5. Precautions
1) . determine whether the key names are the same. / / strict equality (= = =) / / the exception is NaN, and NaN in the map is also equal to Nan //console.log(NaN===NaN):
const m=new Map:
m.set(NaN,1).set(NaN,2);
console.log(m);
2) When to use Map: if you only need a key - > value structure, or need a value other than a string as a key, it is more appropriate to use Map
6. Map application
const [p1, p2, p3] = document.querySelectorAll('p')
const p = new Map([[p1, 'red'], [p2, 'yellow'], [p3, 'grenn']])
p.forEach((item, el) => {
el.style.color = item
})