(1) let and const

1.let

• let defines a variable. A variable cannot be defined again, but its value can be changed

Code:

let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // Define again, and an error is reported: Identifier 'name' has already been declared

• Has block level scope. (i.e. braces)

Code:

{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // An error is reported. There is no definition of age in this scope

for (let i = 0; i < 10; i++) {
    // i can only be used in this scope because there is a block level scope
}
console.log(i);  // An error is reported. There is no definition of i in this scope

• There is no variable promotion. It must be defined before use

Code:

console.log(gender); // An error is reported. gender has not been defined at this time
let gender = 'male'; 

• let declared variables will not be pressed into the window object and are independent

Code:

let hobby = 'having dinner';
console.log(window.hobby); // undefined

If you declare variables with var, you can't declare them with let again, and vice versa. The reason is that this variable has been declared.

2.const

• Use the const keyword to define constants
• Constants are immutable. Once defined, their values cannot be modified

Code:

// 1. Use const keyword to define constants. Constant names are generally capitalized
// 2. Constants are immutable. Once defined, their values cannot be modified
const PI = 3.1415926；
PI = 3.14; // An error is reported. Once a common is initialized, it cannot be modified

• An initial value must be given when initializing a constant

Code:

const PI; 
// Error, Missing initializer in const declaration

• With block level scope
• There is no variable promotion. It must be defined before use
• Constants are also independent and will not be pushed into window objects after definition

3. Summary

  (2) Deconstruction assignment

1. Array deconstruction

// In case 1, variables and values correspond to each other one by one
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // Output 5 9 10

// In case 2, there are many variables and few values
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // Output 5 9 10 undefined

// Case 3: few variables and many values
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); // 5, 9

// Case 4, value as required
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // It is not necessary to use the value received by the variable to occupy the space
console.log(a, b); // 10, 3 

// Case 5, residual value
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ... c receives the remaining values, and the resulting c is an array
console.log(a, b, c); 
// result:
// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]

// Case 6: complex cases can be deconstructed as long as they conform to the pattern
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg

2. Object deconstruction

// In case 1, the variable name and attribute name are required to be the same by default
let { foo, bar } = {foo: 'aaa', bar: 'bbb'};
console.log(foo, bar); // aaa, bbb
let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined

// In case 2, you can rename the variable by:
let {a, b:c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, world

// In case 3, the value can be obtained if the variable name is consistent with the attribute name, which does not have to correspond one by one
let {b} = {a: 'hello', b: 'world'};
console.log(b); // world
// At this time, the variable a is not defined, so using a will report an error

// Case 4, residual value
let obj = {name:'zs', age:20, gender:'male'};
let {name, ...a} = obj;
console.log(name, a);
// result:
// name = zs
// a = {age: 20, gender: "male"};

// Case 5: complex cases can be deconstructed as long as they conform to the pattern
let obj = {
    name: 'zhangsan',
    age: 22,
    dog: {
        name: 'Maomao',
        age: 3
    }
};
let {dog: {name, age}} = obj;
console.log(name, age); // Maomao 3

(3) Functions and parameters

1. Arrow function

Use the arrow to define the function = > goes to. The purpose is to simplify the definition of the function, and this is also special.

Basic definition:

// Non arrow function
let fn = function (x) {
    return x * 2;
}
// Arrow function, equivalent to the above function
let fn = (x) => {
    return x * 2;
}

• There is only one formal parameter. Parentheses can be omitted

let fn = (x) => {
    return x * 2;
}
// Equivalent to
let fn = x => {
    return x * 2;
}

• The function body has only one sentence. You can omit braces and represent the content of the returned function body

let fn = (x, y) => {
    return x + y;
}
// Equivalent to
let fn = (x, y) => x + y;

• There are no arguments inside the arrow function

let fn = () => {
    console.log(arguments); // Errors are reported. Arguments are not defined
};

• This inside the arrow function points to this in the external scope, or it can be considered that the arrow function does not have its own this

 // var must be used here because variables declared with let cannot be called with window
    var name = 'lisi';
    let obj = {
        name: 'zhangsan',
        fn: () => {
            console.log(this); // window object
            console.log(this.name); // lisi
        }
    };
    obj.fn();

• Arrow functions cannot be used as constructors

let Person = () => {
    
};
let obj = new Person(); // Person is not a constructor
// The arrow function does not have its own this and cannot handle members, so it cannot be a constructor

2. Default value of parameter

In ES6, you can set default values for function parameters

function fn(x, y = 'world') {
    console.log(x, y);
}
fn(2)
fn(2,3)
//Print results
//2 "world"
//2 3

3.rest parameters

For the remaining parameters, modify the last parameter with... And put the remaining parameters into an array. It can replace the use of arguments.
The rest parameter can only be the last parameter.

Code:

// There are many parameters. You are not sure how many. You can use the remaining parameters
function fn(...values) {
    console.log(values); // [6, 1, 100, 9, 10]
}
// call
console.log(fn(6, 1, 100, 9, 10)); //undefined

function fn(a, b, ...values) {
    console.log(a); // 6
    console.log(b); // 1
    console.log(values); // [100, 9, 10]
}
// call
console.log(fn(6, 1, 100, 9, 10)); //undefined

(4) Extension of built-in function

1. Extension operator:

... you can expand each item in the array

Code:

// Merge two arrays
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]
// Using array expansion as a parameter can replace apply
// Find the maximum value of the array
let arr = [6, 99, 10, 1];
let max = Math.max(...arr); // Equivalent to Math.max(6, 99, 10, 1);

2.Array.from()

Convert pseudo array to array

• The pseudo array must have a length attribute. If not, an empty array will be returned
• The length of the converted array is determined by the length of the pseudo array

Code:

let fakeArr = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']
// The object to array must have a length value, because the number of members of the resulting array is the number specified by length
// In the above example, if the length is 2, the resulting array is ['a ','b']

3.find() method and findIndex() method

find(): used to find the value in the array
findIndex(): used to find the subscript of the array. The usage is the same as that of find

Code:

    let value = [3, 5, -1, -4, 6].find((item, index, arr) => {
        console.log(item); //Represents each value of the array
        console.log(index); //Represents each subscript of the array
        console.log(arr); //Represents the entire array
        //If you need to search, you need to use the return condition;
        return item < 0; //The find method returns the first value that satisfies the condition, - 1
        //If it is the findIndex method, it will return the subscript of the first value that meets the condition, 2
    });
    console.log(value);

• find finds the first qualified member in the array and returns the member. If it is not found, it returns undefined.
• findIndex finds the first qualified member in the array and returns the index of the member. If it is not found, it returns - 1.

4.includes() method

• Judge whether the array contains a value and return true / false
• Parameter 1, required, indicates the search content
• Parameter 2, optional, indicates the starting position, and 0 indicates the starting position

Code:

let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false, starting from the position of 2, so 4 is not found
console.log(arr.includes(5)); // false

5.includes(), startsWith(), endsWith()

• includes(str, [position]) returns a Boolean value indicating whether a parameter string was found
• startsWidth(str, [position]) returns a Boolean value indicating whether the parameter string is at the head or specified position of the original string
• endsWith(str, [position]) returns a Boolean value indicating whether the parameter string is at the end of the original string or at the specified position.

console.log('hello world'.includes('e', 2)); // false start from position 2 to find e, not found
console.log('hello world'.includes('e')); // true
console.log('hello world'.startsWith('h')); // If the position is not specified, check whether the beginning is h and return true
console.log('hello world'.startsWith('l', 2)); // The character at the specified position is l and returns true
console.log('hello world'.endsWith('d')); // Unspecified position, ending with d, return true
console.log('hello world'.endsWith('r', 9)); // The character at the specified position is r and returns true

6.repeat() method

The repeat method returns a new string, indicating that the original string is repeated n times.

let html = '<li>itheima</li>';
html = html.repeat(10);

(5) New object Set

Data structure Set. It is similar to an array, but the values of members are unique and there are no duplicate values.
Set itself is a constructor used to generate a set data structure.
The feature of Set is that there will be no duplication of members in the object.

1. Basic usage:

let set = new Set(); Get an empty set object.

2. Members of set

• size: property to obtain the number of members in the set, which is equivalent to the length in the array
• add(value): adds a value and returns the Set structure itself.
• delete(value): deletes a value and returns a Boolean value indicating whether the deletion is successful.
• has(value): returns a Boolean value indicating whether the value is a member of Set.
• clear(): clear all members without return value.

    let set = new Set();
    //Call the add method built in the set object to add data to the set.
    set.add(3);
    set.add(8);
    set.add(9);
    set.add(3); //Adding failed without error. Members in set cannot be duplicated
    console.log(set); // {3,8,9}
    console.log(set.size); //3

When initializing a Set, you can also pass in an array or string for it, and the members in the obtained Set object will not be repeated. According to this feature, array or string de duplication can be completed.

    let set = new Set([4, 8, 9, 5, 4, 8, 4, 2]);
    console.log(set); //Set(5) {4,8,9,5,2}
    let arr = [...set]; //Expand each value in the set and place it in the array
    console.log(arr); //(5) [4, 8, 9, 5, 2]
    let str = new Set('abcdacbdcbac'); 
    console.log(str); //Set(4) {"a", "b", "c", "d"}
    console.log([...str].join('')); //abcd

Author: CNLISIYIII
Link: https://www.jianshu.com/p/0120580f39aa
Source: Jianshu