Day9 面试官:ES6有什么新特性呢?| 青训营

101 阅读3分钟

let & const

  • 两个都是块级作用域;
  • let对标var,无法变量提升;
  • const声明一个常量,赋值之后无法修改;

箭头函数

  • 对标普通函数,this的指向不同;普通函数this指向实例,箭头函数的this一般通过上下文获取继承外部作用域的argument,并且无法修改this指向(apply也不行!)

模板字符串

使用${}来插入变量或表达式

扩展运算符

  • ...,数组执行的是浅拷贝(相当于assign);
const arr1 = [1, 2, 3]; 
const arr2 = [...arr1, 4, 5];

或者用来查找数组的最大值

// ES6 扩展运算符 写法
var array = [1,2,3,4,3];
var max2 = Math.max(...array);  
console.log(max2);//4
  • 也可用于两个对象展开{...obj1,...obj2};经常在react中使用,一般用于传输props(一个常用的写法出现了)

实例方法的独立性:将方法定义在构造函数上意味着每个实例对象都会拥有自己的独立方法副本。这样,每个实例都可以修改自己的方法而不会影响其他实例。在某些情况下,这种独立性可能是需要的,特别是当每个实例需要有不同的行为或状态时。

function Book(title,auther){
    this.title=title;
    this.auther=auther;
}
Book.property.getInfo=function(){
    return "书名:"+this.title+"作者:"+this.auther;
}
// 创建Book类的实例 var book1 = new Book("三体", "刘慈欣"); 
// book1找不到getInfo函数就会到他的原型对象上找
console.log(book1.getInfo()); // 书名:三体,作者:刘慈欣

可以利用闭包把私有方法放在类里,比如说你现在有一个私有函数,一个公有函数;公有函数主要逻辑是判断调用人的身份,然后决定怎么调用这个私有函数或者说有没有权限。(这是ES6以前的,利用闭包实现的写法)

function Book(title, author) {
  // 私有变量
  var privateVariable = "私有变量";

  // 私有方法
  function privateMethod() {
    console.log("这是私有方法");
    console.log("私有变量的值为:" + privateVariable);
  }

  // 公共方法
  this.getTitle = function() {
    return "书名:" + title;
  };

  // 公共方法
  this.getAuthor = function() {
    return "作者:" + author;
  };

  // 公共方法,调用私有方法
  this.printDetails = function() {
    console.log(this.getTitle());
    console.log(this.getAuthor());
    privateMethod();
  };
}

// 创建Book类的实例
var book1 = new Book("三体", "刘慈欣");

// 访问公共方法
console.log(book1.getTitle()); // 书名:三体
console.log(book1.getAuthor()); // 作者:刘慈欣

// 调用公共方法,会间接调用私有方法
book1.printDetails();
// 输出:
// 书名:三体
// 作者:刘慈欣
// 这是私有方法
// 私有变量的值为:私有变量

// 无法直接访问私有变量和私有方法
console.log(book1.privateVariable); // undefined
book1.privateMethod(); // TypeError: book1.privateMethod is not a function

类实现:

class Book {
  constructor(title, author) {
    this.title = title;
    this.author = author;
  }

  getInfo() {
    return `书名:${this.title} ,作者:${this.author} `;
  }
}

// 创建Book类的实例
const book1 = new Book("三体", "刘慈欣");
console.log(book1.getInfo()); //书名:三体 ,作者:刘慈欣 

模块化

Day8 AMD&CMD&ESModule?| 青训营 - 掘金 (juejin.cn)

Promise

  • reject
  • resolve
  • .then()
  • .catch()
  • .all()
  • .race()

Symbol

他是一个独一无二且不可修改的,一般可以用作对象属性的唯一标识符

Map

Map类似于对象,但是键名不限于字符串,可以说Object结构提供键值对应,Map提供值值对应,因此采用Map结构会优于传统对象。

const dataMap = new Map()
const element = document.querySelector('.node')
dataMap.set(element,'objectData')
console.log(dataMap.get(element))
console.log(dataMap)

上面的代码中我们获取值时直接传入了element对象,成功将对象作为键名,弥补了传统对象的不足。

Map的特点

  1. Map默认情况下不包含任何键,所有键都是自己添加进去的。不同于Object原型链上有一些默认的键。
  2. Map的键可以时任何类型数据,就连函数都可以。
  3. Map的键值对个数可以轻易通过size属性获取,Object需要手动计算。
  4. Map在频繁增删键值对的场景下性能比Object更好。

什么时候用Map

  1. 想要添加的键值名和Object上的默认键值名冲突,又不想改名,用Map。
  2. 需要String和Symbol以外的数据类型做键值时,用Map。
  3. 键值对很多,有时需要计算数量,用Map。
  4. 需要频繁地增删键值对时,用Map。

WeakMap

  • 用来存储临时的结构;
  • WeakMap只能将对象作为键名
  • weakmap是弱引用关系,对于垃圾回收机制来说,weakMap一旦不被需要就会被回收,而map则需要手动free掉内存
  • 不可遍历性,正因为WeakMap对键名引用的对象是弱引用关系 ,因此WeakMap内部成员是会取决于垃圾回收机制有没有执行,运行前后成员个数很可能是不一样的,而垃圾回收机制的执行又是不可预测的,因此不可遍历

生成器Generator

【ES6基础】生成器(Generator) - 掘金 (juejin.cn)

Proxy

  • 使用:const proxy = new Proxy(target, handler)其中target是拦截的目标对象,handler是定制拦截行为

数组对象扩展

  1. Array.prototype.from(): 将类数组对象或可迭代对象转换为数组。
  2. Array.prototype.of(): 根据传入的参数创建一个新数组。
    const array = Array.of(1, 2, 3);
    console.log(array); // [1, 2, 3]
    
  3. Array.prototype.find(): 返回数组中满足条件的第一个元素。
    const array = [1, 2, 3, 4, 5];
    const found = array.find(element => element > 3);
    console.log(found); // 4
    
  4. Array.prototype.findIndex(): 返回数组中满足条件的第一个元素的索引。
const array = [1, 2, 3, 4, 5];
const index = array.findIndex(element => element > 3);
console.log(index); // 3
  1. Array.prototype.fill() 方法用指定的值填充数组的所有元素,并返回修改后的数组。该方法接受两个参数:value 和可选的 startend 参数。
    • value:要填充到数组元素的值。
    • start(可选):指定开始填充的索引位置,默认为 0。
    • end(可选):指定结束填充的索引位置(不包括该位置),默认为数组的长度。