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. 守神漏洞扫描器V1.2

    主界面 指纹利用 漏洞库 怎么说呢,个人感觉这个扫描器跟小哲的Test404Fuzzer差不多~ 就是功能多了旁站查询.C段查询.而且这款工具的exp比Test404Fuzzer的多了几个~ 总体来说 ...

  2. Laradock 如何通过 ssh 方式连接到 workspace

    用 docker-compose exec workspace bash 方式可以进入容器,但是还是在 xshell 终端连接比较方便.   在网上也没找到方法,其实可以通过密钥的方式连接.记录一下仅 ...

  3. TCP-IP ---三次握手和四次挥手来啦

  4. SSH和screen服务

    SSH是一种能够以安全的方式提供远程登录的协议,目前远程管理的首选方式,sshd是基于SSH协议开发的一款远程管理服务程序,在Linux系统中需要部署sshd服务程序才能使用SSH协议来进行远程管理, ...

  5. leetcode814 Binary Tree Pruning

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

  6. arm linux 移植 PHP

    背景: PHP 是世界上最好的语言. host平台 :Ubuntu 16.04 arm平台 : 3531d arm-gcc :4.9.4 php :7.1.30 zlib :1.2.11 libxml ...

  7. MQTT 协议学习:003-MQTT通信流程介绍

    背景 有关博文:通信报文的构成 . 上一讲说到可变头与消息体要结合不同的报文类型才能够进行分析(实际上,官方的文档的介绍顺序就是这样的) 那么,我们就来具体看看有关的报文类型. 在此之前 我们捋一捋完 ...

  8. 在线关闭 CLOSE_WAIT状态TCP连接

    1.查看某个端口的所有TCP连接: [root@Centos projects]# netstat -anp | tcp6 ::: :::* LISTEN /java tcp6 CLOSE_WAIT ...

  9. Windows驱动开发-派遣函数格式

    NTSTATUS functionName(PDEVICE_OBJECT pDeviceObject, PIRP pIrp) { //业务代码区 //设置返回状态 pIrp->IoStatus. ...

  10. CodeForces - 869B The Eternal Immortality

    题意:已知a,b,求的最后一位. 分析: 1.若b-a>=5,则尾数一定为0,因为连续5个数的尾数要么同时包括一个5和一个偶数,要么包括一个0. 2.若b-a<5,直接暴力求即可. #in ...