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. luffy 那点事

    1 虚拟环境创建 2 后台:Django项目创建 3 后台配置 4 数据库配置 5 user模块User表 6 前台 7 前台配置 8 前端主页 9 后端主页模块设计 10 xadmin 后台管理 1 ...

  2. java并发之Future与Callable使用

    java并发之Future与Callable使用 这篇文章需要大家知道线程.线程池的知识,尤其是线程池. 有的时候我们要获取线程的执行结果,这个时候就需要用到Callable.Future.Futur ...

  3. js 实现去重

    ES6 set去重 Array.from(new Set([1,2,3,3,4,4])) // [1,2,3,4] [...new Set([1,2,3,3,4,4])] // [1,2,3,4] 使 ...

  4. 六、java基础-单例模式_继承_覆盖_多态

    1.单例模式: 1)提出原因 是由gof 也就是四人组提出来的.为了保证jvm中某一类型的java对象永远只有一个,同时也是为了节省内存的开销.因为外面程序可以通过new的方法直接调用类里面的构造方法 ...

  5. 跳蚤[BZOJ4310](后缀数组+二分答案传判定)

    不知道后缀数组的请退回去! 题面: 题目描述 很久很久以前,森林里住着一群跳蚤.一天,跳蚤国王得到了一个神秘的字符串,它想进行研究.首先,他会把串分成不超过 k 个子串,然后对于每个子串 S,他会从S ...

  6. Eclipse 导入 Tomcat 源码

    我的环境:Win10,Eclipse 4.8.0 Photon,JDK 10.0.2   1.下载Tomcat源码 我下载的是:apache-tomcat-9.0.12-src.zip 下载地址:ht ...

  7. 前端学习笔记系列一：6 一种新的css预编译器stylus

    stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...

  8. PHP登陆页面完整代码

      /* 包括的文件 */ /* login.php */ <?phprequire('./mysql.php');$username=$_REQUEST['username'];$passwd ...

  9. C++面试常见问题——15函数的值传递、指针传递、引用传递

    函数的值传递.指针传递.引用传递 值传递 形参是实参的拷贝,该表形参的值并不会影响外部的实参.值传递是单向的(实参-->形参),参数的值只能传入,不能传出.当函数内部需要修改参数并且不影响调用者 ...

  10. VUE - 引入 npm 安装的模块 以及 uuid模块的使用

    <template>   <div>       <form @submit.prevent="addTodo">         <in ...