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. PTA数组及排序查找题解与解题思路

    PTA数组及排序查找题解与解题思路 函数题目 函数题目为平台提供的裁判程序调用所完成的函数进行判题,题目规定语言为C语言 6-1 求出二维数组的最大元素及其所在的坐标 本题较为简单,考察的是如何遍历一 ...

  2. 【笔记整理】[案例]爱词霸翻译post请求

    import json if __name__ == '__main__': import requests resp = requests.post( url="http://ifanyi ...

  3. 文心一言 VS 讯飞星火 VS chatgpt (165)-- 算法导论13.1 5题

    五.用go语言,证明:在一棵红黑树中,从某结点 x 到其后代叶结点的所有简单路径中,最长的一条至多是最短一条的 2 倍. 文心一言: 首先,我们要理解红黑树的性质.红黑树是一种自平衡的二叉查找树,它满 ...

  4. Json Schema简介和Json Schema的.net实现库 LateApexEarlySpeed.Json.Schema

    什么是Json Schema ? Json Schema是一种声明式语言,它可以用来标识Json的结构,数据类型和数据的具体限制,它提供了描述期望Json结构的标准化方法. 利用Json Schema ...

  5. IntelliJ IDEA下载安装,以及关联gitee

    https://www.jetbrains.com.cn/ 点击下载 IntelliJ IDEA Ultimate 旗舰版(收费) IntelliJ IDEA Community 社区版(免费) 安装 ...

  6. 性能集成监控系统exporter+Prometheus+Grafana

    Prometheus 是一个时序数据库,存数据 exporter是收集器,来收集被监控的数据,想要监控不同的内容,就使用不同的exporter,这个exporter应该放在被测服务器上,再把expor ...

  7. 深度解析 PyTorch Autograd:从原理到实践

    本文深入探讨了 PyTorch 中 Autograd 的核心原理和功能.从基本概念.Tensor 与 Autograd 的交互,到计算图的构建和管理,再到反向传播和梯度计算的细节,最后涵盖了 Auto ...

  8. Typecho 反向代理 http 访问强制启用生成 https 链接

    问题描述 微酷是使用Nginx反向代理内网的Typecho站点,为了效率内网访问不需要使用https,这样Typecho接收到的请求是http协议的,于是网站内部资源链接被修改成了http. 解决方案 ...

  9. 云小课 | 守护网络安全不是问题,iptables的四表五链为你开启“八卦阵”

    摘要:担心网络基本安全?iptables八卦阵为您守护!本文带您一起了解iptables的相关知识. 网络世界就和现实世界一样,总是会有些不怀好意的"人"出现,扫扫你的端口啊,探测 ...

  10. 每条你收藏的资讯背后,都离不开TA

    摘要:云原生数据库GaussDB(for Redis)不仅提升了阅客的服务效率,让个性化推荐更快更稳,还降低了存储和改造成本,为企业未来发展奠定了云化基础,助力阅客实现更高质量的资讯触达. 随着互联网 ...