• 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. 一：redis 的string类型 - 相关操作

    *redisclient使用: =============一类:string的方法================ 介绍:string是redis的最简单类型,一个key相应一个value,strin ...

  2. Unity3d报告奇怪的错误CompareBaseObjectsInternal can only be called from the main thread.

    其中使用了该项目.NET的Async Socket代码.后来不知道什么时候这个奇怪的错误的出现: CompareBaseObjectsInternal can only be called from ...

  3. SQL2008错误：当 MUST_CHANGE 为 ON (开)时，不能将 CHECK_POLICY 和 CHECK_EXPIRATION 选项设为 OFF (关)。

    假设出现这样的情况,第一个选择是: 在数据库用户管理中去掉了"强制password过期"! 假设把"强制实施password策略"的勾也去掉了,出现例如以下错误 ...

  4. WPF中的菜单模板

    原文:WPF中的菜单模板 资源字典代码如下: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xa ...

  5. 我的Spring之旅（二）：为请求加入參数

    1.前言 在上一篇我的Spring之旅(一)中,我们仅仅是利用不带參数的请求返回一个网页或一段json,在实际的B/S.C/S网络交互中,请求中须要自己定义的參数.本篇将简单地为之前的请求加入參数. ...

  6. C# TSF 输入法的获取

    原文 C# TSF 输入法的获取 起因: 「添雨跟打器」中存在一个问题.在 windows 8/10 里面,输入法就获取不到了.我一直没有去管这样的问题.但是也大致知道,可能是 TSF 架构的问题. ...

  7. CSS position财产

    CSS在position位置信息要素用于表示属性. 有三个起飞值:static, absolute, relative. 假设元件不显式配置position财产,该元素默认position 值至sta ...

  8. DWZ使用注意事项

    DWZ使用注意事项 一.前言     在最近的一个项目,介绍DWZ丰富client框架,可以尝试一下.另外,在遇到的很多问题.十一终于攻克. 特别说明本文的.     本人用的是dwz-ria-1.4 ...

  9. MIS的趋势必定是围绕机器取代人手，分工越来越细（小餐厅都支持微信自助点餐，结账时就打个折，相当于省了1、2个人手，SQL发明以后，程序员的工作更多了）

    最后,我还想简略的谈谈MIS及MIS快速开发工具的未来. MIS的趋势必定是围绕机器取代人手,分工越来越细.比如:现在有些小型的咖啡厅里的财务子系统就简单到不需要使用者有会计知识,相当于省了会计人手: ...

  10. XF 绝对布局

    using System; using Xamarin.Forms; using Xamarin.Forms.Xaml; [assembly: XamlCompilation (XamlCompila ...