Javascript(笔记32) - ES6特性 - let 、const 、解构赋值 、模板字符串
ECMA
European Computer Manufactureres Association ，中文名：欧洲计算机制造商协会，目标是评估、开发和认可电信和计算机标准。
1994年后改名为 ECMA国际；
就理解为“标准化”组织吧。
ECMAScript
就是这个组织通过 ECMA-262 标准化的脚本程序设计语言；
ES6是相对于 ECMA2015 年的版本，而且每年都要搞一个。
TC39是推进 ECMAScript 发展的委员会，会员都是浏览器厂商，苹果、谷歌、微软、因特尔这些，定期开会；
为啥学ES6
老一代的经典版本，不能满足要求了，新一代的版本中以 ES6 最为代表性。
后面还有 ES7、8、9、10、11 每年都有个新版本，只是标准都提前制定了，各浏览器厂商要支持新的版本，还需要时间；大部分浏览器对ES6都有很好的兼容；
兼容性： https://kangax.github.io/compat-table/es6/
我现在用的是 chrome 107，已经全面支持ES6。
let变量声明
变量声明：一个也行，多个也行，各种数据类型都行；
let a;
let b,c,d;
let f = 123, g = 'iloveyou',h =[];
特性1：变量不能重复声明：重复声明就报错；
let name = 'Jack';
let name = 'Tom'; // 报错 重复声明了
语法错误：标识符 name 已经被声明了；
var 可以重复声明，但也会污染变量，不演示了，都懂；
特性2：块级作用域：全局，函数，eval
{
let girl = 'xiaowu';
// console.log(girl); 在块级作用域里可以用；
}
console.log(girl); // 报错 作用域外引用了
引用错误：girl 未定义；
var 就可以正确读取，因为 var 没有块级作用域，属于 window 了，所以可以用；
注意：if else 和 for 里面的 {} 也都是块级作用域；
特性3：不存在变量提升
console.log(song); // 报错 先声明先使用
let song = "孤勇者";
// console.log(song); 声明后使用；
引用错误：初始化之前，不让用；
var 有变量提升，不报错，会输出 undefined ;
var song
console.log(song); // undefined
song = "孤勇者";
console.log(song); // 孤勇者
特性4：不影响作用域链
{
let name = "Jack";
function fn(){
console.log(name);
}
fn(); // Jack
}fn 函数里没有 name ，会向作用域链上级找，这里是正常输出；
练习：鼠标点击 div ，改变背景色
<style>
div {
display: inline-block;
margin: 0 4px;
width: 100px;
height: 50px;
border: 2px solid #CAE5E6;
}
</style>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<script>
// 获取 div 元素
let item = document.getElementsByClassName('item');
for (let i = 0; i < item.length; i++) {
item[i].onclick = function () {
// 修改当前元素的背景颜色
item[i].style.backgroundColor = 'pink';
console.log(i); // 1 控制台返回当前块级作用域 i 值；
}
}
</script>
var 没有块级作用域，在循环结束后 i = 3 了，如果 i 用 var 声明，这里会报错，都懂；
const声明常量
值不能修改的量叫常量；
const SONG = "护花使者";
console.log(SONG); // 护花使者
特性1： 一定要赋初始值
语法错误：缺失声明初始值；
特性2：一般常量使用大写(常用规范)，一定要用小写也没事；
特性3：常量值不能修改；
const SONG = "护花使者";
SONG = "孤勇者"; // 报错 常量不能修改了
类型错误：给常量赋值；
特性4：块级作用域
{
const SONG = "护花使者";
}
console.log(SONG); // 报错 作用域外引用
引用错误：SONG 未定义；
特性5：对数组和对象里的值修改，不算做对常量的修改，因为引用值，指向的地址没变；
const ANIMAL = ['cat','dog','fish'];
ANIMAL.push('bird');
console.log(ANIMAL); // ['cat', 'dog', 'fish', 'bird']
当指向的地址改变了，就会报错；
const ANIMAL = ['cat','dog','fish'];
ANIMAL = []; // 或 ANIMAL = "abc"; 这等于改变了指向地址
注意：以后使用 const 声明数组或对象会比较稳妥，避免误操作修改了地址；
变量的解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，称为：解构赋值；
数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xsy,ln,zs,sxb] = F4; // 解构赋值
console.log(xsy,ln,zs,sxb); // 小沈阳 刘能 赵四 宋小宝
对象的解构
const PERSON = {
name : '郭德刚',
age : 45,
act : function(){
console.log("说相声");
}
}
let {name,age,act} = PERSON; // 解构赋值，相当于声明的了3个变量
console.log(name,age,act); // 郭德刚 45 ƒ (){console.log("说相声");}
act(); // 说相声方法的解构比较常用
let {act} = PERSON; // 单独解构
act(); // 说相声模板字符串
跟''不一样，模板字符串是反引号 `` ，ESC下面那个波浪键；
声明时，跟单引号双引号没区别；
let str = `我也是字符串`;
console.log(str, typeof(str)); // 我也是字符串 string
特性1：内容中可以出现换行符；
let str = `<ul>
<li></li>
</ul>`
console.log(str);
这种换行的写法是可以的，换成单引号/双引号的话会报错，这是常识；
特性2：变量拼接 ${} 固定格式；
let zxy = "张学友";
let hello = `${zxy}是歌神，我喜欢${zxy}`;
console.log(hello); // 张学友是歌神，我喜欢张学友
以前用 ++ 这种字符串拼接，现在可以用 ${} ，把拼接的字符串放在 {} 里面；
特性2.1：模板里变量相加
还能这样相加：
let json = {
'div' :'<div></div>',
'span':'<span><span>'
}
let str1 = `${json.div + json.span}`;
console.log(str1); // <div></div><span><span>
let str2 = `${json.div}<br>${json.span}`;
console.log(str2); // <div></div><br><span><span>
let a = 5;
let b = 10;
console.log(`a + b = ${a+b}`); // a+b=15特性2.2：模板调用函数
也可以调用函数：
function show(){
console.log('hello');
}
show``; // 用模板的形式调用函数简化对象写法
ES6 允许在大括号里，写入变量和函数，作为对象的属性和方法；
这样写更简洁；
let name = "Jacky";
let sing = function(){
console.log('Jacky is singing.');
}
const JACKY = {
name, // 可以简化了，不用 name:name, 写全也没事；
sing,
hello(){ // 对象里的方法也可以简化成这样，去掉冒号和 function
console.log('hello everybody');
}
}
console.log(JACKY);
JACKY.sing(); // Jacky is singing.
