“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

In this article, we will talk about some common knowledge points in ES6

We often use ES6 syntax in daily development, and we often get asked about ES6 syntax in interviews, such as the difference between let and const, arrow functions and normal functions, etc.

This article will cover common ES6 concepts, followed by new es7-12 syntaxes.

What is the ES6

ES6 is short for ECMAScript 6.0. It was released in June 2015, so it is also called ES2015. The purpose is to make JavaScript a language for writing more complex large-scale applications.

Let and const

Let and const have been added in ES6 to declare variables and constants. We know that variables declared by the var keyword are always on the window object. Variables and constants declared with the let and const keywords are limited to the current scope and have no scope-raising.

let age = 18;
const num = 10;
Copy the code

Data deconstruction

A method for easily retrieving data from arrays or objects (Destructuring).

There are basic deconstruction procedures in arrays, sequential deconstruction, array deconstruction, and default values.

const arr = [10.20.30];
const [item1, item2, item3] = arr;
console.log(item1, item2, item3); / / 10 20 to 30
Copy the code

Deconstruction in an object has basic deconstruction procedures, arbitrary order, renaming, and default values.

const { name, age } = obj;
console.log(name); // _island
console.log(age); / / 18
Copy the code

String template

In ES6 we can use variables and expressions in strings. Makes concatenation syntax between strings and variables more elegant.

const city ='Guangzhou'

/ / ES5
console.log('I live in '+city) // I live in Guangzhou
/ / ES6
console.log(`I live in ${city}`) // I live in Guangzhou
Copy the code

The default argument to the function

In ES6, we can define a default value for a function parameter that is used when the parameter is not passed in.

Let’s take a look at the function defaults in ES5

function foo(name,age){
var name=name || '_island'
var age=age || 18
console.log('name is '+name);
console.log('age is '+age);
}

foo() // name is _island age is 18
foo('abc'.17)// name is abc age is 17
Copy the code

After ES6, we simply define a default value after the function parameter. We modify the above example slightly.

function foo(name='_island',age=18){
  console.log('name is '+name);
  console.log('age is '+age);
}

foo() // name is _island age is 18
foo('abc'.17)// name is abc age is 17
Copy the code

Function residual parameter

Rest Parameters are referenced in ES6, and you can put an indefinite number of parameters into an array. The last argument in the function goes to… Args, in the body of the function, args is an array.

function sum(a,b,c,... args){
  console.log(a,b,c);
  console.log('---args');
  console.log(args);
}

sum(1.2.3.4.5.6.7.8.9.10)
/ / 1 2 3
// ---args
/ / /
// 4, 5, 6, 7,
/ / 8, 9, 10
// ]

Copy the code
  • withargumentsThe difference between
    • The remaining number only contains no corresponding argument, andargumentsThe object contains all the arguments passed to the function
    • restThe argument is an array, andargumentObjects are pseudo-arrays
    • The remaining parameters must be placed last

Arrow function

– Added arrow functions in ES6 because they are defined using arrows. Let’s see how it’s used.

// ES5
function foo() {}

// ES6
const foo = () = > {};
Copy the code

Arrow functions are declared like this when they have arguments and a function body

// ES5
function foo(m, n) {
  console.log(m + n);
}

// ES6
const foo = (m, n) = > {
  console.log(m + n);
};
Copy the code

Short for arrow function

// If there is only one function in the function body, this statement can be written like this, and it is returned by default (omitting return).
const foo = (m, n) = > console.log(m + n);

// If there is only one argument,() can be omitted. Multiple arguments cannot be omitted
const foo = name= >console.log(name);
Copy the code

Arrow function notes

  • Arrow functions cannot be used as constructors
  • Arrow functions have no prototype
  • Not in the arrow functionarguments
  • The arrow function cannot be usedyieldThe keyword

On the pointing of the arrow function

  • Arrow function doesn’t have anythis, it’sthisIt’s its parent
  • thisIs bound when the arrow function is defined

The Class keyword

As for the class keyword, I have covered the use of class and related extensions in detail in another article.

Click on the direct JS advanced | explanation ES6 in the Class

Numerical representation

In ES6, literals in base are supported and need to be preceded by the corresponding identifier.

const num1 = 100; / / decimal
const num2 = 0b100; / / binary
const num3 = 00100; / / octal
const num4 = 0x100; // Hexadecimal
console.log(num1, num2, num3, num4); // 100 4 64 256
Copy the code

String method

New methods for string objects in ES6 (Common methods)

methods The return value instructions
includes Boolean value Determines if there are substrings in the string
startsWith Boolean value Checks whether the string begins with the specified character
endsWith Boolean value Checks whether the string ends with the specified character
padStart The string after completion Completion string: completion at the beginning
padEnd The string after completion Completion string: tail completion
trimStart Returns the erased string Eliminates Spaces at the beginning of strings
trimEnd Returns the erased string Eliminate whitespace at the end of a string

includes

The includes method is used to determine if there are substrings in the string, returning a Boolean value.

const str = "hello world";
const str2 = "hello world hello world";
// Determine if the string contains a substring
const s1 = str.includes("hello");
console.log(s1); // true
Copy the code

startsWith

The startsWith method is used to determine whether a string begins with a specified character.

// Check whether the string begins with h
const ish = str.startsWith("h");
console.log(ish); // true
Copy the code

endsWith

The endsWith method is used to determine whether a string endsWith a specified character.

// Check whether the string ends with d
const isd = str.endsWith("d");
console.log(isd); // true
Copy the code

padStart

The padStart method is used to complete a string from the start. Returns the completed string without modifying the original string.

const str4 = "100";
console.log(str4.padStart(6."000")); / / 000100
Copy the code

padEnd

The endsWith method is used to complete a string from the end. Returns the completed string without modifying the original string.

const str5 = "200";
console.log(str5.padEnd(6."000")); / / 200000
Copy the code

PadStart/padEnd If the length of the original string is equal to or greater than the maximum length, the string completion does not take effect and the original string is returned.

trimStart

TrimStart removes whitespace at the beginning of a string and returns the erased string without modifying the original string.

trimEnd

TrimStart removes whitespace at the end of the string and returns the erased string without modifying the original string.

const str6 = " _island ";
console.log(str6.trimStart()); // '_island '
console.log(str6.trimEnd()); // ' _island'
Copy the code

The last

This article introduced the syntax commonly used in ES6 in daily development, and there are some data types about ES6 that I will cover in the next article. The new syntax in ES7-12 will also be introduced later. Help you in the daily development of a better!

If you find this article helpful, please use your little hands and give it a thumbs up!

JS advanced series of articles

  • Pure functions of functional programming
  • Curritization of functional programming
  • Combinatorial functions of functional programming
  • Explain the classes in ES6