学习笔记:ES6
http://es6.ruanyifeng.com/ ECMAScript 6
https://frankfang.github.io/es-6-tutorials/ ES 6 新特性列表 2017-12-29
http://www.runoob.com/w3cnote/es6-concise-tutorial.html ESMAScript 6简明教程 2018-1-8
https://juejin.im/post/5991549af265da3e345f6e6d ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解
https://segmentfault.com/a/1190000013099221 ES6 换种思路处理数据 2018-2-2
https://www.jianshu.com/p/edaf43e9384f export default 和 export 区别 2019-7-26
以下是ES6排名前十的最佳特性列表(排名不分先后):
- Default Parameters(默认参数) in ES6
- Template Literals (模板文本)in ES6
- Multi-line Strings (多行字符串)in ES6
- Destructuring Assignment (解构赋值)in ES6
- Enhanced Object Literals (增强的对象文本)in ES6
- Arrow Functions (箭头函数)in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
- Classes(类) in ES6
- Modules(模块) in ES6
笔记正文
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
let命令
它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。(for循环的计数器,就很合适使用let命令。)
在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”
不允许重复声明 : let不允许在相同作用域内,重复声明同一个变量。
let实际上为 JavaScript 新增了块级作用域。
ES6 允许块级作用域的任意嵌套。
内层作用域可以定义外层作用域的同名变量。
ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 函数声明语句
{
let a = 'secret';
function f() {
return a;
}
} // 函数表达式
{
let a = 'secret';
let f = function () {
return a;
};
}
const 命令
const声明一个只读的常量。一旦声明,常量的值就不能改变。
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
ES5和ES6
ES5 只有两种声明变量的方法:var命令和function命令。
ES6 一共有6种声明变量的方法:var命令和function命令、let和const命令、import命令和class命令
顶层对象window的属性与全局变量挂钩,被认为是JavaScript语言最大的设计败笔之一。
ES6为了改变这一点,一方面为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性脱钩。
var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用方法,写成this.a
window.a // 1 let b = 1;
window.b // undefined
变量的解构赋值
数组的解构赋值:
以前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
解构赋值允许指定默认值
let [foo = true] = [];
foo // true let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
对象的解构赋值:
解构不仅可以用于数组,还可以用于对象。
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let { bar, foo } = { bar: "bbb" , foo: "aaa"};
foo // "aaa"
bar // "bbb"
字符串的解构赋值:
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
数值和布尔值的解构赋值(略)
函数参数的解构赋值(略)
字符串的扩展
1、字符的 Unicode 表示法: 用大括号
JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。
但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。
let s1='\u20BB7'; //₻7
let s2='\u{20BB7}'; //学习笔记:ES6的更多相关文章
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- JavaScript学习笔记--ES6学习(四) 字符串的扩展
ES6对字符串进行了一些扩展,主要表现在对Unicode 大于\uFFFF的字符的处理上. 1. ES6中字符的Unicode表示方法 在ES5中,字符串的Unicode表示方法: \uxxxx . ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- JavaScript学习笔记 -- ES6学习(二) let 和const
ES6 中新增了两个命令: let 和const. let命令: let 用于声明变量,和var 类似,但是所声明的变量只在代码块中有效,不存在变量提升,有暂时性死区. 1.只在代码块中有效 和var ...
- JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用
本文摘自阮一峰老师的<ECMAScript 6入门>,原文地址:http://es6.ruanyifeng.com/#docs/intro ECMAScript 6 是一个泛指,含义是5. ...
- JavaScript学习笔记--ES6学习(五) 数值的扩展
ES6 对于数值类型 (Number) 进行了一下扩展: 1.对于二进制和八进制提供了新的写法 ES6对于二进制和八进制的数值提供了新的写法,分别用0b (或者0B) 和0o (或者0o) 表示.例如 ...
- vue 学习笔记—Es6
// 第一部分 /* console.log(a+'c'); var a = 1; console.log(b+'c'); let b =1; */ // 上述代码 left定义报错 原因: /* v ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- es6学习笔记--let和const
今天学习了es6中的let和const命令,借此整理一下笔记. let : let 和 var 的声明方式一样,但有 var 比不上的优点.下面用 var 和 let 的例子来加深对 let 的理解. ...
- es6学习笔记--解构赋值
昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构 ...
随机推荐
- XE5开发Android程序调用电话相关功能(短信息和电话)
方法a.不使用Intent而是直接发短信. smsManager对应的Delphi代码应该是: uses Androidapi.JNI.JavaTypes,Androidapi.JNI.Telepho ...
- 前端之js-echarts组件介绍
Echarts.init: 全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require('echarts') 获得. < ...
- AutoCAD的代替软件
AutoCAD的代替软件Autocad2005以上版本都需要.net framework的支持,安装起来太麻烦,而且卡顿.以下几个软件可以代替Autocad,操作和插件基本都能兼容Autocad.1. ...
- Spring-framework应用程序启动loadtime源码分析笔记(二)——@Transactional
@Transactional标识类或方法,使方法被执行时使用事务方式执行,这里只讨论PROXY方法增强方法.使用@EnableTransactionManagement,默认model=AdviceM ...
- Java-Runoob-高级教程-实例-时间处理:02. Java 实例 - 获取当前时间
ylbtech-Java-Runoob-高级教程-实例-时间处理:02. Java 实例 - 获取当前时间 1.返回顶部 1. Java 实例 - 获取当前时间 Java 实例 以下实例演示了如何使 ...
- 怎么把PNG图的位深度24位变成32位
在PS里把图片的变成层模式,不透明度设置成99%,在保存成PNG
- [转][C#][WebApi]
在 WebApi 中获取网页在服务器上的位置可以使用以下两种方式: string filePath = HostingEnvironment.MapPath(string.Format("/ ...
- PowerDesigner最基础的使用方法入门学习(二)
1. 生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本. 在Options选项卡里,可以 ...
- Jshell使用
原文: https://www.jianshu.com/p/5fb406c6203f 从java9开始,java开始引入了类似于python的交互式 REPL(Read-Eval-Print Loop ...
- [UE4]修改枪支碰撞体
一.Simple Collision:显示简单碰撞体,Comlex Collision:显示复杂碰撞体 二.添加简单和复杂碰撞体 三.自动生成复杂精确的碰撞体