Js week 4 summary

This week I learned a lot of important knowledge, such as 6 new array apis, how to protect object members, some knowledge of ES6, DOM manipulation, and BOM manipulation, etc.

Member of a protected object

How do we protect the members of an object from being deleted or modified and so on?

Operate according to four characteristics of the object

We can use the object.defineProperty method to protect objects

The four features are as follows:

{
        value: "xxx".// Where the value is actually saved
        writable: true.// Switch: whether it can be modified
        enumerable: true.// Switch: whether it can be traversed by the for in loop
        configurable: true // Switch: can be deleted
}
Copy the code

How to operate the four features?

Object.definedProperties(obj,{
        "Attribute name":{four features},... })Copy the code

Example:

const obj = {
    name: 'Ming'.age: 18} Set the four properties of objObject.defineProperties(obj, {
    "name": {
        "configurable": false // Cannot be deleted
    },
    "age": {
        "enumerable": false.// Can not be for.. In loops through to
        "configurable": false // Cannot be deleted}})delete obj.name
console.log(obj.name) / / xiao Ming

for(const key in obj) {
    console.log(key) // name
}
Copy the code

Protect according to the three levels of the object – simplifying the above operations

const obj = {
    name: 'Ming'.age: 18
}
Copy the code

Imitation expansion – prevent addition

Object.preventExtensions(obj)
obj.wife = 'small fang'
console.log(obj.wife) // undefined -- cannot be added
Copy the code

Seal – prevents addition and deletion

Object.preventExtensions(obj)
obj.wife = 'small fang'
console.log(obj.wife) // undefined -- cannot be added
Object.seal(obj)
delete obj.name
console.log(obj.name) // 18 -- can't be deleted
Copy the code

Freeze – prevents addition, deletion and modification

Object.preventExtensions(obj)
obj.wife = 'small fang'
console.log(obj.wife) // undefined -- cannot be added
Object.seal(obj)
delete obj.name
console.log(obj.name) // 18 -- can't be deleted
Object.freeze(obj)
obj.name = 'xiaoming'
console.log(obj.name) // Xiao Ming -- can't change it
Copy the code

Note that the above is not valid for deep operations, as in the following example

const obj = {
    name: 'Ming'.age: 18.score: {
        eng :  100}}Object.preventExtensions(obj)

obj.score.math = 100
console.log(obj.score.math) // 100 -- cannot be protected to a deeper level
Copy the code

ES5 provides a six-digit API

judge

every

Every () returns Boolean that determines that every element satisfies the func condition — every means every, so it needs all elements to satisfy something like &&

const arr = [1.2.3]
const result = arr.every(function(value) {
    console.log(value) / / 1
    return value == 2 // If you do not write "1", you will print "1". If you do not write "1", you will return "undefined"
})
console.log(arr, result) // [ 1, 2, 3 ] false
Copy the code

some

Some () returns a Boolean, judge whether to have qualified element func – just have a meet similar to | |

const arr = [1.2.3]
const result = arr.some(function(value) {
    console.log(value)
    return value == 4
})
console.log(arr, result) // [ 1, 2, 3 ] false
Copy the code

traverse

forEach

ForEach — if the operation is to repair the array directly

ForEach blocks cannot use break, continue, which throws an exception

const arr = [1.2.3]
arr.forEach((elem, index, array) = > {
    arr[index] = elem * 2
});
console.log(arr) // [2, 4, 6]
Copy the code

And for loops

Braek and continue are not supported — an error is reported when used
ForEach () returns no value and simply calls the func callback forEach element

map

Map returns a new array, each element being the result of the func call

const arr = [1.2.3]
const result = arr.map(function(value) {
    value += 1
    console.log(value) / / 2, 3, 4
    return value
})
console.log(arr, result) // [1, 2, 3] [2, 3, 4]
Copy the code

Filtering and summarizing

filter

Filter () returns an array of elements that meet the func criteria

const arr = [1.2.3]
const result = arr.filter(function(value) {
    console.log(value) / / 2
    return value == 2
})
console.log(arr, result) // [1, 2, 3] [2]
Copy the code

reduce

Prev last result
Cur Current element
Index Indicates the index of the current element

Array Indicates the current array

const arr = [1.2.3]
const sum = arr.reduce(function(prev, cur, index, array) {
    return prev + cur // Add the current element to the last result
}, 0); // Set the initial value to 0
console.log(sum) / / 6
Copy the code

For maximum

const arr = [1.2.3]
const max = arr.reduce(function(prev, cur) {
    return Math.max(prev, cur)
})
console.log(max)  / / 3
Copy the code

Array to heavy

const arr = [1.2.3.3.4.4]
const res = arr.reduce(function(prev, cur) {
    prev.indexOf(cur) == -1 && prev.push(cur) // Whether the last result contains the current result, if not, join
    return prev
}, []); // Pass in an array with an empty initial value
console.log(res)  / / [1, 2, 3, 4]
Copy the code

Call and apply and bind

The core idea of Call /apply/ Bind is to borrow methods

Call and apply both temporarily replace the this reference in functions
Bind permanently replaces the reference to this in the function

What is the difference between apply and call?

The second parameter apply is passed as an array, and call is passed as an array. Call is passed as an array, and both parameters are immediately executed, equivalent to borrowing.

Bind is like buying, and once you buy it, it’s kind of permanent, so you don’t have to execute the function right away.

The steps of BIND:

1. Create a new function that is identical to the original function

2. Permanently bind this in the new function to the specified object – it cannot be changed

3. Permanently fix some parameters in the new function in advance

Syntax: var new function = function name.bind (specify object, permanent argument,…) ; – Not immediately executed, need to call yourself

Note: New functions bound by bind cannot be borrowed by Call /apply

dom

The three attributes of an element

NodeType: Gets the type of the node and returns a number – now useless
Xx. nodeValue: can only get the value of the attribute node – this is not useful for us now
Xx. nodeName: Gets the name of the node/label, but returns an all-uppercase label name — useful for determining the node’s name

Traversal cases where the hierarchy is not clear can be traversed in three ways

recursive

Call yourself, basically only need to consider the first time to do on the line, disadvantages: high performance consumption.
Algorithm: Depth first! The child node of the current node is traversed first, and the sibling node is switched to only after the child node is traversed

Traversing API

1, create TW:

var tw = document.createTreeWalker(root element, nodefilter.show_element)Copy the code

2. Call TW nextNode method repeatedly:

while((node = tw.nextNode()) ! = =null) {// Write your own operations
}
Copy the code

Disadvantages:

You can only iterate over elements with an undefined hierarchy, not data with an undefined hierarchy
The root node is automatically skipped
The pure cycle

Advantages: High performance
disadvantages

Deleting an Attribute Node

xxx.remove()
Copy the code

HTML DOM: Provides simplified manipulation of attributes, as well as objects

Img object – only the value provides the method to create

var img=newImage(); - Not everyone has HTML DOM simplified manipulation, only a fewCopy the code

Select the object

Properties:

Select. Options – exactly equivalent to children, find all option elements in select. 2

Methods:

1. Select.add (option) – Add an option

2. Select.remove (I) – remove elements from select (I)

Exclusive events:
```
select.onchange=function(){
        // This is triggered when the state changes
}
Copy the code
```

3. Option object — Simplifies creation

var opt=new Option("innerHTML"."value");
Copy the code

You can use this with the one up here and it’s very useful

Append options directly created

select.add(new Option("innerHTML"."value"));
Copy the code

Equivalent to the following four lines of code

var opt=document.createElement("option");
opt.innerHTML=""
opt.value=""
select.appendChild(opt);
Copy the code