ES6比ES5新增的特性

890 阅读4分钟

let、const:

let和const支持块级作用域,拥有暂时性死区(必须先声明,再使用,不支持变量提升);

const是常量,声明时必须赋值,当赋值为基本类型时,不能改变它的值;当赋值为引用类型时,不能改变它的引用,但是可以对引用类型进行操作,如数组的push、对象的属性增删改

解构赋值:

对象的解构赋值:

let obj = {
  a: 1,
  b: 2
};
let {a, b, c} = obj; // 大括号中的变量名必须和obj的属性名一致
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: undefined

数组的解构赋值:(字符串一样)

let arr = ['a', 'b', 'c'];
let [e, f] = arr;	// 中括号中的变量按数组中元素的顺序被赋值
console.log(e, f);

// 输出:
// e: 'a'
// f: 'b'

// 快速交换两个变量值
let a = 1, b = 2;
[a, b] = [b, a];

展开运算符:

数组:

let arr1 = [1, 2, 3, 4];
let arr2 = ['a', 'b', ...arr1, 'c'];
console.log(arr2);

// 输出:
// ['a', 'b', 1, 2, 3, 4, 'c']

对象:

let obj1 = {
  a: 1,
  b: 2
};
let obj2 = {
  ...obj1,
  c: 3,
  d: 4
};
console.log(obj2);

// 输出:
// {a: 1, b: 2, c: 3, d: 4}

剩余参数处理:

数组:

let arr = [1, 2, 3, 4, 5];
let [a, b, ...c] = arr;	// 将arr后面所有的剩余参数放入c中
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: [3, 4, 5]

对象:

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
};
let {a, b, ...c} = obj;
console.log(a, b, c);

// 输出:
// a: 1
// b: 2
// c: {c: 3, d: 4}

// 对象的复制(不是传地址)
let obj2 = {...obj};

Set对象:

数组去重:

let arr = [2, 1, 2, 1, 3, 4, 4, 5];
let s = new Set(arr);
arr = [...s];
// arr: [2, 1, 3, 4, 5]

Set方法:

let s = new Set([1, 1, 2, 3, 'a']);
// 得到Set元素个数:
s.size;
// 清空集合
s.clear();
// 删除集合中的某个值,返回操作是否成功
s.delete('a');
// 查看集合是否包含某个值
s.has('a');
// 添加一项,返回集合本身的引用
s.add('b');

Map对象:

let arr = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
let m = new Map(arr);
// m: {'a' => 1, 'b' => 2, 'c' => 3}

Map方法:

// 清空Map
m.clear();
// 删除某一项,返回操作是否成功
m.delete(key);
// 获取某一项的值,返回对应的val
m.get(key);
// 是否包含某一项
m.has(key);
// 添加一项,返回Map本身的引用
m.set(key, val);

函数新增内容:

  1. 箭头函数:没有thisarguments
  2. 参数默认值

数组新增方法:

构造函数的方法:

  • 把一个类数组转换成真正的数组: Array.from(arrLike [, mapFunc, mapThis]);

    参数:

    • arrLike:类数组
    • mapFunc:对类数组每一项的操作函数
    • mapThis:替换mapFuncthis指向

    另一种方法:let arr = [...arrLike];

  • 将参数列表转换为数组:

    Array.of(...items);

  • 检测一个对象是否是一个数组:

    Array.isArray(obj);

对象的方法:

  • arr.find(callback [, thisArg]):查找数组中满足条件的第一个元素的值

    let arr = [1, 2, 3, 4];
    let val = arr.find((item, index) => item >= 3);
    // val: 3
    let val = arr.find((item, index) => item >= 5);
    // val: undefined
    
  • arr.findIndex(callback [, thisArg]):查找数组中满足条件的第一个元素的索引

  • 数组扁平化:

    • arr.flat([depth])

      参数:depth:指定要提取嵌套数组的结构深度,默认为1,当depth = infinity时,无论数组多少层,都提取为一维数组。

    • arr.flatMap(callback[, thisArg])

      参数:callback:对原数组的每个元素进行操作,返回新数组的元素;

      该函数值支持深度为1的扁平化

  • 数组元素填充:arr.fill(value[, start[, end]]);

    用一个固定的值填充一个数组中从起始索引到终止索引内到全部元素。不包括终止索引;不会改变数组长度

    参数:

    • value:用来填充数组元素的值;
    • start:起始索引,默认值为0;
    • end:终止索引,默认值为 arr.length ;
  • arr.includes(valueToFind[, fromIndex]):判断数组中是否包含一个指定的值

    参数:

    • valueToFind:需要查找的值
    • fromIndex:从 fromIndex 处开始向后查找

字符串新增方法:

  • str.startsWith(searchString[, position]):判断当前字符串是否以另一个给定的子字符串开头

    参数:

    • searchString:要搜索的字符串
    • position:在 str 中搜索 searchString 的开始位置,默认为0,也就是真正的字符串开头处
  • str.endsWith(searchString[, position]):判断当前字符串是否以另一个给定的子字符串结束

    参数:

    • searchString:要搜索的字符串
    • position:在str中反向搜索的开始位置,默认为 str.length
  • str.repeat(times):返回重复str字符串times次的字符串

模版字符串:

反引号:``,可以换行

插值表达式:${}

对象新增方法:

  • 简洁表示法:

    let a = 1, b = 2;
    // 原来的表示方法:
    let obj = {
      a: a,
      b: b,
      c: function() {}
    };
    // 简洁表示法:
    let obj = {
      a,
      b,
      c() {}
    };
    
  • 属性名表达式:

    let name = "小明";
    let obj = {
      [name]: 111
    };
    console.log(obj);
    // 输出:
    // obj: {'小明': 111}
    
    // 等价于:
    let obj = {};
    obj[name] = 111;
    
  • Object.assign(obj1, obj2, ...):将第二个参数即之后的参数对象合并到第一个参数对象中

    let obj1 = {a: 1, b: 2};
    let obj2 = {c: 3, d: 4};
    Object.assign(obj2, obj1);
    // 等价于
    obj2 = {
      ...obj1,
      ...obj2
    }
    // 等价于
    obj2 = Object.assign({}, obj1, obj2);
    
  • Object.is(value1, value2):判断两个值是否相等(强类型)

    ===的区别:

    +0 === -0;	// true
    Object.is(+0, -0);	// false
    
    NaN === NaN; // false
    Object.is(NaN, NaN); // true
    

babel编译器:

将es6语法编译为es5语法