ES6学习一

一项新技术的出现肯定是为了解决一些问题,那么ES6的出现主要是解决了哪些问题?它的出现给我们带来了什么便利?当它没有出现的时候,某些问题怎么处理?ES6的方法和以前的方法比较又有什么不同呢?根据提出的这些问题,我开始了ES6学习之旅。

ES6是在ES5的基础上对语法进行了修正以及添加了一些新的功能, 具体修正了哪些语法与添加了哪些新的功能,那就开始学习吧。

     let           

        ES6新增加了let命令,用于变量声明,与var的用法类似,不同的是所声明的变量只在let命令所在的代码块内有效。

{
    let a = 10;
    let b = 1;
}
a   // ReferenceError
b  // 1

以下代码会输出10,因为 i 是var声明的,在全局范围内都有效。所以每一次循环,新的 i 值都会覆盖旧值,导致最后输出的是最后一轮的 i 的值。如果 i 是let声明的,该变量仅在块级作用域内有效,最后输出的会是 6。

var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10

我们都知道ES5中的变量会提升到顶部,所以可以先调用后声明,之所以可以是因为是var声明的,而let声明的变量不会提升,所以必须先声明才可以调用。还有,只要let命令存在于块级作用域内,它所声明的变量就"绑定"了这个区域,不再受外部的影响。例如如下代码:

var tmp = 123;
if (true) {
tmp = ‘abc‘; // ReferenceError
let tmp;
}

在块级作用域内使用let又声明变量tmp,那么这个变量就不会再受外部变量的影响,而let声明的变量无法提升,所以在没有声明前调用就会出错。

总之,在代码块内,在没有使用let声明变量之前,该变量都是不可用的,这在ES6的语法上称为"暂时性死区","暂时性死区"的出现意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

typeof  y // "undefined"

在没有声明x前,使用typeof检测x的类型就会报错,而检测一个没有被声明的变量反而不会报错。

let还不允许在相同作用域内,重复声明同一个变量,如下情况都会报错:

//  报错
function () {
let a = 10;
var a = 1;
}

//  报错
function () {
let a = 10;
let a = 1;
}

所以,在函数内重新声明变量也是会报错的:

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

在不同的作用域里重新声明变量是可以的:

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

const

const声明一个只读的常量,一旦声明,常量的值就不能改变,因为无法改变,所以声明变量的时候就需要立即初始化变量,不能留到以后赋值。const的作用域与let命令相同:只在声明所在的块级作用域内有效,而且变量也是无法提升的,也存在"暂时性死区",只能声明后再调用,也不可以重复声明。

对于复杂类型的变量,变量名不指向数据,而是指向数据所在的地址,const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。

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

常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

如果想将对象冻结,可以使用Object.freeze方法,一旦冻结,就无法为其添加新的属性,严格模式下会报错

const foo = Object.freeze({});
//  常规模式时,下面一行不起作用;
//  严格模式时,该行会报错
foo.prop = 123;

ES5 只有两种声明变量的方法:var命令和function命令。 ES6 除了添加let和const命令,还有另外两种声明变量的方法:import命令和class命令,以后再学习这两种声明变量的方法。

时间: 2024-10-27 13:28:53

ES6学习一的相关文章

ES6学习目录

前面的话 ES6是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 为什么要学习ES6呢?很多流行的JavaScript开源框架都使用ES6编写,如Vue.js.video.js.d3.js等等.不学习ES6,这些流行的框架将不容易上手:ES6可以大大提高开发效率,同时让语法更加规范化,一定程度上增强了代码安全:更重要的是,ES6是语言级别的升级,而并不是一个库或框架.既然迟

ES6学习笔记(一)

1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它为javascript新增了块级作用域. let只在变量声明时 ,所在的代码块中有效. 由于这一特性,let很适合在for循环中使用. 如下图是一个demo: let声明变量的特点: a:不存在变量提升: console.log(m);//Uncaught ReferenceError: m is

es6学习笔记初步总结

es6学习笔记初步总结 1. let.const 和 block 作用域 在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: let 关键词声明的变量不具备变量提升(hoisting)特性 let 和 const 声明只在最靠近的一个块中(花括号内)有效 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING const 在声明时必须被赋值 否则报语法错误SyntaxError

ES6学习及总结(二):对象的解构

ES6学习及总结(二):对象的解构 一:数组的解构 1:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "

ES6学习记录(一)

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布.标准的制定者有计划,以后每年发布一次标准,使用年份作为版本.因为ES6的第一个版本是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化.ECMAScript定义了: 语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 – 布

ES6学习笔记之Promise

入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及应用.非学不可的“必修”技术,看来该版本新加入的特性的确解决了前端项目开发中的痛点,有利于提升开发效率. 说到ES6,像let,const,箭头函数这些特性简单易懂,很快就实现了无痛上手:然而Promise不是那么直观,项目文档里大量的“返回一个Promise对象”让初接触这一概念的我一度懵比,于是

ES6学习笔记(二)——字符串扩展

相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看. 在这样不断的学习过程中,也提高了自己的总结能力:) 1.字符串的遍历器接口 ES5,数组和对象可以进行遍历,使用for() 和 for...in,还有jq中的each()方法进行遍历. ES6为我们提供了字符串遍历器  for...of 循环遍历 优点:可以识别大于0xFFFF的码点,传统的

ES6学习笔记(1)——模块化

最近学习ReactJS经常遇见ES6语法,为了尽快弄懂ReactJS,因此想方设法绕过ES6,但是随着学习的深入,需要查阅的资料越来越多,发现大部分与之相关的框架和学习资料都是采用ES6写的,终究发现这是一个绕不过去的坎啊.ES6是JavaScript新一代的标准规范,其主要变化为:变量的解构赋值.箭头函数.Generator函数.Promise对象.类与继承.模块化这几个大方面,我学习时为了能看懂ES6写的代码,就先从这几个大的方面开始下手了,细节部分随着应用的需要再去查阅资料,学习参考资料为

ES6学习笔记之变量声明let,const

最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能明白es6是多少的好,积极的拥抱她! 1.let 用let声明的变量,只会在let命令所在的代码块内有效. let的块状作用域 我们来看一个简单的例子: 'use strict'; { let name = 'cloud'; var age = 21; } name;//ReferenceError