ES6常用语法

  1. ES6简介

    1. 什么是ES6?

      ES(ECMAScript),它是由ECMA 国际标准化组织,制定的一项脚本语言的规范话标准

      ES6实际上是泛指,泛指ES2015及后续的版本

    2. 为什么使用ES6?

      每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。

      • 每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。
      • 语法过于松散,实现相同的功能,不同的人可能会写出不同的代码
  2. let

    ES6中新增的用于声明变量的关键字

    特点:

    • let声明的变量旨在所处于的块级有效(只能在一对大括号中进行访问),eg:防止循环变量变成全局变量

    • 不存在变量提升

      console.log(a);//报错:a is not defined
      let a = 10;
      
    • 暂时性死区特性:一但在块级区域内声明了该变量,该变量就和整体进行了绑定

      		var demo = 123;
              if (true) {
                  demo = 234;
                  let demo//报错:Cannot access 'demo' before initialization
              }
      

    注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性

  3. const

    作用:声明常量,常量就是值(内存地址)不能变化的量

    特点:

    • 具有块级作用域

      if (true) {
                  const a = 10;
              }
              console.log(a)//报错:a is not defined
      
    • 声明常量时必须赋初始值

    • 常量赋值后,值(内存地址)不能修改:简单数据类型赋值后不可更改,复合数据类型,例如数组和对象,其值/属性可以更改,即对应的内存地址不可更改

    总结:let、const、var的区别:

    1. 使用var 声明变量:其作用域为该语句所在的函数内,且存在变量提升现象
    2. 使用let声明变量:其作用域为该语句所在的代码块内,不存在变量提升
    3. 使用const声明的是常量,在后面的代码中不能对该常量的内存地址进行修改;
  4. 解构赋值

    ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以解构赋值;

    1. 数组解构:

      允许我们按照一一对应的关系,从数组中提取值,然后赋值给变量

      let [a, b, c] = [123, "123", { "123": 123 }]//a=123,b="123",c={"123": 123}
      let [f1, f2] = [1]
      console.log(f1, f2);//打印1 undefined
      
    2. 对象解构:

      对象解构,实际上是属性匹配,变量的名字匹配对象中属性的名字,如果匹配成功,就讲对象属性的值赋值给变量

      const person = {
                  name: '张三',
                  age: 18
              }
      let { name, age } = person;
      console.log(name, age)//张三 18
      
      //或者:取别名的方式
      let {
                  name: MyName,
                  age: MyAge
              } = person
              console.log(MyName, MyAge);//张三 18
      
      
  5. 箭头函数

    ES6中新增的定义函数的方式,是用来简化函数定义语法的

    () => {}
    const fn = () => {
      console.log("A")
    }
    fn()
    

    注意:

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

       /* var getRandom = (max, min) => {
                  return Math.floor(Math.random() * (max - min) + min)
      } */
       // 相当于
      var getRandom = (max, min) => Math.floor(Math.random() * (max - min) + min)
      console.log(getRandom(1, 2));
      
    • 如果形参只有一个,可以省略形参的小括号

       var getSelf = v => {
                  alert(v)
              };
       getSelf(2)
      
    • 箭头函数不绑定this,箭头函数中的this,指向的是函数定义位置的上下文this

      let obj = { name: "zhangsan" }
              function fn() {
                  console.log(this);
                  return () => {
                      console.log(this);
                  }
              }
              const res = fn.call(obj)
              res()
              // 输出:{name: 'zhangsan'}
              //       {name: 'zhangsan'}
      
  6. 剩余参数

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

    const sum = (...arg) => {
                let sum = 0;
                arg.forEach(v => {
                    sum += v;
                })
                return sum
            }
            console.log(sum(10, 20))
            console.log(sum(10, 20, 30, 40))
    

    剩余参数和结构配合使用:

    let arr = ["zhangsan", "lisi", "wangwu"];
    let [s1, ...s2] = arr;
    console.log(s1, s2)//打印:zhangsan ['lisi', 'wangwu']
    
  7. Array的拓展方法

    1. 拓展运算符(展开语法)

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

      应用:

      • 拓展运算符可以应用于合并数组

        		let arr1 = [1, 2, 3]
                let arr2 = [4, 5, 6]
                let arr3 = [...arr1, ...arr2];
                arr1.push(...arr2)
                console.log(arr3, arr1)
        
      • 将类数组或可比案例额对象转换成真正的数组

    2. 构造函数方法:Array,form()

      将类数组或可以遍历对象转换为真正的数组

    3. 数组的实例方法:find(), 用于找出第一个符合条件的数组成员,如果没有找到返回undefined
      		var person_list = [
                  {
                      id: 0,
                      name: 'Zhangsan',
                      value: 10
                  },
                  {
                      id: 1,
                      name: 'Lisi',
                      value: 20
                  },
              ]
      
              var target = person_list.find((item, index) => {
                  return item.id === 1
              })
              var targetIndex = person_list.findIndex((item, index) => {
                  return item.value >= 1
              })
              console.log(target, targetIndex)//输出:{id: 1, name: 'Lisi', value: 20} 0
      
    4. 数组的实例方法:findIndex(),用于找出第一个符合条件的数组成员的位置,如果没有找到则返回-1;

      具体代码,见上个代码块

    5. 数组的实例方法:includes(),用于判断某个数组是否包含给定的值,返回布尔类型的值
  8. 模板字符串

    • 模板字符串中可以换行
    • 模板字符串中可以调用函数,结果将会返回调用函数执行后的返回值
       var fun = () => 'say hello';
              var str = `${fun()}`
              console.log(str)
      
  9. 字符串的拓展方法

    1. 实例方法:startsWith()和endsWith()

      startsWith():判断某字符串是否在原字符串的开头,返回布尔类型;

      endsWith():判断某字符串是否在原字符串的结尾,返回布尔类型;

       var str = "hello world";
              console.log(
                  str.startsWith("hel"),
                  str.startsWith("hello "),
                  str.endsWith('world')
              )//true true true
      
    2. 实例方法:reapeat()

      reapeat()方法,表示将原字符串重复n次,返回一个新的字符串

      var str = "hello world";
              var newStr = str.repeat(3);
              console.log(newStr)//hello worldhello worldhello world
      
  10. Set数据结构

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

    • Set本身是一个构造函数,用来生成Set数据结构。

      const s = new Set();
      
    • Set函数也可以接收一个数组作为参数,用来初始化

      const set = new Set([1,2,3]);
      console.log(set.size)//3
      
    1.set方法
    Set.prototype.add(value)在Set对象尾部添加一个元素。返回Set对象
    Set.prototype.clear()移除Set对象内的所有元素
    Set.prototype.delete(value)移除Set中与value值相等的元素
    Set.prototype.has()返回一个布尔值,表示该值是否为Set的成员
    Set.prototype.keys()返回键名的遍历器
    Set.prototype.values()返回键值的遍历器
    Set.prototype.entries()返回键值对的遍历器
    Set.prototype.forEach()使用回调函数遍历每个成员
    1. 利用set去重
      		const set = new Set([1, 2, 2, 3, 3])
              console.log(set.size)//3
              const arr = [...set];
              console.log(arr)//(3) [1, 2, 3]
      
    2. Array.from 方法可以将Set结构转为数组。
      let set = new Set([1,2,2,3,2,3,4]);
      let arr = Array.from(set) //1,2,3,4
      
    3. Set遍历

      Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种VS噢序偶,没有返回值;

      const set = new Set([1, 2, 2, 3, 3])
              // set.forEach(item => {
              //     console.log(item)
              // }) // 1 2 3
              const set1 = new Set([{ key: 1, value: 2 }, { key: 2, value: 3 }])
              for (let item of set1.values()) {
                  console.log(item)
                  /*
                  {key: 1, value: 2}
                   {key: 2, value: 3} 
                   */
              }
              for (let key of set1.keys()) {
                  console.log(key)
                  /*
                  {key: 1, value: 2}
                   {key: 2, value: 3} 
                   */
              }
              for (let item of set1.entries()) {
                  console.log(item)
                  /* 
                  (2) [{…}, {…}]
                  (2) [{…}, {…}]
                   */
              }
      
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值