ES6简单了解

K_B_Z 发布于2019-08-20 15:08 / 1705人阅读

摘要：报错块级作用域明确允许在块级作用域中声明函数。但其值是固定的，不可更改，只读。一旦声明变量，就必须立即初始化，不能留到以后赋值。调用函数会返回一个内部指针，执行它不会返回结果返回的是指针对象。

ES6初步学习 let和const let

用来声明变量，但是所声明的变量只在let命令所在的代码块内有效

let不像var那样会发生变量提升，所以一定要先声明后使用。

console.log(foo); //undefined
console.log(bar); //报错ReferenceError
var foo = 2;
let bar = 3;

块级作用域

ES6明确允许在块级作用域中声明函数。但是尽量避免在块级作用域内声明函数，如果需要也要写成函数表达式，而不是函数声明语句。

在ES6中，块级作用域之中，函数声明的语句的行为类似let，在块级作用域之外不能被引用。

let实际上为javascript新增了块级作用域

外层作用域无法读取内层作用域的变量

内层作用域可以定义外层作用域的同名变量

块级作用域实际上使得广泛运用的立即执行函数变得不再必要了。

function f1() {
    let n =5;
    if(rue) {let n = 10;}
    console.log(n); //5，注意只能在f1这个作用域使用
}

javascript没有块级作用域，但是用let声明的变量可以绑定到所在的任意作用域中，换句话说let为其声明的变量隐式的劫持了所在的块作用域{...}

var foo = true;
if(foo) {
    let bar = foo * 2;
    bar = something(bar);
    console.log(bar); //bar只在foo作用域中有效
}
console.log(bar); //ReferenceError

不太明显的“死区”

有兴趣的可以自行搜索了解一下TDZ（暂存死区），记得当时还是看到阮大神的微博知道的~~

function bar(x = y; y = 2) {
    return [x, y];
}

bar(); //报错，此时相当于y未声明的情况下

let不允许在相同作用域内重复声明同一个变量，不能在函数内部重新声明参数。const也是这样。

function(arg) {let arg; //报错}

const

const同样可以创建块作用域变量，同样只在声明所在的块级作用域中有效。但其值是固定的，不可更改，只读。

一旦声明变量，就必须立即初始化，不能留到以后赋值。

//只声明不赋值就会报错
const foo; //SyntaxError:

const声明的变量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

if(true) {
    console.log(MAX); //ReferenceError
    const MAX = 5;
}

对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const只保证变量名指向的地址不变，不保证该地址的数据保持不变。不能把foo指向另一个地址。

const foo = {};
foo.prop = 123;
foo.prop; //123
foo = {}; //TypeError:"foo" is read-only

顶层对象的属性

浏览器环境指的是window对象 Node中指的是global对象

ES6中，var命令和function命令声明的全局变量依旧是顶层对象的属性，但是let和const以及class声明的全局变量不属于顶层对象的属性。

var a = 1; 
window.a; //1

let b = 1;
window.b; //undefined

异常

严格模式下LHS查询失败时，并不会创建并返回一个全局变量，引擎会抛出同RHS查询失败时类似的ReferenceError异常

如果RHS查询到一个变量，尝试对这个变量的值进行不合理的操作时，比如对一个非函数类型的值进行函数调用，或者引用null或undefined类型的值中的属性，引擎会抛出另外一中的异常TypeError

ReferenceError同作用域的判别失败有关，TypeError则表示作用域判别成功了，但是对结果的操作是非法的或者不合理的。

查找的目的是对变量进行赋值，那么就会使用LHS查询，如果目的是获取变量的值，那么就会使用RHS查询。

像var a = 2这样的会被分解两个步骤：（1）var a 会在作用域中声明新变量，代码执行前进行（2）a = 2 会查询(LHS)变量a并对其进行赋值。

闭包

循环和闭包

每次迭代都生成一个新的作用域，使得延迟函数的回调可以将新的作用域封闭在每个迭代内部。

for(var i = 0; i <= 5; i++) {
    (functiong(j) {
        setTimeout(function timer() {
            console.log(a);
        }, 1000);
    })(i);
}

var的循环，每一次循环都是新的i值覆盖旧的i值，只有一个i，所以只输出最后一个。

let的循环每次循环都是一个新的变量i，多个i，所以会每个都输出，每次迭代都进行重新绑定，与闭包有关

Generator函数

异步
最大的特点就是可以交出函数的执行权（即暂停执行）
函数名之前加星号.yield表示执行到此处，执行权将交给其他协程。

function* gen(x) {
    var y = yield x + 2;
    return y;
}

var g = gen(1);
g.next() //{value:3,done:false}
//value是yield语句后面表达式的值，表示当前阶段的值，done表示函数是否执行完毕，是否还有下一个阶段。
g.next() //{value:undefined,done:true}

调用generator函数会返回一个内部指针g，执行它不会返回结果返回的是指针对象。调用指针的g的next方法，会移动内部指针，指向第一个遇到的yield语句即x+2处。

Set数据结构

类似于数组但是成员的值都是唯一的，没有重复的值。

var s = new Set([1,2,3,4,4]);
[...s] //[1,2,3,4]

Set实例的方法
操作方法和遍历方法

操作数据

（1）操作方法

add:添加某个值，放回set结构本身

delete:删除某个值返回一个布尔值，表示删除是否成功

has(value):返回一个布尔值，表示该值是否为set的成员

clear:清除所有成员，没有返回值

s.add(2).add(3).add(2);
s.size //2
s.has(1) //false
s.has(2) //true
s.has(3) //true
s.delete(2);
s.has(2) //false

（2） Array.from方法可以将set数据结构转为数组

var items = new Set([1,2,3,4,5]);
var array = Array.from(items);

（3）扩展运算符...也可以将某些数据结构转换一个数组

function foo() {
    var args = [...arguments];
}

[...document.querySelectorAll("div")]

（4）数组去重的另一种方法

function dedupe(array) {
    return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

遍历操作

keys:返回键名的遍历器

values:返回键值的遍历器

entries:返回键值对的遍历器

forEach:使用回掉函数遍历每个成员

附录（易错点）：

隐式的强制转换

3 + true; //4
NaN !== NaN; //true
Null == undefined; //true

浮点数

0.1 + 0.2; //0.300000004
(8).toString(2); //"1000"
parseInt("1001", 2); //9

数据类型

typeof null; //"object"

typeof "hello"; //"string"

var s = new String("hello");
typeof s; //"object"

var s1 = new String("hello");
var s2 = new String("hello");
s1 === s2; //false
s1 == s2; //false

NaN !==NaN

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82027.html

你需要了解的ES6的新特性（前沿技术）

摘要：年月，的创造者公司，决定将提交给国际标准化组织，希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多，想更加了解新特性的可以自寻查看一下阮一峰的一本入门 ES6新特性最近在项目中遇到了很多ES6的语法，遇到了不少坑坑洼洼，因此，在这里就简单介绍一下ES6中的一些新特性如果想真正的了解ES6和ES5有什么不同，这里推荐看一下...

Nino 2019-08-20 18:19 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
简单了解一下ES6的修饰器

摘要：额，经历过上面的知识了解，应该能大概够理解这段代码了吧小结修饰器允许你在类和方法定义的时候去注释或者修改它。闲言一切都要从公司里的一位老哥给我看的一段代码说起。。。 @controller(/user) @auth @post(/login) async userLogin = (name, pass) => { @required // ... } 以下为对话：...

LancerComet 2019-08-22 16:25 评论0 收藏0
ES6 箭头函数从了解到深入

摘要：有传闻说，箭头函数的语法，是受到了的影响，并且它与中的语法一样，共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值，其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，...

Eminjannn 2019-08-20 16:37 评论0 收藏0
webpack 项目构建：（二）ES6 编译环境搭建

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。在上一章 webpack 项目构建：（一）基本架构搭建我们搭建了一个最基本的 webpack 项目，现...

marser 2019-08-22 15:08 评论0 收藏0