New syntax in ES6

New syntax in ES6

ES6 is actually a generic term for ES2015 and subsequent versions

1, let

Keywords used to declare variables

• 1. Variables declared by the LET are valid only within the code block in which they reside

if (true) {
  let a = 10
}
console.log(a) // a is not defined
Copy the code

• 2. There is no variable promotion in LET

console.log(a)  // a is not deined
let a = 10
Copy the code

• 3. Variables declared by let have the property of temporary dead zones

Var a = 10 if (true) { Console. log(a) let a = 20} Cannot access 'a' before initializationCopy the code

Let

var arr = [];
for (var i = 0; i < 2; i++) {
  arr[i] = function () {
    console.log(i)
  }
}
arr[0]()  // 2
arr[1]()  // 2
Copy the code

Change the var I in the above code to let

var arr = [];
for (let i = 0; i < 2; i++) {
  arr[i] = function () {
    console.log(i)
  }
}
arr[0]()  // 0
arr[1]()  // 1
Copy the code

2, const

Constants are declared, and constants are values (memory addresses) that cannot be changed

• 1. Block-level scope

if (true) {
  const a = 10
}
console.log(a) // a is not defined
Copy the code

• 2. Constant must be assigned when declared

const a //  Missing initializer in const declaration
Copy the code

• 3. The value of a constant cannot be modified after it is assigned

const a = 10
a = 20
console.log(a) // Assignment to constant variable.
Copy the code

const arr = [1, 2, 3, 4, 5, 6]
arr[0] = 10
arr[1] = 20
console.log(arr)
arr = ['x', 'y', 'z']
console.log(arr)
Copy the code

In the above code, changing the value of arr[0] does not change the memory location of the arR constant. Reassigning arr (arr = [‘x’, ‘y’, ‘z’]) does change the memory location of the constant.

3) let, const, var

• 1, the use ofvarThe scope of the declared variable is the function in which the statement is located, and the variable promotion phenomenon exists
• 2, the use ofletThe declared variable is scoped to the weight of the code block in which the statement is located. There is no variable promotion
• 3, the use ofconstDeclared constants cannot be modified in subsequent code

4. Deconstruct assignment

ES6 allows you to extract values from arrays and assign values to variables in their respective locations. Objects can also be destructed

• An array of deconstruction

let [a, b, c, d, e] = [1, 2, 3]
console.log(a, b, c, d, e)  // 1 2 3 undefined undefined
Copy the code

5. Object deconstruction

let obj = { name: 'Jerry', age: 18 }; let { name, age } = obj; Let {name: uname, age: uage} = obj // uname uage belongs to alias console.log(name, age) // Jerry 18Copy the code

6. Arrow function

The arrow function is used to simplify function definition syntax

Const func = () => {} const func = () => {}Copy the code

If there is only one line of code in the function body, and the result of executing the code is the return value, we can omit the curly braces

Function func(x, y) {return x + y} const func = (x, y) => x + yCopy the code

If the parameter has only one, you can omit the parentheses

Function func (v) {return v} const func = v => vCopy the code

Arrow functions do not bind this. Arrow functions do not have their own this. If we use this in arrow functions, the this keyword points to this in the position where the arrow function is defined

Function fn() {console.log(this) return () => {// This refers to this in the arrow function definition area, where the arrow function is defined inside the fn function. }} const obj = {name: 'Jerry'} const func = fn.call(obj) func()Copy the code

Arrow function

Var age = 100 const obj = {age: 18, say: () => {console.log(this.age) // print 100, obj cannot generate scope, so arrow function is defined in global scope}}; obj.say()Copy the code

7. Remaining parameters

Residual arguments allow us to represent an indeterminate number of arguments as an array

function func(name, ... args) { console.log(name) // 1 console.log(args) // [2, 3, 4, 5, 6] } func(1, 2, 3, 4, 5, 6)Copy the code

Example:

const sum = (... args) => { let total = 0; args.forEach(item => total += item) return total } console.log(sum(10, 20, 30, 40)) // 100Copy the code

The remaining parameters are used with deconstruction:

let person = ['Jerry', 'Lise', 'Tom', 'xiaowang'];
let [p1, ...p2] = person
console.log(p1) // Jerry
console.log(p2) // ['Lise', 'Tom', 'xiaowang'];
Copy the code

8. extend operators

The extension operator converts an array or object into a comma-separated sequence of arguments

const arr = [1, 2, 3, 4, 5] console.log(... arr) // 1 2 3 4 5Copy the code

Extended computing application scenarios:

Can be applied to array merging

Const arr1 = [1, 2, 3] const arr2 = [4, 5, 6] Const arr3 = [arr1,... arr2] the console. The log (arr3) / / [1, 2, 3, 4, 5, 6] / / method 2: arr1. Push (... arr2) console.log(arr1) // [1, 2, 3, 4, 5, 6]Copy the code

An extension operator can turn an array of classes or a traversable object into a true array

const divs = document.getElementsByTagName('div');
console.log(divs)
Copy the code

The above isPseudo array(class array), we convert it to a real array:

const arr = [...divs]
console.log(arr)
Copy the code

Built-in object extensions for ES6

Array extension method

Array extension 1: array.from ()

Constructor method: array.from (): Converts an Array or traversable object into a true Array

const obj = {
  "0": 100,
  '1': 200,
  '2': 300,
  length: 3
};
const arr = Array.from(obj);
console.log(arr) // [100, 200, 300]
Copy the code

The array.from () method can also take a second argument, similar to the map method, that processes each element and places the value in the returned Array:

const obj = {
  "0": 100,
  '1': 200,
  '2': 300,
  length: 3
};
const arr = Array.from(obj, item => item * 2);
console.log(arr)  // [200, 400, 600]
Copy the code

Array extension method 2: the find() method

Used to find the first eligible array member, returns undefined if none is found

let arr = [
  {
    id: 1,
    name: 'Jerry'
  },
  {
    id: 2,
    name: 'Lise'
  }
];
let res = arr.find((item, idx) => item.id === 1)
console.log(res)  // {id: 1, name: 'Jerry'}
Copy the code

Array extension method 3: the findIndex() method

The index used to find the first eligible array member, or -1 if none is found

Example 1: let arr = [{id: 1, name: 'Jerry'}, {id: 2, name: 'Lise'}]; Let res = arr.findIndex((item, idx) => item.id === 1) console.log(res) // 0 // Example 2: const arr = [10, 20, 30, 40, 50] const index = arr.findIndex(item => item > 18) console.log(index) // 1Copy the code

Array extension method 4: includes()

Indicates whether an array contains a given value, returning a Boolean value

let arr = ['x', 'y', 'z'];
console.log(arr.includes('x'))  // true
console.log(arr.includes('k'))  // false
Copy the code

String extension methods

String extension method 1: template String (‘ ‘)

let name = `Jerry`
console.log(name) // Jerry
Copy the code

Variables can be parsed in template strings

Const name = 'Jerry' const age = 18 const Hi = 'I am ${name}, this year ${age}' console.log(Hi) // The contents of the template string can be newlineCopy the code

Functions can be called from a template string

Const func = function () {return 'function returns content'} const res = '${func()}, ha ha ~' console.log(res) // Function returns content, ha ha ~Copy the code

String extension method 2: startsWith(), endsWith()

• StartsWith (): Indicates whether the argument string is at the head of the original string, returning a Boolean value
• EndsWith (): Indicates whether the argument string is at the end of the original string, returning a Boolean value

const str = 'Hello'
console.log(str.startsWith('H'))  // true
console.log(str.startsWith('e'))  // false
console.log(str.endsWith('e'))  // false
console.log(str.endsWith('o')) // true
Copy the code

Extension of String 3: repeat()

The repeat() method means that the original string is repeated n times, returning a new string

const name = 'Jerry'
console.log(name.repeat(3)) // JerryJerryJerry
Copy the code

9, Set

ES6 provides a new data structure, Set, which is similar to an array, but has unique values for its members and no duplicate values

The Set itself is a constructor used to generate the Set data structure

const s = new Set()
Copy the code

The Set function can take an array as an argument to initialize

const s = new Set([1, 2, 3, 4, 5, 6, 6, 6])
console.log(s.size)
console.log(s)
Copy the code

Set application scenario: Array deduplication

const arr = new Set(['a', 'a', 'b', 'b'])
console.log([...arr])  // ['a', 'b']
Copy the code

Set instance methods:

• 1, add(): Adds, returning the Set structure itself
• 2, delete() : delete, return a Boolean value, indicating whether the deletion is successful
• 3, has() : Returns a Boolean value indicating whether the value is a Set member
• 4, clear() : Clears all members, no return value

const s = new Set();
s.add(1).add(2).add(3)  // {1, 2, 3}
s.delete(2)  // {1, 3}
s.has(3)  // true
s.clear() // {}
Copy the code

An instance of a Set, like an array, has a forEach method that performs some operation on each member and returns no value

s.forEach(value => console.log(value))
Copy the code

Example:

const s = new Set(['a', 'b', 'c']);
s.forEach(v => console.log(v)) // a b c
Copy the code