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. score indicator

    The strongest scorer applet is the strongest scorer specially designed for the players. No longer wo ...

  2. Java中lambda表达式学习

    一.Lambda表达式的基础语法: Java8中引入了一个新的操作符"->"该操作符称为箭头操作符或Lambda操作符,箭头操作符将Lambda表达式拆分为两部分: 左侧:L ...

  3. webstorm永久破解

    准备 1. webstorm下载 本次使用的是2017.3.3版本,如果找不到那么在此附上:webstorm各版本下载地址. 前段时间有朋友反馈破解不成功,今天本人亲测2017.3.3仍可以破解成功, ...

  4. windows自动修复失败，无法启动

    Windows10操作系统于2015年7月29日正式发布,此后,win10也就成了新上市的笔记本电脑或者台式机电脑的预装操作系统!win10系统给我们带了全新的体验,当然也带来了一定的烦恼!就拿win ...

  5. Xcode9/iOS 11 无线调试方法

    1.确保手机已经升级到 iOS 11 ,Xcode 已经升级到 9.0 版本,用手机连接电脑,打开 Xcode 选择路径如下图 2.勾选 Connect via network ,勾选之后拔掉手机. ...

  6. tomcat做成Windows自启动服务

    一.下载Tomcat 下载Windows版本的tomcat,一般是以zip结尾的包,免安装的包,而Linux包虽然解压可以运行,但是缺少service.bat关键文件,无法做成服务形式 下载网站: h ...

  7. Eclipse解决项目中找不到Maven Dependencies

    项目中找不到Maven Dependencies 正常的Maven项目应该是这样的 自己的项目中却没有Maven Dependencies 先做第一步 若项目中还没有出现Maven Dependenc ...

  8. FZU Monthly-201905 获奖名单

    FZU Monthly-201905 获奖名单 冠军: 郑学贵 S031702338 一等奖: 林闽沪 S131700309 罗继鸿 S031702524 二等奖: 苏锦程 S031802325 林鑫 ...

  9. 946. Validate Stack Sequences

    946. Validate Stack Sequences class Solution { public: bool validateStackSequences(vector<int> ...

  10. golang程序编译时提示“package runtime: unrecognized import path "runtime" (import path does not begin with hostname)”

    在编译golang的工程时提示错误的, 提示的错误信息如下: package bytes: unrecognized import path "bytes" (import pat ...