Let and block-level scope
Scope – The scope in which a member can function. Prior to ES5, there were only two scopes:
- Global scope
- Function scope
Block-level scopes have been added in ES6.
Prior to this, there was no concept of block-level scope, resulting in variables defined in if/for statements that are also available in global scope, for example:
if(true) {
var a = 'hello'
}
console.log(a) // 'hello'
Copy the codeThe let keyword is new in ES6, and variables declared through let can only be used in the scope in which they are declared. That is, members within the block-level scope are not available externally.
There is no variable promotion in LET;
In addition, there is a const keyword, which defines a measure or a constant, which defines a read-only parameter;
An array of deconstruction
Const arr = [1, 2, 4] const [test1, test2, test3] = arr Const [test,...test2] = arr only on the last member; Const [test1, test2, test3, test4 = 4] = arrCopy the codeObject to deconstruct
const obj = {name: 'heihei', age: } const {name} = obj const {name} = obj const {age} = obj asAge = 10 } = obj console.log(asName === name) // trueCopy the codeTemplate string
- Template strings support line breaks compared to traditional strings.
const str = `hello world ! `Copy the code- Template string expressions of support interpolation, embedded variable | statements
console.log(`ooooooooh! ${str}`)
console.log(`ooooooooh! ${Math.random()}`)
Copy the code- The tag function defines a tag before defining the template string. The tag is a special function that can be called by adding the tag.
Function: To process a string
Const name = "Tom" const gender = 'male' // String is the static content of template string, Const tagFunc = (string, name,) const tagFunc = (string, name, gender) => { return string[0] + name + string[1] + gender + string[2] } const result = tagFunc`hello, ${name} is a ${gender}! `Copy the codeString extension method
includes | startWidth | endWidth
Parameter Default Value
Default values in ES5 are handled as follows:
// Defective setup, When the enable is false, the value will be true for const foo = (enable) = > {enable = enable | | true on the console. The log (' doSomeThing)} / / setting method more scientific, Const foo = (enable) => {enable = enable === undefined? true : enable console.log('doSomeThing) }Copy the codeEs6 setting mode, note: The default parameter must be set from the last parameter.
const foo = (enable = true) => {
console.log('doSomeThing)
}
Copy the codeThe remaining parameters
ES6 in… Operator to set the rest of the parameters to receive.
const foo = (... args) => { console.log(args) // [1, 2, 3, 4] } const foo1 = (args1, ... args) => { console.log(args) // [2, 3, 4] } foo(1, 2, 3, 4) foo1(1, 2, 3, 4)Copy the codeAn array of
ES6 in… Operator to expand the array.
Const arr = [1, 2, 3, 4] const arr = [1, 2, 3, 4] const arr = [1, 2, 3, 4] Expand each member of the array in turn into a new object console.log(... arr)Copy the codeArrow function
The arrow function does not change the direction of this;
Enhancements to object literals
To add the same object name as the attribute name in the object, simply abbreviate the variable name:
const bar = 'foo';
const obj = {
bar
}
Copy the codeWhen you add a property method to an object, you can also set it directly with the property name and method body:
const obj = {
method() {
console.log('doSomeThing')
}
}
Copy the code[activeKey]: value: [activeKey]: value:
const obj = {
[Math.random()]: value
}
Copy the codeProxy Object Proxy
Proxy can monitor any changes to an object’s source data, using Proxy:
const person = { name: 'hello', age: 20 } const personProxy = new Proxy(person, { get (target, property) { // doSomething return property in target ? target[property] : 'default' }, set (target, property, Value) {// doSomething target[property] = value}}) // Use personproxy. gender = 'male'Copy the codeThe Proxy contrast defineProperty
- DefineProperty can only monitor object reads and writes, Proxy can see more object operations, such as delete operations or method calls;
The delete method monitors:
const person = {
name: 'hello',
age: 20
}
const personProxy = new Proxy(person, {
deleteProperty (target, property) {
// doSomething
delete target[property]
}
})
//
delete personProxy.age
Copy the codeOther attributes: see figure
- Proxy better supports array object monitoring;
Monitor array:
const list = [] const listProxy = new Proxy(list, { set (target, property, value) { console.log('set', property, Value) target[property] = value return true}}) listProxy.push(100) // 'set' 0 100Copy the code- Proxy regulates reads and writes of objects in a non-intrusive manner
DefineProperty needs to define the monitored attributes separately, for example:
Const person = {name: 'hello', age: 20} // Define the attribute to be monitored object.defineProperty (person, 'name', {get() {}, set() {}})Copy the codeProxy can oversee the entire object that needs to be monitored.
Reflect
Reflect is a static class and cannot be instantiated. Internally encapsulates a series of low-level operations on objects. The Reflect member method is the default implementation of Proxy handling objects
const person = { name: 'hello', age: 20} const personProxy = new Proxy(person, {// custom get, Get (target, property) {// doSomeThing return reflect.get (target, property)}})Copy the codeReflect’s significance is that it provides a unified set of apis for manipulating objects. Such as:
const person = { name: 'hello', age: 20 } console.log( 'name' in person) console.log(delete person.name) console.log(Object.keys(obj)) // ... Console. log(reflect. has(person, 'name')) console.log(reflect.deleteProperty (person, 'name') 'name')) console.log(Reflect.ownKeys(obj)) // ...Copy the codeReflect currently offers 13 underlying ways to do it. See the document:
Set data structure
A Set, like a traditional array, is a collection of data.
Const s = new Set() // The add method returns the instance itself, so it can be chain-called. Set can weigh elements; S.a dd (1). The add (2). The add (3). The add (1) / / traversal/forEach / / for/of / / get data Sheldon horowitz at length the as () / / remove spyware doctor elete () / / clear s.c Lear ()Copy the codeCommon usage: to remove weight:
Const arr = [1,2,3,4,3,2,1] console.log(array. from(new Set(arr))) console.log([...new Set(arr)]))Copy the codeMap data structure
A Map is a set of key-value pairs used to Map the mappings between two pairs of arbitrary data types:
Map corresponding methods:
- set
- get
- has
- delete
- clear
- Traversal: forEach
Symbol
Symbol is used to represent a unique data type. Values created through the Symbol function are never equal:
Symbol() === Symbol() // false
Copy the codeSymbol allows description text to be passed in to distinguish Symbol values:
Symbol('1')
Symbol('2')
Copy the codeSymbol is used to add unique attribute names to objects:
const name = Symbol() const person = { [name]: 'test', Say () {console.log(this.[name])}} person[Symbol() [Symbol()] // testCopy the codeSymbol provides a static method for which the String variable is passed in by default and is implicitly converted to a String if it is not a String:
Symbol('foo') == Symbol('foo') // false
Symbol.for('foo') === Symbol.for('foo') // true
Symbol.for(true) === Symbol.for('true') // true
Copy the codeUse of the Symbol attribute 1: Add toString attributes to objects:
const obj = {}
console.log(obj.toString()) // [object, Object]
//
const objSymbol = {
[Symbol.toStringTag]: 'XObject'
}
console.log(objSymbol.toString()) // [object, XObject]
Copy the codeSymbol is the attribute name of the object. Traditional methods cannot obtain this attribute name. For example:
const obj = {
[Symbol()]: 'new Symbol',
foo: 'test'
}
for(let key in obj) {
console.log(key) // foo
}
console.log(Object.keys(obj)) // ['foo']
console.log(JSON.stringify(obj)) // ["foo": "test]
Copy the codeThis makes Symbol suitable as a private property of an object. If you want to get Object Symbol attribute, can use Object. GetOwnPropertySymbols:
console.log(Object.getOwnPropertySymbols(obj))
Copy the code