资讯专栏INFORMATION COLUMN

ES6、7、8常用新特性总结(超实用)

atinosun / 732人阅读

摘要:定义类常用新特性在一个数组或者列表中检查是否存在一个值还能在字符串中使用除了增强了可读性语义化,实际上给开发者返回布尔值,而不是匹配的位置。

ES6常用新特性 1. let && const

</>复制代码

  1. let 命令也用于变量声明,但是作用域为局部
  2. {
  3. let a = 10;
  4. var b = 1;
  5. }
  6. 在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let
  7. const用于声明一个常量,设定后值不会再改变
  8. const PI = 3.1415;
  9. PI // 3.1415
  10. PI = 3; //TypeError: Assignment to constant variable.
2. 解构赋值

</>复制代码

  1. ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
  2. 例如数组:
  3. let [a, b, c] = [1, 2, 3];
  4. //等同于
  5. let a = 1;
  6. let b = 2;
  7. let c = 3;
  8. 这真的让代码看起来更优美,有种python赋值的既视感。
  9. 对象的解构赋值:获取对象的多个属性并且使用一条语句将它们赋给多个变量。
  10. var {
  11. StyleSheet,
  12. Text,
  13. View
  14. } = React;
  15. 等同于
  16. var StyleSheet = React.StyleSheet;
  17. var Text = React.Text;
  18. var View = React.View;
3. 箭头函数

</>复制代码

  1. ES6中新增箭头操作符用于简化函数的写法,操作符左边为参数,右边为具体操作和返回值。
  2. var sum = (num1, num2) => { return num1 + num2; }
  3. //等同于
  4. var sum = function(num1, num2) {
  5. return num1 + num2;
  6. };
  7. 箭头函数还修复了this的指向,使其永远指向词法作用域:
  8. var obj = {
  9. birth: 1990,
  10. getAge: function () {
  11. var b = this.birth; // 1990
  12. var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
  13. return fn();
  14. }
  15. };
  16. obj.getAge(); // 25
4. ...操作符

</>复制代码

  1. 这个的引入几乎不会用到extend这个函数来。通过它可以将数组作为参数直接传入函数:
  2. var people = ["Lily", "Lemon", "Terry"];
  3. function sayHello(people1,people2,people3){
  4. console.log(`Hello ${people1},${people2},${people3}`);
  5. }
  6. sayHello(...people);//输出:Hello Lily,Lemon,Terry
5. iterable类型

</>复制代码

  1. 为了统一集合类型,ES6标准引入了新的iterable类型,ArrayMapSet都属于iterable类型,具有iterable类型的集合可以通过新的forof循环来遍历。
  2. var a = ["A", "B", "C"];
  3. var s = new Set(["A", "B", "C"]);
  4. var m = new Map([[1, "x"], [2, "y"], [3, "z"]]);
  5. for (var x of a) { // 遍历Array
  6. alert(x);
  7. }
  8. for (var x of s) { // 遍历Set
  9. alert(x);
  10. }
  11. for (var x of m) { // 遍历Map
  12. alert(x[0] + "=" + x[1]);
  13. }
  14. Map相关操作如下, Set同理:
  15. var m = new Map(); // 空Map
  16. m.set("Adam", 67); // 添加新的key-value
  17. m.set("Bob", 59);
  18. m.has("Adam"); // 是否存在key "Adam": true
  19. m.get("Adam"); // 67
  20. m.delete("Adam"); // 删除key "Adam"
  21. m.get("Adam"); // undefined
6.类

</>复制代码

  1. ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。
  2. //定义类
  3. class Point {
  4. constructor(x, y) {
  5. this.x = x;
  6. this.y = y;
  7. }
  8. toString() {
  9. return "(" + this.x + ", " + this.y + ")";
  10. }
  11. }
7.Set

</>复制代码

  1. var arr = [1,2,3,3,3,3,14]
  2. var set = new Set(arr)
  3. var arr = Array.from(set)
  4. console.log(arr) // 1,2,3,14
ES7常用新特性 1. Array.prototype.includes

</>复制代码

  1. 在一个数组或者列表中检查是否存在一个值
  2. let arr = ["react", "angular", "vue"]
  3. // Correct
  4. if (arr.includes("react")) {
  5. console.log("Can use React")
  6. }
  7. 还能在字符串中使用includes:
  8. let str = "React Quickly"
  9. // Correct
  10. if (str.toLowerCase().includes("react")) { // true
  11. console.log("Found "react"")
  12. }
  13. 除了增强了可读性语义化,实际上给开发者返回布尔值,而不是匹配的位置。
  14. includes也可以在NaN(非数字)使用。最后 ,includes第二可选参数fromIndex,这对于优化是有好处的,因为它允许从特定位置开始寻找匹配。
  15. 更多例子:
  16. console.log([1, 2, 3].includes(2)) // === true)
  17. console.log([1, 2, 3].includes(4)) // === false)
  18. console.log([1, 2, NaN].includes(NaN)) // === true)
  19. console.log([1, 2, -0].includes(+0)) // === true)
  20. console.log([1, 2, +0].includes(-0)) // === true)
  21. console.log(["a", "b", "c"].includes("a")) // === true)
  22. console.log(["a", "b", "c"].includes("a", 1)) // === false)
2.Exponentiation Operator(求幂运算)

</>复制代码

  1. et a = 7 ** 12
  2. let b = 2 ** 7
  3. console.log(a === Math.pow(7,12)) // true
  4. console.log(b === Math.pow(2,7)) // true
  5. 开发者还可以操作结果:
  6. let a = 7
  7. a **= 12
  8. let b = 2
  9. b **= 7
  10. console.log(a === Math.pow(7,12)) // true
  11. console.log(b === Math.pow(2,7)) // true
ES8新特性 1. Object.values/Object.entries

</>复制代码

  1. ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。
  2. Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。
  3. Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组。
  4. let {keys, values, entries} = Object;
  5. let obj = { a: 1, b: 2, c: 3 };
  6. for (let key of keys(obj)) {
  7. console.log(key); // "a", "b", "c"
  8. }
  9. for (let value of values(obj)) {
  10. console.log(value); // 1, 2, 3
  11. }
  12. for (let [key, value] of entries(obj)) {
  13. console.log([key, value]); // ["a", 1], ["b", 2], ["c", 3]
  14. }
2. String padding(字符串填充) 3. Async/Await

</>复制代码

  1. 使用Promise
  2. 使用Promise写异步代码,会比较麻烦:
  3. axios.get(`/q?query=${query}`)
  4. .then(response => response.data)
  5. .then(data =>
  6. {
  7. this.props.processfetchedData(data);
  8. })
  9. .catch(error => console.log(error));
  10. 使用Async/Await
  11. Async/Await使得异步代码看起来像同步代码,这正是它的魔力所在:
  12. async fetchData(query) =>
  13. {
  14. try
  15. {
  16. const response = await axios.get(`/q?query=${query}`);
  17. const data = response.data;
  18. return data;
  19. }
  20. catch (error)
  21. {
  22. console.log(error)
  23. }
  24. }
  25. fetchData(query).then(data =>
  26. {
  27. this.props.processfetchedData(data)
  28. })
  29. Async/Await是写异步代码的新方式,以前的方法有回调函数和Promise。相比于Promise,它更加简洁,并且处理错误、条件语句、中间值都更加方便

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101612.html

相关文章

  • ES678常用特性总结(实用)

    摘要:定义类常用新特性在一个数组或者列表中检查是否存在一个值还能在字符串中使用除了增强了可读性语义化,实际上给开发者返回布尔值,而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于变量声明,但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适...

    Xufc 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<