ES6 用法总结

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
  </head>
  <body></body>
  <script>
    // 箭头函数
    function hello(name) {
      console.log(name)
    }
    let hello1 = name => {
      console.log(name)
    }
    hello('kejiang')
    hello1('kejiang1')
    this.b = 2
    const hello3 = name => {
      this.a = 1
      console.log(name)
      console.log(this.a, this.b)
    }
    hello3('wangjun')

    //数组去重
    let arr = [1, 2, 3, 3, '3']
    let brr = [4, 5, 6]
    let crr = []
    crr.push(...arr, ...brr) //数组拼接
    console.log(crr)
    let a = [...new Set(arr)] //数组去重方法一   // new 实例化
    let b = Array.from(new Set(arr)) //数组去重方法2
    console.log(a)
    console.log(b)
    let drr = [] //定义数组方法1
    let drr1 = new Array() //定义数组方法2
    let obj = {  //定义对象方法1
      name: 'wangjun',
      age: 22
    }
    let obj1 = new Object() //定义对象方法2
    obj1.name = 'wangjun'
    obj1.age = 22
    console.log(drr)
    console.log(drr1)
    console.log(obj)
    console.log(obj1)

    // 我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。
    // ES6中新引入的for of循环不能遍历对象
    for (let i in arr) {
      console.log(v)
      console.log(arr[v])
      console.log(`${v}-${arr[v]}`) //  `  反引号    字符串模板
    }
    for (let i in obj) {
      console.log(v)
      console.log(obj[v])
      console.log(`${v}-${obj[v]}`)
    }
    for (let v of arr) {
      //不能遍历对象
      console.log(v)
    }
    //forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数 v 当前元素 ，index 当前元素的索引值 ， arr 当前元素所属的数组对象
    //不能遍历对象
    arr.forEach((v, index, arr) => {
      console.log(v)
      console.log(index)
      console.log(arr)
    })
    // map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
    // map() 方法按照原始数组元素顺序依次处理元素。
    // 注意： map() 不会对空数组进行检测。
    // 注意： map() 不会改变原始数组。
    //不能遍历对象
    arr.map((v, index, arr) => {
      console.log(v)
      console.log(index)
      console.log(arr)
    })

    // 默认参数值
    function sayHello(name) {
      //传统的指定默认参数的方式
      var name = name || 'dude'
      console.log('Hello ' + name)
    }
    //运用ES6的默认参数
    function sayHello2(name = 'dude') {
      console.log(`Hello ${name}`)
    }
    let sayHello3 = (name = 'dude') => {
      console.log(`Hello ${name}`)
    }
    sayHello() //输出：Hello dude
    sayHello('Wayou') //输出：Hello Wayou
    sayHello2() //输出：Hello dude
    sayHello2('Wayou') //输出：Hello Wayou
    sayHello3() //输出：Hello dude
    sayHello3('Wayou') //输出：Hello Wayou

    // 不定参数
    // 将所有参数相加的函数
    let add = (...x) => {
      return x.reduce((m, n) => m + n) // reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
    }
    //传递任意个数的参数
    console.log(add(1, 2)) // 输出3
    console.log(add(1, 2, 3)) // 输出6
  </script>
</html>
猜你喜欢
