1. 变量和常量

变量

众所周知JS中可以通过var进行变量声明，但是这种声明可能会出现一些不经意的覆盖

ES6中就提出了let的声明方式

let count = 0
count++

可以看到和var没啥区别

ES6同时还提出了块级作用域概念，大概意思是除了普通代码块以外，还可以直接在代码中输入一个大括号，表示一个独立的作用域

{
let count = 0
count++
}
console.log(count) //这里是读不到的

这里发现count在括号外是读不到的，因为作用域不同，简单可以理解为局部变量，避免了一个变量名在多个地方使用造成冲突

常量

所谓常量，就是创建之后不能被修改的容器，一般在声明的时候，命名采用纯大写结构，多部份下划线分隔

const BASE_URL = 'www.xxc0609.top'

这种用于和服务端做交互时，通常一个web项目接口的基础地址都是一样的，为了防止每次书写时拼错或不小心修改，就可以用const的形式声明，const声明的常量后期是不允许修改的

在不熟悉的情况下，一般操作都使用常量做声明，当发现这个数据需要做修改的时候，再把它改成变量

2. 模板字符串

在JS中可以通过单引号或双引号书写字符串

在ES6的语法中，可以使用反引号进行设置 `

        const str1 = 'abc'
        const str2 = "abc"
        const str3 = `efg${str1}
            这里也是内容          
        `
        console.log(str3)

反引号和单双引号的区别就是，它可以引入外部变量，同时内部的换行操作也会体现在页面中

这么写的好处是，避免了传统字符串中，想要添加变量，需要用加的方式书写（const str = 'abc' + 'defg')

3. 解构赋值操作

解构赋值适用于数组和对象两种类型

数组的解构操作

正常情况下操作数组里面的元素是这种形式

        const arr = [1, 2, 3]
        const v1 = arr[0]
        const v2 = arr[1]

但是这种操作太过于繁琐

所以可以通过解构的方式进行操作，快速从数组中进行数据保存

        const [a, b, c] = [1, 2, 3]
        console.log(a, b)

在对应的位置填写名称直接赋值

对象的解构操作

同样，先给一个对象

        const obj={
            username:'熊大',
            age:20,
            gender:'male'
        }

由于对象本身是无序的，无法像数组一样按照位置顺序进行名称分配，而是要按照键名进行存储

      const { username, age:userage, ...otherInfo } = {
            username: '熊二',
            age: 20,
            gender: 'male',
            category: 'user'
        }
        console.log(username,userage,otherInfo)

这样就被存储了，如果不想使用原始的名称，可以在后面通过“:”进行自定义别名，就像这个age被更改为userage

除了通过键名被存储，还可以通过“...”的方式获取其他没有被存储的剩余部分，这个功能对数组同样可用

4. 数组和对象的扩展功能

扩展运算符

假设有两个数组

const arr1 = [1,2,3]
const arr2 = [4,5,6]

这里想将arr1和arr2的内容放到arr3里去

        const arr1 = [1, 2, 3]
        const arr2 = [4, 5, 6]
        const arr3 = [-1, 0, ...arr1, ...arr2, 7, 8]
        console.log(arr3)

可以注意到，这里也使用了“...”，但是里的含义和上面的解构赋值有所不同

如果“..."出现在了const前面这个区域，那么他的意思就是解构赋值功能，如果出现在了赋值符号"="之后，就是代表一个普通的扩展运算符，作用是把这个元素里所有的键展开，并填充在所在位置；拿...arr1举例，就相当于把...arr1换成了1,2,3再填充进arr3

数组里可以，对象里也可以

const obj1 = {
            a: 1,
            b: 2
        }
        const obj2 = {
            c: 3,
            d: 4
        }
        const obj3 = {
            name: '光头强',
            ...obj1,
            ...obj2
        }
        console.log(obj3)

这里顺序不一样无所谓，因为对象是无序的

数组方法Array.from()

在写JS代码时，经常会遇到数组和伪数组交替使用的情况，很不方便

所以在ES6中提供了一种方式Array.from，它可以让我们把伪数组转化成真实的数组

在函数中可以使用arguments来访问所有传入的实参

        function fn() {
            Array.from(arguments).forEach(function (item) {
                console.log(item)
            })
        }
        fn(1, 2, 3, 4)

通过把arguments这个伪数组转化成真实的数组，让他可以直接用数组的方式遍历

对象方法Object.assign()

Object.assign用于对对象的拷贝（浅拷贝）

        const objA = {
            name: '吉吉国王',
            age: 20
        }
        const objB = Object.assign({}, objA)
        console.log(objA, objB)

可以看到，objB被拷贝成和objA完全一样数据，但是二者还是不同的两个对象

Object.assign可以接收多个参数，可以把多个参数功能合并到一个里面

        const objA = {
            name: '吉吉国王',
            age: 20
        }
        const objB = {
            gender: 'male'
        }
        const objC = Object.assign({}, objA, objB)
        console.log(objC)

可以看到，objC合并了objA和objB的所有属性

5. Class

class是类的功能，可以用来帮助我们快速生成多个对象

        class A {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
        }
        const a1 = new A('毛毛', 18)
        console.log(a1)

const a1 = new A表示我们要基于A这个类型去创建一个类的实例，并且给他分配属性name='毛毛',age=18

同时，class里可以添加方法

        class A {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            intruduce() {
                console.log(`我的名字是${this.name},我的年龄是${this.age}`)
            }
        }
        const a1 = new A('毛毛', 18)
        console.log(a1)
        a1.intruduce()

来整个看这个部分

class A{ }：定义了一个类，这个类叫A

constructor( )：创建对象时初始属性放在这里

intruduce( )：这个类里的对象都能使用的方法

new A（’毛毛',18)：根据这个模板造出一个对象

a1.intruduce( )：调用方法

ES6中还提供了继承功能

就比如说想要基于A类派生出一些新的功能，并实现B类

这里可以叫A类是B类的父类，B类则是A类的子类

为了更好的理解，给父类改名叫person，子类叫student，现在需要把”人“这个类型继承给”学生“

        class person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            intruduce() {
                console.log(`我的名字是${this.name},我的年龄是${this.age}`)
            }
        }
        const a1 = new person('毛毛', 18)
        // a1.intruduce()

        class student extends person {
            constructor(name, age, grade) {
                super(name, age)
                this.grade = grade
            }
            study() {
                console.log(`${this.name}现在在上${this.grade}`)
            }
        }
        const a2 = new student('小夏', 20, '大一')
        a2.intruduce()
        a2.study()

要注意的是要在继承的子类上先写一个super的调用

6. 箭头函数

箭头函数就是对匿名函数的简写方式

正常的匿名函数实现一个简单的功能要写一堆，太麻烦了

        const getSum1 = function (n) {
            return n + 3
        }

可以使用简单的箭头函数替换

        const getSum2 = n => n + 3

箭头前面是参数值，后面的是返回值，可以不用写return

如果是多个参数，则需要加括号

        const getSum3 = (n1, n2) => n1 + n2
        console.log(getSum3(10, 20))

如果参数实在太多，可以用”...“表示剩下的

const getSum4 = (n1, n2, ...other) => console.log(n1, n2, other)
getSum4(10, 20, 50, 100, 200)

这个RUST参数other可以接收未被前面形参对应接收的实参，并且以数字的形式保存处理，RUST参数一定要写在函数形参列表的最后

如果处理的功能比较复杂，可以在箭头后加大括号写内容，但是这时就需要自己写return了

        const getResult = arr => {
            let sum = 0
            arr.forEach(item => sum += item)
            return sum
        }
        console.log(getResult([1, 2, 3, 4, 5]))

参考代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>111</p>
    <script>

        const str1 = 'abc'
        const str2 = `efg${str1}
        这也是内容
        `
        console.log(str2)

        const arr = [1, 2, 3]
        const v1 = arr[0]
        const v2 = arr[1]

        const [a, b, c] = [1, 2, 3]
        console.log(a, b)


        const { username, age: userage, ...otherInfo } = {
            username: '熊二',
            age: 20,
            gender: 'male',
            category: 'user'
        }
        console.log(username, userage, otherInfo)

        const arr1 = [1, 2, 3]
        const arr2 = [4, 5, 6]
        const arr3 = [-1, 0, ...arr1, ...arr2, 7, 8]
        console.log(arr3)

        const obj1 = {
            a: 1,
            b: 2
        }
        const obj2 = {
            c: 3,
            d: 4
        }
        const obj3 = {
            name: '光头强',
            ...obj1,
            ...obj2
        }
        console.log(obj3)

        function fn() {
            Array.from(arguments).forEach(function (item) {
                console.log(item)
            })
        }
        fn(1, 2, 3, 4)

        const objA = {
            name: '吉吉国王',
            age: 20
        }
        const objB = {
            gender: 'male'
        }
        const objC = Object.assign({}, objA, objB)
        console.log(objC)

        class person {
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            intruduce() {
                console.log(`我的名字是${this.name},我的年龄是${this.age}`)
            }
        }
        const a1 = new person('毛毛', 18)
        // a1.intruduce()

        class student extends person {
            constructor(name, age, grade) {
                super(name, age)
                this.grade = grade
            }
            study() {
                console.log(`${this.name}现在在上${this.grade}`)
            }
        }
        const a2 = new student('小夏', 20, '大一')
        a2.intruduce()
        a2.study()

        const getSum1 = function (n) {
            return n + 3
        }
        const getSum2 = n => n + 3
        const getSum3 = (n1, n2) => n1 + n2
        console.log(getSum3(10, 20))
        const getSum4 = (n1, n2, ...other) => console.log(n1, n2, other)
        getSum4(10, 20, 50, 100, 200)
        const getResult = arr => {
            let sum = 0
            arr.forEach(item => sum += item)
            return sum
        }
        console.log(getResult([1, 2, 3, 4, 5]))
    </script>

</body>

</html>