博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6简单了解
阅读量:5977 次
发布时间:2019-06-20

本文共 3549 字,大约阅读时间需要 11 分钟。

ES6初步学习


let和const

let

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

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

console.log(foo); //undefinedconsole.log(bar); //报错ReferenceErrorvar 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; //123foo = {}; //TypeError:"foo" is read-only

顶层对象的属性

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

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

var a = 1; window.a; //1let 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 //2s.has(1) //falses.has(2) //trues.has(3) //trues.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; //4NaN !== NaN; //trueNull == 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; //falses1 == s2; //falseNaN !==NaN

转载地址:http://supox.baihongyu.com/

你可能感兴趣的文章
KVM配置之(3)- 克隆
查看>>
分享自制的C#和VB Code互转工具
查看>>
Spring容器初始化Bean、销毁Bean前所做操作的定义方式汇总
查看>>
Linux系统的常用命令的使用
查看>>
Apache Solr入门教程(初学者之旅)
查看>>
IPV4报头格式详解
查看>>
echart地图配置
查看>>
了解计算机病毒
查看>>
node学习准备工作1 --- nvm下载、终端环境iterm2配置
查看>>
centos7 apache2.4 多站点配置
查看>>
zabbix监控mysql
查看>>
微信小程序(6)模板详解 template
查看>>
FAQ宝典之常见问题排查与修复方法
查看>>
Guitar Pro7最新版发布 吉他编谱首选
查看>>
jenkins安装
查看>>
如何修改MySQL8.0.5以上版本root密码
查看>>
Call to undefined function Workerman\posix_getpid
查看>>
Access denied for user 'root'@'localhost' 解决流程
查看>>
设计模式之六大原则
查看>>
第二个例子:单链表实现基排序(桶排序)
查看>>