[关闭]
@JunQiu 2018-09-18T12:58:26.000000Z 字数 2657 阅读 577

Js_箭头函数、解构赋值

summary_2018/07 language_js


1、日常工作


2、技术学习

  1. ### 解构数组
  2. var x = [1, 2, 3, 4, 5];
  3. var [y, z] = x;
  4. console.log(y); // 1
  5. console.log(z); // 2
  6. ## 设置默认值
  7. 为了防止从数组中取出一个值为undefined的对象,可以为这个对象设置默认值。
  8. [a=5, b=7] = [1];
  9. console.log(a); // 1
  10. console.log(b); // 7
  11. ## 交换变量
  12. [a, b] = [b, a];
  13. console.log(a); // 3
  14. console.log(b); // 1
  15. ## 忽略某些返回值
  16. function f() {
  17. return [1, 2, 3];
  18. }
  19. var [a, , b] = f();
  20. console.log(a); // 1
  21. console.log(b); // 3
  22. ## 剩余数组赋值给变量
  23. var [a, ...b] = [1, 2, 3];
  24. console.log(a); // 1
  25. console.log(b); // [2, 3]
  26. ### 解构对象(对应关系)
  27. var o = {p: 42, q: true};
  28. //必须是对象中存在的值,否则返回undefined,给新变量赋值见后文
  29. var {p, q} = o;
  30. console.log(p); // 42
  31. console.log(q); // true
  32. ## 无申明赋值
  33. var a, b;
  34. ({a, b} = {a: 1, b: 2});
  35. ## 给新变量赋值
  36. var o = {p: 42, q: true};
  37. var {p: foo, q: bar} = o;
  38. //p和q与对象对应
  39. console.log(foo); // 42
  40. console.log(bar); // true
  41. ##默认值
  42. var {a:aa = 10, b:bb = 5} = {a: 3};
  43. //a与对象中的a对应
  44. console.log(aa); // 3
  45. console.log(bb); // 5
  46. Tips:{a, b} ={a:1,b:2}不是有效的独立语法,因为左边的{a, b}被认为是一个块而不是对象字面量。然而,({a, b} = {a: 1, b: 2})是有效的,正如 var {a, b} = {a: 1, b: 2}
  47. 注意:你的( .. ) 表达式需要一个分号在它前面,否则它也许会被当成上一行中的函数来执行。
  48. ### Stage 3 proposal(草案)
  49. [a, b, ...rest] = [10, 20, 30, 40, 50];
  50. console.log(a); // 10
  51. console.log(b); // 20
  52. console.log(rest); // [30, 40, 50]
  53. ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
  54. console.log(a); // 10
  55. console.log(b); // 20
  56. console.log(rest); //{c: 30, d: 40}
  57. 更多请见原文。。。

  1. ### 基础语法
  2. (参数1, 参数2, …, 参数N) => { 函数声明 }
  3. (参数1, 参数2, …, 参数N) => 表达式(单一)
  4. //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
  5. // 当只有一个参数时,圆括号是可选的:
  6. (单一参数) => {函数声明}
  7. 单一参数 => {函数声明}
  8. // 没有参数的函数应该写成一对圆括号。
  9. () => {函数声明}
  10. ### 高级语法
  11. //加括号的函数体返回对象字面表达式:
  12. 参数=> ({foo: bar})
  13. //支持剩余参数和默认参数
  14. (参数1, 参数2, ...rest) => {函数声明}
  15. (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
  16. //同样支持参数列表解构
  17. let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
  18. f(); // 6
  19. ### 箭头函数的一些特点和优势
  20. ## 简短的语法,适应于匿名函数的地方
  21. ## 不绑定this
  22. 在箭头函数出现之前,每个新定义的函数都有它自己的 this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为undefined,如果该函数被称为“对象方法”则为基础对象等)
  23. function Person() {
  24. // Person() 构造函数定义 `this`作为它自己的实例.
  25. this.age = 0;
  26. setInterval(function growUp() {
  27. // 在非严格模式, growUp()函数定义 `this`作为全局对象,
  28. // 与在 Person()构造函数中定义的 `this`并不相同.
  29. this.age++;
  30. }, 1000);
  31. }
  32. var p = new Person();
  33. ECMAScript 3/5中,通过将this值分配给封闭的变量,可以解决this问题。/或者使用bind()绑定
  34. function Person() {
  35. // 将this传递给that
  36. var that = this;
  37. that.age = 0;
  38. setInterval(function growUp() {
  39. // 回调引用的是`that`变量,其值是预期的对象.若不传入为Timeout对象
  40. that.age++;
  41. }, 1000);
  42. }
  43. ## Tips:箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
  44. function Person(){
  45. this.age = 0;
  46. setInterval(() => {
  47. this.age++; // |this| 正确地指向person 对象
  48. }, 1000);
  49. }
  50. var p = new Person();
  51. ## this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略
  52. var obj = {
  53. birth: 1990,
  54. getAge: function (year) {
  55. var b = this.birth; // 1990
  56. // this.birth仍是1990
  57. var fn = (y) => y - this.birth;
  58. return fn.call({birth:2000}, year);
  59. }
  60. };
  61. obj.getAge(2015); // 25
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注