ES6基础

一、ES6概述
JavaScript脚本语言贡献给ECMA组织用于制定前端编程语言标准，标准化组织推出了ECMAScript语法标准
二、变量声明扩展

• let：声明变量，存在块级作用域（大括号范围也可以是一个作用域）、没有变量预解析、不能重复声明等等
• const：声明常量，常量一旦声明不能改动
  ① let声明变量

let name = "大牧"
console.log(name, "name")
// 1、不能重复声明
// let name = "damu"
//Uncaught SyntaxError: Identifier 'name' has already been declared
// 未处理的  语法  错误：  标识符     name 已经被声明过了
// 2、预解析：不支持预解析功能
// console.log(age)
// Uncaught ReferenceError: Cannot access 'age' before initialization
// 为处理的  引用    错误：  不能在age变量声明之前访问
let age = 22
// 3、全局变量.局部变量
function fn() {
  let gender = "男"
  console.log("函数内：", gender)
}
fn()
// console.log("函数外：", gender) // gender没有定义
// 4、块级作用域
if (true) {
  let job = "需求分析工程师"
  // 声明的job只能在当前花括号内部使用：块级作用域
  }
// console.log(job, "job") // job没有定义
// 5、全局变量和循环
// for (let i = 0; i < 10; i++) {
//   console.log(i) // 0 1 2 3 4 5 6 7 8 9
// }
for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i)  // 0 1 2 3 4 5 6 7 8 9
  })
}

② const声明常量（一旦创建不能更改）

// 1、基础语法
const maxWords = 2000 // 常量
console.log("最大字数：", maxWords)
// maxWords = 2200 // 修改
// Uncaught TypeError: Assignment to constant variable.
// 未处理的  类型错误：  修改       了  一个常量-> 不能修改常量数据
// 2、注意：可以修改对象内部数据
// 声明了对象
const person = { name: "大牧", age: 22 }
// person = { name: "jerry" } // 不允许：直接修改了一个新对象
// 相当于重新创建了一个对象赋值给person
// Uncaught TypeError: Assignment to constant variable.
// 未处理的  类型错误：  修改       了  一个常量-> 不能修改常量数据
person.name = "damu"// 允许：修改了对象的属性，没有修改对象本身
console.log(person, "person")
// 理解：给person常量赋值了一个人- 张三
//  不允许：给person常量赋值一个人- 李四
//  允许：给张三~原来是紫色衣服，修改成白色衣服

三、运算符扩展

• spread延展运算符、展开运算符
• rest剩余参数运算符
  （1） spread延展运算符

// 语法： ...变量，将变量中的数组/对象数据进行展开
// 经常用于变量中数据的复制
// 1、数组展开操作
let arr = [1, 2, 3, 4, 56, 7, 8, 9]
console.log(arr) // (8) [1, 2, 3, 4, 56, 7, 8, 9]
// 展开运算符
console.log(...arr) // 1 2 3 4 56 7 8 9
// 复制数组，先展开数组中的数据，然后使用方括号包裹成新数组
let arr2 = [...arr]
arr2.push("新数据") // 操作arr2数组，对arr1没有影响
console.log('arr', arr)
console.log('arr2', arr2)
// 2、对象展开操作
let person = { name: "tom", age: 22 }
console.log(person)
// console.log(...person) // 不能这样展开，表达式存在语法问题
// 复制对象
let person2 = { ...person }
person.gender = "男" // 修改person属性，对person2对象没有影响
console.log(person)
console.log(person2)
console.log(person === person2)

（2） rest剩余参数运算符
经常用在函数的形式参数中（参数的最后一个位置），用于接受剩余的所有参数

// 需求：一个函数需要处理一些数据
// 只有第一个数据确定的，其他数据的个数不确定
// 1、原生JS，给函数提供了一个特殊变量arguments，可以接受函数接受的所有参数
function intro() {
  console.log("函数接受的参数;", arguments[0])
  // arguments，会默认接受函数的所有参数，没有办法精确处理
  // arguments在项目开发中很少使用
  console.log("函数剩余的参数：", arguments)
}
intro("tom")
intro("tom", 22)
intro("tom", 22, "男")
// 2、ES6提供了剩余参数运算符
// args参数，用于接收除了name以外其他的所有参数
function introduction(name, ...args) {
  console.log("姓名：", name)
  console.log("其他资料：", args)
}
introduction("jerry")
introduction("jerry", 22)
introduction("jerry", 22, "女")

四、数据类型扩展
ES6中为了让数据的封装更加完善，提供了一种新的基本类型：Symbol，用来表示唯一的数据，在项目中经常用来封装只读的属性或者私有属性，基本语法：创建匿名的Symbol对象、创建具名的Symbol对象

// 创建一个Symbol对象
var a1 = Symbol()
// 语义上提升，可以给一个Symbol起个名字
// "name"名称没有实际意义，语义上的一个名称，提高代码的可读性
var a2 = Symbol("name")

五、数组扩展

• Array.of()：创建数组对象
• Array.from()：将类数组对象转换成数组

// 1、创建一个数组，包含1,3,5三个元素
// 原生JS
let a1 = [1, 3, 5]
let a2 = new Array(1, 3, 5)
// ES6
let a3 = Array.of(1, 3, 5)
console.log(a1, a2, a3)
// 针对对象的操作，Array.of()是对new Array()的补充
// 2、创建一个包含10整数的数组
let s1 = [10]
let s2 = new Array(10)  // 原生JS创建对象的方式不可用
let s3 = Array.of(10)   // ES6 Array.of()就是对new Array()的补充
console.log(s1, "s1")
console.log(s2, "s2")
console.log(s3, "s3")
// 3、Array.from()：将类似数组的结构，转化成数组进行使用
// let _ps = document.querySelectorAll("#title p")  // NodeList
let _ps = document.getElementsByTagName("p")        // HTMLCollection
console.log(_ps)
// 类似数组的结构，直接转换成数组进行操作，就可以使用数组的函数
_ps = Array.from(_ps)
console.log(_ps)
// 调用数组遍历函数，遍历数据
_ps.forEach(function (item) {
  console.log(item)
})

六、字符串扩展
（1） 模板字符串
基本语法：

// 声明变量
let name = "大牧"
let age = 20
let gender = "男"
// 原始拼接
console.log("姓名：" + name + "; 年龄：" + age + "; 性别：" + gender)
// ES6 提供了一种 模板字符串 语法
// 模板字符串：允许在字符串中直接使用变量、函数、简单运算
console.log(`姓名：${name}，年龄：${age}，性别：${gender}`)

（2） 字符串函数

• startsWith(s)：判断字符串是否以指定字符串开头
• endsWith(s)：判断字符串是否以指定字符串结束
• padStart(length, fill)：指定字符串输出长度，不够的位置前面补fill字符
• padEnd(length, fill)：指定字符串输出长度，不够的位置后面补fill字符
  七、对象扩展
  （1） 属性函数简写

// 1、属性函数简写
// 原生对象
let name = "汤姆"
let tom = {
  name: name,
  age: 22,
  play: function () {
    console.log(`${this.name}在游戏中...`)
  }
}
// ES6简写语法
let tom2 = {
  name,  // 如果name: name，属性名称和值相同，可以简化
  age: 23,
  study() {  // 函数语法，省略function关键字
    console.log(`${this.name}编程中...`)
  }
}

（2） 支持属性运算符

// 2、属性运算符
let jerry = {
  name: "杰瑞" // 原生JS中的写法
}
// 属性运算符：和数组语法类似，主要出现在对象的属性名称上进行使用
// 作用1：在一定程度上对对象的属性名称进行了保护
// 作用2：属性名称，可以动态变化
let jerry2 = {
  ["n" + "ame"]: "杰瑞" // ES6提供的属性运算符，属性名称支持表达式运算
  // name: "杰瑞"
}

（3）Object扩展

• Object.assign(tgt, val1, val2 ,...)：对象合并，将多个对象合并成一个对象
• Object.keys()：获取对象中的所有属性
• Object.values()：获取对象中的所有值

 // 3、Object扩展
let tom11 = { "name": "tom" }
let tom22 = { "age": 20 }
// assign(target, v1, v2, ...)：将v1, v2,...多个对象合并到target中
Object.assign(tom11, tom22)
console.log(tom11)
// keys()：经常用于辅助判断，对象是否包含某个属性
console.log(Object.keys(tom11)) // ['name', 'age']
// values()：经常用于辅助读取(Symbol)私有属性数据
console.log(Object.values(tom11)) // ['tom', 22]

（4） JSON扩展

• JSON.stringify(jsonObj)：将一个json对象转换成json格式字符串
• JSON.parse(jsonStr)：将一个json格式字符串转换成json对象

// 4、JSON函数扩展
// json对象
let shuke = { name: "舒克", age: 18 }
// json对象，由于它的操作便捷性，在项目中使用最为频繁
// 直接存储shuke对象
// sessionStorage.setItem("shuke", shuke)
// let value = sessionStorage.getItem("shuke")
// console.log(value, typeof (value), "本地存储中读取的数据")
// 转换成字符串：方便网络传输和存储
let shukeStr = JSON.stringify(shuke)
console.log(shukeStr)
// sessionStorage.setItem("shukeStr", shukeStr)
// 转换成json对象，方便数据的使用
let shukeObj = JSON.parse(shukeStr)
console.log(shukeObj)

八、赋值扩展-解构赋值
（1） 什么是解构赋值
ES6根据数组的结构、对象的结构，按照结构的形式进行解析赋值的方式，称为解构赋值，如：

// 数组
var a = [1, 2, 3]
// 解析结构：[数据1, 数据2, 数据3]
// 根据结构，进行变量赋值
var [x1, x2, x3] = a
// x1=1  x2=2  x3=3

（2） 数组解构赋值

// 1、数组解构
let brr = [1, 2, 3, 4, 5]
// 完全解构：将数组中的数据全部提取出来
var [a1, a2, a3, a4, a5] = brr
console.log(a1, a2, a3, a4, a5)
// 不完全解构：按照结构顺序提取数据[重点]
var [b1, b2] = brr
console.log(b1, b2) // 提取第一个和第二个数据
var [, , b3, b4] = brr // 提取第三个和第四个数据
console.log(b3, b4)
// 解构失败：超出结构的数据，下面的c6解构失败的数据
var [c1, c2, c3, c4, c5, c6] = brr
console.log(c1, c2, c3, c4, c5, c6)
// 解构默认值：如果某个数据解构失败，可以使用默认数据
var [d1, d2, d3, d4, d5 = "默认值", d6 = "默认值"] = brr
console.log(d1, d2, d3, d4, d5, d6)

(3)对象的结构赋值

// 2、对象数据解构
let tom = { name: "汤姆", age: 20, gender: "男", email: "tom@163.com" }
// 完全解构：根据属性名称，将所有属性进行结构
var { name, age, gender, email } = tom
console.log(name, age, gender, email)
// 不完全结构
var { name, email } = tom
console.log(name, email)
// 解构失败: 对象没有phone属性，所以解构失败得到undefined
var { name, age, phone } = tom
console.log(name, age, phone)
// 解构默认值
var { name, age, phone = "16699990000" } = tom
console.log(name, age, phone)
// 解构重命名
var { name: n, age: a } = tom
console.log(n, a) // 不能再使用name,age了
// console.log(name, age)

九、关于变量
操作对象属性时出现的问题

// 属性读取，经常出现的错误
const img = document.querySelector("img") // img = null
// 操作img属性src：如果img不存在就会报错，导致程序崩溃退出
// img.src = "images/1.jpg"
// 问题：如何判断一个对象不能为空，再去操作它的属性？
// 如果img存在的话，操作src属性
// ① if判断
if (img) {
  console.log(img.src)
}
// ② 逻辑运算符: 如果img存在的话，读取img.src属性；如果不存在返回null
console.log(img && img.src, "获取src属性")
// ③ 出现了一种新的运算符:属性控制运算符 ?.
// img?.src  尝试获取img的src属性，如果不存在就返回undefined
console.log(img?.src, "获取src属性")