当前位置：网站首页>【ES6】let、const、解构赋值、模板字符串

【ES6】let、const、解构赋值、模板字符串

2022-04-21 18:48:00 【Errol_King】

文章目录

let 关键字
const 关键字
解构赋值
模板字符串

ES6学习：
尚硅谷Web前端ES6教程，涵盖ES6-ES11
ES6 入门教程阮一峰

let 关键字

【特性】
let 关键字用来声明变量，使用 let 声明的变量有几个特点：

不允许重复声明；
块儿级作用域（局部变量）；
不存在变量提升；
不影响作用域链；

【let 创建变量代码示例】

// let关键字使用示例：
let a; // 单个声明
let b,c,d; // 批量声明
let e = 100; // 单个声明并赋值
let f = 521, g = 'iloveyou', h = []; // 批量声明并赋

【不允许重复声明】

let name = "张三";
let name = "李四";

在这里插入图片描述
【块儿级作用域】
包括 if else while for

{
    
	let age = 11;
	//console.log(age);
}
console.log(age);

在这里插入图片描述
【不存在变量提升】
var 如果你先使用的变量，再声明并初始化它，变量的值将是 undefined。如下代码会在控制台输出 undefined

{
    
	console.log(age);
	var age = 18
}

而 let 这样做会报错：

{
    
	console.log(age);
	let age = 18
}

在这里插入图片描述
【不影响作用域链】
代码块内有代码块，上级代码块中的局部变量下级可用

	let age = 18;
	function fn(){
    
		console.log(age); // 虽说是块儿作用域，但这里可以使用
    }
   	fn();

【let 案例：点击div更改颜色】
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .item {
       width: 100px; height: 50px; border: solid 1px rgb(42, 156, 156); float: left; margin-right: 10px; } </style>
</head>
<body>
<div class="container">
    <h2 class="page-header">let案例：点击div更改颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<script> // 获取div元素对象 let items = document.getElementsByClassName('item'); // 遍历并绑定事件 for (let i = 0; i < items.length; i++) {
       items[i].onclick = function () {
       //修改当前元素的背景颜色 //this.style.background = 'pink'; // 写法一：常规写法一般无异常 items[i].style.background = 'pink'; // 写法二 } } </script>
</body>
</html>

const 关键字

【特性】
const 关键字用来声明常量，const 声明有以下特点：

一定要赋初始值；
一般常量使用大写（习惯）；
不允许重复声明；
值不允许修改；
块儿级作用域（局部变量）；
对数组或对象元素修改，不算对常量的修改，不会报错

【const 代码示例】

<script>
    const SCHOOL = "三里屯小学"
    console.log(SCHOOL);
</script>

【声明必须赋初始值】

const SCHOOL;

在这里插入图片描述
【不允许重复声明】

const SCHOOL = "三里屯小学";
const SCHOOL = "三里屯中学";

在这里插入图片描述
【值不允许修改】

const SCHOOL = "三里屯小学";
SCHOOL = "三里屯中学";

在这里插入图片描述
【块儿级作用域（局部变量）】

{
    
	const SCHOOL = "三里屯小学";
}

console.log(SCHOOL);

在这里插入图片描述
【对数组或对象元素修改，不算对常量的修改】

	const PERSON = ['张三','李四','王五']
    PERSON.push['赵六']
    console.log(PERSON)

在这里插入图片描述

解构赋值

【定义】
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

【示例代码】

<script>
    // 1、数组的解构赋值
    const F4 = ["言承旭", "朱孝天", "周渝民", "吴建豪"];
    let [a, b, c, d] = F4;
    // 这就相当于我们声明4个变量a,b,c,d，其值分别对应 "言承旭","朱孝天","周渝民","吴建豪"
    console.log(a + " " + b + " " + c + " " + d);

    // 2、对象的解构赋值
    const person = {
    
        name: "张三",
        age: 18,
        talk: function () {
    
            console.log("你好，很高兴见到你");
        }
    }
    let {
    name, age, talk} = person;
    console.log("姓名：" + name + " 年龄：" + age);
    talk()
</script>

在这里插入图片描述
当然也可以把 talk 方法结构出来：

let {
    talk} = person;
talk()

模板字符串

【特性】
模板字符串（template string）是增强版的字符串，用反引号（`）标识

字符串中可以出现换行符
可以使用 ${xxx} 形式引用变量

【示例代码】

// 声明字符串的方法：单引号（''）、双引号（""）、反引号（``）
    // 声明
    let string = `我也一个字符串`;
    console.log(string);
    // 特性
    // 1、字符串中可以出现换行符
    let str =
        `<ul> <li>言承旭</li> <li>朱孝天</li> <li>周渝民</li> <li>吴建豪</li> </ul>`;
    console.log(str);
    // 2、可以使用 ${xxx} 形式引用变量
    let actor = "言承旭";
    let output = `${
      actor}扮演了道明寺`;
    console.log(output);