个人学习-前端相关（1）:ECMAScript 6-变量、模板字符串、解构表达式

前言

由于最近公司有接到一些小程序或者app相关的内容，可能考虑要做一些样例供参考。虽然在20年短暂学习和使用过vue2，但由于时间久远且技术发展太快，需要对一些旧知识进行巩固，新的内容进行学习。

ECMAScript 6简介

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

let和const

ES6中增加了let和const来声明变量。let在es6中推荐优先使用。

let 和var的差别

1、let 不能重复声明

// 报错
function func() {
  let a = 10;
  var a = 1;
}
 
// 报错
function func() {
  let a = 10;
  let a = 1;
}

2、let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问。
3、let不会预解析进行变量提升:var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。但是let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
 
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

4、let定义的全局变量不会作为window的属性：let和const不会污染全局变量

        var RegExp = 100;
            console.log(RegExp);//100
            console.log(window.RegExp);//100

       

 let RegExp = 100;
        //const RegExp = 100;
            console.log(RegExp);//100
            console.log(window.RegExp);//function RegExp()

模板字符串

比如有一个div我想要js动态的往里面加这些东西，平常的写法是：

    <div></div>
    <script>
        const div = document.querySelector('div');
        let id='good';
        let name='写代码让我快乐';
        div.innerHTML = "<ul><li><p id="+id+">"+name+"</p></li></ul>";
    </script>

但是有了模板字符串之后：
使用tab上面那个小点点 "`"将内容包起来，里面的变量使用${变量名}来替换，非常方便。

        const div = document.querySelector('div');
        let id='good';
        let name='写代码让我快乐';
        div.innerHTML= `<ul>
                <li>
                    <p id=${id}>${name}</p>
                </li>
            </ul>`
        // div.innerHTML = "<ul><li><p id="+id+">"+name+"</p></li></ul>";

ES6的解构表达式

一种便捷语法，快速将数组或对象的值拆分并赋值给变量。其中{}表示对象，[]表示数组。

2.2.1数组结构赋值

let [a,b,c] = [1,2,3]
console.log(a)  //1
console.log(b)  //2
console.log(c)  //3

//使用默认值作为备选值，数组中对应位置缺失时使用默认值。
let[a,b,c,d=4]= [1,2,3]
console.log(d) //4

//使用解构表达式取出数组中的元素
let arr = [11,22,33,4,55]
let [a,b,c,d,e=10] = arr
console.log(a,b,c,d,e) // 11,22,33,4,55

2.2.2对象解构赋值

//新增变量名必须和属性名相同，本质是初始化变量的值为对象中同名属性的值
let {a,b} = {a:1,b:2}  //相当于 let a = 对象.a  let b = 对象.b
console.log(a,b) //1,2

//使用解构表达式获取对象的属性值
let person={
    name:"zhangsan",
    age:10
}
let{name,age} = person  //相当于 let name = person.name ...
console.log(name,age) //zhangsan

2.2.3应用在方法的参数列表

let arr = [11,22,33,44,55]
function showArr(arr){
	console.log(arr[0],arr[1],arr[2]) // 11,22,33
}

function showArr([a,b,c]){
	console.log(a,b,c)
}
showArr(arr)//11,22,33