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. sql 记录一次灾难 游标问题

    起因:游标执行存储过程 下载begin 外面了.. ,造成一直触发存储过程 收获:定义变量统一在游标外部使用, 书写内容在begin 内部书写 alter PROCEDURE USP_dgd_wzh_ ...

  2. MongoDB 部署复制集（副本集）

    部署MongoDB复制集(副本集)   环境 操作系统:Ubuntu 18.04 MongoDB: 4.0.3 服务器 首先部署3台服务器,1台主节点 + 2台从节点 3台服务器的内容ip分别是: 1 ...

  3. vue单项数据流

    当父组件给子组件传递数据的时候,子组件只能读取,不能改写.因为如果子组件改变父组件传递过来的数据时会造成数据流难以理解.

  4. 第五届新疆ACM H-虚无的后缀

    来源 第五届新疆省ACM-ICPC程序设计竞赛nowcoder重现赛 H-虚无的后缀 思路1 好菜哦. 首先后缀零的个数最多,我们只需要考虑他的质因子2和5的个数就行了(存为a,b). 因为其他因子对 ...

  5. trutle库的使用基础

    turtle库的使用: 概括: turtle绘图体系:1969年诞生,主要用于程序设计入门 Python语言的标准库之一 入门级的图形绘制函数库 原理: turtle的原(wan)理(fa) (tur ...

  6. python 函数注解 参数后面加冒号 函数后面加箭头

    由于 python 是动态语言,在定义函数时,参数是不需要指定类型的.当调用别人写的函数,而该函数有没有文档说明,只有通过看源代码才能知道需要传递什么类型的参数. 不过 python 提供了一种机制可 ...

  7. @Autowired和@Resource的区别和联系

    背景: 今天下班路上看到一个大货车,于是想到了装配,然后脑海里跳出了一个注解@Autowired(自动装配),于是又想到最近工作项目用的都是@Resource注解来进行装配.于是本着学什么东西都要一钻 ...

  8. git 下载指定tag版本的源码<转>

    git clone --branch x.x.x https://xxx.xxx.com/xxx/xxx.git 原文地址:https://blog.csdn.net/weixin_30617561/ ...

  9. Ubuntu 16.04.4 LTS下安装OpenSSL

    1.下载openssl,本次下载的版本是openssl-1.1.0l.tar.gz : 地址  https://www.openssl.org/source/openssl-1.1.0l.tar.gz ...

  10. Mac安装MySQL-python的血泪史

    现象描述 起初正常使用pip命令提示如下的错误: cc -bundle -undefined dynamic_lookup -Wl,-F. build/temp.macosx-10.14-intel- ...