当前位置:网站首页>Detailed explanation of ES6 grammar

Detailed explanation of ES6 grammar

2021-01-23 17:52:53 I'm in July

What is? ECMAScript?

ECMAScript Is the specification of browser scripting language , And as we know it js Language , Such as JavaScript It is the concrete realization of the specification .es6 like Java Of jdk.

One 、es6 Grammar explanation :let Declare variables

1、var Declared variables tend to cross fields ;let Declared variables have strict local scope

    {
      var a = 1;
      let b = 2;
    }
    console.log(a)  // 1
    console.log(b)  // Uncaught ReferenceError: b is not defined

2、var It can be stated many times ;let It can only be declared once

 	var m = 1;
    var m = 2;
    let n = 1;
    let n = 2;
    console.log(m) //2
    console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared

3、var Variable promotion ;let No variable promotion

  	console.log(x);
    var x = 10; // undefined
    console.log(y);
    let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization

Be careful : Get used to it in the future let Declare variables

Two 、es6 Grammar explanation :const Declare variables It's equivalent to declaring a constant

1、 No change is allowed after the declaration

	const a = 1;
    console.log(a) //1
    a = 2;
    console.log(a) // Uncaught TypeError: Assignment to constant variable.

2、 Once declared must be initialized , Otherwise, an error will be reported

  const a;
  a = 1; 
  console.log(a) //Uncaught SyntaxError: Missing initializer in const declaration

3、 ... and 、es6 Grammar explanation : Deconstruction expression

1、 An array of deconstruction

 let arr = [1, 2, 3];
 let [a, b, c] = arr;
 console.log(a, b, c) //1,2,3

2、 Object to deconstruct

    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    const { name, age, language } = person 
    console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
    const person = {
      name: "qiyue",
      age: 23,
      language: ['java', 'js', 'css']
    }
    // from person Parsing out name The value of is assigned to abc
    const { name:abc, age, language } = person
    console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]

Four 、es6 Grammar explanation : String extension

 	let str = "hello.vue";
    console.log(str.startsWith("hello")) //true
    console.log(str.endsWith("vue")) //true
    console.log(str.includes("e")) //true
    console.log(str.includes("hello")) //true

5、 ... and 、es6 Grammar explanation : String template

let str = `<span>hello world</span>`
console.log(str) // <span>hello world</span>

6、 ... and 、es6 Grammar explanation : String inserts variables and expressions . Variables are written in ${} in ,${} You can put js expression

let info = ` I am a ${abc}, This year, ${age}`
console.log(info) // I am a qiyue, This year, 23
let info = ` I am a ${abc}, This year, ${age}`
console.log(info) // I am a qiyue, This year, 23
let info = ` I am a ${abc}, This year, ${age}`
console.log(info) // I am a qiyue, This year, 23
   function fun() {
      return " This is a function ";
    }
    let info = ` I am a ${abc}, This year, ${age + 10}, I want to say :${fun()}`
    console.log(info) // I am a qiyue, This year, 33, I want to say : This is a function 

7、 ... and 、es6 Grammar explanation : Function optimization

1、 Function default : Write the default value directly to the parameter , If not, the default value will be used automatically

function add(a, b = 1) {
      return a + b;
    }
    console.log(add(10)) //11

2、 Uncertain parameters : Indefinite parameters use the number of parameters to represent uncertainty , Form like ... Variable name , from ... Add the identifier of the named parameter . Named parameters can only be placed at the end of the parameter list , And there is only one indefinite parameter

 function fun(...params) {
      console.log(params.length)
    }
    fun(1, 2) // 2
    fun(1, 2, 3, 4) //4

3、 Arrow function

// before 
var sum = function (a, b) {
      c = a + b
      return c
    }
console.log(sum(2, 3)) // 5
// Arrow function 
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6

4、 Arrow function combined with deconstruction expression

    // before 
    function hello(person) {
      console.log("hello" + person.name)
    }
    hello(person); //helloqiyue
    // Arrow function 
    let hello2 = params => console.log("hello" + person.name)
    hello2(person) //helloqiyue
    // Arrow function plus deconstruction expression 
    var hello3 = ({ name }) => console.log("hello" + name)
    hello3(person) //helloqiyue

8、 ... and 、es6 Grammar explanation : Object optimization

1、es6 to Object Many new methods have been extended , Such as

  • key(obj): Get all of the objects key Forming an array of
  • value(obj): Get all of the objects value Forming an array of
  • entries(obj): Gets all the key and value Two dimensional array formed
  const person = {
      name: "qiyue",
      age: 23,
      language: ["java", "js", "css"]
    }
    console.log(Object.keys(person)) //["name","age","language"]
    console.log(Object.values(person)) // ["qiyue",23,Array(3)]
    console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]

2、Object.assign The first parameter of the method is the target object , Later parameters are all source objects ; Assign the properties of the source object to the target object

	onst target = { a: 1 }
    const source1 = { b: 2 }
    const source2 = { c: 3 }
    Object.assign(target, source1, source2);
    console.log(target) //{a: 1, b: 2, c: 3}

3、 Declaration object abbreviation

	// before 
	const name = 'sanyue'
    const age = 21
    // Set property values name,age To assign separately to person1 Object's name,age, After that is the property value 
    const person1 = { name: name, age: age }
    console.log(person1) //{name: "sanyue", age: 21}
    
    //es6: The property name is the same as the property value variable name , It can be omitted 
    const person2 = {name,age}
    console.log(person2) //{name: "sanyue", age: 21}

4、 The function properties of an object are abbreviated

 let person3 = {
      name: "qiyue",
      // before 
      eat: function (food) {
        console.log(this.name + " Eating " + food);
      },
      // In the arrow function this Out of commission , Using objects . attribute 
      eat2: food => console.log(person3.name + " Eating " + food),
      eat3(food) {
        console.log(this.name + " Eating " + food)
      }
    }
    person3.eat(" Apple ") //qiyue Eating apples 
    person3.eat2(" Banana ") // qiyue Eating bananas 
    person3.eat3(" watermelon ") //qiyue Eating watermelon 

5、 Object's extension operator

Extension operator (...) Used to extract all traversable properties of the parameter object and copy it to the current object

    // Copy the object ( Deep copy )
    let p1 = { name: "qiyue", age: 23 }
    let obj = { ...p1 }
    console.log(obj)//{name: "qiyue", age: 23}
	
	// Merge objects 
    let age1 = { age: 24 }
    let name1 = { name: "qiyue" }
    let p2 = {}
    p2 = { ...age1, ...name1 }
    console.log(p2) //{age: 24, name: "qiyue"}
    // If p2 The Central Plains originally had name,age Properties will be overridden 

Nine 、es6 Grammar explanation :map and reduce Method

1、map(): Receive a function , All elements in the original array are processed with this function and put into the new array to return

 let arr = ["1", "3", "4", "23"]
    arr = arr.map(item => item * 2)
    console.log(arr) //[2, 6, 8, 46]

2、reduce(): Execute the callback function for each element in the array in turn , Does not include elements in the array that have been deleted or not assigned values

grammar :arr.reduce(callbace,[initialValue])

callback( Functions that execute each value in the array , There are four parameters )

  • previousValue( The value returned by the last call callback , Or the initial value provided (initialValue))
  • currentValue( Elements currently being processed in the array )、
  • index( The index of the current element in the array )
  • array( call reduce Array of )

initialValue( As the first call callback The first parameter of )

    let arr1 = [2, 40, -10, 6]
    let result = arr1.reduce((a, b) => {
      return a + b
    }, 10)
    console.log(result)//48

Ten 、es6 Grammar explanation : modularization

What is modularity : Modularity is the splitting of code , Easy to reuse . similar Java The guide package in , To use a bag , Must lead the pack . Two Js There is no concept of package in , In exchange for modules

The function of the module mainly consists of two commands :export and import

  • export Command is used to specify the external interface of the module ,export Not only can you export objects , everything js Variables can be exported . such as : Basic type variables 、 function 、 Array 、 object
  • import The command is used to import functions provided by other modules

版权声明
本文为[I'm in July]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/01/20210123175200887q.html

随机推荐