• 七天入门node.js（02）

    es6面向对象

    什么是面向对象

    机器语言->汇编语言->低级语言(面向过程)->高级语言(面向对象)->框架->api

    面向对象 : 把一些公共的东西封装起来 , 通过new出来的对象直接调用就行

    面向对象的知识点-call

    类和构造函数

    改变this指向

    call 是什么

    1.  function fn(...args) {
    2.     console.log(this, args);
    3.   }
    4.  
    5.   /*
    6.   * fn 放在对象中 对象.fn()可以调用这个方法 此时this指向该对象
    7.   * */
    9.   /* 
    10.   * 改变this指向 js提供三个方法  call apply bind
    11.   * 函数.call(参数1:想改变成的this, 后面的参数 会依次传递到原函数中)
    12.   * 函数.apply(参数1:想改变成的this, 第二个参数是一个数组)
    13.   * 函数.apply(参数1:想改变成的this,后面的参数 会依次传递到原函数中) 
    14.   		特点: 不会立即执行, 会返回一个新的函数 执行这个函数就可以传递
    15.   *
    16.   * */
    17.   let arr = [1, 2, 3];
    18.   fn.call(arr, '小耿', '小杨', '小候',);

    call的应用-类型判断

    1. /*
    2. * 所以 对于类型检测 最好采用下面方式:
    3. * */
    4. const isType = type => target => `[object ${type}]` === Object.prototype.toString.call(target);
    5.  
    6. const isArray = isType("Array");
    7. const isObject = isType("Object");
    8. const isRegExp = isType("RegExp");
    9. const isNull = isType("Null");
    10. console.log(isArray({}));

    apply

    1.   function fn1(...args) {
    2.  
    3.     console.log(this, args);
    4.   }
    5.  
    6.   let obj = {name: '张三'};
    7.  
    8.   //call 传参可以传无限个  apply 传参用数组的方式传递
    9.   fn1.apply(obj, ['1', '2','fsfs']);

    bind

    1.   function fn(...args) {
    2.     console.log(this,args);//['hello',{name: 'name'},'1,2,3']
    3.   }
    4.  
    5.   let arr = [1, 2, 3];
    6.  
    7.   //bind也可以改变this指向  但是不会立即执行
    8.   //此时 bind返回一个新的函数
    9.   //如果想传参的话 通过fn.bind 或者 返回的新的函数中传参
    10.   const newFn = fn.bind(arr, 'hello',{name: 'name'});
    11.   newFn('1,2,3');

    面向对象的知识点-prototype

    prototype的本质

    对象.__proto__ === 类.prototype  解释过来就是 类可以调用的属性或者方法都在对象的原型上

    es6中面向对象

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6. </head>
    7. <body>
    8. <script>
    9.  
    10.   /*
    11.   * es5中的面向对象
    12.   *
    13.   * */
    15.   let arr = new Array(1, 2, 3);
    16.  
    17.   //1: 对象(实例)  = new 类/构造函数()
    18.  
    19.  
    20.   //Person 大写
    21.  
    22.   //Person 类 === 构造函数
    23.   //es中 类 === 构造函数
    24.   //类: 只要有 new new后面跟着的就是类
    25.   //构造函数 : 通过参数 可以传递到函数本身的this身上
    26.  
    27.  
    28.   function Person(name,age) {
    29.     //this === person // true
    30.     this.name = name;
    31.     this.age = age;
    32.  
    33.     this.fn = function () {
    34.       console.log(this === person);
    35.  
    36.     }
    37.   }
    38.  
    39.   //new 得到了实例
    40.   let person = new Person('张三',20);//对象
    41.   console.log(person.name);
    42.   console.log(person.age);
    43.   console.log(person.fn());
    44.  
    45.  
    46. </script>
    47. </body>
    48. </html>

    super : 父类的原型

    1. class Person {
    2.     constructor(name) {
    3.       this.name = name;
    4.       console.log(this.name);
    5.     }
    6.  
    7.     getName() {
    8.       console.log('父类的getName');
    9.     }
    10.   } 
    11. class Man extends Person {
    12.     constructor(props) {
    13.       super(props);
    14.        super.getName();//调用父类的getName()
    15.     }
    16.  }

    es6实现完整的继承

    1.  class Person {
    2.     constructor(name) {
    3.       this.name = name;
    4.       console.log(this.name);
    5.     }
    6.  
    7.     getName() {
    8.       console.log('父类的getName');
    9.     }
    10.   }
    11.  
    12.   class Man extends Person {
    13.     constructor(props) {
    14.       super(props);
    15.  
    16.     }
    17.     getName() {
    18.       console.log('子类的getName')
    19.     }
    20.  
    21.     getSuperName() {
    22.       super.getName();
    23.  
    24.       console.log(Person.prototype.getName === super.getName);
    25.  
    26.     }
    27.  
    28.   }
    29.  
    30.   new Man('小明').getSuperName();
    31.

    面向对象-小球案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.  
    8.     .circle {
    9.       /*width: 40px;*/
    10.       /*height: 40px;*/
    11.       border-radius: 50%;
    12.       /*background-color: #d14596;*/
    13.       position: absolute;
    14.     }
    15.  
    16.     .rect {
    17.       position: absolute;
    18.     }
    19.   </style>
    20. </head>
    21. <body>
    22. <div id="box">
    23.   <button id="btnCircle">随机生成小球</button>
    24.   <button id="btnRect">随机生成方块</button>
    25. </div>
    26.  
    27. <script>
    28.   btnCircle.onclick = function () {
    29.     // 面向函数
    30.     // let oCircle = document.createElement('div')
    31.     // oCircle.classList.add('circle');
    32.     // box.appendChild(oCircle);
    33.  
    34.     // 面向对象
    35.     // 创建一个对象  class
    36.     new Circle();
    37.   };
    38.   btnRect.onclick = function () {
    39.     new Rect();
    40.   };
    41.  
    42.   class Graph{
    43.     random(min, max) {
    44.       return Math.floor(Math.random() * (max - min) + min);
    45.     }
    46.  
    47.     randomColor() {
    48.       //# 1-9 + abcdef
    49.       //#1efc4d
    50.       const letters = ['a','b','c','d','e','f'];
    51.       const strs = [...letters];
    52.       for (let i = 0; i < 10; i++) {
    53.         strs.push(i + '');
    54.       }
    55.       // console.log(strs);
    56.       //#1efc4d
    57.       let i = 0;
    58.       let colorStr = '#';
    59.       while (i < 6) {
    60.         //随机的下标
    61.         let index = this.random(0, strs.length);
    62.         colorStr += strs[index];
    63.         i++;
    64.       }
    65.       // console.log(colorStr);
    66.       return colorStr;
    67.     }
    68.   }
    69.  
    70.   class Circle extends Graph{
    71.     /*
    72.     * 构造函数可以省略
    73.     *
    74.     * 小球:属性 : 大小 小球的颜色 位置
    75.     *     方法 : 功能 创建小球/随机数/随机颜色/拖拽
    76.     *
    77.     * */
    78.     constructor() {
    79.       /*
    80.       * 属性 : 小球本身 颜色 位置
    81.       * */
    82.       /*大小*/
    83.       super();
    84.       this.r = this.random(10,100);
    85.       this.x = this.random(10,1200);
    86.       this.y = this.random(10,500);
    87.       this.color = this.randomColor();
    88.       //调用创建小球的方法
    89.       this.createEl();
    90.     }
    91.  
    92.     /*
    93.      * 方法 : 功能
    94.      * */
    96.     /*创建小球*/
    97.     createEl() {
    98.       let {r, color, x, y} = this;
    99.       this.circle = document.createElement('div');
    100.       this.circle.classList.add('circle');
    101.       this.circle.style.width = `${r * 2}px`;
    102.       this.circle.style.height = `${r * 2}px`;
    103.       this.circle.style.backgroundColor = `${color}`;
    104.       this.circle.style.left = `${x}px`;
    105.       this.circle.style.top = `${y}px`;
    106.       box.appendChild(this.circle);
    107.     }
    108.   }
    109.  
    110.   class Rect extends Graph{
    111.     /*
    112.     * 构造函数可以省略
    113.     *
    114.     * 小球:属性 : 大小 小球的颜色 位置
    115.     *     方法 : 功能 创建小球/随机数/随机颜色/拖拽
    116.     *
    117.     * */
    118.     constructor() {
    119.       super();
    120.       /*
    121.       * 属性 : 小球本身 颜色 位置
    122.       * */
    123.       /*大小*/
    124.       this.r = this.random(10,100);
    125.       this.x = this.random(10,1200);
    126.       this.y = this.random(10,500);
    127.       this.color = this.randomColor();
    128.       //调用创建小球的方法
    129.       this.createEl();
    130.       this.drag();
    131.     }
    132.  
    133.     /*
    134.      * 方法 : 功能
    135.      * */
    137.     /*创建小球*/
    138.     createEl() {
    139.       let {r, color, x, y} = this;
    140.       this.circle = document.createElement('div');
    141.       this.circle.classList.add('rect');
    142.       this.circle.style.width = `${r * 2}px`;
    143.       this.circle.style.height = `${r * 2}px`;
    144.       this.circle.style.backgroundColor = `${color}`;
    145.       this.circle.style.left = `${x}px`;
    146.       this.circle.style.top = `${y}px`;
    147.       this.circle.style.zIndex = '0';
    148.       box.appendChild(this.circle);
    149.     }
    150.     random(min, max) {
    151.       return Math.floor(Math.random() * (max - min) + min);
    152.     }
    153.  
    154.     drag() {
    155.       let {circle} = this;
    156.       let {zIndex} = circle.style;
    157.       circle.onmousedown = function (ev) {
    158.         // console.log(ev);
    159.         document.onmousemove = function (event) {
    160.           console.log(event);
    161.         };
    162.         document.onmouseup = function () {
    163.  
    164.         }
    165.       }
    166.     }
    167.  
    168.   }
    169.  
    170. </script>
    171. </body>
    172. </html>

    es6 中数组常用方法

    静态方法

    Array.from(): 将一个伪数组转换成数组

    1.  /*
    2.   * 数组的静态方法
    3.   * Array.from  将一个非数组-->数组  只能将伪数组变成数组
    4.   * Array.isArray  判断一个变量是不是数组
    5.   * */
    7.   /*
    8.   * 将一个非数组--》数组  Array.prototype 成员方法  Array.方法 静态方法
    9.   * Array.isArray() : 只能将伪数组变成数组  [下标]
    10.   * */
    11.   let newArr = Array.from('abc');
    12.   console.log(newArr);
    13.   console.log(Array.from(document.getElementsByTagName('li')));
    14.   console.log(Array.from(123));
    15.   // console.log(Array.from(undefined));
    16.   // console.log(Array.from(null));
    17.   console.log(Array.from({a:1,b:2}));
    18.   console.log(Array.from([1,2,3]));

    Array.is(): 判断是不是一个数组

    1.   //判断一个变量是不是数组
    2.   //typeof arr // object  这种局限性在于 引用类型通过typeof都会识别成 object
    3.   //这种方式就是专门用来判断是不是数组的
    4.   console.log(Array.isArray({}));

    成员方法

    这里面咱们主要是提出es6中给我们提供的一些数组的常用方法

    我们首先回顾es5中有哪些常用方法

    push / pop / shift / unshift / reserve / sort/ join/ concat

    回顾一下还记得其中的用法吗

    es6中数组新增常用的方法

    • arr.forEach()

    • arr.map()

    • arr.every()

    • arr.filter()

    • arr.reduce()

    • arr.some()

    • arr.find()

    • arr.findIndex()

      这些方法的共同特点是参数都是回调函数其中除了reduce之外别剩余的参数的回调函数都(item,index,arr)=>{} 其中 item为数组每一项 index为数组下标 arr为当前数组

      接下来我们一个一个看

    forEach

    1.   /*
    2.   * arr.forEach((item可写可不写,index可写可不写,arr可写可不写)=>{})
    3.   *
    4.   * 特点: 不能打断 比如 break continue 都不能用
    5.   *   return 也不好使
    6.   * */
    8.   let arr = [1, 2, 3];
    9.   arr.forEach((item,index,arr)=>{
    10.     //item : 数组中的每一个元素
    11.     //index: 下标
    12.     //arr : 数组本身
    13.     console.log(item, index, arr);
    14.     // if (index === 1) {
    15.     //   return;
    16.     // }
    17.   })
    18.  
    19. let arr = [1, 2, 3, 4];
    20.   /*
    21.   * 参数 : 函数 每一个我们想要的参数 都在函数的参数里面
    22.   * 没有返回值
    23.   * */
    24.   let newArr = arr.forEach((item, index, arr) => {
    25.     console.log(item);
    26.   });
    27.   console.log(newArr);

    map

    1.   let arr2 = [{name: '小候', age: 11},
    2.     {name: '小靳', age: 12},
    3.     {name: '小闫', age: 13}, {name: '小杨', age: 14}, {
    4.       name: '小袁',
    5.       age: 21
    6.     }, {name: '小赵', age: 22}, {name: '小兴', age: 23}, {name: '小康', age: 24}, {name: '小邵', age: 24}];
    7.   /*
    8.   * map:遍历
    9.   * 参数 : 是一个函数 每一个我们想要的参数 都在函数的参数里面
    10.   * 返回值 新的数组  newArray每次push的值 是map里面的返回值
    11.   * */
    13.   newArray = arr2.map((item, index, arr) => {
    14.     return ++item.age + 50;
    15.   });
    16.   console.log(newArray);

    some

    1.   /*
    2.   * some: 只要回调函数有某一个返回条件满足 就返回true
    3.   * */
    4.   flag = arr2.some(item => item.age > 20);
    5.   console.log(flag);

    filter

    1.   /*
    2.   * filter : 机制和forEach  作用是:过滤
    3.   * 返回值  : 返回新的数组 回调函数中返回的条件决定新的数组的元素
    4.   * */
    5.   newArr = arr2.filter((item, index) => {
    6.  
    7.     //条件一旦满足 newArr就会push当前item
    8.     return item.age > 20;
    9.   });
    10.   console.log(newArr);
    11.   console.log(`可以看电影的成员有:`);
    12.   newArr.forEach(item => console.log(`${item.name}`));

    reduce

    1.   /*
    2.   * reduce 面试常客
    3.   *
    4.   * 参数介绍:
    5.   * prev:  如果第一次循环 prev是数组里面的第一个元素
    6.   *        从第二次开始循环 prev是上一次回调函数的返回值
    7.   *
    8.   * next:  始终代表 下一次循环的元素
    9.   *
    10.   * */
    12.   [1, 2, 3, 4, 5].reduce((prev, next) => {
    13.     //1 , 2 第一次
    14.     //3 , 3 第二次
    15.     //6 , 4 第三次
    16.     console.log(prev, next);
    17.     return prev + next;
    18.   });
    19.  
    20.   /*
    21.   * 常用      forEach  map   filter some
    22.   * 不太常用 : find    every  reduce findIndex
    23.   * */

    不常用方法

    • find
    • findIndex
    • every

    find和findIndex

    1.   /*
    2.   * find:机制 forEach
    3.   * 从数组中查找到符合条件的元素, 返回一个我们查找到的元素在回调函数中返回我们查找的条件的第一个成员
    4.   * */
    5.   arr2 = [{name: '小候', age: 11},
    6.     {name: '小靳', age: 12},
    7.     {name: '小闫', age: 13}, {name: '小杨', age: 14}, {
    8.       name: '小袁',
    9.       age: 21
    10.     }, {name: '小赵', age: 22}, {name: '小兴', age: 23}, {name: '小康', age: 24}, {name: '小邵', age: 24}];
    11.  
    12.   let has = arr2.find(item => {
    13.     return item.age > 20;
    14.   });
    15.   // console.log(num);
    16.   if (has) {//元素 / undefined
    17.     console.log('终于找到你,还好我没放弃');
    18.   } else {
    19.     console.log('终于我们还是擦肩儿过');
    20.   }
    21.  
    22.   let index = arr2.findIndex(item => item.age === 11);
    23.   //如果没找到 返回-1 如果找到了 返回当前数组的下标
    24.   console.log('findIndex', index);

    every

    1.   /*
    2.   * every : 每一个都符合条件 只要有一个不符合条件 返回false
    3.   * */
    4.   let flag = arr2.every((item, index) => {
    5.     // return typeof item.age === 'number';
    6.     return item.age > 20;
    7.   });
    8.  
    9.   console.log(flag);
  • 相关阅读:
    我说MySQL联合索引遵循最左前缀匹配原则，面试官让我回去等通知
    内网穿透工具frp使用入门
    1164 Good in C – PAT甲级真题
    java题库——认证考试题1
    英语语法 - 宾语从句
    大家好这是一首诗
    Proteus仿真--1602LCD显示仿手机键盘按键字符（仿真文件+程序）
    Springboot健身房管理系统毕业设计源码031807
    scrapy框架搭建
    NFNet：NF-ResNet的延伸，不用BN的4096超大batch size训练 | 21年论文
  • 原文地址：https://blog.csdn.net/weixin_45311714/article/details/127649746