资讯详情

let、const、Symbol、结构赋值-js

文章目录

    • ES6新增两个 JavaScript 关键字: let和 const
    • 一、let
        • ①let用法
        • ②用let不能重复声明
        • ③for循环计数器非常适合使用let
        • ④没有变量增加
    • 二、const
    • 三、临时死区
        • 案例1
        • 案例2
        • 案例3
    • 四、Symbol基本数据
      • (1)包装对象
      • (2)、Symbol
      • (3)、案例
    • 五、解构赋值
      • (1)、概述
      • (2)解构模型
      • (3)解构赋值用法
        • ①对象模型的结构(Object)
        • ②数组模型的结构(Array)
            • 案例1
            • 案例2

ES6新增两个 JavaScript 关键字: let和 const

et声明的变量只有 let 命令所在代码块内有效(块级作用域、局部作用),ES6 函数中推荐使用 let 定义变量,而不是 var。 const声明只读的常量,一旦声明,常量值就不能改变。

一、let

①let用法

{ 
        }括起代码块 { 
           let a = 0;//对于let,具有作用域的代码块   console.log(a);//0   //对于var,代码块没有作用域   var b = 1; } console.log(b); // 1 console.log(a);// 报错 ReferenceError: a is not defined 

②用let不能重复声明

var a = 1; var a = 2; console.log(a);  // 2  let b = 3; let b = 4; console.log(b);  // Identifier 'a' has already been declared 

③for循环计数器非常适合使用let

for (var i = 0; i < 10; i++) { 
        
  setTimeout(function(){ 
        
    console.log(i);
  })
}
// 输出十个 10

for (let j = 0; j < 10; j++) { 
        
  setTimeout(function(){ 
        
    console.log(j);
  })
}
// 输出 0~9
变量 i 是用 var 声明的,在全局范围内有效,所以全局中只有一个变量 i, 每次循
环时,setTimeout 定时器里面的 i 指的是全局变量 i ,而循环里的十个 
setTimeout 是在循环结束后才执行,所以此时的 i 都是 10。

变量 j 是用 let 声明的,当前的 j 只在本轮循环中有效,每次循环的 j 其实都是
一个新的变量,所以 setTimeout 定时器里面的 j 其实是不同的变量,即最后输出
0~9。(若每次循环的变量 j 都是重新声明的,如何知道前一个循环的值?这是因为 
JavaScript 引擎内部会记住前一个循环的值)

④不存在变量提升

console.log(a);  //undefined
var a = "banana";

console.log(b);  //ReferenceError: b is not defined
let b = "apple";

变量 a 用 var 声明存在变量提升,所以当脚本开始运行的时候,a 已经存在了,但
是还没有赋值,所以会输出 undefined。

变量 b 用 let 声明不存在变量提升,在声明变量 b 之前,b 不存在,所以会报
错。

二、const

const 声明一个只读变量,声明之后不允许改变。意味着,一旦声明必须初始化,否则会报错。

①const基本用法

const ha11d = "srgg"
		console.log(ha11d);
		ha11d = "fsef"
		console.log(ha11d);

结果:在这里插入图片描述

三、暂时性死区

案例1

        let a = 100
        var b = 99
        if (true) { 
        
            let a = 10
            var b = 88
        }
        console.log(a, b);//100 88
//对于let 代码块具有作用域 所以打印100
//对于var,代码块没有作用域

案例2

对于var,代码块没有作用域,a相对于全局变量,不能用let重复声明,所以报错

案例3

  if (false) { 
        
            var a = 1
            let b = 2
        }
        console.log(a); //undefined
        console.log(b); //报错

        if (true) { 
        
            var a = 1
            let b = 2
        }
        console.log(a); //1
        console.log(b); //报错

四、Symbol基本数据

(1)、包装对象

	  var a = new Number(200)
		var b = 100
		b.age = 20 //new Number(100) 
//这个b.age和下一行的b.age不一样,下一行重新包装对象的
		console.log(b.age) //new Number(100)

(2)、Symbol

       var re = Symbol("hello") //独一无二
        // 它是一个内置全局函,生成一个独一无二的数据
        var re2 = Symbol("hello")
        console.log(re, re2, re == re2, typeof re) //false

结果:

(3)、案例

		var obj = { 
        
			age: 20
		}
		obj.age = 100
		function tool(obj) { 
        
			let age = Symbol("年龄")
			// obj.age=100
			obj[age] = 20
		}

五、解构赋值

(1)、概述

  • 解构赋值是对赋值运算符的扩展。

  • 是一种针对进行模式匹配,然后对其中的变量进行赋值。

  • 在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

(2)、解构模型

在解构中,有下面两部分参与:

  • ,解构赋值表达式的部分。

  • ,解构赋值表达式的部分。

(3)、解构赋值用法

①对象模型的结构(Object)

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

②数组模型的结构(Array)

let arr = [35, 47, 535]
var [a,b,c]=arr
//隐式操作: var a=arr[0]; var b=arr[1]; var c=arr[2]

案例1
    var arr=["fsg",{ 
        age:345}]
	var [name,{ 
        age}]=arr;
	//隐式操作: var name=arr[0],var age=arr[1].age
案例2
       let arr = [{ 
        
			age: 20
		}, { 
        
			name1: "karen"
		}]
		let [{ 
        
			age,
			name1 = "jack"
		}] = arr
		//var name1=arr[0].name1
		console.log(age, name1)

结果:

标签: fsg电位器an1575z51

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台