• ECMAScript6.0(ES6)新特性


    let 变量声明

    let a;
    let b,c,d;
    let j = "124", f = [], g = {}
    
    • 不能重复声明变量
    • 块级作用域
    • 不存在变量提升 ( 存在暂时性死区 )
    • 不影响作用域链

    const 声明常量

    const SCHOOL = "啦啦啦";
    
    • 一定要赋初始值
    • 一般常量使用大写 (提倡的规则)
    • 常量的值不能修改
    • 块级作用域 ( 存在暂时性死区 )
    • 对于数组和对象的元素修改,不算做对常量的修改,不会报错。(本质是因为常量保存的是内存地址)

    解构赋值

    • 数组的结构
    const F4 = ["小沈阳","刘能","赵四","宋小宝"];
    let [xiao,liu,zhao,song] = F4;
    
    • 对象的解构
    const zhaoobj = {
      name:"zbs",
      age:"不知",
      xiaopin:function(){
        console.log('我可以演小品')
      }
    }
    let {names, age, xiaopin} = zhaoobj;
    

    模板字符串

    • 声明字符串的方式 ``
    // 1. 声明
    let str = `我是一个字符串模板`;
    // 2. 内容中可以直接出现换行符
    let text = `<ul>
      <li>st</li>
      <li>ml</li>
      <li>wx</li>
      <li>艾伦</li>
    </ul>`
    // 3. 变量拼接
    let lovest = "啦啦";
    let out = `${lovest}说服力空间技术打开方式解放路口数据的`;
    

    对象的简洁写法

    • 在大括号里,直接写入变量和函数,作为对象的属性和方法
    let names = "多斯拉克集福";
    let change = function(){
      console.log('我们可以改变你!!')
    }
    const school = {
      names,
      change,
      improve(){
        console.log('我们可以提高你的技能')
      }
    }
    

    箭头函数

    • 使用箭头 => 定义函数
    // 声明一个函数
    let fn = (a,b) => {
      return a + b
    }
    
    • this 是静态的,this 始终指向函数声明时所在作用域下的 this 的值。(无法通过call等方法改变)
    • 不能作为构造函数,实例化对象
    • 不能使用 argument 参数
    • 箭头函数的简写
      • 省略小括号,当形参有且只有一个的时候
      • 省略花括号,当代码体只有一条语句时,此时 return 必须省略,而且语句的执行结果就是函数的返回值。 let pow = n => n * n;

    函数参数设置默认值

    • ES6 允许给函数参数赋值初始值
    • 形参初始值 具有默认值的参数, 一般位置要靠后 ( 提倡规则 )
    // 2. 与解构赋值结合
    function connect({host,username,password,prot=3307}){
      console.log(host,username,password,prot)
    }
    

    rest参数

    • rest 参数,用于获取函数的实参,用来代替 arguments
    • rest 参数必须放到 参数的最后
    function fn(a,b,...args){
      console.log(a);
      console.log(b);
      console.log(args)
    }
    fn(1,2,3,4,5,6,7)
    

    扩展运算符

    • ... 扩展运算符能将数组转换为逗号分隔的参数序列
    // 声明一个数组
    const arr = ["123","345","sdfsd"];
    // 声明一个函数
    function chunwan(){
      console.log(arguments)
    }
    chunwan(...arr)
    

    Symbol

    • 表示独一无二的值。它是 JavaScript 语言的第七种类型,是一种类似于字符串的数据组类型
    • Symbol 的值是唯一的,用来解决命名冲突的问题
    • Symbol 值不能与其它数据进行运算。
    • Symbol 定义的对象属性不能使用 for...in 循环遍历,可以使用 Reflect.ownKeys 来获取对象的的所有键名
    • 有很多的内置属性。eg:Symbol.isConcatSpreadable

    迭代器

          迭代器是一种接口,为各种不同的数据结构提供统一的访问机制。
      任何数据结构只要部署了 Iterator 接口,就可以完成遍历操作
        1. ES6 创造了一种新的遍历命令 for...of 循环,Iterator 接口主要供 for...of 消费
        2. 原生具备 iterator 接口的数据(可用for of 遍历)
            Array
            Arguments
            Set
            Map
            String
            TypedArray
            NodeList
      工作原理:
        1. 创建一个指针对象,指向数据结构的起始位置,
        2. 第一次调用 next 时,指向数据结构的第一数据的位置
        3. 不断调用 next,指针不断向后移,直到最后一个
        4. 每次 next 返回一个 value 和 done 属性的对象
    // 自定义遍历数据
    let banli = {
      names:"终极一班",
      stu:[
        "小明",
        "小宁",
        "小红",
        "小刚"
      ],
      [Symbol.iterator](){
        let index = 0;
        let _this = this;
        return {
          next:function(){
            if(index < _this.stu.length){
              let result = {value:_this.stu[index],done:false}
              index++
              return result
            }else{
              return {value:undefined,done:true}
            }
          }
        }
      }
    }
    for (const item of banli) {
      console.log(item)
    }
    

    生成器

    • 生成器其实就是一个特殊的函数,在函数名前加上 *
    function * gen(){
      console.log('Hello world');
    }
    let iterator = gen();
    iterator.next();
    

    集合

    • Set (集合),它类似于数组,但成员的值是唯一的
    • 集合实现了 iterator 接口,所以可以使用 扩展运算符 和 for...of 进行遍历
    • 集合的属性和方法
      • size 返回集合的元素个数
      • add 增加一个新元素,返回当前集合
      • delete 删除元素,返回 boolean 值
      • has 检测集合中是否包含某个元素,返回 boolean 值

    Map

    • Map 数据结构,它类似于对象,也是键值对的集合。
    • 键 的范围不限于字符串,各种类型的值 (包含对象) 都可以当作键。
    • 实现了 iterator 接口,所以可以使用 扩展运算符 和 for...of 进行遍历。
    • Map 的属性和方法
      • size 返回 Map 的元素个数
      • set 增加一个新元素,返回当前 Map
      • get 返回键名对象的键值
      • has 检测 Map 中是否包含某个元素,返回 boolean 值
      • clear 清空集合,返回 undefined

    class

    • class 作为对象的模板,通过class 关键字,可以定义类。
    • class 可以看做只是一个语法糖,他的绝大部分功能,写法只是让对象原型的写法更加清晰
    • 静态成员,属于类,不属于实例对象
    • 有 get 和 set
    • 子类可以对父类的方法进行重写,也可以继承
    class Phone{
      constructor(brand,price){
        this.brand = brand;
        this.price = price;
      }
      // 方法必须使用该语法
      call(){
        console.log("我可以打电话")
      }
    }
    

    数值的扩展

    • Number.EPSILON 是 JavaScript 表示的最小精度
    • EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
    • 不同的进制
    let e = 0b0101;  // 二进制
    let b = 0o777;   // 八进制
    let s = 100;     // 十进制
    let sl = 0xfff;  // 十六进制
    
    • Number.isFinite 检测一个数是否为有限数
    • Number.isNaN 检测一个数是否是 NaN
    • Number.parseFloat、Number.parseInt 将字符串转为整数
    • Number.isInteger 判断一个数是否为整数
    • Math.trunc 将数字的小数部分抹掉
    • Math.sign 判断一个数是正数、零、负数

    对象方法扩展

    • Object.is 判断两个值是否完全相等
    • Object.assign 对象的合并
    • Object.setPrototypeOf 设置原型对象
    • Object.getPrototypeOf 获取原型对象

    模块化

    • 模块化是指将一个大的程序文件,拆分成许多个小的文件,然后将小文件组合起来
    • 优点:
      • 防止命名冲突
      • 代码复用
      • 高维护性
    • 语法
      • 模块功能主要由两个命令构成:export 和 import
        1. export 命令用于规定模块的对外接口
        2. import 命令用于输入其他模块提供的功能
    • 暴露数据语法汇总
      1. export 分别暴露
      2. export {} 集中暴露
      3. export default {} 默认暴露
    • 引入模块数据汇总
      1. 通过模式:import * as 别名 from "xxxx"
      2. 解构赋值:import {x,y} from "xxxx"
        import {x as 别名, y} from "xxxx"
      3. 简便形式(针对默认暴露):import m3 from "xxxx"
  • 相关阅读:
    解决SpringMVC中jsp页面无法加载js,css,jpg中的信息
    浅谈SpringMVC
    Java垃圾回收与算法
    Linux常见命令
    Warm_up(HCTF_2018)
    house_of_storm 详解
    malloc 函数分析 glibc2.23
    Fastbin attack 总结
    Unlink学习总结
    xman_2019_format(非栈上格式化字符串仅一次利用的爆破)
  • 原文地址:https://www.cnblogs.com/aloneer/p/13423612.html
Copyright © 2020-2023  润新知