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

es6 More articles about grammar

  1. Velocity Magic Hall Series 2 :VTL Grammar explanation

    One . Preface Velocity As a template engine with a long history, it can not only replace JSP As Java Web Web page template engine on server side , And it can be used as a template engine for ordinary text to enhance the text processing ability of server program . and Velocity It's transplanted to No ...

  2. Hive note --sql Detailed explanation of grammar and JavaAPI

    Hive SQL Grammar explanation :http://blog.csdn.net/hguisu/article/details/7256833Hive SQL Learning notes ( Commonly used ):http://blog.sina. ...

  3. Hadoop Hive sql Grammar explanation

    Hadoop Hive sql Grammar explanation Hive Is based on Hadoop  Build a set of data warehouse analysis system , It provides a wealth of SQL Query method to analyze stored in Hadoop Data in a distributed file system , You can put the structure Data files that are standardized ...

  4. Thymeleaf3 Detailed explanation and practice of grammar

    Thymeleaf3 Grammar explanation Thymeleaf yes Spring boot Recommended template engine , In addition, there are also Freemarker and Jsp.Jsp It should be the template engine that we first contacted . and Freemarker work ...

  5. Xpath Grammar explanation

    1. brief introduction XPath Is a door in XML and HTML The language in which information is found in a document , Can be used in XML and HTML Traversing elements and attributes in a document XPath Installation Chrome plug-in unit XPath Helper spot Chrome browser ...

  6. mysql User authorization 、 Database authority management 、sql Grammar explanation

    mysql User authorization . Database authority management .sql Grammar explanation —— NiceCui All permissions of a database ALL Back + PRIVILEGES SQL Some database Specific permissions SQL mysql Authorization Syntax SQL ...

  7. Java8 Of Stream Grammar explanation ( Reprint )

    1. Stream First experience Let's take a look first Java How does it define Stream Of : A sequence of elements supporting sequential and parallel agg ...

  8. [ Continuous delivery practice ] pipeline Use : Grammar explanation

    One . introduction jenkins pipeline The development of grammar is so fast that it can not be described as too fast , At present, the domestic demand for jenkins pipeline There are still very few people who pay attention to it , Related articles are even rarer , The only way to see w3c There is a related estimate that is straight ...

  9. Java 8 Series of Stream A detailed explanation of the basic grammar of

    This article goes to :https://blog.csdn.net/io_field/article/details/54971761 Stream series : Java 8 Series of Stream A detailed explanation of the basic grammar of Java 8 ...

  10. spring AspectJ Entry point syntax Record for reference

    AspectJ Entry point syntax 6.5.1  Spring AOP Supported by AspectJ Pointcut indicator The pointcut indicator is used to indicate the purpose of the pointcut expression ,, stay Spring AOP At present, there is only the connection point of execution method ,Spri ...

Random recommendation

  1. TE9 Mobile wechat scene

    HTML <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...

  2. Android DES AES MD5 encryption

    AES encryption : <span style="font-size:18px;">package com.example.encrypdate.util; import jav ...

  3. ACdream 1064 Perfect number

    digit dp. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #incl ...

  4. laravel5.7 Separate front and rear development Implementation is based on API Requested token authentication

    Recently, we have separated the development before and after learning , Find out stay laravel It can't be used to realize the separation of the front and the background in CSRF Token The certification . because web The requested user authentication is through Session And the client Cookie Implementation of , And the front and back end are separated ...

  5. ( turn )Android Open only one Activity example

    In a Activity in , Multiple calls startActivity() To start another Activity, To generate only one Activity example , There are two ways . Method 1 : Set start mode   One Activity There are four startup modes ...

  6. Node JS 8 How to debug online in browser

    0: Why is it aimed at Node8 Write this from nodejs8 Start ,node Removed _debugger , Internal integration inspect , Used to use node-inspect The implemented online debugging is no longer available .node8 Start with new ...

  7. build high performance server Reprint

    http://blog.ci123.com/wobushizhanghua/entry/246311 I checked haproxy,l7sw and lighttpd Of Related to the source code , Without exception , They all agree that multiplexing is ...

  8. stay Ubuntu14.04 Compiled on Android4.0.1 There are several problems

    One . Tools sudo apt-get install git-core gnupg flex bison gperf build-essential \       zip curl libc6-de ...

  9. Json.NET Deserialize How to ignore $id And so on

    because $id.$ref Etc. is the default Json.NET The special properties of , When deserializing, its corresponding value is not filled in , for example : [DataContract] public class MyObject { [DataMember( ...

  10. 8VC Venture Cup 2016 - Elimination Round F - Group Projects dp Good question

    F - Group Projects The main idea of the topic : Here you are. n Items , Each item has a weight ai, Divide them into groups , The total consumption is the sum of the maximum and the minimum in each group . How many grouping methods do you have . Ideas : I feel like I thought when I saw it ...