ES6这七种新特性，必看👍

空白重名了52935
231 阅读7分钟

1.es6的变量声明为Let与const

  • （1）let与把var的不同体现在以下几点：let声明的变量不会提升到作用域的最前面；let上不能去重复声明一个变量；let年能使其所在的大括号成为一个块级作用域，其作用域内不能引入全局变量，也不能被作用域外的函数调用；省去了es6之前的闭包问题。
  • （2）const是用来定义常量的，但需要特别注意一下几点：const定义的常量，无法修改其地址值，其定义常量的属性值可以改变（可以执行修改，删除，添加，遍历）；const跟let一样对变量没有提升的作用，具有一定的块级作用域。
  • （3） let与const的变量不能挂在window上。

2. class类

  • （1）class类的出现弥补了之前用函数模拟类的不足。
  • （2）class类能够使用extnds实现继承。
  • （3）class内部只有静态方法没有静态属性 用static函数对象实现静态方法。

3. Set集合

  • （1）set能够创建一个没有重复元素的集合。
  • （2）set的用途：Array数组的去重问题，但需要Array.from的配合 与其他去重方法对比有代码简化的优势。

4. Map键值对

  • （1）map键的属性名可以是所有数据类型，其他对象属性名为字符窜。
  • （2）map能够被forEach遍历，foreach遍历的对象还有Array与set。

5. arrow箭头函数

  • var function=item=>item 
var fc=（item，index）=>{}
  • （1） =>后使用小括号() 表示将结果作为返回值，单行结果时还可以省略 当参数唯一时，还可以将前面的() 省略。
  • （2）箭头函数不能使用new构造函数。
  • （3）箭头函数能够将函数外面的this指向同步到函数内部。

6. 解构赋值

  • （1）数组的解构 
    var [a, b, c,[d,e,f]] = [6, 2, 7,[2,3,4]];
console.log(a, b, c，[d,e,f]);
  • （1 可以(不)完全解构，也可以嵌套解构。
  • （2 只要右边是可遍历解构（数组，迭代器，类数组）都能够结构成功。
  • （2）对象的解构：
    var {a: A, b: B, c: C} = {a: 1, b: 2, c: 3};
console.log(A, B, C);
var {a, b, c} = {a: 1, b: 2, c: 3};
console.log(a, b, c);
let a = 4;
({a} = {a: 1})
console.log(a)
  • （1 变量属性名对应解构;
  • （2 模式解构： 这时候a, b, c分别是”模式”，解构去匹配符合格式的对象结构。它先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后面的A、B、C，所以A、B、C 也可以称作a、b、c的别名。
  • 注意：
  • 一个变量在前面定义过，给他重新赋值时,就应把“ {a} ={a: 1}”用小括号包裹起来，这个是js解析引擎的一个问题。
  • （3）字符串的解构：
  • （1 字符串也可看作是特殊的数组, 满足所有数组的操作。
    let {a, b, c} = 'hello';
console.log(a, b, c)
var {a: A, b: B, c: C} = {a: 1, b: 2, c: 3};
console.log(A, B, C);
  • （4）解构可设置初始值：
    let {a, b, c, d = 5} = {a: 1, b: 2, c: 3};
console.log(a, b, c, d) // 1, 2, 3, 3
    这与数组类似
  • （5）对象与数组的混合解构操作，函数参数的解构。
    对象与数组的混合解构操作：
let obj = {bar: 'xxx',
foo: {arr: ['hello',
{a: 1}],
baz: 1}}
let { foo: { arr: [x, {a}], baz}, bar} = obj;
解构函数参数的操作
console.log(x, a, baz, bar);
function foo({a, b, c, d=2}){
console.log(a, b, c, d); }
foo({a: 1, b: 2, c: 3});
  • 注意：数组解构找对应的下标，对象解构找对应的属性名。

7. 扩展（运算符，字符串,数组,函数，Number）

  • （1） 扩展运算符(spread)（也叫圆点运算符(…)）

  • 他的作用是：遍历目标对象，输出所有结果。 所以只要是能够遍历的数据结构如（数组、类数组、迭代器、对象），都能够使用(…)进行操作。

    let arr = [1, 2, 3, 4];
let newArr = [...arr];
console.log(arr === newArr); // false
let obj = { a: 4, b: 5};
let newObj = { ...obj};
console.log(obj === newObj); // falselet
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = [...arr1, ...arr2];
console.log(newArr); // 1, 2, 3, 4
let obj1 = { a: 1, b: 2};
let obj2 = { a: 3, c: 2};
let newObj = { ...obj1, ...obj2};
console.log(newObj); // { a: 3, b: 2, c: 2}

  • （2）扩展运算符（rest）

    rest实质上就是把剩余参数作为数组元素收集起来：
function foo(...arg){
console.log(arg);}

  • （3） 扩展字符串

  • （1 模板字符串：使用反引号(“)，可以保留字符串的格式，空格回车，使用(${})来引入变量。

  • （2 includes 、startsWidth、endsWidth、padStart、padEnd、reapeat

  • includes : 返回布尔值，表示是否找到了参数字符串

  • startsWidth : 返回布尔值，表示参数字符串是否在源字符串的头部

  • endsWidth : 返回布尔值

  • padStart与padEnd：表示在目标字符串头、尾插入字符串

  • （4）扩展（Number）

  • （1 进制转换：

    let num3 = 0B101; // 表示二进制 0B 或 0b
let num4 = 0O101; // 表示八进制 0O或 0o

  • （2 Number.isFinite 用来检查 （）内是否非无穷：

    Number.isFinite(5); // true
Number.isFinite('5'); // false
Number.isFinite(Infinity); // false

  • （3 isNaN、parseInt、parseFloat、isInteger 行为完全不变，这样做的目的，是逐步减少全局性方法，使语言逐步模块化。

  • （4 js能够准确表示的整数范围在-2^53 到 2^53 之前（不包含两个端点）。

    Number.MAX_SAFE_INTEGER; // 9007199254740991
Number.MIN_SAFE_INTEGER; // -9007199254740991

  • （5 Math中新增非主流方法：sign用来判断是否为正数、负数、零。

    Math.trunc(5.5); // 取整 5
Math.sign(5); // 1
Math.sign(0); // 0
Math.sign(-5); // -1

  • （5）扩展（函数）

  • （1 参数默认值

    function foo(x=5, y){// 传入的参数只要等于undefined或者是空，就会取走默认值}

  • （2 foo.length返回的是没有默认值的参数的个数；foo.name返回的是函数的名字

  • （3 严格模式：全局变量必须显示声明；禁止this关键字指向全局对象；构造函数必须new；对象不能有重复属性；函数不能有重名参数；禁止使用with；禁止使用arguments.callee。

    'use strict';
function People(name, age){
this.name = name;
this.age = age;}
People('lisi', 18); // Cannot set property 'name' of undefined 'use strict';
let a = 1;
let b = {
a: 2}
with(b){
console.log(a);}
// strict mode code may not include a with statement

  • （6）扩展（数组）

  • （1 Array.from：Array.from方法用于将两类对象转为真正的数组，如:类数组对象array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

    let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
NodeList 转化为数组的方法：
let ps = document.querySelectorAll('p'); // NodeList 类型 类数组
let arr = [...ps];
let arr2 = Array.from(ps);
let arr3 = [].slice.call(ps); // 实例方法
//  arr3 = Array.prototype.slice.call(ps); // 类方法
let arr4 = arr4.constructor;

  • （2 Array.of：将一堆元素转化为数组。

  • （3 copyWithin.target（必需）：从该位置开始替换数据; copyWithin.start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数; copyWithin.end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

  • （4 find 和 findIndex：find用于找出第一个符合条件的数组成员；findIndex返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

  • （5 includes 与 字符串的类似，entries，keys 和 values 与迭代器的类似（entries 可用next()执行, 适用于不规则输出的情况）。

    let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
cosole.log(123);
console.log(entries.next().value); // [1, 'b']
cosole.log(456);
console.log(entries.next().value); // [2, 'c']

  • （6 for of遍历:能够返回索引和内容；forEach():没有返回值，只是针对每个元素调用func；map():返回一 个新的Array，每个元素为调用func的结果；filter():返回一个符合func条件的元素数组；some():返回一个boolean，判断是否有元素是否符合func条件；every():返回一个boolean，判断每个元素是否符合func条件。

    for(let item of arr){
console.log(item); // 内容}
for(let item of arr.keys()){
console.log(item); // 索引}
for(let [index, item] of arr.entries()){
console.log(item, index); // 内容 + 索引}

avatar
文章
阅读
粉丝