ES6--JavaScript扩展知识点(let、const、解构)

一,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]

  

  对象解构模型(Array):

  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}

  

  

  

  

原文地址:https://www.cnblogs.com/blogzzy/p/11443577.html

时间: 2024-11-01 10:06:49

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

[F2016061803] ES6的模块导入与变量解构的注意事项

在ES6中变量解构是这样的: const a = { b: 1 } const { b } = a 我们可以直接用解构赋值来获得对象的同名属性,这等效于: const b = a.b 除了变量的解构赋值,ES6的模块导入也提供了相似的语法: import { resolve } from 'path' 如果使用webpack构建项目的话,注意这里的解构与普通变量的解构是有所区别的,比如在a.js里有以下代码: export default { b: 1 } 如果按照普通变量的解构法则来导入这个包

ES6标准学习: 2、解构赋值

解构赋值 1.基本使用方法 es6允许按照一定的方式,从数组和对象中提取值,从而对变量进行赋值,这种模式被称为解构. 以前,我们为一个变量赋值,通常这么写: 1 var a = 1 2 var b = 2 3 var c = 3 而在es6中,我们可以这么写: 1 var [a, b, c] = [1, 2 , 3] 上面的代码表示,我们可以从数组中提取值,并按照位置的对应关系对变量进行赋值. 嵌套的解构赋值也是允许的: 1 let [a, [[b], c]] = [1, [[2], 3]] 某

ES6系列_3之变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; let b=1; let c=2; 数组解构的方式来进行赋值,如下: let [a,b,c]=[1,2,3]; 总结:从数组中提取值,按照位置的对象关系(次序)对变量赋值. (2)数组模式和赋值模式统一 可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败.相关代码如下: let

妙用ES6解构和扩展运算符让你的代码更优雅

Javascript ES6/ES2015尘埃落定,其中许多特性其实是为了简化代码.解构运算符,扩展运算符,和rest运算符就是其中很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳.现在各浏览器及node.js都加快了部署ES6的步伐.ES6的学习正当其时. 解构 解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 数组解构赋值: var arr = ['this is

ES6之主要知识点(二) 变量的解构赋值。默认值

引自http://es6.ruanyifeng.com/#docs/destructuring 数组解构赋值 默认值 对象解构赋值 用途 1.数组的解构赋值 let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third //

ES6复习干货知识点汇总

一.问:ES6是什么,为什么要学习它,不学习ES6会怎么样? 答: ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优雅,更适合大型应用的开发.学习ES6是成为专业前端正规军的必经之路.不学习ES6也可以写代码打鬼子,但是最多只能当个游击队长. 二.问:ES5.ES6和ES2015有什么区别? 答: ES2015特指在2015年发布的新一代JS语言标准,ES6泛指下一代JS语言标准,包含ES2015.ES2016.

JS对象解构

什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量.这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰. 通常来说,你很可能这样访问数组中的前三个元素: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; 如果使用解构赋值的特性,将会使等效的代码变得更加简洁并且可读性更高: var [first, second, third] = someAr

二:变量的解构赋值

(1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; 知识点:数组的解构赋值. //数组的解构赋值 let [x,y] = [1,2]; let [x,y] = [2]; // x = 2 ,y =undefined; let [x = 1] = [undefined]; x = 1 let [x = 1 ] = null ; x = null let [ , , third] = ["foo", "bar", "

ES6学习笔记(let、const、变量的解构赋值、字符串扩展)

一.let命令 1.let命令所在的代码块内有效,var声明的在全局范围内都有效 2.for循环的计数器,就很合适使用let命令 3.let声明的内部变量i和外部变量i是分离的 4.var命令会发生"变量提升"现象,即变量可以在声明之前使用,值为undefined   let命令不会发生"变量提升"现象,它所声明的变量一定要在声明后使用,否则报错 5.let不允许在相同作用域内,重复声明同一个变量 6.let会导致暂时性死区,在代码块内,使用let命令声明变量之前,