1 ES6常用语法

1.1 变量提升

例①

# 变量提升

<div id="app">

</div>

<script>

    console.log(age);    # undefined

    var age = 18;

    console.log(age)     # 18

</script>

例②

# 变量提升

<div id="app">

</div>

<script>

    function aa() {

        console.log(xiaoqiang)    # undefined

        if (1){

            var xiaoqiang = 'qiang';

            console.log(xiaoqiang)    # qiang

        }

    }

    aa()

</script>

例③

# 例②的引申   let

<body>

<div id="app">

</div>

<script>

    function aa() {

//        console.log(xiaoqiang);    # 报错

        if (1){

            let xiaoqiang = 'qiang';   # let 块级作用域

            console.log(xiaoqiang)    # qiang

        }

    }

    aa()

</script>

</body>

例④

<body>

<div id="app">

</div>

<script>

    const s12 = 'high';

    console.log(s12)    # high

-------------------------------

    const s12 = 'high';

    const s12 = 'high1';

    console.log(s12)   # 报错

</script>

</body>

# const 定义一个不变的变量

1.2 模板字符串



<body>

<div id="app">

</div>

<script>

# 反引号与一般引号的区别

    var ele = document.getElementById('app');

-------------------------------------

    ele.innerHTML = '<ul>' +

        '<li>1</li>' +

        '<li>2</li>' +

        '<li>3</li>' +

        '</ul>';

-------------------------------------

    ele.innerHTML = `

                    <ul>

                    <li>1</li>

                    <li>2</li>    # 形式一

                    <li>3</li>

                    </ul>`

-------------------------------------

    var xiao = 'qiang';

    var age = 18;

    var hobby = 'learn';

    ele.innerHTML = `

                    <ul>

                    <li>${xiao}</li>

                    <li>${age}</li>  # # 形式二

                    <li>${hobby}</li>

                    </ul>`

</script>

</body>

1.3 数据的解构

<script>

    # 对象

    let obj = {

        name : 'xiaoqiang',

        age:18

    };

# 类似于python的**打散

    let {name,age}=obj;     # 要用一个对象{}来接收

    console.log(name);

    console.log(age)

</script>


<script>

    # 数组

    let arry = ['s','12'];

    let [a,b] = arry;

    console.log(a);

    console.log(b)

</script>

1.4 箭头函数

* 1

<script>

    let jiantou = x => x+1;

    console.log(jiantou(5))    # 6

// 省略了function关键字

// 省略了return返回值

</script>


* 2

<script>

function aa() {

    console.log(this)    #  this的用法

                         #  打印出的是window

}

aa()

</script>

# 函数的调用的全局的 window调用


* 3

<script>

    function aa() {

        console.log(this) # {name: "xiaoqiang", aa: ƒ}

    }

    aa();

    let obj = {

        name : 'xiaoqiang',

        aa:aa

    };

    obj.aa()

</script>


* 4

<script>

    function aa() {

        console.log(this) ###

    }

    aa();

    let obj = {

        name : 'xiaoqiang',

        aa:aa

    };

    let obj2 = {

        name: 'xiaoxiaoqiang',

        obj:obj

    };

    obj.aa();

    obj2.obj.aa()

</script>

# this 取决于函数最近的调用者

1.5 类

* 1 单纯的类

<script>

    # 定义类要是class，一定要加constructor

    class Student{

        constructor(){

            this.name = 'xiaoqiang';

        }

        says(say){

            console.log(this.name  + 'says'+ say)

        }

    }

    // 实例化 要加 new；调用

    let xiaoxiao = new Student();

    xiaoxiao.says('I love China')

</script>


* 2 类的继承

<script>

----------------------------------------

    class Student{

        constructor(){

            this.name = 'xiaoqiang';

        }

        says(say){

            console.log(this.name  + 'says'+ say)

        }

    }

    // 实例化 要加 new；调用

    let xiaoxiao = new Student();

    xiaoxiao.says('I love China')

----------------------------------------

## ↓ 继承 constructor会报错，要加super

    class Stu extends Student{

        constructor(){

            super();

            this.name = 'ganggang'

        }

    }

    let gang = new Stu()

    gang.says('Me too')

</script>

1.6 模块

后期补

vue学习（一）ES6常用语法的更多相关文章

  1. ES6常用语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  2. ES6常用语法简介import export

    ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...

  3. ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同

    js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...

  4. ES6 常用语法知识汇总

    ES6模块化如何使用,开发环境如何打包? 1.模块化的基本语法 /* export 语法 */ // 默认导出 export default { a: '我是默认导出的', } // 单独导出 exp ...

  5. Vue小白篇 - ES6的语法

    为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...

  6. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ES6常用语法总结

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽 ...

  8. ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串

    这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '

  9. es6常用语法学习笔记

    1.let和const的常规使用 let声明的变量不存在预解析 let声明的变量不允许重复使用(在同一个作用域内) ES6引入了块级作用域{},块内部定义的变量,在外部是不可以访问到的 使用let在f ...

随机推荐

  1. SqlSession为什么可以提交事务

    本应在开始读MyBatis源码时首先应该了解下MyBatis的SqlSession的四大对象:Executor.StatemenHandler.ParameterHandler.ResultHandl ...

  2. Linux centosVMware zip压缩工具、tar打包、打包并压缩

    一. zip压缩工具 可以用来压缩文件和目录,压缩目录是需要指定目录下的文件. [root@davery tmp]# cp 1.txt davery/[root@davery tmp]# du -sh ...

  3. Windows篇：文件对比软件->"DiffMerge"

    文件对比软件->"DiffMerge" DiffMerge是什么? 如果没有DiffMerge! 想想一下,有两篇10000字的文章,找不同,眼睛都要看花吧.有了DiffMe ...

  4. 一种新的python局部调试手法

    我们都知道,python里面可以用pdb来调试代码.但是pdb往往不大好用.有时候调试代码往往在多重条件里面,直接用pdb需要下条件断点,设定复杂的条件. 一个简单的办法就是这么干. __import ...

  5. springboot2.1mysql驱动类弃用

    Loading class `com.mysql.jdbc.Driver'. This is deprecated. The new driver class is `com.mysql.cj.jdb ...

  6. 51nod 1378：夹克老爷的愤怒 很好玩的一道树状dp

    1378 夹克老爷的愤怒 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  取消关注 夹克老爷逢三抽一之后,由于采用了新师爷的策略,乡民们叫苦不堪,开始组织 ...

  7. CentOS7 部署 Jupyter Notebook

    socket.error: [Errno 99] Cannot assign requested address 修改这几处: 1.hostname 参考:https://www.cnblogs.co ...

  8. maven杂碎汇总

        本来是想写一篇关于maven知识点的详细总结的,但需要看一本书或教材,然后再汇总一下,这样做自然是好的,这个在年前争取做完.本文是主要记录在工作和学习遇到关于maven的一些困惑.很乐意看到它 ...

  9. Java中null的判断

    Java中空指针的异常十分常见 if (name != null && !name.equals("")) { //do something } 或者 if (!& ...

  10. angularJS 服务