ES6特性

1、es5和es6的区别,说一下你所知道的es6

  ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化

  ECMAScript6,即ES6,是ECMAScript的第六次修订,于2015年完成,也称ES2015

  ES6是继ES5之后的一次改进,相对于ES5更加简洁,提高了开发效率

  ES6新增的一些特性:

  1)let声明变量和const声明常量,两个都有块级作用域
  ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明

  2)箭头函数
  ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义

  3)模板字符串
  模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串

  4)解构赋值
  ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值

  5)for of循环
  for...of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串

  6)import、export导入导出
  ES6标准中,Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用

  7)set数据结构
  Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数

  8)... 展开运算符
  可以将数组或对象里面的值展开;还可以将多个值收集为一个变量

  9)修饰器 @
  decorator是一个函数,用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

  10)class 类的继承
  ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念

  11)async、await
  使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
  async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成

  12)promise
  Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大

  13)Symbol
  Symbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的

  14)Proxy代理
  使用代理(Proxy)监听对象的操作,然后可以做一些相应事情

 

2、var、let、const之间的区别

  var声明变量可以重复声明,而let不可以重复声明

  var是不受限于块级的,而let是受限于块级

  var会与window相映射(会挂一个属性),而let不与window相映射

  var可以在声明的上面访问变量,而let有暂存死区,在声明的上面访问变量会报错

  const声明之后必须赋值,否则会报错

  const定义不可变的量,改变了就会报错

  const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

 

3、使用箭头函数应注意什么?

  (1)用了箭头函数,this就不是指向window,而是父级(指向是可变的)

  (2)不能够使用arguments对象

  (3)不能用作构造函数,这就是说不能够使用new命令,否则会抛出一个错误

  (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数

 

4、ES6的模板字符串有哪些新特性?并实现一个类模板字符串的功能

  基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

  在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)就能解决

   

类模板字符串的功能

复制代码

        let name = 'web';
        let age = 10;
        let str = '你好,${name} 已经 ${age}岁了'
        str = str.replace(/\$\{([^}]*)\}/g,function(){
            return eval(arguments[1]);
        })
        console.log(str);//你好,web 已经 10岁了    

复制代码

 

5、介绍下 Set、Map的区别?

  应用场景Set用于数据重组,Map用于数据储存

  Set: 

  (1)成员不能重复
  (2)只有键值没有键名,类似数组
  (3)可以遍历,方法有add, delete,has

  Map:

  (1)本质上是健值对的集合,类似集合
  (2)可以遍历,可以跟各种数据格式转换

 

6、ECMAScript 6 怎么写 class ,为何会出现 class?

  ES6的class可以看作是一个语法糖,它的绝大部分功能ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

复制代码

//定义类
class Point { 
  constructor(x,y) { 
      //构造方法
       this.x = x; //this关键字代表实例对象
       this.y = y; 
  } toString() {
       return '(' + this.x + ',' + this.y + ')'; 
  }
}

复制代码

 

7、Promise构造函数是同步执行还是异步执行,那么 then 方法呢?

  promise构造函数是同步执行的,then方法是异步执行的

 

8、setTimeout、Promise、Async/Await 的区别

   事件循环中分为宏任务队列和微任务队列

  其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行

  promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行

  async函数表示函数里面可能会有异步方法,await后面跟一个表达式

  async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行

 

9、promise有几种状态,什么时候会进入catch?

  三个状态:pending、fulfilled、reject

  两个过程:padding -> fulfilled、padding -> rejected

  当pending为rejectd时,会进入catch

 

10、下面的输出结果是多少

复制代码

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

复制代码

1 2 4 3

Promise 新建后立即执行,所以会先输出 1,2,而 Promise.then() 内部的代码在 当次 事件循环的 结尾 立刻执行 ,所以会继续输出4,最后输出3

 

11、使用结构赋值,实现两个变量的值的交换

let a = 1;let b = 2;
[a,b] = [b,a];

 

12、设计一个对象,键名的类型至少包含一个symbol类型,并且实现遍历所有key

 let name = Symbol('name');
 let product = {
    [name]:"洗衣机",    
    "price":799
  };
  Reflect.ownKeys(product);

 

13、下面Set结构,打印出的size值是多少

let s = new Set();
s.add([1]);
s.add([1]);console.log(s.size);

答案:2

两个数组[1]并不是同一个值,它们分别定义的数组,在内存中分别对应着不同的存储地址,因此并不是相同的值

都能存储到Set结构中,所以size为2

 

14、Promise 中reject 和 catch 处理上有什么区别

  reject 是用来抛出异常,catch 是用来处理异常

  reject 是 Promise 的方法,而 catch 是 Promise 实例的方法

  reject后的东西,一定会进入then中的第二个回调,如果then中没有写第二个回调,则进入catch

  网络异常(比如断网),会直接进入catch而不会进入then的第二个回调

 

15、使用class 手写一个promise

复制代码

  //创建一个Promise的类
  class Promise{
    constructor(executer){//构造函数constructor里面是个执行器
      this.status = 'pending';//默认的状态 pending
      this.value = undefined//成功的值默认undefined
      this.reason = undefined//失败的值默认undefined
      //状态只有在pending时候才能改变
      let resolveFn = value =>{
        //判断只有等待时才能resolve成功
        if(this.status == pending){
          this.status = 'resolve';
          this.value = value;
        }
      }
      //判断只有等待时才能reject失败
      let rejectFn = reason =>{
        if(this.status == pending){
          this.status = 'reject';
          this.reason = reason;
        }
      }    
      try{
        //把resolve和reject两个函数传给执行器executer
        executer(resolve,reject);
      }catch(e){
        reject(e);//失败的话进catch
      }
    }
    then(onFufilled,onReject){
      //如果状态成功调用onFufilled
      if(this.status = 'resolve'){
        onFufilled(this.value);
      }
      //如果状态失败调用onReject
      if(this.status = 'reject'){
        onReject(this.reason);
      }
    }
  } 

复制代码

 

16、如何使用Set去重

let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]

 

17、将下面for循环改成for of形式

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
    sum += arr[i];
}

答案:

let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
    sum += value;
}

 

18、理解 async/await以及对Generator的优势

   async await 是用来解决异步的,async函数是Generator函数的语法糖

  使用关键字async来表示,在函数内部使用 await 来表示异步

  async函数返回一个 Promise 对象,可以使用then方法添加回调函数

  当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句

  async较Generator的优势:

  (1)内置执行器。Generator 函数的执行必须依靠执行器,而 Aysnc 函数自带执行器,调用方式跟普通函数的调用一样

  (2)更好的语义。async 和 await 相较于 * 和 yield 更加语义化  

  (3)更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象,async函数的await后面可以是Promise也可以是原始类型的值

  (4)返回值是 Promise。async 函数返回的是 Promise 对象,比Generator函数返回的Iterator对象方便,可以直接使用 then() 方法进行调用

 

19、forEach、for in、for of三者区别

  forEach更多的用来遍历数组

  for in 一般常用来遍历对象或json

  for of数组对象都可以遍历,遍历对象需要通过和Object.keys()

  for in循环出的是key,for of循环出的是value

 

20、说一下es6的导入导出模块

  导入通过import关键字

复制代码

// 只导入一个
import {sum} from "./example.js"

// 导入多个
import {sum,multiply,time} from "./exportExample.js"

// 导入一整个模块
import * as example from "./exportExample.js"

复制代码

  导出通过export关键字

复制代码

//可以将export放在任何变量,函数或类声明的前面
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//也可以使用大括号指定所要输出的一组变量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//使用export default时,对应的import语句不需要使用大括号
let bosh = function crs(){}
export default bosh;
import crc from 'crc';

//不使用export default时,对应的import语句需要使用大括号
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';

原文地址:https://www.cnblogs.com/vofill/p/13265022.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


原文连接:https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。ES6在语言规格的层面上,实现了模块功能,而且...
以为Es6,javascript第一次支持了module。ES6的模块化分为导出(export)与导入(import)两个模块,其中在项目中,我们会经常看到一种用法import * as obj from,这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
视频讲解关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道...
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集,遵循最新的ES5 ES6规范,TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广,React ,VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了。先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,但是依旧有很多开发在写代码的时候,依旧没有用es6的语法,而是习惯使用老的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势,让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法:let [a, b, c] ...
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) =&gt; void上述语法的含义:表示一个函数,接收一个字符串作为输入参数,没有返回参数。可
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。ES6新增加的功能:1.let
ES6  在ES5的基础上增加了一些新的特性和写法,特别在函数写法上,增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
ES5及ES6es表示ECMASCript,他是从es3,es5,es6,es5是2009.12月发布的,es6是2015.6月发布的。vue2完全支持es5的(vue3完全支持es6的),react完全支持es6es5的新特性严格模式(对应的相反的称为怪异模式)'usestrict'//一般用于相关的设计上面书写一个严格模式底下的代码就需要按照严格模
ES5的严格模式所谓严格模式,从字面上就很好理解,即更严格的模式,在这种模式下执行,浏览器会对JS的要求更苛刻,语法格式要求更细致,更符合逻辑。怪异模式:就是我们之前一直使用的开发模式,就叫怪异模式。因为很多时候出来的结果是非常怪异的,所以才称之为怪异模式。'usestrict'//一般用
相同点export与exportdefault均可用于导出常量、函数、文件、模块可在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式,将其导入,以便能够对其进行使用不同点一、在一个文件或模块中,export、import可以有多个,exportdefault仅有一个//model.jsle
24.class类 25.class中的extend 26.super关键字 27.super应用 28.class属性 30.静态成员和实例成员 31.构造函数问题 32.构造函数原型 33.原型链 34.js查找机制 35.原型对象中this指向 36.扩展内置对象方法 37.call方法 38.借用父构造函数
什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。泛指2015年发布的es2015版极其后续版本ES6中新增语法letES6中新增的用于声明变量的关键字。注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特
命名修饰符let:不能重复声明变量、块级作用域leta=1;leta=2;//报错const:初始化常量,必须给初始值,否则报错、在同一个作用域内,const定义的常量不能修改其值、块级作用域consta=10a=100//报错,不能重复声明解构constobj={name:'jack'age:18sex:'
ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。1{2leta=10;3varb=1;4}56a//ReferenceError:aisnotdefined.7b//1上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib
一,RegExp构造函数es5中,RegExp构造函数的参数有两种情况。1,参数是字符串,第二个参数表示正则表达式的修饰符(flag)。2,参数是一个正则表达式,返回一个原有正则表达式的拷贝。es6中,如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而
一、字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的Unicode码点。表示法只限于码点在\u0000~\uFFFF之间的字符,超过该范围需要用两个双字节表示ES6改进:将码点放入大括号,就能正确解读该字符。转换参考:https://blog.csdn.net/hezh1994/ar