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"
posted @ 2020-08-02 22:28  攻城Alone  阅读(126)  评论(0)    收藏  举报