一.ES5新增迭代API

①forEach 遍历所有数组元素

参数:forEach(回调函数)

回调函数(元素值,[元素索引],[元素所在的数组名])

返回值:无

let arr = [6,5,7,4,8,9];
function add(x,index,a){
         a[index] += 10;
     }
 arr.forEach(add);
 console.log(arr);

②map:不考虑返回值的情况下和forEach没任何区别

map有返回值,返回值是通过回调函数return的数值构成的新数组

     let arr = [6,5,7,4,8,9];
     function add(x,index,a){
         a[index] += 10;
         return a[index];
     }
     let arr1 = arr.map(add);
     console.log(arr1);

③filter:数据过滤

参数:回调函数--->回调函数的参数都一样

返回值:满足过滤条件数组元素

    let arr = [6,5,7,4,8,9];
    function fun(x){
        if(x%2){
            return true;
        }else{
            return false;
        }
    }   
    let arr1 = arr.filter(fun);
    console.log(arr1);

二.面向过程和面向对象的异同

①面向过程

程序 = 算法 + 语法;

算法:强调步骤，一步接一步

面向过程编程思想的缺陷:1.在简单的事情，随着问题规模的增加，项目最后都会变得无法控制2.复用性比较差 (函数)

②面向对象

程序 = 对象1 + 对象2 + ... + 对象n;

对象:独立的包裹单位，包含了该对象相关的所有属性和方法

分析问题时：优先考虑对象概括来说就是：万物皆为对象。

三.类和对象

①类和对象

对事物进行抽象，抽象->对事物进行描述的过程

抽象出属性和行为，然后将拥有相同属性和行为特征的对象归纳，这就是类

②类:拥有相同属性和行为特征的对象得集合（模板）,它是一种类型，不是真正存在的

③对象:类的实例化(真实存在的)

四.ES5创建类

JS虽然使用了面向对象思想，但是没有类的概念，通过函数模拟类，被当做类的函数，也称为构造函数

①this指向

a.与事件体连用，触发该事件的元素

b.与普通函数连用(除了事件体和构造方法),调用函数的对象

c.与构造函数连用,new出来的对象

d.与箭头函数连用,（箭头函数是没有this）,这里的this是他父元素的前缀

②普通函数和构造函数的区别

a.构造函数首字母建议大写

b.构造函数不能有return

c.构造函数必须和new关键字连用，代表创建对象

 //在构造方法中出现的this,是new出来的对象
    function Student(name,age,gender){
        //定义属性:其实就是变量
        this.name = name;
        this.age = age;
        this.gender = gender;
        //定义行为:就是函数
        this.eat = function(){
            console.log("eat");
        }
        this.sleep = function(){
            console.log("sleep");
        }
        //在一个成员的方法中，使用其他成员
        this.showValue = function(){
            console.log(this.name,this.age,this.gender);
            this.sleep();
            this.eat();
        }
    }
    let s1 = new Student("老王",18,'M');
    // console.log(s1.name,s1.age,s1.gender);

    // s1.eat();
    // s1.sleep();
    s1.showValue();
    let s2 = new Student("罗翔",48,'M');
    s2.showValue();

五.ES6创建类

   class 类名{
         //构造方法
         constructor(){
         }
         //其他方法
     }
//==============================================================================
    class Student{
        //构造方法中构造属性
        //constructor固定的关键字，代表构造函数
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        sleep(){
            console.log("sleep");
        }
        showValue(){
            console.log(this.name,this.age);
            this.sleep();
        }
    }
    let s = new Student("9527","M");//--->调用的是constructor
    s.showValue();

课堂练习

//1.有一个正立方体，边长a为10;求它的体积volume.=====================================
    //a.找对象b.根据对象抽象出其属性和行为创建类c.通过类实例化对象使用

    class squre {
        constructor(a) {
            this.a = a;
        }

        area() {
            return Math.pow(this.a, 3);
        }
    }

    let s = new squre(10);

    console.log(s.area());

//2.编写一个分数类，数据成员包含分子与分母，实现+，-，*，/==============================
    class A {
        constructor(n, m) {
            this.n = n;
            this.m = m;
        }
        calc(data, op) {
            switch (data, op) {
                case "+":
                    return this.n / this.m + data.n / data.m;
                case "-":
                    return this.n / this.m + data.n / data.m;
                case "*":
                    return this.n / this.m + data.n / data.m;
                case "/":
                    return this.n / this.m + data.n / data.m;
            }
        }
    }

    let x1 = new A(2, 3);
    let x2 = new A(4, 5);

    console.log(x1.calc(x2, "+"));

//放大镜作业===================================================================
  let oLis = document.querySelectorAll("li");
    let oBox = document.querySelector("#box");

    for(let i=0; i<oLis.length; i++){
        oLis[i].onmouseover = function(){
            oBox.style.display = "block";
        }

        oLis[i].onmouseout = function(){
            oBox.style.display = "none";
        }

        oLis[i].onmousemove = function(evt){
            oBox.style.left = evt.pageX +10+ "px";
            oBox.style.top = evt.pageY +10+ "px";
            oBox.style.backgroundImage = `url(img/shirt_${i+1}_big.jpg)`;
        }
    }
//双色球========================================================================
  function doubleColorBall(){
        let blue = 0;
        let redArr = [];
        blue = rand(1,16);
        let set = new Set();
        while(true){
            if(set.size == 6){
                break;
            }
            set.add(rand(1,33))
        }
        redArr = Array.from(set);
        console.log(redArr);
        console.log(blue);
    }
    doubleColorBall();

    function rand(min,max){
        return Math.round(Math.random()*(max-min)+min);
    }

JS--Day16(面向对象+创建类)