[ES6-ES11] detailed explanation of new features

ES6

Attribute 1: let declaration

The variables declared by var are global, registered at initialization, and have no block level scope restrictions. Even if they are declared in a block, they will pollute the entire js scope, while let is a local variable and is only valid within the block scope

Code explanation:

 var a=1;
   {
        var a=2;
   }
 window.onload=()=>{
    console.log(a);
}
Output: 2   ,var Not limited by code blocks
let a=1;
   {
        let a=2;
   }

window.onload=()=>{
    console.log(a);
}
Output: 1   ,let Valid only within block scope
!Declared within the block scope let Variables are not available in the outer layer

Property 2: Deconstruction assignment

2.1 array assignment

[a,b,c]=[1,2,3]; Assign values to abc in the form of an array
! Note that the structure on the left is the same as that on the right, [a,[b,c]]=[1,[2,3]], and the structure is the same.
In addition, you can also set the default value [foo = "true"] = [];, When there is no corresponding value on the right, the default value is assigned
The essence is: assign values by position

Code explanation:

let [a,b,c]=[1,2,3];
console.log(a,b,c);
Output: 1 2 3
let [foo="true",goo]=[];
console.log(foo,goo);
Output: true undefined

Insert a difference between undefined null and NaN:

  • undefined has no value
  • null has a value, but the value is empty
  • NaN is the number infinity or infinitesimal
let [a,b='value']=['a + ',undefined]
console.log(a+b);
Output: a + value
let [a,b='value']=['a + ',null]
console.log(a+b);
Output: a + null

2.2 object map assignment

{foo,bar} = {foo:'first',bar:'second'}
The assignment rule is to use the key value
*Without this key, the value is undefined
The difference from array assignment is that there is no position correspondence

Code explanation:

let {foo,bar} = {foo:'first',bar:'second'};
console.log(foo,bar)
Output: first second

! Small pit: if you give a defined value to deconstruct, you need to use ()

let foo;
({foo}={foo:"first"});

2.3 function deconstruction

Deconstruct by passing parameters, or set default values

2.3.1 function deconstruction of objects

//It is frequently used when transmitting values through the front and rear interfaces
let json = {
    a:'aa',
    b:'bb',
}
function fun({a,b='web'}){
    console.log(a,b);
}
fun(json);
Output: aa bb

2.3.2 function deconstruction of array

let arr = ['aa','bb','cc'];
function fun(a,b,c){
    console.log(a,b,c)
}
fun(...arr);
Output: aa bb cc

Property 3: object extension operator

  • Usage 1: pass indefinite number parameters (function passes value, list is connected)
function newFun(...arr){
    console.log(arr[1]);
} 
newFun(0,1)

Output: 1
  • Use 2: depth assignment (not address pointer change)
let arr1=['www','baidu','com'];
let arr2=[...arr1];
arr2.push('newstring');
console.log(arr1,arr2);

Output:['www', 'baidu', 'com'] ['www', 'baidu', 'com', 'newstring']

rest operator

It is also used to pass an indefinite number of parameters (remaining)

function newFun(first,...arr){   //In the back... arr is rest
     console.log(arr[1]);
} 
newFun(0,1,2,3,4,5,6,7)

Output: 2

Property 4: String template

`character string ${variable}` You can also write in the middle html,Variable to use ${}Wrap it up, ${ }Operations are also supported in the middle</font>
let name= "Taro"
str=`<b>it is ${name}<b>`;
document.write(str); //Write to page
 Output: it is Taro
  • String judgment includes
let name= "Taro"
str=`<b>it is Taro<b>`;
console.log( str.includes(name) );  Returns a Boolean value
 Output: true
  • String repeat
 document.write('*'.repeat(20));   For typesetting, etc

Feature 5: digital operation

  • Declare Binary

     The first bit is 0 and the second bit is 0 B or b,Followed by binary values
     let binary = 0B010101;  //The direct output here is decimal
    
  • Declare Octal octal

     The first bit is 0 and the second bit is 0 O or o,Followed by octal values
     let octal = 0O666;  //The direct output here is decimal
    
  • Number. Isfinish() determines whether it is a finite value

    Number. Isfinish() determines whether it is a finite value and returns a Boolean value
    Nan (infinity or infinitesimal), undefined,null, and string will return false

console.log(Number.isFinite('0'))
Output: false
  • Number.isNaN() determines whether it is a NaN
console.log(Number.isNaN(NaN))
Output: true
  • Number.isInteger() determines whether it is an integer
console.log(Number.isInteger(200.1))
Output: false
  • Number.parseInt() is converted to an integer
console.log(Number.parseInt(200.1))
Output: 200
  • Convert Number.parseFloat() to floating point
console.log(Number.parseFloat(200.1))
Output: 200.1
  • Number.MAX_SAFE_INTEGER maximum safe integer
let beforeNum = Math.pow(2,53)-1;  //The original method of declaring the maximum safe integer
let newNum = Number.MAX_SAFE_INTEGER;  //New method for declaring maximum safe integer

For large-scale scientific calculation, strictly speaking, it is necessary to judge the safe integer

There is also the minimum safe integer Number.MIN_SAFE_INTEGER

  • Number.isSafeInteger() determines whether it is a safe integer
console.log( Number.isSafeInteger(beforeNum) );
Output: true

Feature 6: array knowledge

  • json format parsing
let json = {
    '0':'www',
    '1':'baidu',
    '2':'com',
    length:3
}//Standard json array format
let arr = Array.from(json); //json to array
console.log(arr);
Output:['www', 'baidu', 'com']
  • String or number to array
let arr = Array.of(3,4,5,6);   //Get [3, 4, 5, 6]

6.1 find()

Instance method, return value

let arr = [0,1,2,3,4];
let result = arr.find((value,index,arr)=>{   //It can be judged by value, subscript and other logic of array
    return index>3;
})
console.log(result);  //The first qualified value value will be output
 Output: 4  

6.2 findIndex()

Similar instance method, return index

let arr = [2,3,4];
let result = arr.findIndex((value,index,arr)=>{
    return value>3;
})
console.log(result);  //The first index that meets the conditions will be output
 Output: 2

6.3 fill()

The function of the instance method fill() is to replace. The first parameter is the replaced value, the second parameter is the start position, and the third parameter is the next subscript of the end position. The array will be updated.

let arr = ['q','e','w'];
arr.fill('1',1,2);  //The arr will be updated. Replace the value between index1-3 with 1
console.log(arr);
Output: ['q', '1', 'w']

arr.fill('1',1,3);
Output: ['q', '1', '1']

6.4 array of loop

  • General cycle
for (const value of arr) {}
  • Get subscript arr.keys()
for (const index of arr.keys()) {}
  • Get subscript and content arr.entries()
for (const [index,value] of arr.entries())

Another use of arr.entries():

let arr = ['q','e','w'];
let list = arr.entries();
let item = list.next().value;
console.log(item);
Output:[0, 'q']        //Array [index,value]

Property 7: function knowledge

  • Method parameters can also have default values
function add(a,b=1){
    return a+b;
}
console.log(add(1));
  • Get the number of parameters function name. length
    The number of parameters obtained here are parameters that must be passed, and those with default values do not count
function add(a,b=1){}
console.log("Get the number of parameters:"+add.length)
Output: 1
  • Actively throw an exception throw new Error()
function add(a,b=1){
    if(a==0){
        throw new Error('A is error');
    }
}
console.log(add(0));
  • Arrow function
 var add = (a,b=1)=> a+b;
 //a+b is the return value. If you want to wrap a line or write a return, you need to add {}

Keywords: Javascript Front-end ECMAScript

Added by spajetty on Mon, 29 Nov 2021 22:59:24 +0200