ES6特性01：let/const介绍、结构赋值、模板字符串以及对象的简化写法

本文链接：https://blog.csdn.net/weixin_43216437/article/details/118251274

let/const介绍、结构赋值、模板字符串以及对象的简化写法

let
const
变量的解构赋值
- 数组的解构
- 对象的解构
模板字符串
- 内容中可以直接出现换行符
- 可以直接进行变量的拼接
对象的简化写法
- 方法的简写

let

let用来声明变量，变量不能重复声明防止变量污染

块级作用域

在块级作用域(代码块中的代码)的变量是无法被访问的

 {
        let girl='周扬青';
    }
    console.log(girl);

不存在变量提升

在声明一个变量后才能使用

//使用不能放到声明之前
console.log(song);
let song='恋爱达人';

不影响作用域链

声明在最外侧块中的变量对里面的块都有效果

 {
        let school='尚硅谷';
        function fn() {
            console.log(school);
        }
        fn();
    }

点击切换颜色

这儿循环中如果用var就会报错，因为var没有块级作用域，i一直存在于全局，执行 items[i].style.background=‘red’;时i变成3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let</title>
    <style>
        .item{
            border: solid 1px;
            width: 220px;
            height: 220px;
            float: left;
        }
    </style>
</head>
<body>
<div>
    <h2>点击切换颜色</h2>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<script>
    let items = document.getElementsByClassName('item');
    for (let i = 0; i < items.length; i++) {
        items[i].onclick=function () {
            debugger
            items[i].style.background='red';
        }
    }
</script>
</body>
</html>

const

const用来声明常量

一定要赋初始值
一般常量使用大写(潜规则)
常量的值不能修改
块级作用域(只能在当前块级和当前块级的子快使用)
对于数组和对象的元素修改，不算做对常量的修改，不会报错，数组的地址没有改变
const TEAM=['UZI','MXLG','Ming','LetMe']; TEAM.push('Meiko');

变量的解构赋值

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

数组的解构

<script>
    const F4=['小沈阳','刘能','赵四','宋小宝'];
    let [xiao,liu,zhao,song]=F4;
    console.log(xiao);
    console.log(liu);
    console.log(zhao);
    console.log(song);
</script>

对象的解构

<script>
    const zhao={
        name:'赵本山',
        age:'不详',
        xiaopin:function () {
            console.log('我可以演小品');
        }
    };
    let {name,age,xiaopin}=zhao;
    console.log(name);
    console.log(age);
    console.log(xiaopin());
    xiaopin();
</script>

模板字符串

使用反引号的是模板字符串
ES6引入新的声明字符串的方式``(反引号) ，‘’ ，“”

内容中可以直接出现换行符

使用单引号，必须加 +号

let str='<ul>' +
        '<li>沈腾</li>' +
        '<li>艾伦</li>' +
        '</ul>';

使用反引号可以直接换行

    let str=`
    <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
    `;

可以直接进行变量的拼接

使用单引号

<script>
    let str='魏翔';
    let out=str+'是我心目中最搞笑的演员';
    console.log(out);
</script>

使用反引号

使用${} 来引入需要的内容

<script>
    let str='魏翔';
    let out=`${str}是我心目中最搞笑的演员`;
    console.log(out);
</script>

对象的简化写法

允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

<script>
    //先定义对象的属性和行为
    let name=`zzq`;
    let change=function () {
        console.log(`我喜欢学习`);
    }
    let zzq={
        name,change
    }
    console.log(zzq.name);
    console.log(zzq.change());
</script>

方法的简写

improve() {
console.log(我们可以提高你的技能);
}
相当于
improve:function () {
console.log(我们可以提高你的技能);
}

<script>
    let name=`尚硅谷`;
    let change=function () {
        console.log(`我们可以改变你`);
    }

    const school={
        name,
        change,
        improve() {
            console.log(`我们可以提高你的技能`);
        }
    }
</script>