• 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. CUDA页锁定内存（Pinned Memory）

    对CUDA架构而言,主机端的内存被分为两种,一种是可分页内存(pageable memroy)和页锁定内存(page-lock或 pinned).可分页内存是由操作系统API malloc()在主机上 ...

  2. Android--常用框架大全

    1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展示图 ...

  3. WPF 线程:使用调度程序构建反应速度更快的应用程序

    原文:WPF 线程:使用调度程序构建反应速度更快的应用程序 作者:Shawn Wildermuth 原文:http://msdn.microsoft.com/msdnmag/issues/07/10/ ...

  4. toolbox、library 的组织

    不要重复制造轮子:重复利用已完成的函数: 1. 一个普通的 matlab toolbox bigData:规模较大的数据集: data:一般的数据集: demos:演示程序,直接可以运行: tools ...

  5. 期刊（Journal）、会议（Conference）及其影响因子（Impact Factor）

    CNCC:China National Computer Congress,中国计算机大会 0. 会议 计算机视觉(CV)三大顶级会议: ICCV: IEEE International Confer ...

  6. python_简单的DB统计

    import numpy as npimport pylab as pldates=['20170314','20170315','20170316','20170317','20170318','2 ...

  7. C#读取文件夹特定文件的方法

    public image[] getImages() { FolderBrowserDialog fbd = new FolderBrowserDialog(); if (fbd.ShowDialog ...

  8. wpf 复制/剪切到本地系统剪切板中以供右键粘贴用

    原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用   http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html   /// & ...

  9. java.text.MessageFormat 专题

    java.text.MessageFormat类MessageFormat提供一种语言无关的方式来组装消息,它允许你在运行时刻用指定的参数来替换掉消息字符串中的一部分.你可以为MessageForma ...

  10. C# GC Finalizer IDispseable,.Net的垃圾回收机制

    1.GC只能回收堆里的托管资源 2.GC 回收,"代"的概念 .net 托管资源分三代,代数越大 资源的生命周期越长. 0 代 和1代的资源比较少可以比较频率的回收, 回收2代以上 ...