ES5与ES6的小差异
ES5与ES6的小差异
变量的定义
ES6与ES5的区别
ES5:
<script>
console.log(username);
var username;
var username = 'longda';
console.log(username);
</script>
打印结果:
分析上边的代码,发现第一个console.log()居然打印出了undefined,可是在这个之前并没有声明username这个变量.之所以会出现这种情况的原因是ES5的一个特性,这种情况被称为变量提升.
ES6:
<script>
console.log(username);
let username = 'LongDa';
</script>
代码执行结果:
分析上边的结果,ES6中使用let声明变量,在声明之前打印,结果将会报错.也就说明ES6不存在变量提升这种特性.
var和let定义的变量的区别
var定义的变量:
只有全局作用域和函数作用域.
let定义的变量:
有全局作用域和函数作用域、块级作用域。
<script>
if (true) {
var username = 'longda';
let age = 18;
} console.log(username);
console.log(age);
</script>
执行结果:
分析打印结果,由于let拥有块级作用域,而通常一个大括号({})就理解为一个作用域,打印age是在块级作用域外打印的,所以会报错显示变量未定义。
let不能重复定义变量。
<script>
var username = 'longda';
var username = 'xiaomo';
console.log(username);
</script>
打印结果如下:
分析打印结果,var可以重复定义变量。
<script>
var username = 'longda';
let username = 'xiaoxiaomo';
console.log(username);
</script>
打印结果如下:
分析打印结果,提示username这个变量已经存在,所以说let不能重复定义变量。
模板字符串
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
oDiv.innerHTML = '<h1>Hello LongDa' +
'<h2>Hello XiaoMo</h2>' +
'</h1>';
</script>
</body>
代码执行结果:
当使用innerHTML方法进行代码拼接是,代码片段之间用加号(+)连接。
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
let username1 = 'LongDa';
let username2 = 'XiaoMo'; oDiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h2>Hello ${username2}</h2>
`
</script>
</body>
代码执行结果如下:
也可以使用反引号(``)包含代码段,代码直接按照原来的格式直接书写就可以。
反引号中的代码片段可以进行变量赋值替换,可以提高代码的灵活性,使用${变量名}。
数据结构和赋值
数组
<script>
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b, c);
</script>
打印结果如下:
分析代码,发现ES6支持多变量同时赋值。
对象
<script>
let obj = {
username: 'LongDa',
age: 18,
};
let {username, age} = obj;
console.log(username, age);
</script>
代码执行结果如下:
<script>
let obj = {
username: 'LongDa',
age: 18,
};
let {username: user, age: age1} = obj;
console.log(user, age1);
</script>
代码执行结果:
两个代码比较发现,赋值不同, 但是打印的结果相同。let {username: , age: }中username对应的值没写时,默认使用username,age同样也是。第二个示例则是自定义变量的名字。
图示:
两个变量交换值
<script>
let a = 1;
let b = 2; [a, b] = [b, a];
console.log(a, b);
</script>
代码执行的结果:
执行结果显示,变量交换值成功。
函数的扩展
<script>
// 默认参数
function foo(x, y=10) {
let number = y;
return number;
} ret = foo(1, 2);
ret1 = foo(1);
ret2 = foo(1, 0);
console.log(ret);
console.log(ret1);
console.log(ret2);
</script>
当y不传参数时,使用默认值;当传参数时,使用传过来的值。
箭头函数
<script>
// 箭头函数
// 一个参数
let foo = v => v;
ret = foo(10);
console.log(ret)
</script>
代码打印结果:
<script>
// 箭头函数
// 0个或者多个参数
let bar = (x, y) => { return x + y;
}; ret = bar(1, 2); console.log(ret)
</script>
<script>
function foo() {
console.log(this);
} let bar = () => console.log(this); let obj = {
foo: foo,
bar: bar,
}; foo();
obj.foo();
obj.bar();
</script
打印结果:
foo()是普通函数,他的this是全局的;
obj.foo()是通过obj这个对象调用的这个this就是指向的谁;
obj.bar()中bar()是箭头函数,指向的是箭头函数。
类
ES5定义类:
function Person() {
this.username = 'LongDa';
this.age = 20;
} // 函数 Person.prototype.showInfo = function () {
console.log(this.username, this.age);
}; // 定义显示方法 let LongDa = new Person(); // 实例化
LongDa.showInfo() // 调用定义的方法
代码打印结果:
ES6定义类:
<script>
class Person{
constructor (username, age) {
this.username = username;
this.age = age;
} // 定义类 showInfo() {
console.log(this.username, this.age);
}
} // 定义方法 let XiaoMo = new Person('XiaoMo', 18); // 实例化方法
XiaoMo.showInfo(); // 调用方法
</script>
代码打印结果:
ES6中类的继承
<script> // 父类
class LongDa { constructor (username, age, account=10000) {
this.username = username;
this.age = age;
this.account = account;
} showInfo() {
console.log(this.username, this.age, this.account);
}
} // 子类继承父类
class XiaoMo extends LongDa {
constructor(username, age) {
super();
this.username = username;
this.age = age;
}
} let xiaoMo = new XiaoMo('XiaoMo', 18); xiaoMo.showInfo();
</script>
代码打印结果:
单体模式
<script>
let obj = {
name: 'LongDa',
foo() {
console.log(this.name);
}
}; obj.foo()
</script>
代码打印结果:
11
ES5与ES6的小差异的更多相关文章
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)
多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方 ...
- JavaScript、ES5和ES6的介绍和区别
JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...
- ES5和ES6那些你必须知道的事儿(三)
ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...
- React Native的语法之ES5和ES6
原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...
随机推荐
- js中split()方法得到的数组长度
js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...
- VMware安装系统时"无法创建新虚拟机: 不具备执行此操作的权限"的解决方案
作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在VMware中安装操作系统时,遇到以下这种情况 问题主要出在虚拟机文件的位置选择上,不应该选在VMwa ...
- CORS(跨域资源共享)详解及与JSONP的对比
上篇讲解的JSONP的跨域请求方式,但是在浏览器的支持及请求方式上有局限性,接下来将介绍一种新的跨域请求方式CORS. CORS是一个W3C标准,全称是"跨域资源共享"(Cross ...
- 如何指定一个计划和目标——6W
作为一名IT人员,需要自己指定一个计划和目标,来保证完成进度和高效的完成任务. 参考管理学如何制作计划和目标的,套用过来,也是同样适用的.来先看看管理学的相关知识吧. 计划的概念:计划是为实现组织目标 ...
- 用js检测文本框中输入的是否符合条件并有错误和正确提醒
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Mysql 关键字的优先级 分组 多表联查
查看模式 select @@global.sql_mode; 关键字的优先级 from 来自 where 条件 group by 分组 having 筛选 select 查询 distinct 去重 ...
- 使用 vagrant新建Linux虚拟机
准备工作 1.下载软件 2.安装软件 2.1 安装VirtualBox-5.1.34-121010-Win.exe 2.2 安装vagrant_2.0.3_x86_64.msi 3.新建 执行指令D: ...
- 5.05-requests_cookies2
import requests # 请求数据url member_url = 'https://www.yaozh.com/member/' headers = { 'User-Agent': 'Mo ...
- Spring Cloud Config(配置中心)
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.简介 Spring Cloud Config为分布式系统中的外部配置提供服务器和客 ...
- mount --bind使用方法
我们可以通过mount --bind命令来将两个目录连接起来,mount --bind命令是将前一个目录挂载到后一个目录上,所有对后一个目录的访问其实都是对前一个目录的访问,如下所示: ## test ...