Additions to es6 - 1

Keywords: Javascript html5 html

let keyword declares variable

let and var are both used to declare variables but differ

Features of let:

1. let cannot repeat declaration; var can repeat declaration

2. let will not be mounted under windows. var is mounted under windows as a property under Windows

3. let is a block-level scope. It does not affect variables in the global scope

4. Variables declared by let cannot be promoted.

const keyword declares variable

Characteristic:

const has other properties besides those of let

1. Declarations and assignments must be done at once

2. Do not allow changing memory space address

3. Constant values cannot be modified

String Template

Used to define multiline strings represented by (` `)

API of string in es6

codepointAt() Returns the code point of a character

        // Define a string
        var  arr='hello world';
        // Gets the code value of a specified character using codePointAt()
        console.log(arr.codePointAt('h')); //104

Include() Determines whether the specified character exists in the matched string

 var  arr='hello world';
 // Use include() to determine whether a specified character exists in a matched string
 console.log(arr.includes('h')); //true

startsWidth() determines whether to include the header of the parameter string

endsWidth() determines if the end of the parameter string is included

      var  arr='hello world';
        console.log(arr.startsWith('h'));



        console.log(arr.endsWith('d'));

repeat() returns a new string that repeats the original string a specified number of times

console.log(arr.repeat(2));

Two uses of Starting.raw

1. String.raw`Parameters`

2. Starting.raw({raw:variable}1, 2, 3, 4)

Meaning: invalidates any escape character and backslash of a string to return the element string of a template string

padStart: Returns a new string representing the completion of the original string from the beginning with the parameter string.

padEnd: Returns a new string representing the completion of the original string from the beginning with the parameter string.

Accepts two parameters, the first is the length of the generated string and the second is the string used to complete. The second parameter is not specified and is used by default with spaces

'aa'.padStart(5,'bc')    // 'bcbaa'
'aa'.endStart(5,'bc')    // 'aabcb'


Returns the original string if the specified length is greater than or equal to the length of the original string.

'xxx'.padStart(2, 'ab')    // 'xxx'


If the length of the original string plus the completion string is longer than the specified length, truncate the completion string that exceeds the number of digits

'abc'.padStart(10, '0123456789')    // '0123456abc'

replaceAll() replaces all matching strings at once

     var  arr='hello world';
        console.log(arr.replaceAll('ll','--'))   // he--o world

String Tags

A label template is not actually a template, but a special form of function call. "Label" refers to a function, and the template string immediately following it is its parameter.
However, if there are variables in the template string, it is not a simple call, but will process the template string into multiple parameters before calling the function.

let a = 5;
let b = 10;
 
tag`Hello ${ a + b } world ${ a * b }`;
// Equivalent to
tag(['Hello ', ' world ', ''], 15, 50);

Destructuring assignment

1 - Understand:
Extract data from an object or array and assign it to a variable (multiple)

2 - Deconstruction assignment of objects
let {n, a} = {n:'tom', a:12}

3-Array Deconstruction Assignment
let [a,b] = [1, 'atguigu'];

4 - Purpose
Assigning values to multiple parameters

es6 uses a pattern to extract values from an array quota object to assign values to variables, which is called deconstruction.

Deconstruction assignment of arrays

        var  [x,y]  = [1,2];
        console.log(x,y) //x:1  y:2

Deconstruction assignment of objects

  var {a,b} = {a:1,b:2};

  console.log(a,b) // a:1 b:2

Deconstruction assignment of functions
   

 // 3-Deconstruction assignment of a function: Deconstruction assignment of the first parameter of the function
    // Define an object here:
    const person = {
      name: 'jack',
      age: 18,
      sex: 'male'
    };
    function fn(obj) { //Pass in an obj object here
      console.log(obj);  //So here's the printout of person {name:'jack', age:18, sex:'man'}
    }
    fn(person); //Here an fn function is called, passing in a person object

    // But what we want to print is the name, age, sex inside
    // So here we go:
    function fn(obj) {
      const { name, age, sex } = obj;  //Deconstruct and assign this object
      console.log(name, age, sex);  //jack 18 men
    }

    // We can also write directly as follows: more concise:
    // Our ultimate goal is to deconstruct and assign the first parameter of the function
    // {name, age, sex} is just a parameter wrapped in curly braces.
    function fn({ name, age, sex }) {
      console.log(name, age, sex);  //jack 18 men
    }
    fn(person);

Deconstruction assignment allows default values to be specified

var [a=true] =[]

Order value of assignment If there is a set value, take the set value without looking for your own default word If none of them is displayed as undefined

Extension Operator

The spread operator is a three-point (...). It acts like an inverse operation of the rest parameter, converting an array to a comma-separated sequence of parameters. The spread operator can be used in conjunction with normal function parameters, or it can be followed by an expression, but it has no effect if it is followed by an empty array.

let arr = [];
arr.push(...[1,2,3,4,5]);
console.log(arr); //[1,2,3,4,5]
console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5
console.log(...(1 > 0 ? ['a'] : [])); //a
console.log([...[], 1]); //[1]

Posted by freebsdntu on Fri, 08 Oct 2021 10:21:37 -0700