ES5+ES6

转x33g5p2x  于2022-05-05 转载在 其他  
字(7.7k)|赞(0)|评价(0)|浏览(506)

1、es6中箭头函数
1、基本语法

  1. ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子：
  2. // 箭头函数
  3. let fun = (name) => {
  4.     // 函数体
  5.     return `Hello ${name} !`;
  6. };
  8. // 等同于
  9. let fun = function (name) {
  10.     // 函数体
  11.     return `Hello ${name} !`;
  12. };
  1. 可以看出，定义箭头函在数语法上要比普通函数简洁得多。箭头函数省去了function关键字，采用箭头=>来定义函数。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中。
  2. 关于箭头函数的参数：
  3. 1、如果箭头函数没有参数，直接写一个空括号即可。
  4. 2、如果箭头函数的参数只有一个，也可以省去包裹参数的括号。
  5. 3、如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中即可。
  1. // 没有参数
  2. let fun1 = () => {
  3.     console.log(111);
  4. };
  6. // 只有一个参数，可以省去参数括号
  7. let fun2 = name => {
  8.     console.log(`Hello ${name} !`)
  9. };
  11. // 有多个参数
  12. let fun3 = (val1, val2, val3) => {
  13.     return [val1, val2, val3];
  14. };

关于箭头函数的函数体

  1. 1、 如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。
  1. let f = val => val;
  2. // 等同于
  3. let f = function (val) { return val };
  5. let sum = (num1, num2) => num1 + num2;
  6. // 等同于
  7. let sum = function(num1, num2) {
  8.   return num1 + num2;
  9. };
  1. 2、如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写：
  1. let getTempItem = id => ({ id: id, name: "Temp" });
  3. // 但绝不能这样写，会报错。
  4. // 因为对象的大括号会被解释为函数体的大括号
  5. let getTempItem = id => { id: id, name: "Temp" };
  1. 如果箭头函数的函数体只有一条语句并且不需要返回值（最常见是调用一个函数），可以给这条语句前面加一个void关键字
  3. let fn = () => void doesNotReturn();

箭头函数最常见的用处就是简化回调函数。

  1. // 例子一
  2. // 正常函数写法
  3. [1,2,3].map(function (x) {
  4.   return x * x;
  5. });
  7. // 箭头函数写法
  8. [1,2,3].map(x => x * x);
  10. // 例子二
  11. // 正常函数写法
  12. var result = [2, 5, 1, 4, 3].sort(function (a, b) {
  13.   return a - b;
  14. });
  16. // 箭头函数写法
  17. var result = [2, 5, 1, 4, 3].sort((a, b) => a - b);

2、箭头函数和普通函数之间的区别?

  1. 1、语法更加简洁，清晰
  2. 2、 箭头函数不会创建自己的this
  3. 3、箭头函数继承而来的this指向永远不变（重要！！深入理解！！）
  4. 4、.call()/.apply()/.bind()无法改变箭头函数中this的指向
  5. 5、箭头函数不能作为构造函数使用
  6. 6、箭头函数没有自己的arguments
  7. 7、箭头函数没有原型prototype
  8. 8、箭头函数不能用作Generator函数，不能使用yeild关键字。

3、变量作用域

  1. 1.1 let 、const、 块级作用域和变量声明
  3. let声明的变量只在所在块中生效；
  5. let声明的变量可以解决var与for循环结合使用产生的无法取得最新变量值的问题（以往都需要通过闭包来解决这个问题）；
  7. let声明的变量不存在变量提升（从undefined->ReferenceError，其实也是一种暂时性死区）、会造成变量暂时性死区(在声明let变量之前都不能用它)、也不允许重复声明；
  9. const声明的变量行为与let类似，只是多了两点更强的约束：1.声明时必须赋值；2.声明的变量内存地址不可变，需要注意的是：对于用const声明基本类型，值就保存在内存地址之中，意味着变量不可重新赋值；对于用const声明的对象，对象内容还是可以更改的，只是不能改变其指向。（冻结对象应该用Object.freeze()）
  1. 结构赋值，按照一定的结构解析出来进行赋值。
  2. 解构赋值的使用场景：变量快捷赋值、提取数据、函数参数定义和默认值、遍历某结构

4、原生对象方法扩展

  1. 1、string:
  2. 加强了对unicode的支持、支持字符串遍历（后面有讲到实际上是部署了iterator接口）、repeat()等方法的支持、模板字符串
  4. 2、RegExp:
  5. 构造函数第一个参数是正则表达式，指定第二个参数不再报错、u修饰符、y修饰符、s修饰符。
  7. 3、Number:
  8. 二进制和八进制新写法、新方法parseInt()、Number.EPSILON极小常量、安全整数、Math新方法
  10. 4、Function:
  11. 函数参数默认值、rest参数、函数内部严格模式、函数的name属性、箭头函数.
  13. 5、Array
  14. 扩展运算符...
  16. 6、Object和Symbol
  17. (1)、Object.is()——用于解决==和===的部分兼容问题
  18. (2)、Object.assign()——将src的所有可枚举对象属性复制到dest对象上（浅复制）
  19. (3)、Object.setPrototypeOf(),Object.getPrototypeOf()
  20. Object.entries(),Object.keys(),Object.values()

ES6中5种遍历对象属性的方法

  1. for-in：自身和继承的可枚举属性（除Symbol）
  2. Object.keys()：自身非继承的可枚举属性（除Symbol）
  3. Object.getOwnPropertyNames()：自身所有属性键名
  4. Object.getOwnPropertySymbols():自身的所有symbol属性的键名。

Symbol类型

  1. ES5以前，对象属性都只能是字符串，容易造成重命名导致的冲突。Symbol提供了一种机制，可以保存 属性名是独一无二的。Symbol类型的使用注意：1）创建是调用函数，而不是new关键字 2）Symbol类 型的属性不会被for-*、Object.keys()、Object.getPropertyNames()返回，可以用后面两种方法遍历。

数据结构Set和Map

  1. Set是一种类似数组的数据结构，区别在于其存储的成员都是不重复的，由此带来了它的一个应用就是：去重。Set通过new关键字实例化，入参可以是数组or类数组的对象。
  3. 值得注意的是：在Set中，只能存储一个NaN，这说明在Set数据结构中，NaN等于NaN。
  5. Set实例的方法：操作方法add()、delete()、has()和clear()；遍历方法：keys()、values()、entries()和forEach();扩展运算符...、数组方法map()、filter()方法也可以用于Set结构。由此它可以很方便的实现数组的交、并、差集。
  7. WeakSet类似于Set，主要区别在于1.成员只能是对象类型；2.对象都是弱引用（如果其他对象都不再引用该对象，垃圾回收机制会自动回收该对象所占的内存，不可预测何时会发生，故WeakSet不可被遍历）
  9. JavaScript对象Object都是键值K-V对的集合，但K取值只能是字符串和Symbol，Map也是K-V的集合，然而其K可以取任意类型。如果需要键值对的集合，Map比Object更适合。Map通过new关键字实例化。
  11. Map实例的方法：set()、get()、has()、delete()和clear();遍历方法同Set。
  13. Map与其它数据结构的互相转换：Map <---> 数组| Map <---> 对象| Map <---> JSON。
  15. WeakMap类似于Map，主要区别在于：1.只接受对象作为键名；2.键名所指向的对象不计入垃圾回收机制。

元编程相关Proxy和Reflect

  1. 对目标对象加一层“拦截”（“代理”），外界对对象的访问、修改都必须先通过这层拦截层。因而它提供了 一个机制可以对外界的访问进行过滤和改写。
  2. 用法：var proxy = new Proxy(p1,p2); p1是要被代理的目标对象，p2是配置对象。
  3. 值得注意的是：Proxy不是对目标对象透明的代理——即使不做任何拦截的情况下无法保证代理对象与目 标对象行为的完全一致。（主要原因在于代理时，目标对象内部的this会指向代理对象）
  1. Reflect:
  2.  与Proxy一样是ES6为语言层面的用于操作对象提供的新API，目前它所拥有的对象方法与Proxy对象一一对 应，引入目的：1.将Object对象上一些属于语言内部的方法放在Reflect上（目前都可以放）2.修改Object对 象上某些方法的返回值，使得更加合理化（健壮）3.让Object对象的操作从命令式完全转化为函数式

Promise，Generator和Async

  1. 在JavaScript的世界里，对于异步编程存在如下几种方案：1.回调函数；2.事件触发监听；3.发布订阅者模式；4.Promise。首先介绍Promise，然后介绍ES6提供的生成器函数，async函数。
  3. Promise来源于社区，代表一个对象，它代表异步操作未来的一个结果（承诺）。它总共有三个状态，pending\fulfilled\rejected。另外，它的状态翻转路径只有两个：pending->fulfilled or pending->rejected，一旦状态翻转，就不可变了。它支持链式调用，支持错误传递，支持以同步代码的方式写异步操作。
  5. Promise是一个对象，创建此对象实例的方法如下（可以理解resolve和reject是已返回的承诺对象未来回调函数的占位）
  7. Generator函数是ES6提供的异步编程解决方案。对于Generator函数，可以将它理解为一个状态机，封装了多个内部状态；此外它还是一个遍历器生成函数，这个函数可以遍历出状态机的所有状态。
  9. 函数特征：关键字function与函数名之间有*，函数体内部yeild关键字。
  11. 生成器函数与普通函数的区别：函数调用后不执行，而是返回一个指针对象（遍历器对象）。调用对象的next()方法，执行一段yield逻辑。故函数的分段执行的，yield是暂停执行的标志，next()可以恢复执行。
  13. yield与return的区别：yield有记忆功能，return没有；一个函数可以多次执行yeild，但只会return一次
  15. async函数是Generator函数的语法糖，它进行了改进：1.自带执行器；2.返回值是Promise;
  17. 三家对比：使用Promise的异步代码存在大量自有API的调用，操作本身的语义夹杂其中，不是很清晰；Generator函数实现的异步代码语义比Promise清晰，但需要一个执行器；async函数的写法最简洁、符合语义，不需要执行器。

6、class

  1. 从 ES6 开始，JavaScript 提供了 class 关键字来定义类，尽管，这样的方案仍然是基于原型运行时系统的模拟，大部分功能ES5可以实现。
  3. 构造函数的prototype属性在 ES6 的“类”上面继续存在。事实上，类中所有方法都定义在类的prototype属性上面（因而也是不可枚举的）。
  5. constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。（默认构造函数）；constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
  7. 注意区别：类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
  9. 类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
  11. 实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。
  13. 私有属性和方法如何实现？1.命名上加以区别 2.将私有方法移出模块，利用公有方法调用；3.Symbol属性上（都不完美）

7、module

  1. 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定。
  3. 编译时加载VS运行时加载——对象VS代码
  5. 模块命令：export和import；一个文件即为一个模块，除非导入否则外部无法读取模块属性；
  7. export支持：变量、函数和类
  9. export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，下一节的import命令也是如此。
  11. 输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。由于import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构。
  13. 使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
  15. 模块之间也可以继承。

8、迭代器

  1. ES6之前在JS中只有Array和对象可以表示“集合”这种数据结构，ES6中增加了：Set和Map。由此，四种之间互相组合又可以定义新的数据结构。这些新定义的数据结构如何访问呢？遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。遍历器对象本质上是一个指针对象。
  3. 只要为某个数据结构部署 了Iterator接口，则可以称此数据结构是可遍历的。iterator属性部署在Symbol上。如下对象默认部署了Iterator结口：Array Set Map String等。部署iterator结构的要点：1）在Symbol.iterator上部署；2）必须包含next()函数。默认调用iterator接口的场景：解构赋值、...扩展运算符、yeild* 。for-of循环内部调用的即是调用数据机构内部的Symbol.iterator方法。
  5. for-in和for-of循环
  7. for-in用于遍历对象属性，对象自身和继承的可枚举属性（不可遍历Symbol属性）
  9. for-of循环是一种遍历所有数据机构的统一方法。实现原理是数据结构上部署的Symbol.iterator属性。

9、ES6 与 ES5 继承的区别

  1. ES6 中有类 class 的概念，类 class 的继承是通过 extends 来实现的，ES5 中是通过设置构造函数的 prototype 属性，来实现继承的。
  3. super() 与 A.call(this) 的区别
  4. es6中的super是可以继承父类的行为，A.call(this)只是继承父类的属性。

10、哪些类型能被扩展操作符…扩展

  1. 试用类型:数组，对象，字符串。
  3. 复杂数据类型都可以，当要转化为可迭代数据结构时可设置对象的迭代器对扩展运算符扩展出来的值进行操作。
  5. 基础数据只有string可以使用扩展运算符，number,boolean,null,undefined无效。

11、事件扩展符用过吗(…)，什么场景下

  1. 扩展运算符的应用场景
  3. // 1、函数调用
  4. function add(x, y) {
  5.   return x + y;
  6. }
  7. add(...[4, 38]);
  9. function f(v, w, x, y, z) {  }
  10. f(-1, ...[0, 1], 2, ...[3]);
  11. // 123456789
  13. //2.往数组里push多个元素
  14. var arr1 = [0, 1, 2];
  15. var arr2 = [3, 4, 5];
  16. arr1.push(...arr2);  
  17. console.log(arr1); //[0,1,2,3,4,5]
  18. //123456
  20. //3.替代函数的apply方法
  21. function f(x, y, z) {  }  
  22. var args = [0, 1, 2];
  23. f.apply(null, args); //ES5 的写法
  24. f(...args); //ES6的写法
  25. // 123456
  27. //4.求一个数组的最大数简化
  28. Math.max.apply(null, [14, 3, 77])  //ES5 的写法
  29. Math.max(...[14, 3, 77])  //ES6 的写法，等同于Math.max(14, 3, 77)
  30. //1234
  32. //5.扩展运算符后面可以放表达式
  33. const arr = [...(5 > 0 ? ['a'] : []),'b'];
  34. console.log(arr);  //['a','b'] 
  35. //1234
  37. //6.与解构赋值结合，用于生成数组
  38. const a1 = [1, 2];
  39. const a2 = [...a1];  //写法1
  40. const [...a2] = a1;  //写法2
  41. const [first, ...rest] = [1, 2, 3, 4, 5];
  42. first  //1
  43. rest  //[2, 3, 4, 5]
  45. const [first, ...rest] = [];
  46. first  //undefined
  47. rest  //[]
  49. const [first, ...rest] = ["foo"];
  50. first  //"foo"
  51. rest   //[]
  52. //1234567891011121314151617
  54. //7.合并数组
  55. [...arr1, ...arr2, ...arr3]  //[ 'a', 'b', 'c', 'd', 'e' ]
  56. 123
  58. //8.数组的克隆——————————————————————特别注意
  59. var arr1 = [0, 1, 2];
  60. var arr2 = [...arr1];
  61. arr1[0]=100;
  62. console.log(arr2); //[0, 1, 2]  
  64. /* 乍一看，arr2与arr1不共用引用地址，arr2不随着arr1变化，接着往下看 */
  66. var arr1 = [0, [1,11,111], 2];
  67. var arr2 = [...arr1];
  68. arr1[1][0]=100;
  69. console.log(arr2); //[0, [100,11,111], 2]

12、让不同的浏览器兼容es6的方法

  1. 针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel，jsx，traceur，es6-shim 等。

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_47450807/article/details/124528372

内容来源于网络，如有侵权，请联系作者删除！

JavaScript前端开发语言js面试题

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com