当前位置：网站首页>[ES6] let, const, deconstruction assignment, template string

[ES6] let, const, deconstruction assignment, template string

2022-04-21 18:53:00 【Errol_ King】

List of articles

let keyword
const keyword
Deconstruct assignment
Template string

ES6 Study ：
Silicon Valley Web front end ES6 course , cover ES6-ES11
ES6 Introductory tutorial Ruan Yifeng

let keyword

【 characteristic 】
let The keyword is used to declare variables , Use let Declared variables have several characteristics ：

Duplicate statements are not allowed ;
Block level scope （ local variable ）;
No variable promotion ;
Does not affect the scope chain ;

【let Create variable code examples 】

// let Keyword usage examples ：
let a; //  A single statement 
let b,c,d; //  Batch statement 
let e = 100; //  Single declaration and assignment 
let f = 521, g = 'iloveyou', h = []; //  Batch declaration and assignment

【 Duplicate statements are not allowed 】

let name = " Zhang San ";
let name = " Li Si ";

Insert picture description here
【 Block level scope 】
Include if else while for

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

Insert picture description here
【 No variable promotion 】
var If you use variables first , Then declare and initialize it , The value of the variable will be undefined. The following code will be output on the console undefined

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

and let This will report an error ：

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

Insert picture description here
【 Does not affect the scope chain 】
There is a code block inside the code block , Local variables in the upper code block are available to the lower level

	let age = 18;
	function fn(){
    
		console.log(age); //  Although it is a block scope , But here you can use 
    }
   	fn();

【let Case study ： Click on div Change the color 】
Insert picture description here

<!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 Case study ： Click on div Change the color </h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<script> //  obtain div Element object  let items = document.getElementsByClassName('item'); //  Traverse and bind Events  for (let i = 0; i < items.length; i++) {
       items[i].onclick = function () {
       // Modify the background color of the current element  //this.style.background = 'pink'; //  Writing a ： The conventional writing method is generally normal  items[i].style.background = 'pink'; //  Write two  } } </script>
</body>
</html>

const keyword

【 characteristic 】
const The keyword is used to declare constants ,const The statement has the following characteristics ：

Be sure to assign the initial value ;
General constants use uppercase （ habit ）;
Duplicate statements are not allowed ;
Value cannot be modified ;
Block level scope （ local variable ）;
Modify an array or object element , No modification of constants , No mistake.

【const Code example 】

<script>
    const SCHOOL = " Sanlitun primary school "
    console.log(SCHOOL);
</script>

【 The declaration must be assigned an initial value 】

const SCHOOL;

Insert picture description here
【 Duplicate statements are not allowed 】

const SCHOOL = " Sanlitun primary school ";
const SCHOOL = " Sanlitun middle school ";

Insert picture description here
【 Value cannot be modified 】

const SCHOOL = " Sanlitun primary school ";
SCHOOL = " Sanlitun middle school ";

Insert picture description here
【 Block level scope （ local variable ）】

{
    
	const SCHOOL = " Sanlitun primary school ";
}

console.log(SCHOOL);

Insert picture description here
【 Modify an array or object element , No modification of constants 】

	const PERSON = [' Zhang San ',' Li Si ',' Wang Wu ']
    PERSON.push[' Zhao Liu ']
    console.log(PERSON)

Insert picture description here

Deconstruct assignment

【 Definition 】
ES6 Allow to follow certain mode , Extract values from arrays and objects , Assign values to variables , This is called deconstruction assignment

【 Sample code 】

<script>
    // 1、 Deconstruction and assignment of arrays 
    const F4 = [" Yan Chengxu ", " Zhu Xiaotian ", " Zhou Yumin ", " Wu Jianhao "];
    let [a, b, c, d] = F4;
    //  This is equivalent to our statement 4 A variable a,b,c,d, Their values correspond to  " Yan Chengxu "," Zhu Xiaotian "," Zhou Yumin "," Wu Jianhao "
    console.log(a + " " + b + " " + c + " " + d);

    // 2、 Object's deconstruction assignment 
    const person = {
    
        name: " Zhang San ",
        age: 18,
        talk: function () {
    
            console.log(" Hello , nice to meet you ");
        }
    }
    let {
    name, age, talk} = person;
    console.log(" full name ：" + name + "  Age ：" + age);
    talk()
</script>

Insert picture description here
Of course, you can talk Method structure ：

let {
    talk} = person;
talk()

Template string

【 characteristic 】
Template string （template string） It's an enhanced string , Use back quotes （`） identification

A newline character can appear in the string
have access to ${xxx} Formal reference variable

【 Sample code 】

//  The method of declaring a string ： Single quotation marks （''）、 Double quotes （""）、 The quotation marks （``）
    //  Statement 
    let string = ` I also a string `;
    console.log(string);
    //  characteristic 
    // 1、 A newline character can appear in the string 
    let str =
        `<ul> <li> Yan Chengxu </li> <li> Zhu Xiaotian </li> <li> Zhou Yumin </li> <li> Wu Jianhao </li> </ul>`;
    console.log(str);
    // 2、 have access to  ${xxx}  Formal reference variable 
    let actor = " Yan Chengxu ";
    let output = `${
      actor} Played the role of Daoming temple `;
    console.log(output);