ECMA Script6 特性整理 - @lfanke个人学习笔记

简介: 先写一部分,之后再补充

资料:哔哩哔哩ECMA

在Web环境下js就是ECMA script加上Web的Api:bom、dom

image.gif编辑

 

在node.js环境下js就是加上了Node Api

image.gif编辑

 

所以。。。js就是ecma script的扩展语言,es语言规定了基础语法,js实现es基础语法后还进行了一定的扩充。js语言本身指的就是es

image.gif编辑

 

从ES2015开始,就被称为ES6 ...ES2015长达6年的标准化带来了很多新功能。。。颠覆的 ...

之后每个版本也用年号作为版本标识。且一年一个新版本。

作用域

在es2015之前,只有两种作用域:全局作用域与函数作用域。在es2015中新增块级作用域

块:{ 这里 },就是if语句或花括号包裹起来的那些。

一般区别

if (" ") {
    var xxx = 123;
}
console.log(xxx);   // -> 123
if(" ") {
    let xxx = 233;
}
console.log(xxx);   // -> ReferenceError

image.gif

其他常见问题:

for (var i=0;i<3;++i) {
    for (var i=0;i<3;++i) {
        console.log(i);
    }
} // -> 0 1 2 因为内层的var i声明覆盖了外层的,所以内层结束外层也结束了..
// 看py就没有这个问题,py是给i赋值,直到StopIteration才停止,与i多少无关
// 但凡有一个let就不会出现这种情况。。。let声明的变量与var隔绝
// var定义的变量可以var重定义,let就会报错,反之也是。。。

image.gif

代替闭包

var elements = [{}, {}, {}]
for (var i=0;i<elements.length;++i) {
    elements[i].onclick = function () {
        console.log(i)
    }
}
// 此时console.log的 i 是 3,当再次 i=233 时,log(i)就是233
// 可以看到作用域并未被隔绝
// 原来的解决方法是闭包,利用函数作用域隔绝全局作用域
for (var i=0;i<elements.length;++i) {
    elements[i].onclick = (function (i) {
        return function () {console.log(i)}
    })(i)
}
// 现在可以直接利用let来将块级作用域隔离
var elements = [{}, {}, {}]
for (let i=0;i<elements.length;++i) {
    elements[i].onclick = function () {
        console.log(i)
    }
}
// for 括号里是一层作用域,大括号里是一层作用域
for (let i=0;i<3;i++) {
    let i = 'foo';
    console.log(i);
}
// 相当于:
let i = 0;
if (i < 3) {
    let i = 'foo';  // 此时为内层 - 局部的!!!
    console.log(i);
}
i++
...

image.gif

常量

const emm = 233 // 在 let 基础上多了 `只读` 特性。声明过后不允许再被修改
// 且声明必须赋值。注意:只读是针对内存地址而言的,赋值才会改变内存地址
// 表示不能修改指向的内存地址。但是里面的数据可变,如
const emm = {}
emm.name = 233

image.gif

解构

数组解构

以前只能:let a = li[0], b = li[1], c = li[2],只能通过下标取,但是现在可以解包

let [a, b, c] = li
//此时a是li的首元素,b、c依次,如果数组中只有俩元素,则多出来的是undefined
// 如果只想取一个,则记得逗号不能少
let [, , c] = li
// 剩余元素打包
let [a, ...last] = li    // 仨点只能在最后一个元素上使用
// 如果害怕提取到undefined,则可以提供默认值
let [a, b, c='emm'] = li

image.gif

对象解构

对象只能靠变量名来提取,毕竟属性又没有一个固定次序,不能靠下标

let obj = {
    name: 'lfanke',
    age: 17,
    sex: 'man'
}
let {name, age, xxx} = obj;
// 其中,name、age正常取到了,但是由于没有xxx属性,所以xxx为undefined
// 但是直接用属性名常常会产生命名冲突,所以推荐使用别名
let {name: other_name = 'default value'} = obj;
// 成员名 + : + 别名

image.gif

常用但不推荐的偷懒方式:

const {log} = console;
log('你好呀!!!')

image.gif

展开

展开数组,就是解包啊,有不同吗。。。

// 以前
console.log(
    arr[0], arr[1], arr[2]
)
// 或者
console.log.apply(console, arr)
// 现在
console.log(...arr)

image.gif

和py一样,,,

let a = [1, 2, 3, ...[4, 5]]
let b = {name: 'lfanke', ...{age: 17}}

image.gif

剩余内容之后补充

目录
相关文章
|
人工智能 缓存 JavaScript
读《高性能 JavaScript》笔记 -”JS进阶必读“(第二章)
读《高性能 JavaScript》笔记 -”JS进阶必读“(第二章)
55 0
|
设计模式 前端开发 JavaScript
带你读《现代Javascript高级教程》序言
带你读《现代Javascript高级教程》序言
167 2
|
JavaScript 前端开发
带你读《现代Javascript高级教程》十三、面向对象编程与Class(1)
带你读《现代Javascript高级教程》十三、面向对象编程与Class(1)
|
JavaScript 前端开发
带你读《现代Javascript高级教程》十三、面向对象编程与Class(4)
带你读《现代Javascript高级教程》十三、面向对象编程与Class(4)
|
JavaScript 前端开发 索引
JavaScript学习笔记(十三) ES6新特性
JavaScript学习笔记(十三) ES6新特性
167 0
|
存储 JavaScript 前端开发
重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述
洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的必备之佳作。有幸重读此版,与诸君分享共勉。
336 0
|
人工智能 JavaScript
《ECMAScript 6 入门》【一、let、const命令】(持续更新中……)
本系列是针对于阮一峰大佬的文章进行简化,更方便的让大家学习阅读
|
存储 Web App开发 JavaScript
JavaScript高级程序设计-性能整理(一)
除了<script>标签,还有其他方式可以加载脚本。因为 JavaScript 可以使用 DOM API,所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到DOM 即可。
227 0
|
存储 Web App开发 JavaScript
JavaScript高级程序设计-性能整理(三)
取得 WebGL 上下文后,就可以开始 3D 绘图了。如前所述,因为 WebGL 是 OpenGL ES 2.0 的 Web版,所以本节讨论的概念实际上是 JavaScript 所实现的 OpenGL 概念。可以在调用 getContext()取得 WebGL 上下文时指定一些选项。这些选项通过一个参数对象传入,选项就是参数对象的一个或多个属性。
237 0
|
XML 移动开发 JavaScript
JavaScript高级程序设计-性能整理(二)
MutationObserver 接口是出于性能考虑而设计的,其核心是异步回调与记录队列模型。为了在大量变化事件发生时不影响性能,每次变化的信息(由观察者实例决定)会保存在 MutationRecord 实例中,然后添加到记录队列。这个队列对每个 MutationObserver 实例都是唯一的,是所有 DOM变化事件的有序列表。
196 0
下一篇
DataWorks