箭头函数的基础使用

  1. //箭头函数
  2. const add = (a, b) => {
  3. return a + b
  4. };
  5. console.log(add(10, 20));
  6. //如果只有一条语句 可以不用{};
  7. //如果这一条语句 是返回表达式,可以不用return
  8. const one = (a) => a * a;
  9. console.log(one(10));
  10. //如果只有一个形参,可以不用();
  11. //如果没有参数或两个及两个以上的参数必须用();
  12. const two = a => a * a;
  13. console.log(two(2));
  14. //如果返回对象时,必须在外面用()
  15. const obj = () => ({
  16. a: "222", b: "111", say() {
  17. //箭头函数的自身是没有 this的,在哪调用 就是哪父类,和调用者无关,是继承而来
  18. //console.log(this);//{a: '222', b: '111', say: ƒ}//相当于是 obj()
  19. return this.a;
  20. }
  21. });
  22. var res = obj().say();
  23. console.log(obj());//{a: '222', b: '111', say: ƒ}
  24. console.log(res);//222
  25. let arr = [1, 2, 3, 51, 12, 41, 421, 23];
  26. //排序
  27. console.log(arr.sort((a, b) => a - b));
  28. // for-of变量是将arr的值给n;for-in 是将下标给n
  29. for (let n of arr) {
  30. console.log(n);
  31. }
  32. //过滤 arr.filter(n=>n>10) 得到一个大于10的数组
  33. //arr.filter(n=>n>10).map(n=>n*0.5) 遍历大于10 的数组 各个值*0.5 得到一个新的数组 b
  34. //b.reduce((s,n)=>s+n) 计算数组各个值 之和
  35. let result = arr.filter(n => n > 10).map(n => n * 0.5).reduce((s, n) => s + n)
  36. console.log(result);//274
  37. setTimeout(() => {
  38. console.log('----------')
  39. }, 100);
  40. //模板字符串 ` `反引号
  41. let aString = `<h1>
  42. <div>
  43. ${arr}
  44. </div>
  45. </h1>`
  46. console.log(aString)
  47. /*
  48. <h1>
  49. <div>
  50. 1,2,3,12,23,41,51,421
  51. </div>
  52. </h1>
  53. */
  54. //解构赋值,左右两边结构一模一样
  55. //左边的元素可以比右边少,从左往右 挨个赋值,少几个右边后面的就不赋值
  56. //对象解构赋值:左边的元素是右边对象的键名;
  57. let [one1, two1, three] = ['aaa', 'bbb', 'ccc']
  58. console.log(one1);//aaa
  59. console.log(two1);//bbb
  60. console.log(three);//ccc
  61. let {name, age, sex} = {name: 'zhang', age: 18, sex: 'nv'}
  62. console.log(name);//zhang
  63. console.log(age);//18
  64. console.log(sex);//nv
  65. //展开(扩展)运算符...
  66. let arr1= [1,2,3];
  67. console.log(...arr1);//1 2 3
  68. let arr2=['aaa',...arr1,'bbb','ccc']
  69. console.log(arr2);//['aaa', 1, 2, 3, 'bbb', 'ccc']
  70. function fun(...arr) {
  71. return arr;
  72. }
  73. console.log(fun(1, 2, 3));// [1, 2, 3]