let声明变量
特点
- 不允许重复声明； 2. 块儿级作用域（局部变量）； 3. 不存在变量提升； 4. 不影响作用域链；
应用场景：以后声明变量使用 let 就对了；
块儿级作用域（局部变量）
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined不允许重复声明
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared不存在变量提升
console.log(song);
let song = "春天"不影响作用域链，正常输出值
什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中 的局部变量下级可用
{
let school = "天津";
function f1() {
console.log(school)
}
f1()
}const声明常量
应用场景：声明对象类型使用 const，非对象类型声明选择 let；
const 关键字用来声明常量，const 声明有以下特点：
- 声明必须赋初始值；
- 标识符一般为大写（习惯）；
- 不允许重复声明；
- 值不允许修改；
- 块儿级作用域（局部变量）；
- 对于数组和对象元素的修改，不算对常量的修改，不会报错。只会因为地址值被修改而报错(重要)
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable. // 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration const name = ["zhangsan","lisi","王二"];
name[0]="张三";
console.log(name) //正常输出，不会报错解构赋值(重要)
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
注意：名字要相同
数组解构
//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6,对应赋值
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)剩余运算符...
let [a, ...b] = [1, 2, 3];
console.log(a,b) // 1 [ 2, 3 ]解构字符串
let [a, b, ...c] = 'hello';
console.log(a,b,c) //h e [ 'l', 'l', 'o' ]对象解构
// 对象类型
const F3 = {
name : "大哥",
age : 22,
sex : "男",
xiaopin : function(){ // 常用
console.log("我会演小品！");
}
}解构指定字段
// ES6
let { name, age } = F3 //注意：结构的变量必须是user中的属性
console.log(name, age) //大哥 22剩余运算符...
let { name, age, ...f } = F3 //注意：结构的变量必须是user中的属性
console.log(f) //{ sex: '男', xiaopin: [Function: xiaopin] }解构完成后改名(常用)
let {xiaopin:han} = F3
han()简单示例
let {name, age, sex, xiaopin} = F3; // 注意解构对象这里用的是{}
let {xiaopin} = F3 //单独解构函数，常用
xiaopin()
console.log(name + age + sex + xiaopin); // 大哥22男
xiaopin(); // 此方法可以正常调用剩余运算符
拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
... 扩展运算符能将数组或对象转换为逗号分隔的参数序列；
// 1、拷贝对象,对象赋值
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15} // 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}数组操作
//声明一个数组 ...
const tfboys = ['易烊千玺', '王源', '王俊凯'];
// 声明一个函数
function chunwan() {
console.log(arguments);
}
chunwan(...tfboys); //相当于chunwan('易烊千玺','王源','王俊凯')数组合并
//1. 数组的合并 情圣 误杀 唐探
const kuaizi = ['王太利','肖央'];
const fenghuang = ['曾毅','玲花'];
// 传统的合并方式
// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
console.log(zuixuanxiaopingguo);数组克隆
//2. 数组的克隆
const sanzhihua = ['E','G','M'];
const sanyecao = [...sanzhihua];// ['E','G','M']
console.log(sanyecao);将伪数组转为真正的数组
//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // argumentsrest参数
和剩余运算符差不多都是三个点
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；
形式为：...变量名。arguments对象不是数组，只是可以下标访问而已，而rest参数是一个真正的数组。
ES6的rest参数...args，rest参数必须放在最后面
// ES5获取实参的方式
function data(){
console.log(arguments); //伪数组 获得arguments类型值
}
data("大哥","二哥","三哥","四哥");
//ES6的rest参数...args，rest参数必须放在最后面
function data1(...args){
console.log(args); //直接获取到Array数组类型值，可以进行数组操作
}
data1("大哥","二哥","三哥","四哥");对象Rest
ES9语法
1、Rest 参数与 spread 扩展运算符, 在对象中使Rest参数与spread扩展运算符；
2、正则扩展 简化和增强正则匹配；
1、Rest 参数与 spread 扩展运算符
概述： Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了 像数组一样的 rest 参数和扩展运算符；
//注意：参数被大括号包裹起来了
function connect({host, port, ...user}) {
console.log(host);
console.log(port);
console.log(user);
}
//这是对象形式传参，注意有大括号
connect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root',
type: 'master'
});执行结果
127.0.0.1
3306
{ username: 'root', password: 'root', type: 'master' }与普通方式对比(就是rest参数的例子)
function connect(host, port, ...args) {
console.log(host);
console.log(port);
console.log(args);
}
connect('127.0.0.1', 3306, 'root', 'root', 'master');执行结果
127.0.0.1
3306
[ 'root', 'root', 'master' ]数组合并
可以使用剩余运算符进行数组合并
三个点+数组名，用来拆分数组
let a = [1,2,3]
let b = [4,5,6]
let c = [...a,...b]
console.log(c) //[ 1, 2, 3, 4, 5, 6 ]对象合并
ES9语法
const skillOne = {
q: '天音波'
}
const skillTwo = {
w: '金钟罩'
}
const skillFour = {
r: '猛龙摆尾',
// 自己测试，可用
z: '胡说八道'
}
const mangseng = {
...skillOne,
...skillTwo,
...skillFour
};
console.log(mangseng) //{ q: '天音波', w: '金钟罩', r: '猛龙摆尾', z: '胡说八道' }模板字符串(重要)
反引号``，是在数字1旁边的那个符号，tab按键上边
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
作用：1、能够换行、2、能够在字符串中加入js表达式和调用方法
// 1、多行字符串，能够换行
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?能够在字符串里加上变量和js表达式
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.注意，函数要有返回值，不然模板字符串调用函数只能是undefine
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2); // Game start,have fun!