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. 常用WinAPI函数整理------------转载

    常用WinAPI函数整理原创 玩撕你 发布于2019-09-04 20:06:55 阅读数 101 收藏展开 之前的博客写了很多关于Windows编程的内容,在Windows环境下的黑客必须熟练掌握底 ...

  2. RCTF crypto100(1)

    题面是一个文件,里面是用base64加密的字符串,如下所示: IyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI ...

  3. Js 获取当前日期时间及其它操作（转）

    Js获取当前日期时间及其它操作 var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();   ...

  4. leetcode814 Binary Tree Pruning

    """ We are given the head node root of a binary tree, where additionally every node's ...

  5. Jackson自定义反序列化

    // 设置jackson时间反系列化格式 SimpleModule module = new SimpleModule(); module.addDeserializer(Date.class, ne ...

  6. Eclipse创建一个动态maven项目详细步骤

    新建maven项目,new一个Dynamic Web Project 项目 输入完项目名直接finish 配maven,右键项目configure,选择Convert to Plug-in Proje ...

  7. python-python基础6（面向对象）

    一.面向对象编程 编程范式 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马 ...

  8. 5G/NR 帧结构

    原文链接:http://www.sharetechnote.com/html/5G/5G_FrameStructure.html 在学术界和3GPP中对帧结构进行了长时间的讨论,现在我们就NR(5G) ...

  9. 编程练习：求某个数的n次方，返回其个位和十位

    #!/usr/bin/env python def pow1(n,m): if m==0: return 1 if m==-1: return (1/n) if m & 1 != 0: ret ...

  10. Day6-T1

    原题目 Describe:模拟大水题 code: #include<bits/stdc++.h> #define INF 214748364 #define eps 1e-9 #defin ...