• 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. 解决 ubuntu 14.04.1 下一个sublime text3 3065 中国输入的问题

    你看今天 sublime text3 我以前有没有3059 的  它有支持3065该. 因此,为了支持subl  对中国输入法的实现 ,下面的操作步骤把我的记录供大家使用 有一个完整的教程:  htt ...

  2. 机房收费系统vb.net之打包与部署（一）

    从机房重构到如今,我最大的感受就是万事开头难,万事结尾难!开头难是由于那个思路理不清,对三层已经设计模式的应用不够熟悉,结尾难就是打包部署了!这几天非常头疼,以为完毕了代码就大功告成了,但是没想到啊, ...

  3. Windows下如何采用微软的Caffe配置Faster R-CNN

    前言 比较简单的一篇博客.https://github.com/microsoft/caffe 微软的Caffe以在Windows下编译简单而受到了很多人的喜爱(包括我),只用改改prop配置然后无脑 ...

  4. 学习 NLP（一）—— TF-IDF

    TF-IDF(Term Frequency & Inverse Document Frequency),是一种用于信息检索与数据挖掘的常用加权技术.它的主要思想是:如果某个词或短语在一篇文章中 ...

  5. python 两个链表的第一个公共结点

    题目描述 输入两个链表,找出它们的第一个公共结点.   看到这道题的时候,很多人的第一反应就是采用蛮力的方法:在第一个链表上顺序遍历每个节点,每遍历到一个节点的时候,在第二个链表上顺序遍历每个节点.如 ...

  6. 如何获得 Qt窗口部件在主窗口中的位置--确定鼠标是否在某一控件上与在控件上的位置

    用Qt Creator 设计程序时,最方便的就是ui设计器,可以很容易的得到想要的布局. 但是这样自动布局带来的后果是很难知道窗口中某一部件在主窗口中的相对位置. 在处理子窗口鼠标事件时变的很麻烦.主 ...

  7. 微信公众平台消息接口开发（24）图片识别之人脸识别API

    微信公众平台开发模式 微信 公众平台 消息接口 开发模式 企业微信公众平台 图片识别 人脸识别 API 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/archi ...

  8. MongoDB 可视化管理工具

    MongoDB 可视化管理工具 (2011年10月-至今)   正文 该项目从2011年10月开始开发,知道现在已经有整整5年了.MongoDB也从一开始的大红大紫到现在趋于平淡.MongoCola这 ...

  9. Qt on Android 资源文件系统qrc与assets

    使用 Qt 为 Android 开发应用时,有时我们的应用会携带一些资源文件,如 png . jpg 等,也可能有一些配置文件,如 xml 等,这些文件放在哪里呢?有两种方式:qrc和assets,咱 ...

  10. WPF 呼吸灯特效

    原文:WPF 呼吸灯特效 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014117094/article/details/46738621 pa ...