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. MongoDB Index

    索引通常能够极大的提高查询的效率,如果没有索引,MongoDB在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录. 这种扫描全集合的查询效率是非常低的,特别在处理大量的数据时,查询可以要 ...

  2. 爬虫 -- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xe6 in position 301: unexpected end of data

     errors参数有3个值:strict,  ignore,  replace html.decode("utf-8"),这种形式有时会报错,那么修改为下面形式,将decode函数 ...

  3. public private protected 修饰符整理

    1.public定义的类或方法:任何类的实例都可以访问 2.private定义的属性和方法:只能该类内部使用:如果子类要访问父类的private属性:必须实现__set()和__get()方法: 3. ...

  4. starUML

    下载地址: https://www.qqxiazai.com/down/10296.html 下载后解压,先运行 绿化.exe 然后右键管理员运行 StarUML.exe 进入后就可以画UML以及时序 ...

  5. CentOS7.4下安装部署HAProxy高可用群集

    目录第一部分 实验环境第二部分 搭建配置web服务器第三部分 安装配置haproxy服务器第四部分 测试验证第五部分 haproxy配置相关详细解释 第一部分 实验环境1.一台harpoxy调度服务器 ...

  6. java NIO面试题剖析

    转载:https://mp.weixin.qq.com/s/YIcXaH7AWLJbPjnTUwnlyQ 首先我们分别画图来看看,BIO.NIO.AIO,分别是什么? BIO:传统的网络通讯模型,就是 ...

  7. kubernetes --- weave

    #wget 'https://cloud.weave.works/launch/k8s/weavescope.yaml?k8s-service-type=NodePort&k8s-versio ...

  8. 从技术角度看Pacs厂商

    天健PACS较早从事影像医院处理系统,为国外系统或设备以OEM方式提供软件模块.天健的PACS里面三维重建.容积重建.血管分析.虚拟腔镜.头部灌注等部分是用西安盈谷科技的,手术麻醉和重症监护系统是奥迪 ...

  9. php – cURL从重定向获取url

    我目前正在使用cURL尝试从网站刮刀的重定向获取URL.我只需要网站上的网址.我在过去几天研究过stackoverflow和其他网站,但都没有成功.我目前使用的代码来自这个网站: $url = &qu ...

  10. shell整数与小数比较，小数之间比较的方法【转】

    在shell脚本中,无法对浮点数进行比较,如: max=0.1 min=0.01 if [ "$max" -gt "$min" ] then echo &quo ...