JavaScript ES6 四

JavaScript ES6

JavaScript 模板字符串

我们以前进行在一个字符串中使用我们的变量的话，使用的是我们的 + 直接实现的拼接

但是现在的话我们是可以直接使用我们的模板字符串实现一些基本的字符串和变量的拼接吧

${} 实现在一个字符串中实现拼接我们的变量，但是最终使用的是我们的反引号将字符串进行书写

const message = "hello world"
​
console.log(`我想对世界说的话是: ${message}`)  // 我想对世界说的话是: hello world

在后面我们的书写我们的 React 的时候，我们是可以使用模板字符串的

vuejs 的话实际上的话，对我们的 JS 的基础实际上要求不是很高的

但是总不过的话，如果你是使用的是我们的 React 框架的话，对 JS 的基础实际上要求还是蛮高的

使用模板字符串的好处就是我们在编写模板字符串的时候，我们是可以直接使用 JS 中定义的一些变量的呐！！！

我个人而言的话，最开始就是书写的是 Vue3（Vue2 没用过）和 python的Django | Flask | Tornade

但是后面接触了 React 后，是真的爱上了 这个框架的，所以说后面慢慢来吧，我也是会平时多分享一些自己对某个知识点的见解

• React 实际上的话书写代码是十分的自由的
• Vue2 的话格式太固定了（只是知道怎么写，但是最后的完成一个项目的话，我绝对不使用这个框架进行开发，呜呜呜！！！）
• Vue3 的话也是挺不错的，setup语法糖的出现，最后的代码书写也是蛮自由的呐！！！

JavaScript 函数参数默认值

函数参数默认值的话，就是函数参数的传入的时候，可能为空（“因为JavaScript 太自由了”）

这个时候为了我们的逻辑严谨，所以说只能在函数内部进行参数的判断才是最合理的呐！！！

需要注意一点的是，我们函数的默认参数的话尽量把默认参数书写在函数形参之后

有默认参数的形参是不会计算在 length 之内的，以及默认参数后面的参数也是不会计算在内的

/**
 * 函数默认值写法展示一:
 * @param {number | string | Null | undefined | Array | Object} param01
 * @param {number | string | Null | undefined | Array | Object} param02
 */
function func01(param01, param02) {
    // 默认值写法一
    param01 = param01 ? param01 : 0
    param02 = param02 ? param02 : 0
​
    console.log(param01, param02)
}
​
​
/**
 * 函数的默认值写法二：
 * @param {number | string | Null | undefined | Array | Object} param01
 * @param {number | string | Null | undefined | Array | Object} param02
 */
function func02(param01, param02) {
    param01 = param01 || 0
    param02 = param02 || 0
​
    console.log(param01, param02)
}
​
​
/**
 * 函数参数默认值写法严谨三:
 * @param {number | string | Null | undefined | Array | Object} param01
 * @param {number | string | Null | undefined | Array | Object} param02
 */
function func03(param01, param02) {
    param01 = (param01 === null || param01 === undefined) ? "default value" : param01
    param02 = (param02 === null || param02 === undefined) ? "default value" : param02
​
    console.log(param01, param02)
}
​
​
/**
 * 函数参数默认值写法严谨四:
 * @param {number | string | Null | undefined | Array | Object} param01
 * @param {number | string | Null | undefined | Array | Object} param02
 */
function func04(param01, param02) {
    param01 = param01 ?? 0
    param02 = param02 ?? 0
​
    console.log(param01, param02)
}
​
​
/**
 * 函数参数默认值写法严谨五:
 * @param {number | string | Null | undefined | Array | Object} param01
 * @param {number | string | Null | undefined | Array | Object} param02
 */
function func05(param01= "我是默认值", param02= "我是默认值") {
    console.log(param01, param02)
}
​
​
/**
 * 默认参数六
 * @param {number | string | Null | undefined | Array | Object} param01
 * @param {number | string | Null | undefined | Array | Object} param02
 */
function func06({param01, param02} = {param01: "param01", param02: "param02"}) {
    console.log(param01, param02)
}
​
// 遇到了这种默认参数的书写，直接粘贴赋值模板即可 cv 工程师
func01()
func02()
func03()
func04()
func05()
func06()

JavaScript 箭头函数

• 箭头函数是不具有 显式原型 prototype 的
• 箭头函数不具备 constructor 属性，所以说就不能作为构造函数来使用的功能，就不能够使用 new 操作符
• 所以说这个时候我们就需要使用 class 来进行定义我们的类了
• 箭头函数不绑定 this | arguments | super 参数

JavaScript 展开语法（Spread syntax）

在我们的 JavaScript 中的展开语法的话是实现的是浅拷贝

• 什么是浅拷贝，什么是深拷贝呐？？？

  • 浅拷贝就是对表面的值进行一次拷贝，这个值包含了数值以及内存地址

  • 深拷贝就是实现了全新的拷贝，不仅仅只对数值进行了一次拷贝，而且引用是生成了新的引用的

    • 深拷贝实现的最简单的思路是使用 JSON 来实现

• 一个对象赋值给另一个对象，这个过程是引用赋值

展开语法

• 可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面实现展开
• 还可以在构造字面量对象的时候，将对象表达式按照 key-value 语法的方式展开

使用场景

• 函数调用时使用
• 数组构造时使用
• 构建对象字面量时

const obj = {
    name: "76433",
    age: 18,
    info: {
        massage: "obj字面量对象"
    }
}
​
const obj01 = {
    ...obj,  // 使用展开语法获取键值对
    height: 172
}
console.log(obj01)  // { name: '76433', age: 18, height: 172 }
​
// 展开语法实现的时浅拷贝
obj01.name = "水逆信封"
console.log(obj01.name, obj.name)  // 水逆信封 76433
​
​
obj01.info.massage = "obj01字面量对象"
console.log(obj01.info.massage, obj.info.massage)  // obj01字面量对象 obj01字面量对象

• 同时这里的话我们就需要进行区分深拷贝浅拷贝以及引用赋值的区别

JavaScript 数值的表示

• 二进制的数值就是以 0b 开头

• 八进制的数值就是以 0o 开头
• 十六进制数值就是以 0x 开头
• 当我们遇见了一个十分长的数字出现的时候，直接可以使用 _ 来实现连接每一位的数字： 100_000_000

JavaScript Symbol数据类型的使用

• Symbol 数据类型就是 ES6 新增的基本数据类型，符号的意思

• 出现 Symbol 数据类型的原因：

  • 在以往的使用其他的数据类型表示的属性的话，是很容易引起属性名的冲突的
  • 所以说 Symbol 的出现就是为了解决属性名冲突的后果
  • 通过 Symbol 可以实现的是保证每一个描述符一直是独一无二的，没有任何的命名的冲突产生

const s1 = Symbol()
​
const obj = {
    [s1]: s1
}
​
console.log(obj)
console.log(Object.getOwnPropertySymbols(obj))
​
​
const s2 = Symbol()
console.log(s2 === s1)  // false
// Symbol 数据类型实现的永远是我们的独一无二的
​
/**
 * Symbol 内部的可以实现添加的参数是 number | string
 * 这个就是 Symbol 的 description
 */
console.log(s2.description)  // undefined
​
​
​
const s3 = Symbol("76433")
console.log(s3.description)  // 76433

• 同时我们是可以通过我们的 Symbol.for 来实现得到两个一摸一样的 Symbol
• s2 和 s3 的来源一样，描述符一样，这个时候两者就保证了相同

const s1 = Symbol("aaa")
​
const s2 = Symbol.for(s1.description)
const s3 = Symbol.for(s1.description)
​
console.log(s2 === s3)  // true

同时推荐了解一个 Set | Map 的数据结构