“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Hello everyone, I am L, this is the second article of my ES6 summary. This paper mainly summarizes the template string, function default parameters, residual parameters, expansion operators, numerical representation and other knowledge points.

The use of template strings

Prior to ES6, we used + to concatenate strings and other variables, which can be cumbersome and hard to read.

const name = 'Hahaha'
const age = 18
const height = 1.80 

console.log('my name is ' + name + ', age is ' + age + ', height is ' + height); // My name is hahaha, age is 18, height is 1.8

Copy the code

In ES6, template strings have been added to make it easy to concatenate strings with other variables.

const message = `my name is ${name}, age is ${age}, height is ${height}` 
console.log(message); // My name is hahaha, age is 18, height is 1.8
Copy the code

In addition, simple calculations and function calls can be made within template strings.

const info = `age double is ${age * 2}`
console.log(info); // age double is 36
Copy the code
function doubleAge() {
  return age * 2
}

const info2 = `double age is ${doubleAge()}`
console.log(info2); // double age is 36
Copy the code

Another use of template strings is tag template strings.

Usually we call the function 👇

function foo(m, n, x) {
  console.log(m, n, x);
}

foo('hello'.'world')
Copy the code

If we use a tag template string and insert other variables when we call it, the result is that the first element is an array, the elements in the array are the strings split by the template string, and the elements after the array are what the template string passed in.

const name = 'haha'
const age = 18
foo`hello${name}wo${age}rld` // [ 'hello', 'wo', 'rld' ] haha 18
Copy the code

The default argument to the function

In a function, if you don’t know whether the parameter passed has a value and you need to process the parameter passed in the function, you can provide default values for the parameters of the function.

Prior to ES6, we could give function arguments the default 👇.

function foo(m, n) {
  m = m || 'aaa'
  n = n || 'bbb'
  console.log(m, n);
}

foo('ccc'.'ddd')
Copy the code

The downside of this approach is that it is cumbersome to write and the code is less readable. On the other hand, if we want to pass 0 or an empty string ”, the result is not what we expect and the default value will be taken.

foo(0.' ')
Copy the code

In ES6 you can provide default values for parameters to functions, resolving problems of previous scenarios.

function foo(m = 'aaa', n = 'bbb') {
  console.log(m, n);
}

foo(0.' ')
Copy the code

In functions, default arguments can also be used with deconstruction. If the parameters you pass are objects, you can provide default values for the parameters and deconstruct them.

function printInfo({name, age} = {name: 'haha', age: 18}) {
  console.log(name, age);
}

printInfo({name: 'xixi'.age: 20})
Copy the code

Of course, you can also provide default values during deconstruction.

function printInfo1({name = 'hello', age = 18} = {}) {
  console.log(name, age);
}

printInfo1();
Copy the code

The default values of function arguments are usually left at the end, and are matched in order when the function is called.

function bar(x, y, z = 30) {
  console.log(x, y, z);
}

bar(10.20)
bar(undefined.10.20)
Copy the code

We can get the number of arguments by calling the function.length. Note that the default value of the function parameter changes the length of the function. The default value and subsequent parameters are not counted in length.

function baz(a, b, c) {
    console.log(a, b, c);
}

console.log(baz.length); / / 3
Copy the code
function baz(a, b, c = 30) {
    console.log(a, b, c);
}

console.log(baz.length); / / 2
Copy the code
function baz(a, b, c = 30, d) {
 console.log(a, b, c, d);
}

console.log(baz.length); / / 2
Copy the code

The remaining arguments to the function

In ES6, an indefinite number of parameters can be obtained from residual parameters. The rest of the arguments give you an array. The Rest parameter must be last Formal parameter.

function foo(m, n, ... args) {
  console.log(m, n); / / 1. 2
  console.log(args);  // [3, 4, 5, 6]
  console.log(arguments);
}

foo(1.2.3.4.5.6)
Copy the code

Arguments

  1. The remaining arguments contain only arguments that have no corresponding parameters, whereas the Arguments object contains all arguments passed to the function.
  2. The arguments object is not a real array, and the remaining arguments are a real array that can do all the operations on an array.
  3. Arguments is a data structure provided in early ECMAScript to make it easy to get all arguments, while the remaining arguments are provided in ES6 and are expected to replace arguments.

Expansion operator

The expansion operator can be used during function calls, array construction, and object literals construction (a new feature added in ES9).

Expand when a function is called

const names = ['abc'.'cba'.'nba']
const name = 'haha'
const info = {name: 'haha'.age: 18}

function foo(x, y, z) {
  console.log(x, y, z);
}
Copy the code

Expand when constructing an array

The result of expanding the string is character by character.

const newNames = [...names, ...name]
console.log(newNames);
Copy the code

Object literals are expanded when built

constobj = {... info,address: 'Shanghai'. name}console.log(obj);
Copy the code

Note: The expansion operator is a shallow copy.

const info = {
  name: 'haha'.friend: {
    name: 'xixi'}}constobj = {... info,name: 'kaka'}
console.log(obj); // { name: 'kaka', friend: { name: 'xixi' } }

Copy the code

We can see that the name value in the friend in the obj object is changed and the name in the friend in the info object is also changed. So the expansion operator is really a shallow copy.

obj.friend.name = 'didi'
console.log(info.friend.name); // didi
Copy the code

Numerical representation

const num1 = 100 / / decimal
// b => binary 
const num2 = 0b100 / / binary
// o => octonary
const num3 = 0o100 / / octal
// x => hexadecimal
const num4 = 0x100 // Hexadecimal

console.log(num1, num2, num3, num4); // 100 4 64 256
Copy the code

When the value is very large, you can use _ as the concatenation character (new in ES2021 ES12)

const num = 10 _000_000_000_000
console.log(num);
Copy the code

Previous articles 👇👇👇

Summary of ES6 Common Knowledge Points (1)

The 2021 year-end summary of an entry-level front-end programming debugger