es6 知识体系图

转载

mob64ca14157da7 2024-10-01 11:08:10

文章标签 es6 知识体系图数组字符串 ES6 文章分类 架构后端开发

1.什么是ES6

ES全称是ECMAScript。它是由ECMA国际标准化组织，制定的一套脚本语言的标准化规范。

ES6实际上是一个泛指，泛指ES2015及后续的版本。但是本章我们学的是ES2016。

2.为什么要学习ES6

每一次标准的诞生都意味着语言的完善、功能的加强。JavaScript语言本身就存在很多令人不满意的地方。

函数较少、很多功能需要自己去写

语法松散，实现相同的功能，不同的人可能会写出不同的代码。

3.ES6新语法

3.1Let

Let关键字是ES6中新增的一个声明变量的关键字。

Let声明的变量只在所处于的块级有效，作用范围变得更小了

<script>
    if(true) {
      let a = 10
    }
    console.log(a)
  </script>

注意：使用let关键字声明的变量才有块级作用域的作用，var声明的不具备这个特性。

Let声明的变量不存在变量提升

<script>
    console.log(a)
    let a = 10
  </script>

暂时性死区

<script>
    var temp = 123
    if(true) {
      temp = 'abc'
      let temp
      console.log(temp)
    }
  </script>

经典面试题

<script>
    var arr = []
    for(var i = 0; i < 2; i++) {
      arr[i] = function() {
        console.log(i)
      }
    }
    arr[0]()
    arr[1]()
  </script>

此题的关键点在于var i是全局的。函数运行的时候作用是输出i，此时i是2

<script>
    var arr = []
    for(let i = 0; i < 2; i++) {
      arr[i] = function() {
        console.log(i)
      }
    }
    arr[0]()
    arr[1]()
  </script>

该代码使用let声明i，那么，每次循环的时候都会产生一个块级作用域，每个块级作用域中变量都是不同的，互不影响。

3.2Const

作用：声明一个常量。常量就是值（内存地址）不能改变的量。

Const也具有块级作用域。

<script>
    if(true) {
      const a = 10
    }
    console.log(a)
  </script>

声明常量的时候必须赋值，并且，常量赋值后，值不能修改

<script>
    const a = 10
    a = 100
  </script>

一个const的数组。我们是否可以改变里面的元素？答案是可以。因为数组本身没有被改变，地址也没有被修改，只是修改了里面的元素。

<script>
    const arr = [1,2,3]
    console.log(arr)
    arr.push(4)
    console.log(arr)
    arr[0] = 'hahaha'
    console.log(arr)
    arr = [1,2,3] // 报错
  </script>

3.3Var、let、const区别

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。
使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
使用const声明的常量，在后面的代码中不能再修改常量的值。

3.4解构赋值

ES6中允许从数组、对象中提取值，按照对应的位置，对变量赋值

<script>
    const arr = [1,2,3]
    let [a,b,c] = arr
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
  </script>

如果结构不成功，变量的值是undefined

对象解构

<script>
    const person = {
      id: 1,
      name: '张三',
      age: 23
    }
    const {name, age, id:myId} = person
    console.log(name)
    console.log(age)
    console.log(myId) // myId是在解构时赋予的别名
  </script>

3.5箭头函数

ES6中定义函数的新方式

语法：() => {}

<script>
    function add(num1, num2) {
      return num1 + num2
    }
    const num = add(1,2)
    console.log(num)
    const a = (num1, num2) => {
      return num1+num2
    }
    console.log(a(1,2))
  </script>

函数体中如果只有一句代码，并且代码的执行结果就是返回值，可以省略大括号

var fun = function(a) {
      console.log(a)
    }
    fun(2)
    const fun2 = a => console.log(a)
    fun2(4)

箭头函数不绑定this关键字，箭头函数中的this指向的是函数定义位置的上下文。

<script>
    class Person {
      constructor(name) {
        this.name = name
      }
      say() {
        console.log('say中', this)
        return () => {
          console.log('function中', this)
        }
      }
    }
    const p = new Person('张三')
    const r = p.say()
    r()
  </script>

3.6剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

<script>
    function sum(first, ...args) {
      //...表示剩余参数
      console.log(first)
      console.log(args)
    }
    sum(10,20,30)
  </script>

剩余参数一般和解构一起使用

<script>
    const objArr = [
      {id: 1, name: '张三', age: 23},
      {id: 2, name: '李四', age: 24},
      {id: 3, name: '王五', age: 25},
      {id: 4, name: '赵六', age: 26}
    ]
    const tempArr = [
      {id: 5, name: '田七', age: 27},
      {id: 6, name: '王八', age: 28},
      {id: 7, name: '老九', age: 29}
    ]
    // 把tempArr的元素全部放到objArr中
    // objArr.push(tempArr) // 错的
    // tempArr.forEach(e => {
    //   objArr.push(e)
    // }) // 可以，但是还是有点麻烦
    objArr.push(...tempArr) // 使用...和解构的方式
    console.log(objArr)
  </script>

4.ES6中内置对象的扩展

4.1Array扩展方法

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

<script>
    const objArr = [
      {id: 1, name: '张三', age: 23},
      {id: 2, name: '李四', age: 24},
      {id: 3, name: '王五', age: 25},
      {id: 4, name: '赵六', age: 26}
    ]
    console.log(...objArr)
  </script>

构造函数方法：Array.from()

将类数组或者可比案例对象转换为真正的数组

<script>
    const arr = ['a', 'b', 'c', 'd']
    console.log(arr)
    const obj = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      '3': 'd',
      length: 4
    }
    const objArr = Array.from(obj)
    console.log(objArr)
  </script>

From方法有第二个参数，作用类似于数组中的map方法，用来对每个元素进行处理，将处理后的值，放入返回的数组

<script>
    const obj = {
      '0': 1,
      '1': 2,
      '2': 3,
      length: 3
    }
    const objArr = Array.from(obj, item => item * 2)
    console.log(objArr)
  </script>

4.2实例方法：find()

用于找出第一个符合条件的数组成员，如果没有找到，返回undefind

<script>
    const objArr = [
      { id: 1, name: '张三', age: 23 },
      { id: 2, name: '李四', age: 24 },
      { id: 3, name: '王五', age: 25 },
      { id: 4, name: '赵六', age: 26 }
    ]
    const a = objArr.find(item => item.id > 2)
    console.log(a)
    const resultArr = objArr.filter(item => item.id < 3)
    console.log(resultArr)
  </script>

4.3实例方法：findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到，就返回-1

<script>
    const objArr = [
      { id: 1, name: '张三', age: 23 },
      { id: 2, name: '李四', age: 24 },
      { id: 3, name: '王五', age: 25 },
      { id: 4, name: '赵六', age: 26 }
    ]
    const index = objArr.findIndex(e => e.id > 2)
    console.log(index)
  </script>

4.4实例方法：includes()

表示某个数组是否包含给定的值

<script>
    console.log([1,2,3].includes(2))
    console.log([1,2,3].includes(4))
  </script>

4.5模板字符串

ES6中新增了创建字符串的方式。使用反引号定义。``

在模板字符串中，可以解析变量

<script>
    let name = `zhangsan`
    console.log(name)
    let hello = `hello, my name is ${name}`
    console.log(hello)
  </script>

在模板字符串中，可以调用函数。

<script>
    let name = `zhangsan`
    console.log(name)
    const fun = () =>  '我的名字是张三'
    let hello = `hello, my name is ${name}, ${fun()}`
    console.log(hello)
  </script>

在模板字符串中，可以拼接字符串，可以任意的换行。

<script>
    class Goods {
      constructor(id, name, price) {
        this.id = id
        this.name = name
        this.price = price
      }
    }
    var dataList = [
      new Goods(1, '篮球', 10.8),
      new Goods(2, '足球', 50.4),
      new Goods(3, '乒乓球', 5),
      new Goods(4, '羽毛球', 9),
      new Goods(5, '网球', 16),
      new Goods(6, '排球', 8),
      new Goods(7, '美式足球', 26)
    ]
    $(function() {
      let table = $("#goods-table")
      let html = ''
      // dataList.forEach(e => { // 拼接字符串，相当的麻烦，而且字符串复杂时，容易拼错
      //   let temp = '<tr>' +
      //     '<td>'+ e.id +'</td>' +
      //     '<td>'+ e.name +'</td>' +
      //     '<td>'+e.price+'</td>' +
      //     '</tr>'
      //   html += temp
      // })
      dataList.forEach(e => {
        html += `
          <tr>
            <td>${e.id}</td>
            <td>${e.name}</td>
            <td onclick='clickPrice(${e.price})'>${e.price}</td>
          </tr>
        `
      })
      table.append(html)
    })
  </script>

4.6实例方法startsWith和endsWith

startsWith()：表示参数字符串是否在指定字符串的头部

endsWith()：表示参数字符串是否在指定字符串的尾部

<script>
    const str = 'hello world!'
    console.log(str.startsWith('hello'))
    console.log(str.endsWith('!'))
    console.log(str.startsWith('稽哥最帅'))
  </script>

4.7实例方法startsWith和endsWith

Repeat方法表示将原字符串重复n次，返回一个新的字符串

<script>
    const str = '稽哥最帅'
    const s = str.repeat(3)
    console.log(s)
  </script>

4.8Set数据结构

ES6提供了新的数据结构，set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

<script>
    const s = new Set()
    s.add(1)
    s.add(2)
    console.log(s)
  </script>

Set的构造函数还可以接收一个数组作为参数，用来初始化。

<script>
    const s = new Set([1,2,3,4,4])
    console.log(s)
  </script>

Add(value)：添加一个值，返回的set本身

Delete(value)：删除某个值，返回一个布尔类型，表示是否删除成功

Has(value)：返回一个布尔值，表示该value是否是set的成员

Clear()：清除所有成员，没有返回值

<script>
    const s = new Set([1,2,3,4,4])
    s.add(5)
    s.delete(4)
    console.log(s.has(3))
    console.log(s)
    s.clear()
    console.log(s)
  </script>

遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。