新的声明方式


在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式:

var:它是variable的简写,可以理解成变量的意思

let:它在英文中是让的意思,也可以理解成一种申明方式

const:它在英文中是常量的意思,在ES6中用来声明常量,常量可以理解成不变的量=》这里的不变不是值得不变,是内存地址的指针不变!!!

var 声明:

  var在ES中是用来升级成全局变量的,我们可以做一个简单实例,声明一个变量,用console.log()输出看一下

var a = 'bokeyuan';
console.log(a)          //bokeyuan

  这个时候可以看到我们的a被打印出来,结果是bokeyuan,接下来有个问题了

如何理解它的作用是声明全局变量的呢?

我们在简单用测试一下

var a = '博客园';
window.onload = function(){console.log(a)     //博客园
}     

我们匿名函数中console.log()了外面的变量a,显示结果是‘博客园’,可以证明var确实是全局的,如果不够直观,还有一种方法可以验证

var a = 2;
{var b = 3;
}
console.log(a)    //3

  可以看出打印出来的是3,说明var是全局的,区块内的第二次赋值覆盖了第一次赋值,所以var 的显示是3!   

let 声明:

通过上面两个例子,我们可以对var 全局声明有一定的了解,那跟var 对应的声明就是 let声明,他是局部变量的声明,我们继续走一个 例子

var a = 2;
{let a = 3;
}
console.log(a)       //2

  这个时候可以看出let是局部变量的声明,所以在区块外面打印的就是2;

用这种方式在验证一下

{let a = 3;
}
console.log(a)        //报错

  显示找不到这个变量,说明let只能在区块内起作用,外部是不可取的!

其实有些小伙伴觉得let 没有var 好用,其实let是防止你的数据污染的,在项目中其实非常有用, 举个例子

我们先来一波var声明的循环

for(var i = 0 ;i < 10 ;i ++){console.log('循环体'+i);
}
console.log('循环体外'+i) 

//输出结果是 循环体0       循环体1       循环体2       循环体3       循环体4       循环体5       循环体6       循环体7       循环体8       循环体9       循环体外10

我们发现循环体在的i被变量污染了,如果外部在使用i就会出现问题,这是开发者不想看到的问题

再来一波let的申明循环

for(let i = 0 ;i < 10 ;i ++){console.log('循环体'+i);
}
console.log('循环体外'+i)
//     循环体0循环体1循环体2循环体3循环体4循环体5循环体6循环体7循环体8循环体9Uncaught ReferenceError: i is not defined

  最后一个console.log(i)你会发现报错了,找不到循环体外的i了,通过两种声明的比较,可以明白let在防止程序污染上还是很好的,我们要习惯去用let去声明,减少var声明去污染全局空间,特别是在vue中一定要学会使用!

const声明:

程序开发中,有些声明是希望不会再发生变化,简单来说,声明结束后,这个变量就是这个值,或者这个变量的指针就是指向这个内存,不发生改变,这个时候我们用const声明就是一个非常合适的选择。

const a = "博客园";
var a = "博客";
console.log(a)

这个是有你就会发现,程序报错了,很尴尬,理解上面的一段话你就知道他为啥报错了

但是,如果这个样子

const a = [0];
a.push(1);
console.log(a)      // [0,1]

这个时候会发现,这个a的值时可以改变的,仔细阅读上面一句话,你会理解的!

变量的解构赋值!

以前,为 变量赋值的时候,我们只能介样子

let a = 0,b = 1,c = 2;

现在在ES6中,我们可以用数组解构的方式进行赋值

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

上面的代码可以理解为,从数组中一次提取值,按照位置的对应关系进行赋值但是要遵从数组模式和赋值模式的统一

如果两边的格式不统一,那么就很有可能报错或者是出现undefined;

数组结构的默认值:

解构赋值是允许使用默认值的,看一个简单例子

let [name = 'zheng'] = [];
console.log(name)    //zheng

如果一次解析多个变量的时候呢?

let [name,age = 17] = ['zheng',undefined];
console.log(name,age)     //zheng   17;

  undefined相当于什么都没有,所以,b就被取成默认值!

如果是null呢?

let [name,age = 17] = ['zheng',null]console.log(name,age)     //zheng null

  这个时候就可以发现null被赋值上去了,所以我们可以理解成undefind是什么都没有,而null是相当于有值,但是值为null,所以b并没有取默认值,而是结构成了null

结构不仅仅可以用于数组,还可以用于对象

let {name,age} = {name:'zheng',age:17};
console.log(name,age)    //zheng 17

注意:对象的结构和数组的结构有一个很大的不同。数组是按照元素依次排序的,变量的取值它的位置决定的;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值

圆括号的使用:

如果在解构之前就定义了变量,这个时候解构会出现问题

let foo;
{foo} ={foo:'JSPang'};
console.log(foo);

  要解决报错,使程序正常,这个时候我们仅仅需要在解构语句外面加一个圆括号就可以了

let foo;
({foo} ={foo:'zheng'})console.log(foo);  //zheng

 字符串解构赋值!

const [a,b,c,d,e] = 'zheng';
console.log(a);     //z
console.log(b);     //h
console.log(c);     //e
console.log(d);     //n
console.log(e);     //g

  

转载于:https://www.cnblogs.com/zhengsongjun/p/7596092.html

ES6学习笔记二 新的声明方式和变量的解构赋值!相关推荐

  1. ES6的新特性(3)——变量的解构赋值

    变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...

  2. ES6学习笔记二arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  3. ES6系列_2之新的声明方式

    ES6系列_2之新的声明方式 在ES5中我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式. (1)var:它是variable的简写,可以理解成变量 ...

  4. qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)

    原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...

  5. ES6学习笔记03:变量的解构赋值

    ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...

  6. ES6学习(二)—变量的解构赋值

    ES6学习(二)-变量的解构赋值 文章只列举了一部分 完整版请看阮一峰ES6入门教程 点我查看阮一峰ES6入门教程 一.数组的解构赋值 二.对象解构赋值 三.函数参数的解构赋值

  7. ES6新特性_变量的解构赋值---JavaScript_ECMAScript_ES6-ES11新特性工作笔记006

    然后我们再看,变量的解构赋值. 可以看到按照一定的模式,从数组和对象中提取数据,以及对对应的变量进行赋值 被称为解构赋值. 可以看到上面 let[xiao,liu,zhao,song]=F4 相当于我 ...

  8. ES6新特性2:变量的解构赋值

    本文摘自ECMAScript6入门,转载请注明出处. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).不仅适用于var命令,也适用于let和c ...

  9. ES6阮一峰-----变量的解构赋值学习

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

最新文章

  1. HDU 1086 You can Solve a Geometry Problem too
  2. 浅析 Netty 实现心跳机制与断线重连
  3. 研发应该懂的binlog知识(下)
  4. LeetCode 361. 轰炸敌人(前缀和DP)
  5. HTML5给我们带来了什么
  6. Maven项目创建后没有resources文件夹
  7. 堆栈的使用(部分学习)
  8. ie6 插入图片img png24 阴影
  9. Java NIO 详解(一)
  10. 关系分析可视化插件-Cytoscape
  11. L4Linux的版本比较
  12. Linux - Vim常用命令清单
  13. 【音视频】WIN8|WIN10的桌面采集技术-DXGI(一)
  14. 树莓派+超声波模块测距
  15. 旋转矩阵的导数(机器人学)
  16. 公网访问阿里云RDS云数据库
  17. 67键键盘如何输出`和~符号(一百五十一)
  18. IT讲师韩顺平:创业不易,尚硅谷延续教育初心
  19. Swift UILabel 数字动画效果
  20. BSN应用案例精选【1】:全链通“铭镜”农产品溯源平台

热门文章

  1. loginrequired注解_简单实现一个登录验证的注解来保护私有资源
  2. linux将屏幕输出内容转储到文件,Linux实时将所有输出重定向到文件
  3. 现有类 成 mfc类_女人不想成“黄脸婆”,4类食物是衰老“催化剂”,女人尽量远离_氧化...
  4. hpml350服务器安装系统,安装HP ML350
  5. DSP中两个延时函数的区别(转)
  6. mysql配置多个磁盘_MySQL多实例配置(两)
  7. php程序员试卷无答案,2019年最新PHP经典面试题及答案,PHP程序员必看
  8. vue 表单 input text
  9. nginx 小简单指令
  10. 图解TCPIP-传输层 UDP