js14---ES6（let const以及解构赋值）

realllll
111 阅读4分钟

let及const

1.let

let 声明的变量只在 let 命令所在的代码块内有效（块级作用域、局部作用），ES6 推荐在函数中使用 let 定义变量，而非 var

1.1 块级作用域

               {
			let a=100;
			console.log(a,1111)
			a="hello"
			console.log(a,222)				
		}
		console.log(a,333)

image.png

常用于for循环（每一次运行都会生成一个新的作用域）

           for(var i=0;i<10;i++){
			setTimeout(function(){
				console.log(i)
			},100)
		}
		console.log(i)

image.png

使用let

               for(let i=0;i<10;i++){
			setTimeout(function(){
				console.log(i)
			},100)
		}
		var i=100
		console.log(i)

image.png

1.2 不能重复声明（可以先声明再赋值）

                let a=20;
		let a=90;
		console.log(a);

image.png

1.3 不存在变量提升

                console.log(a)
		let a=20;

image.png

const

const 声明一个只读的常量，一旦声明，常量的值就不能改变。意味着，一旦声明必须初始化，否则会报错。

只能初始化一次:初始化--第一次赋值

1.1 基本用法

                const a=90;
		console.log(a);

image.png

                 const b;

image.png

特殊：当const声明一个引用数据时，是空间不可更改，内容可以更改

                const obj={}
		obj.age=20
		console.log(obj)

image.png

1.2 暂时性死区

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内，在声明变量 PI 之前使用它会报错。

var PI = "a";
if(true){
console.log(PI);  // ReferenceError: PI is not defined
const PI = "3.1415926";
 }

image.png

注意要点

  • let 和const 关键词声明的变量不具备变量提升（hoisting）特性
  • let 和 const 声明只在最靠近的一个块中（花括号内）有效
  • 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
  • const 在声明时必须被赋值
  • const 如何做到变量在声明初始化之后不允许改变的？使用 const 声明复杂类型对象时要慎重。
{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

解构赋值

1. 概述

  • 解构赋值是对赋值运算符的扩展。
  • 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
  • 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

2. 解构模型

在解构中，有下面两部分参与：

  • 解构的源，解构赋值表达式的右边部分。

  • 解构的目标，解构赋值表达式的左边部分。

  • 解构赋值:解析数据源，然后按照数据模型进行取值 ，再赋值给变量。 是一种声明变量的高级写法

  • 格式：数据模型=数据源（等号两边数据类型需要相同）

  • 解构：按照数据模型取出数据源中的数据

  • 赋值：然后赋值给模型变量

  • 演示

    let obj={a:100,b:"hello",c:[10,203,0]}
   let {a,b,c}=obj
   //隐式操作: let a=obj.a; let b=obj.b; let c=obj.c
   console.log(a)
   console.log(b)
   console.log(c)

image.png

                var [a,b,c]=arr
		//隐式操作: var a=arr[0]; var b=arr[1]; var c=arr[2]
		var {a,b,length}=arr
                    
                    
                 var [name,{age}]=arr;
		//隐式操作: var name=arr[0]
		var age=arr[1].age

3.数组模型的结构（Array）

  • 基本
let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1 2 3
  • 可嵌套
let [a, [[b], c]] = [1, [[2], 3]];
console.log(a, b, c); //1 2 3
  • 可忽略
let [a, , b] = [1, 2, 3];
console.log(a, b); //1 3
  • 不完全解构
let [a = 1, b] = []; // a = 1, b = undefined
  • 剩余运算符
let [a, ...b] = [1, 2, 3];
console.log(a, b); //a = 1, b = [2,3]
  • 字符串（特殊）

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。

let [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); //h e l l o
  • 解构默认值
let [a = 2] = [undefined]; // a = 2

当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。

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

  1. a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3

  2. a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1

  3. a 与 b 正常解构赋值，匹配结果：a = 1，b = 2

（4）对象模型的结构（Object）
  • 基本
let { foo, bar } = { bar: 'bbb' , foo: 'aaa'};
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
  • 可嵌套可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;
// x = 'hello'
  • 不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
  • 剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
  • 解构默认值
let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;
avatar
文章
阅读
粉丝