This is the eleventh day of my participation in Gwen Challenge

Let and const

Let: Declared variables are only valid for blocks of code under the let command, also known as block-level scope

Const: Declared variables are read-only, and the value of a constant cannot be changed once declared.

But if we declare an array or an object with const, the value of the array, of the object, can change because the address of the variable to which const points has not changed

Difference between let and VAR

  1. letIs valid within a block of code,varThe global scope is valid
  2. letYou can only declare it once,varCan be declared multiple times;
  3. letThere is no variable promotion, but there is a chain of scope

Deconstruction assignment

Extracting values from arrays and objects and assigning values to variables is called deconstructed assignment

  1. Basic array-to-array assignment
let [a,b,c] = [1.2.3];//a=1,b=2,c=3
Copy the code
  1. Use residual operators
let [a,...b] = [1.2.3];/ / a = 1, b = [2, 3]
Copy the code

The residual operator means that all subsequent values are received with b, so an array is returned

  1. String deconstruction
let [a,b,c,d,e] = 'hello';//hello
Copy the code

To divide a string into characters to assign values, and to convert a string into an object

  1. Object destruct assignment
let {foo, bar} = { foo: 'aaa'.bar: 'bbb'};
console.log(foo);//aaa
console.log(bar);//bbb
Copy the code
  1. The variable name and attribute name are inconsistent
let { baz : foo} = {baz : 'ddd'}
console.log(foo);//ddd
console. log(baz); undefindCopy the code

Baz is the pattern,foo is the value, and when we deconstruct, we first look for the property with the same name and assign it to it, so here foo receives the DDD

Deconstruct the assignment application

Switching variable
var a = 1;
var b = 2;
[a,b] = [b,a];
Copy the code
Receive return value
function fn() {
	return [1.2.3];
}
var [a,b,c] = fn();
Copy the code
Get the data in the JSON object
var data = {
    name : 'ljc'.age : 20
}
var {name,age} = data;
console.log(name + age);//ljc20
Copy the code
Part of the assignment
var ljc=[1.2.3];
var [,x,]=ljc;
console.log(x);/ / 2

var obj = {x : 1.y : 2.z : 3};
var {y : a} = obj;
console.log(a);/ / 2
Copy the code

Template string

  1. Introduction method is [‘ ‘]
console.log(`hello world`);	
Copy the code
  1. Using template strings to represent multi-line strings, all whitespace and indentation are preserved in the output.
let str = `
      
     
       
  • 1
    •  
       
  • 2
    •  
       
  • 3
    •  
       
  • 4
    •  
       
  • 5
    •  
      
`;
Copy the code
  1. Variable stitching

A variable is embedded in the template string. You need to write the variable name in ${}

let lovest = 'ljc';
let out = `${lovest}The most handsome `;
console.log(out);The most handsome / / LJC
Copy the code
  1. The template string calls the function
function fn () {
        console.log('I am LJC');
    }
let out = `${fn()}`;/ / I'm LJC
Copy the code

A simplified way of writing an object

Omit the property value of the same name, omit the function of the method

const name = 'ljc';
const age = 20;
const my = {
    name,
    age,
    say() {
        console.log('I am' + name + 'this year' + age);
    }
}
my.say()// I am LJC, 20 this year
Copy the code

Arrow function

//ES6
let res = () = > {
    let a = 3;
    console.log(a);
}
//ES5
var rel = function() {
    var b = 2;
    console.log(b);
}
res();/ / 3
rel();/ / 2
Copy the code
  1. When there are no arguments, the parentheses cannot be omitted
let say = () = > {
    console.log('ljc');
}
say();//ljc
Copy the code
  1. When there is an argument, the parentheses can be omitted:
let test = a= > {
    console.log(a);
}
test('I am LJC');/ / I'm LJC
Copy the code
  1. When there are more than one parameter, the parentheses cannot be omitted ()=>{}
let test = (a,b) = > {
    console.log(a + b);
}
test(2.3);
Copy the code
  1. When only one statement follows, the brace can be omitted and the return value is that statement
let say = () = > console.log('ljc');
say();//ljc
Copy the code

  • The arrow function’s this points to the object at which it was defined

  • Arrow functions have no prototype

  • Arrow functions cannot be constructors (that is, new cannot be used)

  • Arrow functions have no arguments objects

Rest parameters

The return value is an array, and the rest argument must be placed at the end of the argument

function date(. args) {
    console.log(args);
}
date('l'.'j'.'c');//['l','j','c']
Copy the code

Extended operator

Converts an array to a comma-separated list of arguments

function add(x,y) {
	return x + y;
}
let num = [1.2]; add(... num)/ / 3
Copy the code
application
function push(array, ... rest) { array.push(... rest);// This is an extension operator that will... Rest translates to a parameter list
}
let arr =[1.2];
push(arr,3.4.5);
console.log(arr);/ / [1, 2, 3, 4, 5]
Copy the code

Symbol

Symbol can produce unique values, avoiding overwriting previous code.

Pass a value as a description string to better understand what the value does

The value passed in is unique regardless of whether the parameter name is the same

let s1 = Symbol(a);let s2 = Symbol(a);console.log(typeof s1);// symbol
console.log(s1 === s2); // false
Copy the code
Symbol. For creation
let s4 = Symbol.for('ljc');
let s5 = symbol.for('ljc');
console.log(s4 === s5);//true
Copy the code

This method creates a symbol that is unique from a description string

Cannot be computed with other data

As an attribute name
let mySymbol = Symbol(a);var a = {};
a[mySymbol] = 'Hello! ';
console.log(a);//{ symbol(): 'Hello!' }
Copy the code

The Symbol value is defined as the attribute name using square brackets, not the dot operator

Symbol is traversed as the attribute name
var obj = {}
var a = Symbol('a')
var b = Symbol('b')
obj[a] = 'a'
obj[b] = 'b'
Object.getOwnPropertySymbols(obj)
//[Symbol(a), Symbol(b)]
Copy the code

Use reflect. ownKeys to iterate over the Symbol’s key name

var a = Symbol('a'); 
var b = Symbol('b'); 
var obj = {
    foo: 1
} 
obj[a] = 1; 
obj[b] = 2;
Reflect.ownKeys(obj);
//["foo", Symbol(a), Symbol(b)]
Copy the code

The iterator

An Iterator is an interface that provides a unified access mechanism for a variety of different data structures. Any data structure can be traversed by deploying the iterator interface.

The Iterator interface mainly provides for… Of consumption

The working principle of

  1. Create a pointer object that points to the start of the current data and returns an object (with the next method)
  2. The first time the object’s next method is called, the pointer points to the first digit of the data
  3. Call the next method over and over again, moving the pointer one bit down until it points to Undefind
  4. Each call to the next method returns an object containing the value and done attributes
const my = ['ljc'.'20'.'men'];
    for(let a of my) {
    console.log(a);
}//ljc 20 men
Copy the code
Use iterator ideas to customize traversal objects
const my = {
    name: 'ljc'.age: '20'.like: ['rose'.'SaLah'.'BlackPink'],
    [Symbol.iterator]() {
        let index = 0;// Index variable
        let _this = this;// Save this point
        return {
            next: function() {
                if(index < _this.like.length) {// Determine whether to end
                    const result = {
                        value: _this.like[index],// Point to the next one
                        done: false
                    }
                    index++;
                    return result;
                }else {
                    return {
                        value: undefined.done: true
                    }/ / end
                }
            }
        }
    }
}
for(let k of my) {
    console.log(k);
}
Copy the code

The generator

The ability to pause and resume code execution within a function block

The formation of a generator is a function whose name is preceded by an * to indicate that it is a generator

/* Declaration of generator functions */
function* gen() {}
/* Expression */
let gen = function* () {}
/* As a generator for object literal methods */
let foo = {
    *gen(){}}Copy the code

  • Arrow functions cannot be used to define generator functions

  • The position of the asterisk does not affect the generator

Calling a generator object function produces a generator object. Generators start out paused. Like iterators, generator objects implement the Iterator interface, with the next method. This method can therefore be called to control the start or resume execution of the generator

Yield interrupts execution

Yield can cause a generator to stop or start execution. The generator function executes normally until the yield keyword is encountered. It is paused upon yield and resumed with the next method

function * gen() {
    yield;
}
let genObj = gen();
console.log(genObj.next());// {value: undefined, done: false} yield
console.log(genObj.next());// {value: undefined, done: true} end
Copy the code
Generator objects as iterables
function* gen() {
            yield 1;
            yield 2;
            yield 3;
}
 for(const x of gen()) {
     console.log(x);
}/ / 1 2 3
Copy the code

Note that gen is an object with parentheses

Use yield to implement input and output

The yield keyword can be used as an intermediate argument to a function. The yield from the last pause in the generator function receives the first value passed to the next() method. That is, the value passed in by the first call to Next will not be used

function * gen(arg) {
    console.log(arg);/ / 11
    console.log(yield 111); // I am the second next
    console.log(yield 222);// I am the third next
    console.log(yield 333);// I am the fourth next
}
let iterator = gen(11);
iterator.next('I was the first next');// Enable the generator
iterator.next('I'm the second next');
iterator.next('I'm the third next');
iterator.next('I'm the fourth next');
Copy the code
Produces an iterable

You can use an asterisk to enhance yield behavior so that it iterates over an iterable, thus producing one value at a time

// Yield is not enhanced
function * gen() {
            yield  [1.2.3];
}
 let genObj = gen();
 console.log(genObj.next());/ / [1, 2, 3]

/ / enhance yield
function * gen() {
    yield * [1.2.3];
}
let genObj = gen();
for(const x of gen()) {
    console.log(x);
}/ / 1 2 3
Copy the code