Detailed grammar ES6

1. ES6 history of the development and introduction

  A little ..... no nonsense

2. ES6 new features: let and const keyword

  Before the JavaScript, the definition of the variables we generally use the "var" keyword as defined, "var" keyword to define variables there is a disadvantage that the scope is not obvious, and sometimes obviously in private methods defined, it has become a global variable. Thus affecting our other data operations. So ES6 in order to solve the drawbacks, we introduced the "let" and "const" these two keywords.

  "Let" keyword: as defined private data, the variable takes effect only in the block defined, other places will not take effect being used.

  "Const" keyword: custom JavaScript constants, once they are modified by this keyword, its value can not be modified. Java is similar to the "final" keyword.

3. ES6 new features: an extended string of

  ES6 for JavaScript in the original string manipulation, provides three new API:

    .includes () method of: determining whether the specified character string, returns a value of true, false

    .startwith () method of: determining whether the character string beginning xxx, the return value is true, false

    .endwith () method of: determining whether the character string xxx end, the return value is true, false

4. ES6 new features: Deconstructing expression

  We get the original JavaScript from an array or object of these values, we need to get the data we need by property name index value or an array of objects is, in ES6 in to me we provide an array deconstruction of objects and methods, we can deconstruct an array or an object, in the name of the data after the adoption of deconstruction to get the specified value, thereby performing the data manipulation

  Array deconstruction Code:

  

  Console output:

  

  Object deconstruction Code:

  

  Console output:

  

  Note: The use of brackets "[]" is an array of deconstruction, deconstruction objects use braces "{}"

5. ES6 new features: Optimization Function

  1. The default optimization parameter values ​​shaped

    在原生的JavaScript中,函数的形参如果在不传值时的时候给一个默认值,我们需要在函数之中加以判断来进行定义,用以实现如果传参了就使用所传递的参数,如果没有传参就使用我自定义的默认值来进行操作,代码如下:

    

    控制台输出结果:

    

    ES6的函数优化之后,我们可以在一开始的形参定义之中就给指定的形参进行默认值设置,代码如下:

    

    控制台输出结果:

    

  2. 箭头函数优化

    箭头函数的优化,有多个方面需要注意,比如说当函数形数只有一个时候的定义方式,函数形参有两个或者多个的时候的定义方式以及方法体有一行或者多行的时候的定义方式,代码如下:

    ES6中定义函数的简写方式:

    一个参数:

      

    两个或者多个参数:

      

    没有参数:在没有参数的时候,要用小括号“( )”在形参名的位置定义,作为占位符,不然会报错。

      

    以上的方法体都只有一行代码,当方法体有多行代码的时候:

      

 

    重要:箭头函数与对象函数属性、解构表达式的结合方式

      1.箭头函数与对象函数属性的结合方式:

        

        

      2. 箭头函数与解构表达式的结合:

        

        

6. ES6新特性:数组的新方法map()和reduce()

  在ES6中,为我们提供了两个新的数组方法,一个是map(回调函数)方法,一个reduce(回调函数,初始值)方法,用法如下:

    map(回调函数): 通过利用所定义的回调函数操作所调用的数组中每一个元素,并且返回一个新的数组对象

    reduce(回调函数,初始值):类似与循环遍历所调用数组中的每一个元素对象,并且执行回调函数,进行运算,它的返回值是回调函数所执行的运算结果

    

    

7. ES6新特性:扩展运算符

  ES6中的扩展运算符就是三个点“...”,用来展开或者说是遍历数组中的每一个元素,用法如下:

  

8. ES6新特性:promise()异步操作对象

  ES6中promise()是一个异步操作对象,所以它的创建方式是new出来的,这个对象可以获取异步操作的信息。而promise对象提供统一的API,各种异步操作都可以用同样的API进行处理。使用方式如下:

  语法:

    

  代码案例:

    

9. ES6新特性:set和map

  ES6中的 set 类似于数组,它和数组的区别在于,数组可以在不同的索引值下存放相同的元素内容而set不行,set是不允许存放相同元素的。

  

  ES6中的 map 类似对于object,它和object的区别在于,object的键值对中的键必须是字符串形式而map中的键可以是任意数据类型的

  

Guess you like

Origin www.cnblogs.com/qfshini/p/12154517.html