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

本文主要是介绍个人学习-前端相关（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);//100console.log(window.RegExp);//100let RegExp = 100;//const RegExp = 100;console.log(RegExp);//100console.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

这篇关于个人学习-前端相关（1）:ECMAScript 6-变量、模板字符串、解构表达式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---