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. 【剑指Offer面试编程题】题目1512：用两个栈实现队列--九度OJ

    题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 输入: 每个输入文件包含一个测试样例. 对于每个测试样例,第一行输入一个n(1<=n<=1 ...

  2. 棋盘 || 状压DP

    题意:有一个n*m的棋盘(n,m≤80,n*m≤80)要在棋盘上放k(k≤20)个棋子,使得任意两个棋子不相邻(每个棋子最多和周围4个棋子相邻).求合法的方案总数. 思路:对于每一行,如果把没有棋子的 ...

  3. java并发：初探用户线程和守护线程

    用户线程和守护线程 用户线程 用户线程执行完,jvm退出.守护线程还是可以跑的 /** * A <i>thread</i> is a thread of execution i ...

  4. day10-Python运维开发基础(函数嵌套、nonlocal声明局部变量、闭包、locals/globals、lambda表达式)

    1. 函数的嵌套与nonlocal 声明局部变量 # ### 函数的嵌套 """ 函数和函数之间可以互相嵌套: 嵌套在内层的叫做内函数 乔涛在外层的叫做外函数 " ...

  5. redis列表-list

    Redis的list类型其实就是一个每个子元素都是string类型的双向链表,链表的最大长度是2^32.list既可以用做栈,也可以用做队列. 常用命令: 1. lpush key value [va ...

  6. c++中的全排列

    next_permutation函数 组合数学中经常用到排列,这里介绍一个计算序列全排列的函数:next_permutation(start,end),和prev_permutation(start, ...

  7. 力扣347——前 K 个高频元素

    这道题主要涉及的是对数据结构里哈希表.小顶堆的理解,优化时可以参考一些排序方法. 原题 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2, ...

  8. memcached 和 redis 性能测试比对

    网上很多关于memcached 和 redis 区别的介绍,大部分都是说redis比memcached支持的数据类型多的话题,而性能比对确很少,我专门针对两者进行了性能测试比对. 测试内容如下: 两者 ...

  9. dubbo 相关面试题 有用(转)

    调用关系说明: · 0. 服务容器负责启动,加载,运行服务提供者. · 1. 服务提供者在启动时,向注册中心注册自己提供的服务. · 2. 服务消费者在启动时,向注册中心订阅自己所需的服务. · 3. ...

  10. uboot源码分析1-启动第一阶段

    1.不简单的头文件包含 #include <config.h>:这个文件的内容其实是包含了一个头文件:#include <configs/x210_sd.h>". # ...