JavaScript在ES6中的新变量 let 、const和解构赋值

简介: 学习JavaScript在ES6中的新变量 let 、const和解构赋值。

目录


前言


一、let变量


1.块级作用域


2.不存在变量提升


3.使用let变量需要先声明后使用


4.不能重复声明


5.总结


二、const变量


1.块级作用域


2.声明常量必须赋值


3.常量赋值不能修改


三、let、const和var的区别


四、结构赋值


数组


1.数组的结构赋值


2.二维数组


3.省略变量


4.合并数组


5.默认值


对象


前言


为什么学习es6


每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。


- 变量提升特性增加了程序运行时的不可预测性


- 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码


一、let变量

1.块级作用域

for(let i=1;i<10;i++){
      console.log(i);
    }
    // console.log(i);//未定义


2.不存在变量提升

let必须写在输出的前面,不然会直接报错,需要格外的注意,也是先定义变量才能使用。

//console.log(i);//报错
     let i=1;
     console.log(i);


3.使用let变量需要先声明后使用

需要先声明变量,不声明变量直接使用,会出现没有声明的提示,要牢记先声明后使用的流程。

let i=1;
    if(true){
     i=2;
    //let i=3;//报错
    }
    console.log(i);


4.不能重复声明

let a=1;
    // let a=3; //重复了 报错


5.总结

-- let 关键字用来声明块级变量。


-- 特点就是在{}声明具有块级作用域,var变量无此特点。


-- 防止循环变量编程全局变量。


-- let 关键词无变量提升。


-- let 关键词有暂时性死区的特点。{先声明后使用}


二、const变量


1.块级作用域

与let用法相同

var a=1;
if(true){
const a=2;
console.log(a);//输出为2
}


2.声明常量必须赋值

if(true){
  const a;//报错
  console.log(a);
}


3.常量赋值不能修改

对象可以进行添加,但是不能修改整体的地址。


对象的本身是可变的,所以可以添加属性,但是地址不可改变。

if(true){
  const a=2;
    a=3;
  console.log(a);// 报错
}
const person = {};
person.name ="张三";
person.age=18; 
person = {};//报错


三、let、const和var的区别

- 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。


- 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。


- 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。


- 使用let,const的声明的变量不属性顶层对象,返回undefined。


四、结构赋值


数组

1.数组的结构赋值

let arr =[1,2,3];
   let [a,b,c] = arr;
   console.log(a,b,c);//1,2,3

2.二维数组

let [a,[b,c],d] = [1,[2,3],4];
 console.log(a,b,c,d);//1,2,3,4


3.省略变量

let [a,,c] = [1,2,3];
 console.log(a,c);//1,3


4.合并数组

let [a,...b] = [1,'a','b','c'];
    console.log(a,...b);//1,a,b,c


5.默认值

如果是undefined 默认值生效

let [a,b='2'] = [1,undefined];
 console.log(b);//2
对象
 let Person = {realname:"张三",age:19};
 let {realname,age} = Person;
 console.log(realname,age);//张三,19
 let Person = {realname:"张三",age:19};
 let {realname:myrealname,age} = Person;//重命名
 console.log(myrealname,age);//张三,19
 let Person = {realname:"张三",age:19};
 let {realname:myrealname,age height=183} = Person;//默认值
 console.log(height);//183




相关文章
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
944 11
|
JavaScript 前端开发 安全
【JavaScript】深入理解 let、var 和 const
掌握这些关键字的使用可以提高代码的可读性和可维护性,避免潜在的变量提升和作用域问题。希望本文能帮助您更好地理解和应用 JavaScript 中的变量声明方式,编写出更高质量的代码。
805 20
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
443 11
|
JavaScript 前端开发 网络架构
ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
723 12
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
271 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
471 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
357 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
238 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
596 5

热门文章

最新文章