JavaScript分享ES6相关知识

简介: JavaScript分享ES6相关知识,ES6增加的语法  let&&const  [size=0.9em]let与[size=0.9em]var的区别  let 变量名=变量值  使用let创建变量和使用var创建变量的区别  1、用var声明的变量会变量提升,用let声明的变量不会进行变量提升。

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"

  4、ES6语法创建的变量(let)存在块级作用域

  [ES5]

  window全局作用域

  函数执行形成的私有作用域

  [ES6]

  除了有ES5中的两个作用域,ES6中新增加块级作用域(我们可以把块级作用域理解为之前学习的私有作用域,存在私有作用域和作用域链的一些机制)[size=0.9em]ES6中把大部分用{}包起来的都称之为块级作用域;

  [size=0.9em]const

  const细节知识点和let类似

  const声明的常量只要声明就必须赋值,而且变量的值是一定的,不能被修改;

  [size=0.9em]注意:并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

  size=1emconst声明的变量也存在暂时性死区,即只能在声明的位置之后使用;

  JS中创建变量的方式汇总

  size=1em[ES5]

  · var :创建变量

  function:创建函数

  ES5中创建变量或者函数:存在变量提升,重复声明等特征;

  size=1em[ES6]

  · let创建变量

  const:ES6中创建常量

  ES6中创建的变量或者常量:都不存在变量提升,也不可以重复声明,而且还存在块级作用域;

  class:创建一个类

  import:导入

  ES6中的解构赋值

  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值分别为1,2,3;(严格模式下会报错)

  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],只要用了扩展运算符,就相当于新生成了一个数组或者对象,如果解构不到值的话,新生成的数组或者对象为空,而不是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对象的简洁表示法:

  const foo = 'bar';

  const baz = {foo};

  baz // {foo: "bar"}

  // 等同于

  const baz = {foo: foo};

  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 将其解释为代码块。

相关文章
|
1月前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
18 3
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
18 5
|
1月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
2月前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
16 1
|
3月前
|
XML 前端开发 JavaScript
JavaScript代码优化利器:从ES5到ES6(二)
JavaScript代码优化利器:从ES5到ES6
|
3月前
|
JSON 自然语言处理 JavaScript
JavaScript代码优化利器:从ES5到ES6(一)
JavaScript代码优化利器:从ES5到ES6
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
2天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield 'Hello'; yield 'World'; } ``` 创建实例后,通过`.next()`逐次输出"Hello"和"World",展示其暂停和恢复的特性。
11 0