1、Let&const

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>es-let&const</title>

</head>

<body>

<script type="text/javascript">

    /* var定义的变量在代码块外面还可以使用 */

    for(var i=0;i<10;i++){

        console.debug(i);

    }

    console.debug("块外i:"+i);

    /* let定义的变量作用域为代码块之内 */

    for(let j=0;j<10;j++){

        console.debug(j);

    }

    //console.debug("块外j:"+j);

    /* const定义的是常量，不能被改变且作用域为代码块之内 */

    {

        const k=23;

        //k=34;

        console.debug(k);

    }

    //console.debug("块外j:"+k);

</script>

</body>

</html>

2、解构表达式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>解构表达式</title>

</head>

<body>

    <script type="text/javascript">

        /* 数组的解构：位置要对应 */

        const arr=["我",4,"不吹牛的",true];

        const [a,b,c,d]=arr;

        console.debug("a：",a);

        console.debug("b：",b);

        console.debug("c：",c);

        console.debug("d：",d);

        /* 对象的解构：属性名必须对应 */

        let user={

            name:"小明",

            age:10,

            hobby:"吃糖"

        }

        const {name,hobby}=user;

        const {sex}=user;

        console.debug(name+hobby);

        console.debug("sex:"+sex);

    </script>

</body>

</html>

3、箭头函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>箭头函数</title>

</head>

<body>

    <script type="text/javascript">

        /* 传统写法*/

        let le=function (food) {

            console.debug("不能浪费"+food);

        }

        le("食物")

        /* 箭头函数：只有一个参数可以不写括号*/

        let me= food =>{

            console.debug("浪迹在"+food);

        }

        me("天上")

        setInterval(()=>{

            console.debug("流浪");

        },1000)

    </script>

</body>

</html>

4、解构表达式+箭头函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>解构+箭头函数</title>

</head>

<body>

    <script type="text/javascript">

        let haha=({name,sex})=>{

            console.debug(name+"是"+sex+"人");

        }

        let user={

            name:"小明",

            sex:"男"

        }

        haha(user)

    </script>

</body>

</html>

5、Promise对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Promise对象</title>

</head>

<body>

    <script type="text/javascript">

        /*随机一个数，如果这个数大于0.5就为真，小于等于就为假*/

        const promise=new Promise((resolve ,reject)=>{

            setTimeout(()=>{

                let value= Math.random();

                if(value>0.5){

                    resolve(value);

                }else {

                    reject(value);

                }

            },1000)

        })

        promise.then(res=>{

            console.debug(res+"，真")

        }).catch(res=>{

            console.debug(res+"，假")

        })

    </script>

</body>

</html>

6、模块化

　　html文件(module.html)：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模块化</title>

    <!-- bundle.js文件是将模块module1.js打包得到的 -->

    <script type="text/javascript" src="dist/bundle.js"></script>

</head>

<body>

</body>

</html>

　　

　　模块1（module1.js）：

import {name,study} from "./module2"

study();

document.write(name)

　　

　　模块2（module2.js）：

export var name="小明";

export var study=function () {

    console.debug("出去玩啦")

}

　　

　　最后将模块1打包成bundle.js文件即可运行html文件。

ES6常用的新特性的更多相关文章

  1. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

  2. Python3.x 常用的新特性

    Python3.x 常用的新特性 print() 是函数,不是一个语句 raw_input()输入函数,改为 input() Python 3 对文本和二进制数据做了更为清晰的区分. 文本由unico ...

  3. ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...

  4. ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  5. 深入浅出：了解JavaScript的ES6、ES7新特性

    参照阮一峰博客:http://es6.ruanyifeng.com/#README es6常见题:https://blog.csdn.net/qq_39207948/article/details/8 ...

  6. ES6的十个新特性

    这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档: /** * Created by zhangsong on 16/5/20. *///    ***********Nu ...

  7. 2.ES6引进的新特性——类Class

    为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...

  8. 关于ES6的一些新特性的学习

    一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...

  9. ES6/ES7/ES8新特性

    ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...

随机推荐

  1. ent 基本使用十七 分页与排序

    ent 提供了方便的数据分页以及排序处理 limit 分页 users, err := client.User. Query(). Limit(n). All(ctx) offset 分页 users ...

  2. React的基本使用

    一.初始化和安装依赖 ①建立项目文件夹 mkdir react-democd react-demo ②在项目里执行命令:初始项目 npm init -y ③安装相关依赖 npm install --s ...

  3. 使用 gitstats 来统计代码

    使用 gitstats 来统计代码 github地址如下 gitstats clone地址 git clone https://github.com/hoxu/gitstats && ...

  4. 调用Fluent进行多工况计算总结

    算例来源:https://confluence.cornell.edu/display/SIMULATION/FLUENT+-+Turbulent+Pipe+Flow 有时候我们对同一模型进行多工况计 ...

  5. 《jmeter接口自动化与性能实战-飞天小子.pdf》

    Jmeter作为开源测试工具,以其轻便,功能齐全的优点,正越来越受到企业的重视.作为纯java的工具,它的扩展性无比强大,既可以做功能测试,也可以做性能测试:既支持接口层面的测试,也支持webdriv ...

  6. 终于明白为什么要加 final 关键字了！

    阅读本文大概需要 2.8 分钟. 来源: www.jianshu.com/p/acc8d9a67d0c 在开发过程中,由于习惯的原因,我们可能对某种编程语言的一些特性习以为常,特别是只用一种语言作为日 ...

  7. win10 安装mysql 8.0.18 解决Navicat初次连接报错

    win10 安装mysql 8.0.18 解决Navicat初次连接报错 win10 安装mysql 8.0.18-winx64 一,先去官网下载mysql 安装包 https://dev.mysql ...

  8. 【maven】命令

    一.maven打包命令 mvn打包,并指定 Profiles配置文件 和 模块名 mvn clean package {-P prod} -pl {groupId}:{artifactId} -am ...

  9. 信息熵 Information Entropy

    信息熵用于描述信源的不确定度, 即用数学语言描述概率与信息冗余度的关系. C. E. Shannon 在 1948 年发表的论文A Mathematical Theory of Communicati ...

  10. MySQL 设计与开发规范

    MySQL 设计与开发规范 1 目的 本规范的主要目的是希望规范数据库设计与开发,尽量避免由于数据库设计与开发不当而产生的麻烦:同时好的规范,在执行的时候可以培养出好的习惯,好的习惯是软件质量的很好保 ...