【前端之ES6解构赋值、模板字符串、展开运算符、类语法的基本语法知识】

本文链接：https://blog.csdn.net/qq_44735180/article/details/122299503

本文详细介绍了前端开发中ES6的解构赋值、模板字符串和类语法，包括数组和对象解构、多行字符串、展开运算符在数组合并与参数传递中的应用，以及类的构造函数和原型方法。适合初学者掌握现代JavaScript新特性。

摘要由CSDN通过智能技术生成

前端之ES6解构赋值、模板字符串、展开运算符、类语法的基本语法知识

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

解构赋值
模板字符串
展开运算符
ES6 的类语法
总结

1.解构赋值

快速从对象或者数组中获取成员
解构赋值分成两种：

数组的解构赋值；

// 1. 解构数组
var arr = [ 'hello', 'world' ]
// 开始解构
// 注意: 解构数组使用 []
// a 获取的内容就是 arr[0]
// b 获取的内容就是 arr[1]
var [ a, b ] = arr
console.log(a)
console.log(b)

对象的解构赋值；

// 2. 解构对象
var obj = { name: 'Jack', age: 18 }
// 开始解构
// 注意: 解构对象使用 {}
// 表示定义一个叫做 name 的变量, 获取的是 obj 内一个叫做 name 的成员的值
var { name, age, a } = obj
console.log(name)
console.log(age)
console.log(a)

var a = obj.age
console.log(a) 

// 相当于定义变量 a 从 obj 内获取一个叫做 a 的成员的值
var { a } = obj
console.log(a) 
// 可以起一个别名
// 相当于顶一个 a 变量, 从 obj 内获取一个叫做 age 的值
var { age: a } = obj // => var a = obj.age
console.log(a)

2.模板字符串

模板字符串就是 ES6 内新增的定义字符串的方式
以前:
var str = ‘内容’
var str = “内容”
现在:
var str = 内容
区别:

可以换行书写

var s1 = '今年18的肖言 是御用女主'
var s2 = "今年18的肖言 是御用女主"
var s3 = `
今年18的肖言
是御用女主
`
console.log(s1)
console.log(s2)
console.log(s3)

可以直接在字符串内解析变量

   当你需要解析变量的时候, 直接书写 ${ 变量 }
    var age = 18
    var s1 = `我叫肖言是御用女主, 今年 ${age} 岁`
    console.log(s1)

    var s2 = '我叫肖言是御用女主, 今年 ${age} 岁'
    console.log(s2)

    var s3 = "我叫肖言是御用女主, 今年 ${age} 岁"
    console.log(s3)

3.展开运算符

ES6 的展开运算符…

作用: 展开数组的[] 或者展开对象的 {}

    console.log(100, 200, 300, 400)                结果：100 200 300 400
    var arr = [ 100, 200, 300, 400 ]  
    console.log(arr)                       结果： [ 100, 200, 300, 400 ]
console.log(...arr)					               结果：100 200 300 400

作用1: 合并数组

var arr1 = [ 10, 20 ]
var arr2 = [ 30, 40 ]
var arr3 = [ 50, 60, 70 ]
var arr4 = [ 80, 90 ]
var arr5 = [ ...arr1, ...arr2, ...arr3, ...arr4 ]
console.log(arr5)           结果： [10，20，30，40，50，60，70，80，90]

作用2: 给函数传递参数

var arr1 = [ 10, 20, 17, 7, 31, 22, 12 ]
// var max = Math.max(10, 20, 17, 7, 31, 22, 12)                结果：31
// var max = Math.max(arr1)                                   结果：报错
var max = Math.max(...arr1)                                     结果：31
console.log(max)

展开对象

var obj = { name: 'Jack', age: 18 }
console.log(obj) 
// 作用1: 用来复制对象
// 注意: 展开书写的顺序问题, 在有相同成员的时候
var obj2 = {
  gender: '男',
  ...obj,
  name: 'Rose',
}
console.log(obj2)

4.ES6 的类语法

语法:
class 类名 {
// 原先 ES5 内的构造函数体
constructor () {}
// 直接书写原型上的方法即可
// 书写静态属性和方法, 需要加上一个 static 关键字即可
}

注意: 必须和 new 关键字连用；不和 new 关键字连用, 会直接报错。

  <script>
    function Person(name, age) {
      this.name = name
      this.age = age
    }

    // 原型添加一个方法
    // 2. 原型上的方法, 目的是为了给 实例使用
    Person.prototype.sayHi = function () { console.log('hello world') }

    // 书写静态属性和方法
    Person.a = 100
    Person.go = function () { console.log('跑起来') }

    var p1 = new Person('jack', 18)
    console.log(p1)
    p1.sayHi()

    // 1. 构造函数本质还是一个函数, 可以不和 new 关键字连用
    var p2 = Person('Rose', 20)
    console.log(p2)

    console.log(Person.a)
    Person.go()
    // 类的书写
    class Person {
      constructor (name, age) {
        // 这里按照 ES5 的构造函数体书写
        this.name = name
        this.age = age
      }

      // 直接书写原型上的方法即可
      sayHi () { console.log('你好 世界') }

      // 静态属性
      static a = 100

      // 静态方法
      static go () { console.log('running') }
    }

    var p1 = new Person('张三', 18)
    console.log(p1)
    p1.sayHi()

    // 使用静态属性和静态方法
    Person.go()
    console.log(Person.a)
  </script>