01-变量的定义

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    // var somedody;

    // console.log(somebody);

    // var somebody = "lingruizhi";

    // 变量的提升

    function func() {

        // console.log(somebody);

        if(1){

            let somebody = "hexin";

        }

    }

    func();

    let age = 81;

    age = 18;

    const girl = "wangshuang";

    // girl = "llal";

</script>

</body>

</html>

02- 模板字符串

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h1>文周的爱好</h1>

</div>

<script>

   // 给div添加文本

   let ele = document.getElementById("app");

   ele.innerText = "hello";

   let hobby1 = "翻车";

   let hobby2 = "背诗";

   let hobby3 = "看女主播";

   ele.innerHTML = `<ul>

        <li>${hobby1}</li>

        <li>${hobby2}</li>

        <li>${hobby3}</li>

    </ul>`

    // ele.innerHTML = "<ul><li>"+ ""+ "</li></ul>"

</script>

</body>

</html>

03-函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    // 箭头函数

    // this  当前函数最近的调用者

    // 取决于当前的上下文环境

    function aa() {

        console.log(this)

    }

    aa();

    let obj1 = {

        a: 1,

        func: aa

    }

    obj1.func();

    let obj2 = {

        obj1: obj1,

        a: 2

    }

    obj2.obj1.func();

    function myfunc(x) {

        return x+1

    }

    let fun2 = x => x+1;

    console.log(fun2(5))

</script>

</body>

</html>

04-数据的解构

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    let obj = {

        a: 1,

        b: 2,

        x: 3,

        y: 4

    };

    let hobby = ["吹牛", "特斯拉", "三里屯"];

    let {x, y} = obj;

    let [hobby1, hobby2, hobby3] = hobby;

    console.log(x);

    console.log(y);

    console.log(hobby1);

    console.log(hobby2);

    console.log(hobby3);

</script>

</body>

</html>

05-类的定义

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    class Animal {

        constructor(){

            this.type = "animal"

        };

        say(){

            console.log("ao~~~~")

        }

    };

    class Dog extends Animal {

        // 子类没有this

        constructor(){

            super()

            // 用super方法拿到父类的this

            this.type = "dog"

        }

        say(){

            console.log("wang~~~~")

        }

    }

    let dog = new Dog();

    console.log(dog.type);

    dog.say()

    // class Animal():

    //     def __init__

</script>

</body>

</html>

　　总结：

ES6的常用语法

	变量的定义

		-- var  变量的提升 函数作用域以及全局作用域

 		-- let  块级作用域  {}

		-- const  常量  不可以修改

	模板字符串

		语法 ``

		变量 ${}

	箭头函数

		类比Python的匿名函数

		this

			-- 普通函数的this取决于函数最近的调用者

			-- 箭头函数的this取决于当前上下文的环境

	数据的解构

		-- 解构对象 let {key， key} = obj

		-- 解构数组 let [x, y, x] = array

	类的定义

		-- 定义类 class

		-- 构造方法 constructor

		-- 继承 extends

		-- 子类没有this 需要用super方法来找到父类的this

　　

　　

　　

Vue第一篇 ES6的常用语法的更多相关文章

  1. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  2. es6的常用语法

    最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, defaul ...

  3. Python编程笔记（第一篇）Python基础语法

    一.python介绍 1.编程语言排行榜 TIOBE榜 TIOBE编程语言排行榜是编程语言流行趋势的一个指标,每月更新,这份排行榜排名基于互联网有经验的程序员.课程和第三方厂商的数量. 2.pytho ...

  4. Vue小白篇 - ES6的语法

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

  5. vue第一篇（搭建vue开发环境）

    1.下载node并安装 下载地址: https://nodejs.org/zh-cn/ 下载后双击文件安装 2.检查是否安装成功 node -v v10.16.0 npm -v 6.9.0 如果能正常 ...

  6. vue学习（一）ES6常用语法

    1 ES6常用语法 1.1 变量提升 例① # 变量提升 <div id="app"> </div> <script> console.log( ...

  7. ES6常用语法

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

  8. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  9. 黑马eesy_15 Vue：常用语法

    自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端的基础知识ES6语法和Vue.js 所以本篇博客作为入门Vue练习记录的过程,目的是供自学后端 ...

  10. ES6常用语法简介import export

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

随机推荐

  1. Aop限流实现解决方案

    01.限流 在业务场景中,为了限制某些业务的并发,造成接口的压力,需要增加限流功能. 02.限流的成熟解决方案 guava (漏斗算法 + 令牌算法) (单机限流) redis + lua + ip ...

  2. 普冉PY32系列(十四) 从XL2400迁移到XL2400P

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...

  3. 【C#】【System.Linq】一些便捷的数据处理方法（Range、Select）

    因为用习惯了Python中一些便捷的方法,随即查询C#中有没有类似的. 一.Range()方法 在Python中,range(Start,End,Step)可以直接生成一个可迭代对象,便用于需要循环多 ...

  4. Ubuntu 安装MySQL 8.0.23及以上版本

    首先如果当前linux中没有wget,那么我们可以考虑使用sudo apt-get install wget来安装wget命令 Ubuntu自带的源只能安装MySQL5.7版本,这里去MySQL官网安 ...

  5. CSS3学习笔记-选择器

    在CSS中,选择器是一种指定一个或多个元素的方法.可以根据元素的类型.类.ID.属性等特征来选择元素.CSS3引入了很多新的选择 器,让我们可以更加灵活和精准地选择元素. 下面介绍一些常用的CSS3选 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt （51）-- 算法导论6.2 3题

    三.当元素 A[i] 比其孩子的值都大时,调用 MAX-HEAPIFY(A.i)会有什么结果? 文心一言: 当元素 A[i] 比其孩子的的值都大时,调用 MAX-HEAPIFY(A, i) 会将 A[ ...

  7. curl使用小记(一)

    目录 1. 概述 2. 实例 2.1. 访问网页 2.2. 显示头信息 2.3. 保存网页 2.4. 下载图片 2.5. 用户代理设置 2.6. 代理设置 3. 参考 1. 概述 curl也就是com ...

  8. .NET技术分享日活动20221022

    2022年10月22日下午,个人组织举办了山东地区的第六次.NET技术分享日活动.围绕.NET.低代码Low Code.云原生 Cloud Native.大数据.算法等方向进行创新技术的实践分享. 本 ...

  9. 论文解读丨Zero-Shot场景下的信息结构化提取

    摘要:在信息结构化提取领域,前人一般需要基于人工标注的模板来完成信息结构化提取.论文提出一种zero-shot的基于图卷积网络的解决方案,可以解决训练集和测试集来自不同垂直领域的问题. 本文分享自华为 ...

  10. 华为云GuassDB(for Redis)发布全新版本推出：Lua脚本和SSL连接加密

    摘要:9月8日,华为云GuassDB(for Redis)正式推出全新版本.新版本内核带来性能提升.无损升级.慢日志统计等多维度产品体验,同时推出Lua脚本和SSL连接加密两大重要功能,让业务设计更加 ...