Let, const, var: Let, const, var

  • Variables declared by var are mounted to the window, while variables declared by let and const are not

  • Var has a variable boost, but let and const do not. The area above let and const is called a “temporary dead zone” and cannot be used until defined

  • Declarations of let and const form block-level scopes

  • Let and const cannot declare the same variable again in the same scope, whereas var can

  • Let variables can be modified after they are defined, while const ostensibly declares a “constant.” Const does not guarantee that the value of a variable cannot be changed, but rather that the memory address to which the variable refers cannot be changed. For simple data types (Number, String, Boolean), the value is stored at the memory address that the variable points to and is therefore equivalent to a constant; In the case of composite data types (mainly objects and arrays), variables simply store the address to the heap memory, and there is no control over whether the heap is mutable.

Deconstruct the assignment and extension operators

  • The left and right sides of the deconstructed assignment must be the same and the right side must have a value declaration and assignment inseparable

    Let [a, b, c] = [1, 2, 3].

    Let {name, sex, age} = {name: “zhangsan”, sex: ‘female’ and the age: ’19’};

    Let one, two, three, four] = [{a, b, c}, [1, 10], ‘8’, ‘zhangsan];

    Let [} {x, y, z, (c, d), two in the name] = [{a, b, c}, [1, 10], ‘8’, ‘zhangsan];

  • Extended operator

    . The three-point operator expands the array default argument

    Let arr2 = [1,2,3] let arr2 = [4,5,6]

    Let arr = [… arr1, 7,8,9,… arr2, ‘zhangsan’, ‘lisi];

    function show(a,b,c) { console.log(a); console.log(b); console.log(c); } let arr = [1,2,3]

    show(… arr);

    function demo(a,b,… args){ console.log(args); }

    The demo (6);

New Template String

StartsWith determines what string to start with and endsWith determines what string to end withCopy the code

  • Template strings Template strings are enhanced strings, identified by backquotes (‘). It can be used as a regular string, it can be used to define multi-line strings, or it can be used to embed variables in strings.

    Let title = ‘yellow day comes to those who wait ‘; Let slogen = ‘Slogen makes money ‘;

    Let JSX = < h1 > ${title} < / h1 > < b > learning to < / b > < div > < I > ${slogen} < / I > < / div >

Proxy

The Proxy can listen for things to happen to objects and perform actions when those things happen. All of a sudden it gives us great traceability to an object, and it’s also useful for data binding.

Arrow function and this pointing problem

  • ES6 allows the use of “arrow” (= >) definition does not require parameters or need more parameters, use parentheses generation code block part is more than one statement, in parentheses, and use the return back arrow function returns object, must add parentheses arrow on the outside of the object function make the expression more concise Arrow function can simplify the callback function

  • The reference to this in the arrow functionCopy the code

    A normal function’s this: refers to its caller, and if there is no caller, it defaults to window. Arrow function this: refers to the object on which the arrow function is defined, not to the object on which the arrow function is used. By default, parent this is used.

    To sum up: the arrow function does not have its own this; its this is inherited and by default points to the object on which it was defined (the host object).

  • Replace function with => between argument and function bodyCopy the code

    1. If there are no arguments or more than one argument, use () to define the argument list; 2, if only one parameter, can not use (); 4. Arrow functions that return an object must enclose () around the object

    const fun= (x) =>{ console.log(x); return x*x }; console.log(fun(100));

  • Const box= document.getelementById (‘box’); const box= document.getelementById (‘box’); Box-onclick =function (){box-onclick =function (){box-onclick =function (){box-obj =this; setTimeout(function (){ obj.className= ‘color’; console.log(obj); The arrow function does not have its own this. Its this is inherited and by default refers to the object on which it was defined (the host object). box.onclick=function (){ setTimeout(() =>{ console.log(this); this.className= ‘color’; // console.log(obj); }}, 1000)

Array of newly added advanced functions

  • Filter function

  • Mapping function map

  • Summary function reduce

  • Give me an example

There is a list of goods 1. Discount the goods over 10 yuan, and take out the goods over 10 yuan; 2. 50% discount for goods over 10 yuan; 3. What is the total price of the discounted goods? Goods1 = goods1 filter(function (n){return n>=10; function (n){return n>=10; } console.log(goods1);} console.log(goods1); Let goods2 = goods1.map(function (n){return n*0.5; Sum = goods2.reduce(function (s,n){return s+n; },0) // The first time, s is 0, n is the first element in the array 6 // the second time, s is the return value of the first callback function, n is the second element in the array 15 // the third time, s is the return value of the second callback function, n is the third element in the array 17 // the fourth time, The s argument is the return value of the third callback function, and n is the third element in the array, 30Copy the code

The simple way, using chain programming, directly implement the problem

Let goods =,30,34,60,20,25 [12] let sum = goods. The filter (n = 10) > n = >. The map (n = > n * 0.5). The reduce ((s, n) = > s + n);Copy the code

New data structures map and set in ES6

  • 2. Functions of the Map function

    The KEY of a JSON file can only be a string. The key of a map file can be of any type.

    Map.set (key,value) Sets a value map.get(key) obtains a value map.delete(key) Deletes an item map.has(key) Determines whether there is a key map.clear()

  • Speed update at………….