之前定义变量，用 var 关键字，用var的一些问题：1. 变量提升问题 2. 没有块级作用域
let特性：没有变量提升
有 { } 作用域const特性：
const特性：
没有变量提升的问题
const 定义的常量，无法被重新赋值
当定义常量的时候，必须定义且初始化，否则报语法错误
console.log(a); // undefined var a = 10; // 因为var 定义的变量存在变量提升 所以打印结果为 undefined console.log(b) let b = 11; // let 定义的变量不存在变量提升 所以会报错 Uncaught ReferenceError: b is not defined { var c = 12; // 12 } console.log(c) // var定义的变量没有块级作用域 所以打印 12 { let d = 13; } // let定义的变量受 {} 的影响 // const 定义的量，叫做常量，这个常量只要被定义了，那么，今后永远无法重新为 这个常量赋值了 const e = 14; e = 15; console.log(e) // Uncaught TypeError: Assignment to constant variable. const f = {} f.name = 'zs' console.log(f) // {name: "zs"} // 这里的 f 是一个对象 大家都应该知道对于复杂数据类型 f只是保存其在堆上的位置，只要不改变其指针的指向就合法 const e = {} e = {name = 'zs'} console.log(e) // Uncaught SyntaxError: Invalid shorthand property initializer // 注意这里不同于上面，这里是另外在堆中开辟了一个空间，e指向了新开辟的空间所谓的解构赋值，就是把 某个对象中的属性，当作变量，给解放出来，这样，就能够当作变量直接使用了
可以使用 :为解构出来的变量重命名
模板字符串
let arr = [ { id: 1, name: '钢铁侠·托尼·屎大颗', age: 43 }, { id: 2, name: '亚历山大·刚刚', age: 18 }, { id: 3, name: '亚历山大·小郭子', age: 30 } ] // 把上面的 arr 数组，拼接成一个 table ，显示到页面中 let str = '' for (let i = 0; i < arr.length; i++) { /* str += '<tr>' + '<td>' + arr[i].id + '</td>' + '<td>' + arr[i].name + '</td>' + '<td>' + arr[i].age + '</td>' + '</tr>' */ // 之前的写法 // 模板字符串 ${ JS 表达式 } str += `<tr> <td>${arr[i].id}</td> <td>${arr[i].name}</td> <td>${arr[i].age}</td> </tr>` } document.getElementById('tb').innerHTML = str将需要拼接的字符串 用反引号包裹 `` , ${} 花括号内部可写变量或js表达式，会自动帮我们解析startsWith() 和 endsWith()
startsWith() 用来判断字符串，是否以指定的字符开头，如果是，返回值是 true，否则返回 false
endsWith() 用来判断字符串，是否以指定的字符结尾；如果是，返回值是 true，否则返回 false
padStart() 和 padEnd()
//str.padStart(最终长度,用什么填充) const str = '123' // 在前面填充 3个 0 在后面，填充 3个 o const result = str.padStart(6, '0').padEnd(9, 'o') console.log(result)形参默认值
function add(x, y = 0) { return x + y; }解构赋值和形参默认值结合使用
// 解构赋值和形参默认值结合使用 function add({ x, y = 0 }) { return x + y; } const result = add({ x: 3 })rest参数
// ------------------rest参数------------------- function add(...args) { console.log(args instanceof Array) let total = 0 args.forEach(item => { total += item }) console.log(total) } add(1, 2, 3, 4)扩展运算符
// ----------------------扩展运算符-------------- function add(...values) { let total = 0 values.forEach(item => { total += item }) console.log(total) } const arr = [1, 2, 3] add(...arr)如何把 function 改成 箭头函数呢： 先把 function 删掉，然后，在 () 和 { } 之间，添加一个 => 就好了
// 普通函数 function add(x,y) { return x + y } // 箭头函数 let add = (x,y) => { return x + y }箭头函数的特性： 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致；
// 之前写法 document.getElementById('btn').onclick = function () { var _this = this setTimeout(function () { _this.style.backgroundColor = 'red' }, 1000) } // 箭头函数写法 document.getElementById('btn').onclick = function () { // 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致； setTimeout(() => { this.style.backgroundColor = 'red' }, 1000) }箭头函数，本质上就是一个匿名函数
() => {}最标准的箭头函数格式是 ( 参数列表 ) => { 函数体 }
变体1： 如果 箭头函数左侧的 形参列表中，只有一个 形参，那么，( ) 可以省略 ( x ) => { console.log(x) } 可以改造成 x => { console.log(x) }
变体2：如果 箭头函数右侧的 函数体中，只有一行代码，那么， { } 可以省略 (x, y) => {console.log(x + y)} 可以改造成 (x, y) => console.log(x + y)
变体3：如果箭头函数 左侧 只有一个形参，右侧只有一行代码，那么， 左侧的 () 和 右侧的 {} 都可以省略 ( x ) => { console.log(x) } 可以改造成 x => console.log(x)
注意： 如果我们省略了 右侧的 { }， 那么，默认就会把 右侧函数体中的代码执行结果，返回出去 (x, y) => { return x + y } 可以简写成 (x, y) => x + y
