一,ES2015(ES6)新增了两个声明变量的关键字:let、const

let:只在代码块内{}有效,不可重复声明,不会提前初始化

  1.只在代码块内有效

{
let a = 1;
var b = 2;
}
console.log(b);
console.log(a);//输出a会报错 因为let声明只在代码块内有效

  2.不可重复声明 

let a = 1;
let a = 2;//报错Uncaught SyntaxError: Identifier 'a' has already been declared

  3.不会提前初始化

console.log(b);//undefined
var b = 2;
console.log(a);//报错 Cannot access 'a' before initialization
let a = 1;

const:规则与let相似,但声明必须赋值,且基础数据类型不可更改(数值 number、字符串 string 、布尔值 boolean),引用数据类型(对象 object,数组 array,函数 function)只可更改其引用内容

  1.声明必须赋值

const PI = "3.1415926";
PI // 3.1415926
const MY_AGE; // SyntaxError: Missing initializer in const declaration

  2.基础数据类型不可更改,引用数据类型可更改内容

const a = 1;
a = 2;//Uncaught TypeError: Assignment to constant variable.
const arr = [1,2,3];
arr.push(4);
console.log(arr);//[1, 2, 3, 4]

二,解构赋值:用来解决赋值时需要产生大量新的变量的问题,对赋值运算的扩展

任何解构都有两个部分 
1 解构源: 等号右边是要解构的对象。 
2 解构目标:等号左边是要解构的对象。

数组解构模型(Array):

1.基本数据

let [a,b,c] = [1,2,3];
//a=1 b=2 c=3

  2.数组中嵌套数组

let [a,[[b],c]] = [1,[[2],3]];
//a=1 b=2 c=3

  3.忽略某个元素

let [,a,b] = [1,2,3];
console.log(a,b);//2 3

  4.不完全解构:当解构对象属性不存在或无值或为undefined时取属性它的默认值

let[a=2,b]=[];
console.log(a,b);//2 undefined

  5.解构可遍历对象(数组,对象,字符串)

let[a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);//h e l l o

  6.剩余运算符:将未被解构的剩余对象解构到一个对象中,只能放在最后

let [a,b,...c] = [1,2,3,4,5,6];
// a=1
// b=2
// c=[4,5,6]

  

  对象解构模型(Object):

  1.基本

let {a,b} = {a:1,b:2};
// a:1
// b:2

  2.嵌套、忽略

let obj = {a:1,b:{c:1}};
let {a,b:{c}} = obj;
console.log(a,c);//1 1
let obj = {a:1,b:{c:1}};
let {a,b:{}} = obj;
console.log(a);//1

  3.不完全解构、默认值

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x=1 ] } = obj;
// x = 1
// y = 'world'

  4.剩余运算符:只能放在最后

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

  

  

  

  

ES6--JavaScript扩展知识点(let、const、解构)的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  3. ES6第三节:变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...

  4. 关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}

    关于ES6 块级作用域 任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域 let let 是ES6新增的声明变量的一种 ...

  5. es6 入坑笔记(一)---let,const,解构,字符串模板

    let  全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i < ...

  6. 前端笔记之ES678&Webpack&Babel(上)初识ES678&Babel&let和const&解构&语法

    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...

  7. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

  8. ES6 - 基础学习(3): 变量的解构赋值

    解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...

  9. ES6 学习笔记(二)解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  10. 变量声明---let,const,解构

    let在很多方面与var是相似的,但是可以帮助大家避免在JavaScript里常见一些问题. const是对let的一个增强,它能阻止对一个变量再次赋值. 块作用域 当用let声明一个变量,它使用的是 ...

随机推荐

  1. Tomcat监听shutdown释放数据库连接池

    开发时因为更新代码,频繁重启Tomcat,遇到一个问题:在执行shutdown脚本后,Tomcat进程没有关闭依然存在(但是HTTP服务已经停止),需要手动执行kill命令才行.查了一些资料结合经验, ...

  2. C#实现简单的 Ping 的功能,用于测试网络是否已经联通

    /// <summary> /// 是否能 Ping 通指定的主机 /// </summary> /// <param name="ip">ip ...

  3. IDEA新建本地项目关联远程git仓库

    现在远程git仓库创建一个repository,然后本地创建项目,最后进行关联.三板斧,打完收工. 第一步.第二步地球人都知道,略过不表,第三步比较关键,举个例子: 0.创建本地Git仓库:VCS - ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_16-认证接口开发-Api接口定义

    4.3 认证服务 4.3.1 需求分析 认证服务需要实现的功能如下: 1.登录接口 前端post提交账号.密码等,用户身份校验通过,生成令牌,并将令牌存储到redis. 将令牌写入cookie. 2. ...

  5. Django中的文件上传和原生Ajax

    概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...

  6. python 运算符和小数据池

    计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 算数运 ...

  7. IDEA的查询引用、调用关系图的功能(转)

    转自: http://www.cnblogs.com/ghj1976/p/5382455.html Eclipse的"Call Hierarchy"可以查看一个Java方法或类成员 ...

  8. Mysql开启审计功能

    第一种经验证,有效. 第一种用macfee的mysql审计插件. 下载地址:https://bintray.com/mcafee/mysql-audit-plugin/release/1.1.4-72 ...

  9. Navicat安装及使用

    一.安装Navicat 1.下载安装文件:navicat11.0.17_premium_cs_x86.exe(32位) 2.Oracle 的 Instance Client:instantclient ...

  10. Python(1)自动发送邮件

    python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email模块主要负责构造邮件. sm ...