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. LeetCode 953. Verifying an Alien Dictionary

    原题链接在这里:https://leetcode.com/problems/verifying-an-alien-dictionary/ 题目: In an alien language, surpr ...

  2. File Browser文件资源服务器

    要是想一键启动的,这里有个封装版本的,上传到服务器,执行sh命令就能直接启动,也可以修改配置 链接:https://pan.baidu.com/s/1oVP5DrEQSV9hQmnF2bzM9A提取码 ...

  3. Web Components 入门实例教程

    转自阮一峰http://www.ruanyifeng.com/blog/2019/08/web_components.html 组件是前端的发展方向,现在流行的 React 和 Vue 都是组件框架. ...

  4. Spring系列：下载

    Spring 官网:http://projects.spring.io/spring-framework/ Spring下载地址:https://repo.spring.io/simple/libs- ...

  5. Spring Boot进阶系列一

    笔者最近在总结一个 Spring Boot实战系列,以方便将来查找和公司内部培训用途. 1.Springboot从哪里来 SpringBoot是由Pivotal团队在2013年开始研发.2014年4月 ...

  6. 【Beta阶段】第八次Scrum Meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #63 技术博客--django和mysqlhttps://github.com/rRetr0Git/rateMyCourse/issues ...

  7. RNN 权重共享

    之前在几篇博客中说到了权重共享,但都觉得不够全面,这里做个专题,以后有新的理解都在此更新. 1. 减少运算只是锦上添花之前说到权重共享可以减少运算,是的,但这样说好像是可有可无,只是运算量大小的问题, ...

  8. Windows Server 2012 R2 卸载IE浏览器

    If you run any Windows Servers, you may run into a scenario where you want to remove access to Inter ...

  9. python开发笔记-pymsslq连接操作SqlServer数据库

    1. 普通连接测试 官方文档样例:http://pymssql.org/en/latest/pymssql_examples.html pymssql模块使用指南:https://blog.csdn. ...

  10. Sword 位运算取余操作

    /* 位运算取余操作 */ #include <stdio.h> #include <stdlib.h> #include <string.h> #include ...