• ECMAScript6语法 使用Typora打开https://pan.baidu.com/s/1LjcOFOfrAHaUgxU9LzKVzg 提取码: 88fb

    在线查询ES6语法入门,我也经常看这个 点击进入

  • 粗略总结

    1.let:声明一个变量，不会越界 const：声明一个常量
    
2.字符串
    
    includes
    
    startsWith
    
    endsWith
    
    const ss = ``
    
3.解构表达式
    
    数组：let [x,y,z]=arr
    
    对象: let {name:a, age:b}=person
    
4.函数
    
    赋默认值：方法参数列表赋默认值 (a, b=1)=>{}
    
    箭头函数：()=>{}
    
    对象中定义函数：
    
        传统 eat：function(){}
    
        箭头 eat：()=>{}
    
        简写 eat(){}
    
    箭头函数结合结构表达式：({name})=>{}
    
5.map和reduce
    
    map(fun)：处理一个数组，遍历数组中的每一个元素用fun处理，把处理结果放入新的数组
    
    reduce(fun(a, b)[, 100])：没有初始值（1. a=10 b=20  2. a=30 b=30） 有初始值（1.a=100 b=10  2.a=110 b=20）
    
6.对象的扩展
    
    keys
    
    values
    
    entries：二维数组
    
    assign(dest, ...src)
    
7.数组扩展
    
    find findIndex includes

  • IDEA对ECMAScript6的支持

  • 创建工程

    • 创建空工程

      • File>>>New>>>Project>>>Empty Project>>>Empty Project>>>Next>>>输入Project Name>>>Finish

    • 创建一个Module

      • File>>>New>>>Module>Static Web>>>Static Web>>>Next>>>输入Module Name>>>Finish

    • 直接在Module中创建一个html文件即可,右击run运行

  • 声明变量 var let const

    • var(声明变量,有局部外可用缺陷(可越界))

      • 代码

        <!DOCTYPE html>
        
<html lang="en">
        
<head>
        
    <meta charset="UTF-8">
        
    <title>Title</title>
        
</head>
        
<body>
        
</body>
        
<script>
        
    for (let i = 0; i < 5; i++) {
        
        console.log(i);
        
    }

    console.log("我在循环外"+i);

</script>
        
</html>
      • 显示结果

    • let(声明变量,同var,不能局部外使用(不会越界))

      • 代码:把上面var改为let

        <script>
        
    for (let i = 0; i < 5; i++) {
        
        console.log(i);
        
    }

    console.log("我在循环外"+i);

</script>
      • 显示结果

    • const声明一个常量

  • 字符串扩展 includes() startsWith() endsWith()

    • includes()
      startsWith()
      endsWith()

    • `` 带有换行可以正常声明,正常打印
      "" 带有换行不能正常声明

  • 结构表达式

    • 解构数组

    • 解构对象

  • 函数优化

    • 函数NaN问题

      • 代码

        <script>
        
    function fun1(a,b) {
        
        console.log(a/b);
        
    }

    fun1(10);
        
</script>
      • 结果

    • 函数参数默认值

      • 代码

        <script>
        
    function fun1(a, b) {
        
        /*如果b为空,就会把1赋值给b*/
        
        /*如果b不为空,b值不变*/
        
        if (!b) {
        
            b = 1;
        
        }
        
        console.log(a / b);
        
    }

    fun1(10);
        
</script>

<!--等同于-->

<script>
        
    function fun1(a, b) {
        
        b = b || 1;
        
        console.log(a / b);
        
    }

    fun1(10);
        
</script>

<!--等同于-->

<script>
        
    function fun1(a, b = 1) {
        
        console.log(a / b);
        
    }

    fun1(10);
        
</script>
      • 结果

    • 箭头函数

      • 一个参数

        • 代码

          <script>
          
    let fun1=i=>console.log("输出i的值:"+i);
          
    fun1(100);
          
</script>
        • 输出
      • 多个参数,参数用()括起来
        • 代码

          <script>
          
    let fun2=(i,j)=>console.log("输出i的值:"+i);
          
    fun2(100,200);
          
</script>
        • 输出
      • 代码不止一行,逻辑用{}括起来
        • 代码

          <script>
          
    let fun2=(i,j)=>{
          
        console.log("输出i的值:"+i);
          
        console.log("输出j的值:"+j);
          
    }
          
    fun2(100,200);
          
</script>
        • 输出

    • 对象的函数属性简写

      • 代码

        <script>
        
    const person = {
        
        name: "daniu",
        
        //以前
        
        eat1: function (food) {
        
            console.log(this.name + "吃了" + food);
        
        },
        
        //箭头函数版
        
        //这里需要用person.name,this.name会获取不到name="daniu"
        
        eat2: food => console.log(person.name + "吃了" + food),
        
        //简写版
        
        eat3(food) {
        
            console.log(this.name + "吃了" + food);
        
        }
        
    }

    person.eat1("香蕉");
        
    person.eat2("苹果");
        
    person.eat3("菠萝");
        
</script>
      • 输出

    • 箭头函数结合解构表达式

      • 代码

        <script>
        
    const person = {
        
        name: "daniu",
        
        age: 25
        
    }

    //普通
        
    function fun1(person1) {
        
        console.log("fun1 姓名:" + person1.name + ",年龄:" + person1.age);
        
    }

    //箭头函数
        
    const fun2=person2=>console.log("fun2 姓名:" + person2.name + ",年龄:" + person2.age);

    //箭头函数+解构表达式
        
    const fun3 = ({name, age}) => console.log("fun3 姓名:" + name + ",年龄:" + age);

    fun1(person);
        
    fun2(person);
        
    fun3(person);
        
</script>
      • 输出

  • map和reduce方法

    • map方法

      • 代码

        <script>
        
    let sz = ['1', '20', '-5', '3'];
        
    //map前输出
        
    console.log(sz)

    sz = sz.map(index => parseInt(index));
        
    //map后前输出
        
    console.log(sz)
        
</script>
      • 输出

    • reduce方法

  • 对象扩展

  • 数组扩展

    • find方法

    • findIndex方法

    • includes方法

  • 111

ECMAScript6 语法的更多相关文章

  1. ECMAScript6语法检查规范错误信息说明

    项目中使用ECMAScript6的时候经查会使用语法检查,下面是常见错误信息的汇总: “Missing semicolon.” : “缺少分号.”, “Use the function form of ...

  2. ECMAScript6语法重点（二）

    十一.Proxy和Reflect(Proxy保护对象不被外界访问:Object方法移植到Reflect) ①Proxy:原始对象(供应商)通过Proxy(代理商)生成新对象(映射原对象),用户访问的是 ...

  3. ECMAScript6语法重点（一）

    一. let和const ①let声明的变量只在它的块作用域有效({ }括起来) ②let不能重复声明同一变量 ③const声明的常量不能改(但对象可以加属性) ④const也有块作用域概念 ⑤con ...

  4. 07.VUE学习之解决phpstorm不识别ECMASCRIPT6语法的问题

    此时已经识别:

  5. Vue--vue中常用的ECMAScript6语法

    1.对象的写法 es5中对象: {add:add,substrict:substrict} es6中对象: {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写,否则要 ...

  6. 基于Vue的WebApp项目开发（二）

    利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以 ...

  7. webpack--安装，使用

    1. webpack 1.1. webpack介绍 webpack是一个资源的打包工具,目前最新为webpack3,可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一 ...

  8. 用js中的let等操作,要手动开启ECMAScript6（如果不设置，let等ES6语法会报错）

    问题:idea默认没有开启ECMAScript6,需要进行设置:(如果不设置,let等ES6语法会报错)步骤: File | Settings | Languages & Frameworks ...

  9. ECMAscript6(ES6)新特性语法总结(一)

    ES6/ES2015,,在ES5的基础上扩展了很多新的功能,在使用的时候要慎重,因为有一部分js代码在部分浏览器是不兼容的,但是所有写在服务器端的代码基本上都支持ES6的写法. 新特性: 一.开启严格 ...

随机推荐

  1. Asp.net固定功能位充满了零（解决，演示样本）！

    Asp.net固定功能位充满了零(解决.演示样本)! 在发展,其中,数实现出现8数字.但是,需要使用0加厚.例如:123,代表:0000123. 真实的比例,如下: decimal aaa = 123 ...

  2. NAT对于网络上的其它人都不可见（但可以转发端口），Bridged和网络里的其它物理机没区别，Internal只能在虚拟机之间可见，Host-only只对主机可见（最符合我的服务器需求），最多可设置8块网卡实现混杂

    VirtualBox 可以为每一个虚拟机分配8个网卡.每一个网卡的连接方式可以选为下列之一: Not attached Network Address Translation (NAT) Bridge ...

  3. 一个Java工程师的入门级Linux命令集

    0.前言    网上介绍linux的命令的文章一大堆,但是大部分都是流于命令介绍,把命令的所有参数都介绍一遍,但是其实在真正的工作中,很多参数都不会用到.本文总结了我自己常用的一些命令,这些命令都比较 ...

  4. WPF利用HelixToolKit后台导入3D模型

    原文:WPF利用HelixToolKit后台导入3D模型 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/de ...

  5. 实现js呼叫流行

    <span style="font-size:14px;">//Html代码:单击控制实现通话"收件人流行" <!DOCTYPE html&g ...

  6. 使用FileStream向txt格式的文本文件 "追加" 新内容并读取

    原文:使用FileStream向txt格式的文本文件 "追加" 新内容并读取 //得到文件路径. static string filePath = AppDomain.Curren ...

  7. WPF 附加属性的使用

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  8. 通通玩blend美工（1）——荧光Button

    原文:通通玩blend美工(1)--荧光Button 最近老大出差去了,光做项目也有点烦,写点教程消遣消遣(注:此乃初级教程,所以第一个消遣是本人消遣,第二个是指供各位看官消遣...) 看着各位大虾出 ...

  9. 数字证书原理 good

    文中首先解释了加密解密的一些基础知识和概念,然后通过一个加密通信过程的例子说明了加密算法的作用,以及数字证书的出现所起的作用.接着对数字证书做一个详细的解释,并讨论一下windows中数字证书的管理, ...

  10. .NET 图片像素比较

    /// <summary> /// 图像比较.用于找出两副图片之间的差异位置 /// </summary> public class ImageComparer { /// & ...