好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[JavaEE] 好程序员JavaScript分享ES6相关知识

[复制链接]
54 0
叶子老师 发表于 6 天前 | 只看该作者 |阅读模式 打印 上一主题 下一主题
好程序员JavaScript分享ES6相关知识,ES6增加的语法
  let&&const
  [size=0.9em]let[size=0.9em]var的区别
  let 变量名=变量值
  使用let创建变量和使用var创建变量的区别
  1、用var声明的变量会变量提升,用let声明的变量不会进行变量提升。
  用let创建变量
  let xxx=xxx;
  用let创建函数
  let xxx=function(){}
  创建自执行函数
  ;(function(){
  })();
  2、用let定义变量不允许在[size=0.9em]同一个作用域中重复声明一个变量(只要当前作用域中有这个变量,不管是用var还是用let声明的,再用let声明的话会报错:不能重复声明一个变量),但是可以重复定义(赋值)
  let i=10;
  let i=20;/会报错,
  i=20;重复赋值不会报错
  3、暂时性死区:在代码块内,使用let命令声明变量之前,该变量都是不可以使用的。
  if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError,报错之后下面都不会输出
  console.log(tmp); // ReferenceError,报错之后下面都不会输出
  let tmp; // TDZ结束
  console.log(tmp); // undefined
  tmp = 123;
  console.log(tmp); // 123
  }
  //下面也会报错出现TDZ
  console.log(typeof x); // ReferenceError
  let x;
  //作为比较如果一个变量根本没有被声明,使用typeof反而不会报错。
  console.log(typeof x);// "undefined"
  4ES6语法创建的变量(let)存在块级作用域
  [ES5]
  window全局作用域
  函数执行形成的私有作用域
  [ES6]
  除了有ES5中的两个作用域,ES6中新增加块级作用域(我们可以把块级作用域理解为之前学习的私有作用域,存在私有作用域和作用域链的一些机制)[size=0.9em]ES6中把大部分用{}包起来的都称之为块级作用域;
  [size=0.9em]const
  const细节知识点和let类似
  const声明的常量只要声明就必须赋值,而且变量的值是一定的,不能被修改;
  [size=0.9em]注意:并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
  [size=1em][size=1em]const声明的变量也存在暂时性死区,即只能在声明的位置之后使用;
  JS中创建变量的方式汇总
  [size=1em][size=1em][ES5]
  · var :创建变量
  function:创建函数
  ES5中创建变量或者函数:存在变量提升,重复声明等特征;
  [size=1em][size=1em][ES6]
  · let创建变量
  constES6中创建常量
  ES6中创建的变量或者常量:都不存在变量提升,也不可以重复声明,而且还存在块级作用域;
  class:创建一个类
  import:导入
  ES6中的解构赋值
  [size=1em][size=1em]按照原有值的结构,把原有值中的某一部分内容快速获取到(快速赋值给一个变量)
  数组的解构赋值
  [size=1em][size=1em]解构赋值本身是ES6的语法规范,使用什么关键字来声明这些变量是无所谓的,如果不用关键字来声明,那么就相当于给window添加的自定义属性;(严格模式下必须使用关键字来声明,因为严格模式下不允许出现不用关键字声明的变量;),如果解构不到值,那么变量的值就是undefined;
  let [a,b,c]=[12,23,34];
  var [d,e,f]=[35,41,63];
  console.log(a,b,c)//12,23,34;
  console.log(d,e,f)//35,41,63;
  [q,w,e]=[1,2,3];//相当于给window添加了三个属性:q,w,e值分别为123;(严格模式下会报错)
  [size=1em][size=1em]多维数组的解构赋值,可以让我们快速的获取到需要的结果
  let [a,b,c]=[[45,36],12,[23,43,[1,2[4,[8]]]]23,34];
  console.log(a)//[45,36]
  console.log(b)//12
  console.log(c)//[23,43,[1,2,[4,[8]]]]
  //数组中不需要解构的值可用逗号()空开,一个逗号代表空开一项
  let [,,,A]=[12,23,45];
  console.log(A)//undefined
  let [,,B]=[12,23,45]
  console.log(B)//45
  [size=1em][size=1em]在解构赋值中,支持扩展运算符即[size=1em][size=1em],只要用了扩展运算符,就相当于新生成了一个数组或者对象,如果解构不到值的话,新生成的数组或者对象为空,而不是undefined,但是扩展运算符必须放在末尾
  let [a,...c]=[12,1,4,83,34];
  console.log(a)//12
  console.log(c)//[1,4,83,34];
  let [a,...b,c]=[12,1,4,83,34];//会报错,扩展运算符只能放在末尾;
  对象的解构赋值
  [size=1em][size=1em]对象的简洁表示法:
  const foo = 'bar';
  const baz = {foo};
  baz // {foo: "bar"}
  // 等同于
  const baz = {foo: foo};
  [size=1em][size=1em]对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
  let { foo, bar } = { foo: "aaa", bar: "bbb" };
  foo // "aaa"
  bar // "bbb"
  如果变量名与属性名不一致,必须写成下面这样。
  let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
  baz // "aaa"
  真正被赋值的是后者,而不是前者。
  let obj = { first: 'hello', last: 'world' };
  let { first: f, last: l } = obj;
  f // 'hello'
  l // 'world'
  first//error: first is not defined
  如果要将一个已经声明的变量用于解构赋值,必须非常小心。
  // 错误的写法
  let x;
  {x} = {x: 1};//会报错
  因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。
  // 正确的写法
  let x;
  ({x} = {x: 1});
放在圆括号当中就可以避免 JavaScript 将其解释为代码块。

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启