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. java并发之Future与Callable使用

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

  2. coding 321

    三大原理(计算机原理.操作系统原理.编译原理)两个协议(TCP与HTTP协议)一种结构(数据结构)

  3. 剑指offer 二叉树的后序遍历序列

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 思路:这题目有点特殊,主要在于序列为空的时候,不是 ...

  4. 前端学习笔记系列一：11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

  5. Eclipse启动选择启动空间

    window -->preferences-->General-->Startup and Shutdown -->Workspaces-->勾选Prompt for w ...

  6. 整合Spring时Service层为什么不做全局包扫描详解

    合Spring时Service层为什么不做全局包扫描详解 一.Spring和SpringMVC的父子容器关系 1.讲问题之前要先明白一个关系 一般来说,我们在整合Spring和SpringMVC这两个 ...

  7. Django博客开发-数据建模与样式设定

    开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要 ...

  8. PAT (Advanced Level) 1136~1139：1136模拟 1137模拟 1138 前序中序求后序 1139模拟

    1136 A Delayed Palindrome(20 分) 题意:给定字符串A,判断A是否是回文串.若不是,则将A反转得到B,A和B相加得C,若C是回文串,则A被称为a delayed palin ...

  9. 结题报告：luogu P2014

    题目链接:P2014 选课 简单的树形\(dp\),借助\(dfs\)实现. 一般的树形\(dp\)数组是需要二维的,其中一维记录节点(编号或父/子节点的状态(有时三维)),另一维记录权值或计数. 重 ...

  10. 打开c++ 项目遇到的错误

    前言 后续持续更新: 无法打开源文件windows.h https://blog.csdn.net/Mr__George/article/details/87714252 找不到duilib.h ht ...