ES6~ES11新特性：变量

前言

从今天开始我会在平台上发表我自己学习的有关于ES6~ES11新特性的博客，学习方式的话是在b站，有感兴趣的小伙伴可以打开这个链接>-<来观看视频，同时我会在此专栏每个博客上的末尾标注本博客所涵盖的选集。一起前端，一起进步！！！

一.let变量声明及声明特性

如何声明变量

声明格式与var相同，但比其多了几个特性。
格式：let 变量名;

let a;
let b, c, d;
let e=100;
let f=1, g='sdsa', s=[];

特性

1.变量不能重复声明

let star=1;
let star=3;

打开控制台会报错

2.块级作用域

块级作用域为只在 代码块 里有效，在代码块之外使用无效。

{
	let girl= 1;
}
console.log(girl);

这样使用的话是无效的，控制台会报错

但使用var就不会出现这样的问题

{
	var girl= 1;
}
console.log(girl);

3.不存在变量提升

在var中会有变量提升，例如在代码声明之前我就输出这个变量，var的话不会报错而是会输出一个undefined

console.log(song);
var song = '1';

但如果你使用let进行声明的话就不会有变量提升而是会直接报错

console.log(song);
let song = '1';

4.不影响作用域链

虽然是块级作用域，但其不影响作用域链的效果

        {
            let school='abc';
            function fn(){
                console.log(school);
            }
            fn();
        }

二.const声明 常量 以及其特点

如何声明常量

声明格式：const 常量名 = 初值;

const name = 'abc';

特点

• 一定要赋初值
• 一般常量使用大写
• 常量值不能修改
• 块级作用域
• 对于数组和对象的元素修改，不算对常量的修改，不会报错

三.变量的解构赋值

解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值

数组的解构

我们先创建一个数组

const F4 = ['a1','b1','c1','d1'];

如果我们想把数组里的元素赋值给一个变量，就可以用解构赋值

let [q,w,e,r] = F4;

这样的话我们数组里的每一个值就相当于分给了每个变量

        console.log(q);
        console.log(w);
        console.log(e);
        console.log(r);

输出一下

这种情况运用的相对较少

对象的解构

        const zhao = {
            name:'初一',
            sex:'男',
            xiaopin:function(){
                console.log("初一是男孩");
            }
        };

进行解构赋值

let {name, sex, xiaopin} = zhao;

输出一下

		console.log(name);
        console.log(sex);
        console.log(xiaopin);
        xiaopin();

这样可以在你多次调用对象时避免重复
虽然我觉得没啥用

四.模板字符串

ES6引入了一种新的声明字符串的方式 ``

let str = `我也是一个字符串哦`;

区别为

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

        let str1 = `
                    <ul>
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                    </ul>`;
        console.log(str1);

• 可以直接进行变量的拼接

        let str2='a';
        let str3=`${str2}是好人`;    //${}是固定格式，花括号中间放需要拼接的字符串
        console.log(str3);

五.对象的简化写法

ES6允许在大括号里面直接写入变量或函数，作为对象的属性或方法，这样可以使书写更加简洁

        let name = 'a';
        let change = function(){
            console.log("aaaaaa");
        }

        const school = {
            name,
            change,
            improve(){      //可以省略 :function
                console.log('a');
            }
        }

完整写法

        const school = {
            name: name,
            change: change,
            improve: function(){
                console.log('a');
            }
        }

输出一下

console.log(school)

选集为3，5，6，7，8