ES6 介绍 及 变量基础知识

一、ES6 简介

  • ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言
  • ES6 是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等;而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准

二、ES6 转码

  • Node 是 JavaScript 的服务器运行环境(runtime),它对 ES6 的支持度更高,但有些执行环境不能完全支持 ES6 语法
  • ES6 转码器 可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。

三、ES6 新特性汇总(待更新)

  • 增加块级作用域

四、变量的 声明

1. 块级作用域

  • ES6的块级作用域,是通过 letconst 声明变量,来体现的
  • 只要一个代码块 { } 中存在 letconst ,就形成了一个封闭的作用域(块级作用域);每一个 { } 都是一层块级作用域
  • 块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了
// IIFE 写法
(function () {
    var tmp = ...;
    ...
}());

// 块级作用域写法
{
    let tmp = ...;
    ...
}

2. let 、const 声明变量,详解

(1)通过 letconst 声明的变量,不是全局变量, 不能通过 window 访问
  • 只能在当前块级作用域 及 子作用域内能够被访问到
(2)let 声明变量,允许被修改
(3)const 声明一个只读的常量不允许被修改
  • 意味着:const 一旦声明变量,就必须立即初始化,不能留到以后赋值
const foo; // SyntaxError: Missing initializer in const declaration
  • 本质:并不是变量的值不得改动,而是变量指向的那个内存地址不得改动;

    • 简单数据类型:值就保存在变量指向的那个内存地址,所以不能有任何改变
    • 复杂数据类型:const 声明的变量 指向内存地址,const 只能约束 指针指向的内存地址不变;不能约束 内存地址中 的数据结构
// 所以:const 声明复杂数据类型,其数据结构是可变的
const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
ondole.log(foo.prop); // 123

3. let 、const 声明变量,不存在变量提升

  • letconst 声明变量,不存在变量提升
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

4. let 、const 声明变量,造成暂时性死区(TDZ)

  • letconst 声明变量,不允许 在变量声明之前 使用,造成暂时性死区
  • letconst 声明变量,形成块级作用域,在声明变量之前的区域,都是 变量的死区(不允许 使用变量,使用会报错)
var tmp = 123;

if (true) {
    // TDZ开始
    tmp = ‘abc‘; // ReferenceError
    console.log(tmp); // ReferenceError

    let tmp; // TDZ结束
    console.log(tmp); // undefined

    tmp = 123;
    console.log(tmp); // 123
}

// 上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”
  • 比较隐蔽的死区
function bar(x = y, y = 2) {
    return [x, y];
}

console.log(bar()); // 报错

5. let 、const 声明变量,不允许重复声明

  • 对比:var 声明的变量,重复声明 无效,不会报错
if (true) {
    const a = 10;
    const a = 1;
}
  • 函数直接作用域内 使用 let 重新声明形参,会报错
function func(arg) {
    let arg; // 报错
}
  • 内层作用域可以定义外层作用域的同名变量
function func(arg) {
    {
        let arg; // 不报错
    }
}

6. let 、 const 声明的全局变量,不属于顶层对象的属性

  • ES5 败笔之一:顶层对象的属性与全局变量是等价的;很容易不知不觉的创建多个全局变量,读写困难,维护困难
  • ES6 规定:
    • var命令和function命令声明的全局变量,依旧是顶层对象的属性
    • let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性
var a = 1;
console.log(window.a);  // 1

let b = 1;
console.log(window.b);  // undefined

五、变量的 解构赋值

1. 概念

  • ES6 允许按照一定模式,从数组 和 对象中提取值,对变量进行赋值,这被称为解构赋值(Destructuring)

2. 解构赋值 --- 数组

  • 模式匹配 内部机制:数组的元素是按次序排列的,相同位置 数据结构相同,才能成功的解构赋值
  • 分为:存在完全结构赋值,和不完全结构赋值
// 完全结构赋值
let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);   // 1
console.log(bar);   // 2
console.log(baz);   // 3

// 不完全结构赋值
let [x, y] = [1, 2, 3];
console.log(x);     // 1
console.log(y);     // 2
// `...a` 代表定义数组
let arr = [1, 2, 3, 4];
let [a, b, ...c] = arr;

console.log(c);   // [3, 4]
  • 结构赋值 数组的长度(因为数组 有 length 属性)
let arr = [1, 2, 3];
let {length: leg} = arr;

console.log(leg);   // 3

2. 解构赋值 --- 对象

  • 模式匹配 内部机制:先在已有对象中找到同名属性,然后再将已有对象中同名属性的值 赋给 定义变量的属性值
// 定义的变量名 与 属性名一致
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
// 定义的变量名 与 属性名不一致
let { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ };
console.log(baz);   // "aaa"

3. 解构赋值 --- 指定默认值

  • 默认值生效的条件是,数组 / 对象 的属性值 严格等于 undefined
let [x = 1] = [undefined];
console.log(x);     // 1

let [y = 1] = [null];
console.log(y);     // null
  • 如果默认值是一个表达式,那么这个表达式是惰性求值的(只有在用到的时候,才会求值)
function f() {
    console.log(‘aaa‘);
}

let [x = f()] = [1]; // 无输出
let [x = f()] = [];  // aaa
  • 默认值可以引用解构赋值的其他变量,但该变量必须已经声
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

4. 解构赋值 --- 函数 参数

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

5. 解构赋值 的用途

交换变量
let x = 1;
let y = 2;

[x, y] = [y, x];
函数 设置默认参数
function(n = 1) {
    return n;
}
函数 参数为对象 设置默认值
function foo({
    x = 10,
    y = 5
}) {
    console.log(x, y);
}

foo({})       // undefined 5
foo({x: 1})   // 1 5
foo()         // TypeError: Cannot read property ‘x‘ of undefined
function foo({
    x = 10,
    y = 5
} = {}) {
    console.log(x, y);
}

foo({})       // undefined 5
foo({x: 1})   // 1 5
foo()         // 1 5
提取 对象 / json 中的数据
let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

原文地址:https://www.cnblogs.com/zxvictory/p/8358783.html

时间: 2024-10-15 01:41:49

ES6 介绍 及 变量基础知识的相关文章

RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列,RabbitMQ的应用场景以及基本原理介绍,RabbitMQ基础知识详解,RabbitMQ布曙

消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以简单地描述为: 当不需要立即获得结果,但是并发量又需要进行控制的时候,差不多就是需要使用消息队列的时候. 消息队列主要解决了应用耦合.异步处理.流量削锋等问题. 当前使用较多的消息队列有RabbitMQ.RocketMQ.ActiveMQ.Kafka.ZeroMQ.MetaMq等,而部分数据库如Re

salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句

salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex语言和java很多的语法类似,今天总结的是一些简单的Apex的变量等知识. 有如下几种常用的基本变量Integer,String,Decimal,Double,Long,Boolean,ID. 集合常用的对象:List<T>,Set<T>,Map<T>. 时间日期常用对象:Datetime,Time,Date. 其他:Object,sObject(与数据库相关

Python变量基础知识

变量定义 标识符的第一个字符必须是字母或下划线: 标识符其余部分可以使字母.数字.下划线: 大小写敏感. 变量名应有意义,例如my_girl_name. 变量类型 整型:布尔型(True/False,常用于循环中的开关).整型(长度与内存相关,溢出会自动转为长整型).长整型: 非整型:双精度浮点型.复数.decimal(非内建类型): 序列类型:字符串(str).元组(tuple).列表(list): 映像类型:字典(dict): 集合类型:可变集合(set).不可变集合(frozenset).

学习Spring必学的Java基础知识(1)----反射

引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓“登高必自卑,涉远必自迩”.以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些Java基础知识,希望对大家有所帮助.): [1] Java反射知识-->Spring IoC :http://www.iteye.com/topic/1123081 [2] Java动态代理-->Spring AOP :http://www.iteye.com/topic/1123293 [3] 属性

学习Spring必学的Java基础知识(1)----反射(转)

引述要学习Spring框架的技术内幕,必须事先掌握一些基本的Java知识,正所谓"登高必自卑,涉远必自迩".以下几项Java知识和Spring框架息息相关,不可不学(我将通过一个系列分别介绍这些Java基础知识,希望对大家有所帮助.): [1] Java反射知识-->Spring IoC :http://www.iteye.com/topic/1123081 [2] Java动态代理-->Spring AOP :http://www.iteye.com/topic/1123

C语言基础知识整理

用一个简单的c程序例子,介绍C语言基础知识的基本构成.格式.以及良好的书写风格,使小伙伴对c语言有个初步认识. 例1:计算两个整数之和的c程序: #includemain(){int a,b,sum;  a=20;       b=15;       sum=a+b;   printf("a=%d,b=%d,sum=%d\n",a,b,sum); } 重点说明: 1.任何一个c语言程序都必须包括以下格式: main(){   } 这是c语言基本知识结构,任何一个程序都必须包含这个结构.

音频开发基础知识简介

在现实生活中,音频(audio)主要用在两大场景中:语音(voice)和音乐(music).语音主要用于沟通通信,如打电话,现在由于语音识别的发展,人机语音交互也是语音的一个应用,目前正在风口上,好多大厂都推出了智能音箱.音乐主要用于欣赏,如音乐播放. 下面简单介绍音频的基础知识: 采样和采样频率:现在是数字时代,在音频处理时要先把音频的模拟信号变成数字信号,这叫A/D转换.要把音频的模拟信号变成数字信号,就需要采样,或者叫抽样.当要把音频播放出来时则需要把数字信号转换成模拟信号,这叫D/A转换

正则表达式基础知识(一)

之前在linux中用到三剑客grep.awk.sed等,简单的接触过正则表达式,但是没有深入的了解正则表达式,又一次在python里面接触到正则表达式,所以想着尽量一次攻克正则表达式,所以就将自己学习印记留在此处,供自己复习,同时也将相关知识分享给大家. 分享几个在线测试与学习正则的地址: (1)http://deerchao.net/tutorials/regex/regex.htm  正则表达式30分钟入门 (2)http://tool.oschina.net/regex/ 在线测试以及有部

Powershell基础知识(一)

上节介绍了Windows自带的Powershell开发工具:命令行行窗体和集成开发环境ISE的启动及一些配置注意事项,具体细节使劲戳Powershell开发工具. 这一节介绍Powershell的基础知识,包含以下知识点 Powershell的一些特性 理解Powershell中的一些重要概念 理解Powershell中命令的命名规范 总结 Powershell的一些特性 Powershell对命令行和脚本环境添加了许多新的功能,以此来改善Powershell的管理和脚本脚本交互能力,想对于其他