当前位置：网站首页>【ES6】let、const关键字和解构赋值

【ES6】let、const关键字和解构赋值

2022-07-13 18:28:00 【苏凉.py】

作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
博客主页：苏凉.py的博客
系列专栏：ES6基础语法
名言警句：海阔凭鱼跃，天高任鸟飞。
要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
关注点赞收藏

文章目录

es介绍

ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript,是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性

为什么要学习新特性？

语法简洁，功能丰富
框架开发应用
前端开发职位要求

为什么要学习es6

ES6 的版本变动内容最多，具有里程碑意义
ES6加入许多新的语法特性，编程实现更简单、高效
S6是前端发展趋势，就业必备技能

let关键字

let关键字与var关键字一样是用于声明变量的，只不过与var有以下不同之处：

变量不能重复声明

在es6中let关键字不允许重复声明变量，如下图所示就会报错：Uncaught SyntaxError SyntaxError: Identifier 'name' has already been declared

  let name ='suliang';
  let name = 'xiaoming';

块级作用域

使用let在代码块中声明变量时，只在代码块中生效。

{
    
    var name = 'su'
    let age = 21;
}
console.log(name); //su
console.log(age); //ReferenceError: age is not defined

不存在变量提升

使用var关键字定义一个变量时，可以在定义变量之前输出该变量，数据类型为未定义，但使用let关键字定义变量时，不允许在声明变量前调用该变量。

console.log(age); //ReferenceError: Cannot access 'age' before initialization
let age = 21;

不影响作用域链

function fun1(){
    
     let num = 10;
     function fun2(){
    
         let num1 = num +15;
         console.log(num1);
     }
     return fun2();
 }
 fun1(); //25

let关键字小案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script> //let 案例 window.onload = function(){
      let items = document.getElementsByClassName('item'); for(let i = 0;i<items.length;i++){
      items[i].onclick = function(){
      items[i].style.backgroundColor = 'yellow' } } } </script>
    <style> div{
      width: 150px; height: 80px; border: 2px solid lightblue; display: inline-block; } </style>
</head>
<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>
</html>

当使用for循环遍历元素时，使用var关键字声明变量i，则会报错：TypeError: Cannot read properties of undefined，因为此时var 声明的i并没有块级作用域，最后i的值为3，而item[3]不存在，因此就会报错。而用let可以解决这个问题。

window.onload = function(){
    
     let items = document.getElementsByClassName('item');
     for(var i = 0;i<items.length;i++){
    
         items[i].onclick = function(){
    
             items[i].style.backgroundColor = 'yellow'
         }
     }
 }

在这里插入图片描述

const关键字（声明常量）

在es6中怎加了对常量的声明方式，那就是用const关键字，其中使用const关键字，有以下特性。

声明时必须赋予初始值

在声明常量时必须赋予初始值，否则报错：SyntaxError: Missing initializer in const declaration

声明常量时尽量使用大写字母

const NAME = 'suliang';

常量的值不能被修改

常量的值一旦定义就不能被修改，否则报错：TypeError: Assignment to constant variable.

  const NAME = 'suliang';
  NAME = 'xiaoming';

块级作用域

和let一样，const一样有块级作用域

{
    
    const AGE= 15;
}
console.log(AGE) 
//ReferenceError: AGE is not defined

对于数组/对象的元素来说，不算对常量的修改

const LIST = ['gala','xiaohu','wei','ming'];
LIST.push('breath');
console.log(LIST);
//(5) ['gala', 'xiaohu', 'wei', 'ming', 'breath']

解构赋值

在es6中可以将一个常量中的各个值赋给多个变量。

数组的解构赋值

const RNG = ['xiaohu','ming','gala'];
   let [a,b,c] = RNG;
   console.log(a); //xiaohu
   console.log(b); //ming
   console.log(c); //gala

对象的解构赋值

最常用的通常为对象的解构赋值，这样调用对象的方法时更简便。

//对象的解构赋值
const su = {
    
    name:'suliang',
    age : 21,
    sayName:function(){
    
        console.log(name)
    }
}
let {
    name,age,sayName} = su;
console.log(name); //suliang
console.log(age); //21
console.log(sayName); //ƒ (){console.log(name) }
 //调用对象方法
su.sayName(); //不适用解构赋值
sayName();  //使用解构赋值