vue学习（一）ES6常用语法
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常用语法的更多相关文章
- ES6常用语法
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- ES6常用语法简介import export
ES6常用语法简介import export let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = functi ...
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- ES6 常用语法知识汇总
ES6模块化如何使用,开发环境如何打包? 1.模块化的基本语法 /* export 语法 */ // 默认导出 export default { a: '我是默认导出的', } // 单独导出 exp ...
- Vue小白篇 - ES6的语法
为什么要学 ES6 的语法呢? 因为 Vue 语法有很多都是 ES6(ECMAScript 6),这里推荐 [阮一峰 ECMAScript 6 入门]: http://es6.ruanyifeng.c ...
- Vue学习2：模板语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES6常用语法总结
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽 ...
- ES5与ES6常用语法教程之 ③模板字符串、判断字符串是否包含其它字符串
这部分教程我们主要讲解以下几个常用语法 模板字符串 带标签的模板字符串 判断字符串中是否包含其他字符串 给函数设置默认值 模板字符串 老式的拼接字符串方法 let dessert = '
- es6常用语法学习笔记
1.let和const的常规使用 let声明的变量不存在预解析 let声明的变量不允许重复使用(在同一个作用域内) ES6引入了块级作用域{},块内部定义的变量,在外部是不可以访问到的 使用let在f ...
随机推荐
- ES 查询时 排序报错(fielddata is disabled on text fileds by default ... )解决方法
背景:elasticsearch 进行排序的时候,可能会排序数字.日期.但是在排序text类型的时候就会出现上述错误 原因(参考): https://blog.csdn.net/wild46cat/a ...
- Python学习第四课——基本数据类型一之int and str
1.数字(int) - int() 方法 # 定义 a1=123 a2=456 #功能1:将字符串转换为数字 #例子1: a = " print(type(a)) # type()为查看类型 ...
- LeetCode 297.序列化二叉树 - JavaScript
题目描述 序列化是将一个数据结构或者对象转换为连续的比特位的操作,进而可以将转换后的数据存储在一个文件或者内存中,同时也可以通过网络传输到另一个计算机环境,采取相反方式重构得到原数据. 请设计一个算法 ...
- 运算符 Operator 及优先级
算数运算符 + - * / ** % /表示自然除,结果是浮点数.//为整除.python2.x版本/和//都是整除. 位运算符 & | ~ ^ << >> <& ...
- window进行缩放时左侧菜单高度随之变化
window.onresize = function(){ $(); }
- php 投票系统
1.投票主界面(问题界面) <?php$db = new Mysqli("localhost","root","root"," ...
- 严重: Exception loading sessions from persistent storage
2011-11-24 10:05:00| 分类: java学习|举报|字号 订阅 当tomcat启动的时候出现下面错误: [ERROR] org.apache.catalina.sessio ...
- Task使用注意
1. CancellationTokenSource的使用 https://binary-studio.com/2015/10/23/task-cancellation-in-c-and-things ...
- vs2010编译C++ 结构体
//结构体的测试// CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usi ...
- anaconda 创建虚拟环境(自己版本)
首先安装anaconda(3) Anacond的介绍Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. 因为包含了大量的科学包,Ana ...