Common optimization and upgrade contents of ES6


1、 Let and const commands

Let has its own block level scope, and fixed the variable promotion problem caused by VAR declaration. Using const to declare constants is immutable.

2、 Common upgrade optimization for string type

  • Template string (‘)
  • Add the include () method to the prototype of string to replace the traditional index of, which makes the semantics clearer
  • In addition, new methods such as startswith(), endswith(), padstart(), padend(), repeat() are added

1、startsWith: str.startsWith(searchString[, position])
Start with what, accept two parameters, one is the string to search, the second is the starting position of the search, the default is 0, find is true, otherwise it is false.
2、endsWith:str.endsWith(searchString[, length])
The first parameter is also the string to be searched, and the second parameter is the length of the string to be searched. The default value is str.length
3、padStart:str.padStart(targetLength [, padString])
Fill the string at the beginning of the original string until the target length is reached
The first parameter is the target length, and the second parameter is the padding string. If the string is too long, the left side is reserved
4、padEnd:str.padEnd(targetLength [, padString])
Fills the end of the original string with the specified string up to the target length. Same as padstart parameter
Repeat() constructs and returns a new string containing a specified number of copies of the string that are concatenated together.
Count: the number of repetitions, indicating how many times the original string has been repeated in the newly constructed string.

3、 Common upgrade and optimization of array type

  • Array deconstruction assignment:

let [a,b,c] = [1,2,3]

  • Extension operator:
let a = [1,2,3];
let b = [...a]
  • Find and FindIndex methods

1. Find: array instance find method, which can receive a callback function as a parameter. The callback function can pass three parameters, which are the current value, the current position and the original array.
[1,2,3].find((value, index, arr) => value > 1)
The execution result will return the first member that meets the condition, if not, undefined
2. FindIndex: similar to find, except that it returns the position of the qualified member, if not, it returns – 1

These two methods can find Nan, which makes up for the deficiency of indexof method.

[NaN].indexOf(NaN) // -1
[NaN].find(x =>, x)) // NaN
[NaN].findIndex(x =>, x)) //0
  • copyWithin

Method copies a part of an array to another location in the same array and returns it without changing the length of the original array.
arr.copyWithin(target[, start[, end]])
There are three parameters
1. Target represents the target position, from which to copy and replace. If it is a negative number, it is calculated from the tail. If target is greater than arr.length If the target is after start, the copy sequence will be modified to conform to the arr.length
2. Start indicates the starting position of the element to be copied, and a negative number indicates that it starts from the end. If start is not worn, it will be copied from 0
3. End indicates the end position of the starting copy element. It will be copied to this position, but it is not included. If it is a negative number, it is calculated from the end. If not, it will be copied to the end of the array (default is arr.length )

[1, 2, 3, 4, 5].copyWithin(-2)
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]
  • includes

arr.includes(valueToFind[, fromIndex])

Valuetofind: element to find
From index: starting from the index of from index. It can be a negative number, which means starting from the end
If the corresponding element is found, it returns true; otherwise, it returns false
[1,2,3].includes(1) // true

  • fill

The fill () method fills all elements in an array from the start index to the end index with a fixed value. Index termination is not included.
arr.fill(value[, start[, end]])
Value: filled value
Start: start position index, default to 0
End: end position. Therefore, the default is the length of the array
[1,2,3].fill(6,1) // [1, 6, 6]

  • flat

The flat () method recursively iterates through the array according to a specified depth, and merges all the elements and the elements in the traversed subarray into a new array
var newArray = arr.flat([depth])
Depth: Specifies the structure depth of the nested array to extract. The default value is 1

[1,2,[3,4,[5,6]]].flat(2) // [1,2,3,4,5,6] 

4、 Common upgrade optimization for number type

  • Isfine (), IsNaN () method is added to the number prototype to optimize the traditional global isfine (), IsNaN (), which will convert the non numeric type to the number type for further judgment, while ES6 will not convert the type. It is used to detect whether the value is limited or Nan.
  • New on Math object Math.cbrt (), TRUNC (), hypot (), etc

5、 Common upgrade optimization for object type

  • Object property variable declaration

If the value of an object property is a variable with the same key value, the writing of the value can be omitted

let { a,b,c } = obj
Let newobj = {A: A, B: B} // equivalent to the following formula
let newObj = {a,b}

The method can also be simplified as follows:

let obj = {
    fn() {
  • Object deconstruction assignment

let { a,b } = { a:1, b:2 }

  • Object extension operators
let { a, } = {a:1, b:2, c:3 } // rest = { b:2, c:3 }
let obj1 = { a:1, b:2 }
let obj2 = {...obj1, c: 3}
  • Super keyword: ES6 adds the keyword super similar to this in the class. Unlike this always points to the object of the current function, the super keyword always points to the prototype object of the object of the current function.
  • A new is() method is added to the object prototype to fix that ‘= =’ cannot compare Nan
  • Add a new assign () method, which is used to add new properties or merge objects.
let obj1 = {a: 1, b:2 }
let obj2 = {c: 3, d: 4 }
Object.assign(obj1, obj2) /// { a:1,b:2,c:3,d:4 }

Object.assign(target, ...sources)
Assign the values of all enumerable properties from one or more source objects to the target object. It will return the target object.
Target is the target object to which the sources source object is assigned.

  • Getprototypeof() and setprototypeof() methods are added to the object prototype to get or set the prototype object of the current object.
  • The object prototype is also added Object.keys (), Object.values (), Object.entries The () method is used to get all the keys, all the values and all the key value pairs of an object.

6、 Common upgrade optimization for function types

  • Arrow function

Change the direction of this to the object where the function is defined, not the execution time.

  • Function default assignment
function fn(a = 1, b) {}

Reference link