JS senior

1. Problems of var declaration variables (disadvantages, features)

1. Pre-resolution will be sent, which can be used before declaration

console.log(a) //undefied
var a=10
Copy the code

2. You can declare the same variable repeatedly

var b=10; / / 100 rows
var b=20; / / 1000 rows

var b 
b=10;
b=20;
Copy the code

3. Var is used in the for loop and can be accessed externally

ES5 scope 【 global 】

Var I in for is equal to global var I

 for (var i = 0; i < 5; i++) {
     // console.log(i);
}
console.log(i);
Copy the code

2. Characteristics of let declaration variables

1. Do not use it before declaring it

// let a **let is not pre-parsed
console.log(a)  / / an error
let a=10
Copy the code

2. Do not declare the same variable repeatedly

let b=10
let b=200

/ / an error
Copy the code

3. Use let in for

[let] have block-level scope (code segment wrapped in {})

for(let i=0; i<5; i++){// I is analogous to a function argument
console.log(i)
}
console.log(i) / / an error
Copy the code

Declare a constant using const

Constants differ from variables and are generally capitalized (all capitalized)

There are also block-level scopes

1. Once declared, it must be assigned

const Data
console.log(Data) / / an error
Copy the code

2. The value cannot be modified

const Data =10
Data =20 ； / / an error
Copy the code

3. Cannot use it before declaring it (because there is no pre-parsing)

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

4. Reference type. The reference address cannot be modified, and the value of the reference type can be modified

const Arr =[10.20.30]  // reference address assumption [0x0002]
Arr =[1.2.3]; // Cannot change reference address [0x0002]
Arr[1] =100;
console.log(Arr);
Copy the code

4. Object deconstruction and assignment syntax

 let obj = {
            name: "lh".age: "20".sex: "Male"
        }
Copy the code

// The left side of the equals sign is the global variable and the right side of the equals sign is the object
// We can use the destruct assignment syntax by having the same name as the key value of the object
// Break the value of the object and assign it to the variable
Copy the code

1. Deconstruct everything

let {name,age,sex}=obj
Copy the code

2. Partial deconstruction

let {name}=obj
Copy the code

3. Deconstruct and rename

Use: no.Copy the code

let {name:myName}=obj
Copy the code

4. Use only one of the methods or properties of the encapsulated object

let {random}=Math;
console.log(random());
Copy the code

Array destruct syntax

1. Completely deconstruct

let[a,b,c]=arr; D The global variable is not assignedconsole.log(a,b,c,d);
Copy the code

2. Partial deconstruction

(Purpose: To simplify the code, the more the code is written, the more complex, not necessary)

// An array is an ordered collection of data
// Each individual variable is the 0th
// let [n]=arr;
// console.log(n);

// Just want to deconstruct the first data
// let [,b]=arr;
// console.log(b);
Copy the code

3. Composite structure

let arr2=[1.2.3[10.20.30]].let [a,b,c,[d,e,f]]=arr2
console.log(a,b,c,d,e,f);
Copy the code

4. Application scenarios

 // Demand: Swap the values of two variables
let a = 10, b = 20;
[a, b] = [b, a]
console.log(a, b);
Copy the code

String deconstruction syntax

As with array deconstruction, string nature

var str = 'It's a beautiful day'
console.log(str.length);
console.log(str[2]);
// A string has the index and length characteristics of an array, so it is a pseudo-array
// Can be regarded as an array, using the array destruct syntax
let [a,b,c,d]=str;
console.log(a,b,c,d);
str[1] ='day'
console.log(str); // The string is indexed, cannot be modified, can only be obtained
 var arr = 'What a beautiful day it is! '
console.log(arr[3]);
let [a, b, c, d, e, f] = arr
list(a, b, c, d, e, f)      
function list() {
 console.log(arguments);
}
Copy the code

7. Simplified writing of objects

 let name = 'lh';
        let age = 20;
        let gender = 'male';
// Requirement: Put global variables inside objects
// let obj={
   // name:naem,
   // age:age,
   // gender:gender
// }

// ES6 new syntax
// If the variable name is the same as the key value, we can write the key but not the value inside the object
// value The value is automatically filled
let obj = { name, age, gender,fu }
obj.fu()
 console.log(obj);
function fu(){
     console.log(1111);
}
Copy the code

Set default values for function parameters

//function Function name (parameter = default,...) {}

function fn(a=0,b=0,c=0,d=0){
return  a+b+c+d;
}
Copy the code

Function parameter deconstruction assignment

1. Array parameters are used as arguments

function add([a,b,c]){
    return a+b+c
}
var arr=[1.2.3]
console.log(add(arr));
Copy the code

2. Function arguments are unordered – objects (e.g. $. Ajax methods are interchangeable within URL types

function getVal({x,y,z}){
    Let {x,y,z}=obj
      console.log('x:'+x,'y:'+y,'z:'+z);
}
  var obj={
        z:30.x:10.y:20
        }
        getVal(obj)

        var arr=[10.20.50]
        function add([a,b,c]){
            console.log(a+b+c);
        }
        add(arr)
Copy the code

Rest parameters – Rest parameters

Using rest parameters

Arguments return an array; Arguments return a pseudo-array. Rest arguments can be traversed using foreach, arguments cannot be traversed using foreachCopy the code

【 grammar 】…. parameter

function add(. rest){
      var sum=0
 rest.forEach(function(itme){
       sum+=itme
})
return sum
  }
console.log(add(1.2.3.4.5.6));
function app(. list){
    console.log(list);
}
        app(1.2.3)
        app(1)
Copy the code

Supplement to expand

Residual parameter Gets the remaining parameters of the previous parameter in the format of an array

 // Not sure if there is the first or more entries
 The rest argument is just a name
 // Rest parameters cannot be placed in the middle, they must be placed last
function fn(a,b,c,... d){
      console.log(a,b,c,d);
}
fn(1.2.3.4.5.6.7.8.9.10.11)
Copy the code

Expand the use of operators

1. Use in arrays

let arr=[1.2.3.4] is equivalent to arr[0],arr[1]
console.log(... arr)Copy the code

2. Use it in strings

let str='Eat bangles tonight'
console.log(... str);Copy the code

3. Use it in objects

let obj={
     name:"Three".age:10
}
// console.log(... obj);
// Put the obJ internal key-value pair inside another object
console.log({sex:'male'. obj});Copy the code

Twelve, expand the use of operators

1. The values in the array are used as function parameters

function fn(a,b,c,d){
console.log(a,b,c,d)
}
var arr=[1.2.3.4] fn(... arr)Copy the code

2. Merge arrays


           // If the key is the same, the last one overwrites the previous one
        var arr1=[1.2.3]
        var arr2=[10.20.30]
        var newArr=[...arr1,...arr2]
        console.log(newArr);

        let obj={
            name:'lh'.age:20
        }
        let obj2={
            email:'135'.gender:'male'
        }
        // let newObj=[{...obj,...obj2}]
        // console.log(newObj);
Copy the code

3. Develop

 // Extend object.assign to merge objects
        // Usage: Merge the object starting with the second argument into the first object
     
let  newObj=Object.assign({},obj,obj2);
 console.log(newObj);
Copy the code

Quickly become a JavaScript “master” -ES6 Syntax 1

JS senior

1. Problems of var declaration variables (disadvantages, features)

1. Pre-resolution will be sent, which can be used before declaration

2. You can declare the same variable repeatedly

3. Var is used in the for loop and can be accessed externally

2. Characteristics of let declaration variables

1. Do not use it before declaring it

2. Do not declare the same variable repeatedly

3. Use let in for

Declare a constant using const

1. Once declared, it must be assigned

2. The value cannot be modified

3. Cannot use it before declaring it (because there is no pre-parsing)

4. Reference type. The reference address cannot be modified, and the value of the reference type can be modified

4. Object deconstruction and assignment syntax

1. Deconstruct everything

2. Partial deconstruction

3. Deconstruct and rename

4. Use only one of the methods or properties of the encapsulated object

Array destruct syntax

1. Completely deconstruct

2. Partial deconstruction

3. Composite structure

4. Application scenarios

String deconstruction syntax

7. Simplified writing of objects

Set default values for function parameters

Function parameter deconstruction assignment

1. Array parameters are used as arguments

2. Function arguments are unordered – objects (e.g. $. Ajax methods are interchangeable within URL types

Rest parameters – Rest parameters

Supplement to expand

Expand the use of operators

1. Use in arrays

2. Use it in strings

3. Use it in objects

Twelve, expand the use of operators

1. The values in the array are used as function parameters

2. Merge arrays

3. Develop

Related Posts

Large front-end Encyclopedia of networking topics TCP/UDP

Introduction to requestAnimationFrame

React Router v6 Usage Guide