[JavaScript知识库]2021-10-17 ES6

变量声明

ES6语法规范中，推出了新的变量声明方式

// 声明一个变量
let 变量名称 = 值;

// 变量不能重复声明
let addr = "郑州市"
console.log(addr, "addr变量")

// Uncaught SyntaxError: Identifier 'addr' has already been declared
// 未处理的  语法   错误：  名称为       addr 已经被声明过，不能重复声明
// let addr = "北京市"
 // console.log(addr, "addr变量")

① 变量不能重复声明
② 变量预解析问题：
ES6语法中，严格遵循变量先声明后使用、就近原则的规则；解除了变量预解析的操作方式；
ES6语法中在变量所在的作用域空间中，声明之前使用变量称为：暂时性死区！
③ 块级作用域：
ES6语法中，不再将变量的访问范围只划分为函数内部(局部变量)和函数外部(全局变量)
而是在之前的基础上提供了块级作用域，任何变量在访问时只能被当前花括号包含的范围访问，全局变量和局部变量的基础上提供了更加精确的作用域空间

常量

1、什么是常量

常量也是一种变量，变量中一旦存储数据就不允许修改！
常量的命名规则：

• 名称为字母、数字、下划线和$符号组成，数字不能开头
• 见名知意
• 常量由一个或者多个英文单词组成，单词全部大写；多个单词之间使用下划线分隔

2、声明语法

*// 声明一个常量
 	 let 变量名称 = 值;**
	const MAX_AGE = 120

基本类型Symbol

1、什么是Symbol

• ECMAScript 6语法中提出的一种基本数据类型，每个取值都是唯一的！
• 一个基本数据类型
  - JS中有6种基本类型(常用)：String/Number/Boolean/Null/Undefined/Symbol
  **- JS中有7种基本类型：**String/Number/Boolean/Null/Undefined/Object/Symbol

2、Symbol使用语法

作用：为了获取一个唯一的值对象！
语法：

// 基本语法：获取一个唯一的值对象
	let s = Symbol()

// 拓展语法：使用描述符获取一个唯一的值对象
// 描述符的作用，就是为了见名知意，知道这个Symbol()值对象的作用
	let s = Symbol('描述符')

基本使用场景：

// 创建一个声明用户账号的唯一对象
let username = Symbol()		// 唯一
// 创建一个声明用户密码的唯一对象
let password = Symbol()		// 唯一

console.log(username == password)    // false

// 创建一个声明用户账号的唯一对象
let username = Symbol('username')		// 唯一
// 创建一个声明用户密码的唯一对象
let password = Symbol('password')		// 唯一

小总结：
① Symbol是ES6提供的一种新的基本类型
② Symbol()是用来获取唯一的值对象，没有一个具体的数据值
③ Symbol主要用来在项目中模拟私有属性，用于数据保护的作用

字符串

1、字符串常见操作

2、ES6模板字符串

原生JS中关于字符串的拼接问题

// 1、原生JS字符串拼接
        let name = "offcn"
        let year = "2021"
        console.log("公司名称：" + name + ", 年份：" + year)

模板字符串：字符串中直接操作变量的表达式

• 字符串使用反引号包含
• 字符串中使用固定语法**${变量}**操作变量数据

	let name = "offcn"
	let year = "2021"
 	// 2、模板字符串，在字符串中直接操作变量
	console.log(`公司名称：${name}，年份：${year}`)

3、ES6字符串函数

六、数组

1、原生JS数组

创建数组

// 创建一个数组
var arr = []
var arr2 = new Array()

原生JS中存在的问题：创建一个只包含一个数值12的数组？

// 简洁语法
var arr = [12]
// 标准语法[问题]
var arr2 = new Array(12)
[empty, empty, empty, empty, empty, empty, empty...]

2、ES6数组扩展

ES6结合项目中的数组的常见使用场景，提供了两个操作函数
① Array.of()

• 作用：创建数组，优化了原生JS中的new Array()语法
  ② Array.from(类数组)
• 作用：将类数组转化成数组对象

七、对象扩展

1、JSON子面量对象扩展

// 模拟接受了对象需要的数据[模拟参数]
        let name = "汤姆"
        let age = 20
        // 1、字面量对象
        let tom = {
            name: name,
            age: age,
            study: function() {
                console.log(this.name, "学习中..")
            }
        }
        console.log(tom.name)
        tom.study()

① 属性简化
ES6语法中，如果一个属性的名称和保存属性值的变量同名，可以简化编写

let name = "汤姆"
let age = 20

// 1、字面量对象
let tom = {
name: name,		// 原生JS中的语法
         // age: age,
    age,              // ES6简化后的语法
        ...
}

② 函数简化
JSON字面量对象中的函数，从原始的使用function关键字声明，简化为简写方式

let tom = {
            name,
            age,
            //study: function() {						// 原生	JS原始语法
            //    console.log(this.name, "学习中..")
            //}
     study () {								// ES6简化语法
                console.log(this.name, "学习中..")
            }
	}

八、Set集合

1、什么是Set

Set本身是集合(数学)的意思，在代码中用于存放不能重复的多个数据！

2、声明Set

标准语法

// 声明一个集合
let s = new Set()

// 声明包含数据的集合
let s2 = new Set([1,2,3,3,4,4,5])   // Set(){1,2,3,4,5}

3、Set中常见操作

• ?s.add(dat)：在集合中添加一个数据
• ?s.has(dat)：判断某个数据是否在集合中
• ?s.delete(dat)：从集合中删除一个数据
• ?s.clear()：清空集合中所有数据

九、Map映射

1、什么是Map

原生JS语法中，存在一种特殊的对象：JSON字面量对象，通过key:value的形式存储特定的数据，但是同样有一定的限制：key值只能是字符串！

ES6语法中针对JSON字面量对象中key只能是字符串的情况进行了扩展，可以让key是任意数据类型的数值，如可以是标签对象！扩展提供了Map类型的对象
总结：
什么是map？就是一种特殊的JSON字面量对象，key值可以是任意类型的数值！

2、声明Map对象

基本语法

// 创建一个map对象
let m = new Map()

操作数据

// 添加数据
m.set('name', "汤姆")
m.set('age', 22)

// 查询某个属性是否包含
m.has('name')    // true

// 根据属性查看某个值
m.get('name')   // 汤姆

// 查看所有属性名称
m.keys()

// 查看所有属性的值
m.values()

// 删除某个属性
m.delete('age')			// {'name'=>'汤姆'}

// 清空映射
m.clear()                // {}