资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端笔记(四) ES6常用语法

前端笔记(四) ES6常用语法

church / 2710人阅读

摘要：函数更好的尾递归优化实现传入类数组对象且每次的值在改变。尾递归实现改写一般的递归函数确保最后一步只调用自身。返回一个遍历器对象用循环遍历。和循环它是一种遍历器接口为各种不同的数据结构提供统一的访问机制。

解构赋值 
</>复制代码 
  1. //数组的解构赋值
  2. let [a, b, c] = [1, 2, 3];
  3. a // 1
  4. b // 2
  5. c // 3
  6. let [a, [[b], c]] = [1, [[2], 3]];
  7. a // 1
  8. b // 2
  9. c // 3
  10. let [a, , c] = [1, 2, 3];
  11. a // 1
  12. c // 3
  13. let [a, ...b] = [1, 2, 3];
  14. a // 1
  15. b // [2, 3]
  16. //默认值引用其他变量
  17. let [x = 1, y = x] = []; // x = 1, y = 1
  18. let [x = 1, y = x] = [2]; // x = 2, y = 2
  19. let [x = 1, y = x] = [1, 2]; // x = 1, y = 2
  20. let [x = y, y = 1] = []; // Error x用到默认值y时, y还没被声明。
  21. //对象的解构赋值
  22. let { foo: one, bar: two } = { foo: "aaa", bar: "bbb" };
  23. one // "aaa"
  24. two // "bbb"
  25. foo // foo is not defined 对象的解构赋值是先找到同名属性, 然后再赋值给对应的变量
  26. let { foo, bar } = { foo: "aaa", bar: "bbb" }; //简写
  27. foo // "aaa"
  28. bar // "bbb"
  29. //指定默认值
  30. let { x, y = 5 } = { x: 1 };
  31. x // 1
  32. y // 5
  33. let { x: y = 3 } = { x: 5 };
  34. y // 5
  35. //字符串的解构赋值
  36. const [a, b, c, d, e] = "hello";
  37. a // "h"
  38. b // "e"
  39. c // "l"
  40. d // "l"
  41. e // "o"
  42. let { length: len } = "hello";
  43. len // 5
  44. //函数参数的解构赋值
  45. [[1, 2], [3, 4]].map(([a, b]) => a + b );
  46. // [3, 7]
  47. //函数参数指定默认值
  48. function desc({ x = 0, y = 0} = {}) {
  49.   return [x, y];
  50. }
  51. desc({ x: 3, y: 8 }) // [3, 8]
  52. desc({ x: 3 }) // [3, 0]
  53. desc({}) // [0, 0]
  54. desc() // [0, 0]
  55. //undefined触发函数参数的默认值
  56. [1, undefined, 3].map((x = "2") => x);
  57. // [1, 2, 3]
  58. /*--常见用途--*/
  59. //交换变量
  60. let x = 1, y = 2;
  61. [x, y] = [y, x];
  62. //函数返回多个值
  63. function example() {
  64.   var obj = {
  65.     foo: [1, 2, 3],
  66.     bar: { d: 4, e: 5 }
  67.   }
  68.   return obj;
  69. }
  70. let { foo: [a, b, c], bar : { d, e } } = example();
  71. //提取JSON数据
  72. var json = {
  73.   result: "success",
  74.   info: {
  75.     id: 22,
  76.     name: "RetroAstro",
  77.     avatar: "cream.png",
  78.     detail: ["111", "222", "333"]
  79.   }
  80. }
  81. let { result, info: { id , name, avatar, detail: [a, b, c] } } = json;
  82. //遍历Map接口
  83. var map = new Map([
  84.     ["first", "one"],
  85.     ["second", "two"]
  86. ]);
  87. for ( let [key, value] of map.entries() ) {
  88.    console.log(key, value);
  89. }
模板字符串 
</>复制代码 
  1. //常用实例
  2. var obj = {
  3.   username: "RetroAstro",
  4.   avatar: "user.png",
  5.   info() {
  6.     var x = 1, y = 2;
  7.     return x + y;
  8.   }
  9. }
  10. var str = 
  11. `
  12.     ${obj.username}
  13.     /g, ">");
  14.       str += template[i];
  15.    }
  16.    return str;
  17. }
  18. var user = "";
  19. safeHTML`
    ${user} has sent you a message.
    `;
  20. // "
     has sent you a message.
    "
函数的扩展 
</>复制代码 
  1. //函数参数默认值
  2. var $ = {
  3.   ajax({
  4.      method = "GET",
  5.      url = "",
  6.      async = true,
  7.      headers = {},
  8.      encType = "",
  9.      data = "",
  10.      dataType = "json",
  11.      success = function() {},
  12.      error = function() {}  
  13.   }) {
  14.      // start xhr ...
  15.   }
  16. }
  17. //箭头函数
  18. var x = 5, y = 6;
  19.     
  20. var f = () => { return x + y }; 
  21. //等价于
  22. var f = () => x + y;
  23. //等价于
  24. var f = function() {
  25.    return x + y;
  26. }
  27. //rest参数和变量解构
  28. var f = ({first, last}, ...values) => [first, values, last];
  29. f({ first: "Retro", last: "Astro" }, 2, 3, 4, 5);
  30. // ["Retro", [2, 3, 4, 5], "Astro"]
  31.     
  32. //箭头函数中的this指向
  33. function foo() {
  34.   setTimeout(() => {
  35.     console.log(this.id);
  36.   }, 1000)
  37. }
  38. // 等价于
  39. function foo() {
  40.   var that = this;
  41.   setTimeout(function() {
  42.      console.log(that.id);
  43.   }, 1000)
  44. }
  45. foo.call({id: "233"}); // 233
  46. /*
  47.  @ 箭头函数里面根本没有自己的this, 而是引用外层的this。
  48.  @ 箭头函数里没有arguments, super, new.target 三个变量, 而指向外层函数对应的值。
  49.  */
  50. //尾调用优化
  51. function fatorial(n) {
  52.    if ( n === 1 ) { return 1; }
  53.    return n * factorial(n-1); // 一般的递归, 保存多个调用记录, 非常消耗内存。
  54. }
  55. function factorial(n, total) {
  56.    if ( n === 1 ) { return total; }
  57.    return factorial(n-1, n * total); // 尾递归优化
  58. }
  59. //蹦床函数, 将递归执行转为循环执行。
  60. function trampoline(f) {
  61.    while ( f && f instanceof Function ) {
  62.       f = f();
  63.    }
  64.    return f;
  65. }
  66. function sum(x, y) {
  67.    if (y > 0) {
  68.       return sum.bind(null, x+1, y-1);
  69.    } else {
  70.       return x;
  71.    }
  72. }
  73. trampoline(sum(1, 100000)); // 100001
  74. //tco函数 —— 更好的尾递归优化实现
  75. function tco(f) {
  76.   
  77.    var value;
  78.    var active = false;
  79.    var accumulated = [];
  80.   
  81.    return function accumulator() {
  82.       accumulated.push(arguments); // 传入类数组对象[x, y]且每次的值在改变。
  83.       if ( !active ) {
  84.          active = true;
  85.          while ( accumulated.length ) {
  86.             value = f.apply(this, accumulated.shift());
  87.             /*
  88.             调用外部函数, 此时while循环继续。
  89.             active为true, 但accumulated中参数变化。
  90.             当accumulated中的值为空时, x值value接收并返回。
  91.             */
  92.          }
  93.          active = false;
  94.          return value;
  95.       }
  96.    }
  97.    
  98. }
  99. var sum = tco(function(x, y) {
  100.    if ( y > 0 ) {
  101.       return sum(x+1, y-1); // 相当于再次执行accumulator函数, 且传入新的参数值。 
  102.    } else {
  103.       return x;
  104.    }
  105. })
  106. sum(1, 100000) // 100001
  107. /*
  108.  @ 尾递归实现 —— 改写一般的递归函数, 确保最后一步只调用自身。
  109.  --- 尾递归优化 ---
  110.  @ 实现意义 —— 防止栈溢出, 相对节省内存。(函数里面调用函数才叫递归执行, 产生前面的副作用)
  111.  @ 实现要点 —— 减少调用栈, 采用循环从而替换掉递归。
  112.  */
数组的扩展 
</>复制代码 
  1. //扩展运算符
  2. ...[1, 2, 3, 4, 5] 
  3. // 1 2 3 4 5
  4. var nodeList = document.querySelectorAll("div");
  5. [...nodeList];
  6. // [
    , 
    , 
    ]
  7. var arr1 = [1, 2, 3];
  8. var arr2 = [4, 5, 6];
  9. arr1.push(...arr2)
  10. console.log(arr1) // [1, 2, 3, 4, 5, 6]
  11. let map = new Map([
  12.     [1, "one"],
  13.     [2, "two"],
  14.     [3, "three"]
  15. ])
  16. let arr = [...map.keys()]; // [1, 2, 3]
  17. /*
  18.  --- 用途 ---
  19.  @ 将数组转为用逗号分隔的参数序列
  20.  @ 可以展开任何含有Iterator接口的对象, 从而将其转变为数组。
  21.  */
  22. // Array.from()
  23. function foo() {
  24.   var args = Array.from(arguments);
  25.   // ...
  26. }
  27. let spans = document.querySelectorAll("span");
  28. // ES5
  29. let names1 = Array.prototype.map.call(spans, s => s.textContent); 
  30. // ES6
  31. let names2 = Array.from(spans, s => s.textContent);
  32. /*
  33.  --- 用途 ---
  34.  @ 将两类对象转为真正的数组。
  35.  @ 类似数组的对象 (array-like object)
  36.  @ 可遍历对象 (iterable)
  37.  */
  38. // Array.of() --- 将一组值转换为数组
  39. Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
  40. // find() --- 找出数组中符合条件的第一个成员并返回该成员。
  41. [1, 3, -8, 10].find( n => n < 0 ); // -8
  42. // findIndex() --- 找出数组中符合条件的第一个成员并返回该成员的位置。
  43. [1, 3, -8, 10].findIndex( n => n < 0 ); // 2
  44. // keys() values() entries() --- 返回一个遍历器对象, 用for...of循环遍历。
  45. var arr = ["a", "b"];
  46. for ( let key of arr.keys() ) {
  47.    console.log(key);
  48. }
  49. // 0 1
  50. for ( let value of arr[Symbol.iterator]() ) {
  51.    console.log(value); // Chrome, Firefox 未实现 arr.values()
  52. }
  53. // a b
  54. for ( let [key, value] of arr.entries() ) {
  55.    console.log(key, value);
  56. }
  57. // 0 "a"
  58. // 1 "b"
  59. // includes() --- 表示某个数组是否包含特定的值, 返回一个布尔值。(第二个参数表示搜索的索引位置)
  60. [1, 2, 3].includes(2, 1) // true
  61. [1, 2, 3].includes(2, 2) // false
对象的扩展 
</>复制代码 
  1. // Object.is() --- 比较两个数是否严格相等, 比 === 符号更好。
  2. +0 === -0 // true
  3. NaN === NaN // false
  4. Object.is(+0, -0) // false
  5. Object.is(NaN, NaN) // true
  6. // Object.assign() --- 将源对象所有可枚举的属性复制到目标对象。
  7. // 属于浅复制, 对于嵌套的对象只是复制对象的引用。
  8. /* --- 常见用途 ---*/
  9. // 为对象添加属性。
  10. class Point {
  11.   constructor(x, y) {
  12.      Object.assign(this, {x, y}); 
  13.   }
  14. }
  15. //为对象添加方法
  16. var foo = {};
  17. Object.assign(foo.prototype, {
  18.   method1() {
  19.       //...
  20.   },
  21.   method2() {
  22.       //...
  23.   },
  24.   method3() {
  25.       //...
  26.   }
  27. })
  28. // 克隆对象, 保持继承链。(浅复制) 
  29. function clone(obj) {
  30.    var proto = Object.getPrototypeOf(obj);
  31.    return Object.assign(Object.create(proto), obj);
  32. }
  33. // Object.setPrototypeOf()  Object.getPrototypeOf()
  34. // 设置或获取原型对象。
  35. let proto = {};
  36. let obj = { x: 10 };
  37. Object.setPrototypeOf(obj, proto);
  38. proto.y = 20;
  39. obj.y; // 20;
  40. Object.getPrototypeOf(obj) === proto // true
  41. // Object.keys()  Object.values()  Object.entries()
  42. // 对可遍历的属性起作用, 且可以用for...of循环遍历。
  43. let { keys, values, entries } = Object;
  44. let obj = { a: 1, b: 2, c: 3 };
  45. for ( let key of keys(obj) ) {
  46.    console.log(key); // a b c
  47. }
  48. for ( let value of values(obj) ) {
  49.    console.log(value); // 1 2 3
  50. }
  51. for ( let [key, value] of entries(obj) ) {
  52.    console.log([key, value]); // ["a", 1]  ["b", 2]  ["c", 3]
  53. }
Set, Map数据结构 
</>复制代码 
  1. // Set --- 成员值唯一的数据结构
  2. // 数组去重
  3. var arr = [1, 2, 3, 3, 4, 5, 5];
  4. // 方法一
  5. [...new Set(arr)]; // [1, 2, 3, 4, 5]
  6. // 方法二
  7. Array.from(new Set(arr)); // [1, 2, 3, 4, 5]
  8. /*
  9.  @ 具有 add(), delete(), has(), clear() 方法。
  10.  @ 包含 keys(), values(), entries(), forEach() 遍历操作方法。
  11.  */
  12. // Map --- 属于键值对的数结构, 且与对象不同。各种类型的值都可以当作键。
  13. // Map转数组
  14. var arr = ["a", "b", "c"];
  15. let map = new Map( arr.map((p, i) => [i, p]) );
  16. [...map]  // [[0, "a"], [1, "b"], [2, "c"]]
  17. // Map转对象
  18. function mapToObj(map) {
  19.    let obj = {};
  20.    for ( var [k, v] of map ) {
  21.       obj[k] = v;
  22.    }
  23.    return obj;
  24. }
  25. // 对象转Map
  26. function objToMap(obj) {
  27.    let map = new Map();
  28.    for ( var k of Object.keys(obj) ) {
  29.       map.set(k, obj[k]);
  30.    }
  31.    return map;
  32. }
  33. /*
  34.  @ 具有 set(key, value), get(key), has(key), delete(key), clear() 方法。
  35.  @ 包含 keys(), values(), entries(), forEach() 等遍历方法。 
  36.  */
  37. // WeakSet, WeakMap
  38. // WeakSet 实例
  39. class Foo {
  40.   constructor() {
  41.     foo.add(this);
  42.   }
  43.   method() {
  44.     if ( !foo.has(this) ) {
  45.        throw new TypeError("只能在Foo的实例上使用!");
  46.     }
  47.   }
  48. }
  49. // WeakMap 实例
  50. let Element = document.querySelector(".logo");
  51. let wm = new WeakMap();
  52. wm.set(Element, { timesClicked: 0 });
  53. Element.addEventListener("click", () => {
  54.   var logo = wm.get("Element");
  55.   logo.timesClicked++;
  56. });
  57. // 一旦DOM节点被删除, 点击一次更新的状态就会消失。
  58. const listener = new WeakMap();
  59. listener.set(element, handler);
  60. element.addEventListener("click", listener.get(element), false);
  61. // 一旦DOM对象消失, 其绑定的监听函数也会消失。
  62. /*
  63.  --- 特点 ---
  64.  @ 其成员都只能是对象而且为弱引用, 即垃圾回收机制不考虑对该对象的引用。
  65.  @ 所引用的对象在外部被清除, 里面的键名对象和对应的键值对自动消失从而防止了内存泄漏。
  66.  */
Iterator 和 for...of 循环 
</>复制代码 
  1. /*
  2.  --- Iterator ---
  3.  @ 它是一种遍历器接口, 为各种不同的数据结构提供统一的访问机制。
  4.  --- 作用 --- 
  5.  @ 使数据结构的成员能够按某种次序排序。
  6.  @ 部署了Iterator接口的数据结构可供for...of循环遍历。
  7.  */
  8. /*
  9.  --- 原生具备Iterator接口的数据结构 ---
  10.  @ Array
  11.  @ Map
  12.  @ Set
  13.  @ String
  14.  @ TypedArray
  15.  @ 函数的arguments对象
  16.  @ NodeList对象
  17.  */
  18. // 为对象添加Iterator接口
  19. var obj = {
  20.     data: ["hello", "world"],
  21.     [Symbol.iterator]() {
  22.        const self = this;
  23.        let index = 0;
  24.        return {
  25.           next() {
  26.              if ( index < self.data.length ) {
  27.                 return {
  28.                    value: self.data[index++],
  29.                    done: false
  30.                 }
  31.              } else {
  32.                 return {
  33.                    value: undefined,
  34.                    done: true
  35.                 }
  36.              }
  37.           }
  38.        }
  39.     }
  40. }
  41. for ( var x of obj ) {
  42.    console.log(x);
  43. }
  44. // hello world
  45. var itrable = obj[Symbol.iterator]();
  46. iterable.next();
  47. // {value: "hello", done: false}
  48. iterable.next();
  49. // {value: "world", done: false}
  50. iterable.next();
  51. // {value: "undefined", done: true}
  52. /*
  53.  --- for...of ---
  54.  @ 用于遍历键值, 遍历数组时只返回具有数字索引的属性比for...in更加可靠。
  55.  @ 用于循环遍历部署了Symbol.iterator接口属性的数据结构。
  56.  */
  57. let arr = [3, 5, 7];
  58. arr.foo = "hello";
  59. for (let i in arr) {
  60.    console.log(i) // "0", "1", "2", "foo"
  61. }
  62. for (let i of arr) {
  63.    console.log(i) // "3", "5", "7"
  64. }

参考书籍 : 《 ES6标准入门 》( 阮一峰 )

云服务器 GPU云服务器 python语法笔记 python常用语法 ES6 es6-系列

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

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

相关文章

  • 2017-08-08 前端日报

    摘要：前端日报精选一行代码的逆向工程译只需四个步骤使用实现页面过渡动画如何实现一个基于的模板引擎解剖组件的多种写法与演进深入理解笔记扩展对象的功能性中文基础系列一之实现抽奖刮刮卡橡皮擦掘金小游戏个人文章和最常用的特征众成翻译常用语法总 2017-08-08 前端日报 精选 一行 JavaScript 代码的逆向工程【译】只需四个步骤：使用 React 实现页面过渡动画如何实现一个基于 DOM...

    alin 评论0 收藏0

  • 前端学习路线

    摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

    FullStackDeveloper 评论0 收藏0

  • 前端学习路线

    摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

    20171112 评论0 收藏0

  • 慕课网js面试题学习笔记(ES6 标准) ——实时更新

    摘要：而第一种方法只能判断引用类型，不能判断值类型，因为值类型没有对应的构造函数描述一个对象的过程生成一个新的空对象指向这个新对象执行构造函数中的代码，即对赋值将新对象的属性指向构造函数的属性返回，即得到新对象。 最近在在看前端面试教程，这篇文章里大部分是看视频的过程中自己遇到的不清楚的知识点，内容很简单，只是起到一个梳理作用。有些地方也根据自己的理解在作者的基础上加了点东西，如有错误，欢迎...

    netmou 评论0 收藏0

发表评论

登陆后可评论

0条评论

church

男|高级讲师
我要私信

TA的文章

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