JS学习（4）

1.解构

中括号解构

var[x,y,z]=[10,20,30];
alert(x+","+y);
var [x,[a,b],y]=[10,[20,30],40];

大括号解构

var{name,age,sex}={
    age:18,
    name:"钢铁侠"，
    sex:'男'
  };
   alert(name);
   alert(age);
   alert(sex);

使用解构的好处

1. 交换两个数，比之前更加简单

var [x, y] = [10, 20];
[x, y] = [y, x];
alert(x + "," + y);//20 10

2. 函数可以返回多个值

function show() {
   return ["结果1", "结果2", "结果3"];

3. 函数定义参数，和传入参数的顺序改变
   [注]参数可以带默认值

function showSelf({ name, age=18, sex }) {
             alert("我叫" + name + "," + "今年" + age + ",是一位" + sex + "性");
             alert(`我叫${name},今年{Math.max(age,20)}岁,是一位${sex}性`);

         }
         showSelf({
             age: 18,
             sex: "男",
             name: "小明"
         }) 

4. 快速取出数组中的某一个元素

var arr = [10, 20, 30, 40, 50];
var { 0: first, 4: last } = arr;
alert(first);
alert(last == arr[4]);

传统字符串：所有单引号、双引号括起来的都叫做字符串
ECMA6字符串：反引号 ``

1. ECMA6字符串，想怎么写怎么写，换行，代码缩进，都能在字符串中体现出来
2. ${变量/表达式/函数调用}

2.数组方法和合并对象

• Array.from() 将伪数组转成真数组
• find() 在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历; 返回值：找到的元素

var arr = [10, 20, 30, 40, 50];
var res = arr.find(function (item, index, arr) {
             return item > 20;
  })
alert(res); 

• findIndex() 返回值：找到的元素的下标 function (item, index, arr)
• arr.copyWithin()
  第一个参数：从哪个下标开始
  第二个参数和第三个参数：范围[start,end)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.copyWithin(2, 4, 9);
alert(arr);//1,2,5,6,7,8,9,8,9

• object.assign 合并对象
  【注】将所有传入的对象，都合并到第一个对象中

        var obj1 = {
            a: 10
        }
        var obj2 = {
            b: 20,
            c: 30
        }
        var obj3 = {
            d: 40,
            f: ["hello", "world", true]
        }
        Object.assign(obj1, obj2, obj3);
		Console.log(obj1);//合并
        /*  obj2.b = 100;
         console.log(obj2); //改变100
         console.log(obj1);//不变 
 		obj3.f.push("xxx");
        console.log(obj3);//新增xxx
        console.log(obj1);//新增xxx

浅拷贝：复杂的类型时，只拷贝地址
深拷贝：简单类型时，拷贝所有的

3.新增语法集合

集合：1.不重复 2.无序

1. Set 键和值相同

let imgs = new Set();
imgs.add(100);
imgs.add(100);
imgs.add("hello");
imgs.add("hello");
imgs.add(true);
imgs.add(new String("world"));
imgs.add(new String("world")); //都进去了，是不同对象

//集合遍历  for..of

   	  for (let item of imgs.keys()) {
            console.log(item);
        } 
        
     for (let item of imgs.values()) { //键值遍历
           console.log(item);
       }  

       for (let item of imgs.entries()) {
            console.log(item);
        } 
//数组变集合
       var set = new Set([10, 20, 30, 40, 50, 40, 30, 20, 10]);
       console.log(set); 

//集合变数组  将数据结构展开成数组  也可以用Array from
     var arr = [...set];
     alert(arr);

2. Map

//map 映射
let map = new Map();
map.set("张三", "打渔的");
map.set("李四", "种地的");
map.set("王五", "挖煤的");
map.set("张三", "打猎的");
console.log(map);

 //取值
/* alert(map.get("王五")); */

//map遍历 通过 for of
 for (let [key, value] of map) {
     console.log(key, value);
  }

数组遍历 for for…in forEach for…of
对象 for…in
Set for…of
Map for…of

for (var i in arr) {
        document.write("for...in循环" + arr[i] + "," + i + "
");
        }
        arr.forEach(function (item, index) {
            document.write("forEach:" + item + "," + index + "
");
        });

for (var item of arr) {
            document.write("for..of:" + item + "
");
        }

4.面向对象

1. 历史
   面向过程编程语言：汇编语言，c语言
   面向对象编程语言：c++ java javascript python
2. 思想
   面向过程编程思想：只关心数学逻辑
   面向对象编程思想：
    1.找出实体
    2.分析实体属性和功能
    3.让实体之间相互作用
    4.语法
       类：一类具有相同特征食物的抽象概念
       对象：具体的某一个实例，唯一的某一个个体
      类     对象
      电脑   你面前的那台
    5.数据结构
    基本数据类型（只能存储单个的值）=》数组（处理批量的数据）=》对象（既能存储数据，又能存储函数）

5.构造函数

1.无new  2.需要共有一个方法
如果，我们某一个函数，使用new运算符去调用
1.当前函数中的this指向新创建的对象
2.自动取完成1，原料和3出厂操作
自动完成 this=new Object(); return obj
这种通过new调用函数，我们把它叫做构造函数，构造函数可以构造对象
【注】构造函数一般情况下首字母大写
如果创作多个类似对象，直接创建会违背编程规则，需要封装一个函数，然后封装函数的函数，然而每有一个对象，都有独有的方法，需要封装一个构造函数
构造函数不是共用一个方法
prototype 原型对象 原型是一个对象
概念：每一个函数上，都有一个原型对象prototype,但是对于普通函数，原型没有用，放在构造函数对象上

原型用在构造函数上，我们可以给构造函数的原型prototype，添加方法
1. 如果我们将方法添加到构造函数的原型prototype对象上
2. 构造函数构造出来的对象共享原型上所有的方法

原型链继承
继承和多态同一件事的两种完全不同的侧重
继承：侧重是从父一级构造函数，继承到的属性和方法
多态：侧重是，子一级，自己重写和新增的属性和方法

面向对象是一个编程思想 支持面向对象的思想是类（es6之前无，采用构造函数的方法）

function Dog({ name, type, age }) {
            this.name = name;
            this.type = type;
            this.age = age;
}

//通过构造函数的原型添加方法
Dog.prototype = {
       run: function () {
                alert(this.name + '会飞快的奔跑');
      },
      showSelf: function () {
                alert(`这是一个${this.type}的，${this.age}岁的，叫${this.name}的小狗`);
      }
}

//分类更加细分的构造函数，继承
function Teddy({ name, type, age, color }) {
  //继承父一级构造函数所以的属性
     Dog.call(this, {
          name: name,
          type: type,
          age: age
    })
    //添加自己的属性
      this.color = color;
   }
       
//原型链继承
 //Teddy.prototype=Dog.prototype;非常错误的写法
for (var funcName in Dog.prototype) {
     Teddy.prototype[funcName] = Dog.prototype[funcName];
}

  //在子一级构造函数重写showSelf方法
  //只会在子一级生效，并不会影响父一级构造函数的方法
  //继承和多态同一件事的两种完全不同的侧重
  //继承：侧重是从父一级构造函数，继承到的属性和方法
  //多态：侧重是，子一级，自己重写和新增的属性和方法
Teddy.prototype.showSelf = function () {
    alert(`这是一个${this.type}的，${this.age}岁的，是${this.color},${this.name}的小狗`);
 }

Teddy.prototype.showColor = function () {
     alert(this.color);
 }

var xiaohong = new Teddy({
   name: "小红",
   type: "泰迪",
   age: 10,
   color: "红色"
 });

var xiaohei = new Dog({
   name: "小黑",
   type: "拉布拉多",
   age: 5
});

alert(xiaohong.name);
alert(xiaohong.type);
alert(xiaohei.showColor);

_proto_和instanceof关键字
构造函数构造出来的对象，有一个属性_proto_，指向构造出来这个对象的构造函数的原型

alert(xiaobai.__proto__ == Dog.prototype);//true
alert(xiaohei.__proto__ == Dog.prototype);//true
alert(xiaobai.__proto__ == xiaohei.__proto__);//true

instanceof 关键字
功能：判断某一个对象是否是这个构造函数构造出来的

alert(xiaobai instanceof Dog);  //true
alert(xiaobai instanceof Object); //true

ECMA6 class语法

class Person {
    constructor(name, sex, age) {
         this.name = name;
         this.sex = sex;
         this.age = age;
         }
         showSelf() {
             alert(`我是一个叫${this.name},今年${this.age}岁的${this.sex}孩`);
          }
 }
 
   var p1 = new Person("blue", "男", "10");
   p1.showSelf();

原型链 继承父一级的方法

// 1. 通过for...in遍历继承

 for (var funcName in Person.prototype) {
    Worker.prototype[funcName] = person.prototype(funcName);
} 

// 2. Object.create()
  Worker.prototype = Object.create(Person.prototype);
  
// 3. 调用构造函数继承
  Worker.prototype = new Person();
  Worker.prototype.showJob = function () {
  alert("我的工作是" + this.job);
  }
  var w1 = new Worker("小米", "男", 20, "程序员");
  w1.showSelf();
 w1.showJob(); 

//继承
class Worker extends Person {
      constructor(name, sex, age, job) {
         super(name, sex, age);
            this.job = job;
       }
       showJob() {
           alert("我的工作是" + this.job);
         }
    }
  var w1 = new Worker("小米", "男", 20, "程序员");
  w1.showSelf();
  w1.showJob();

6.运动与游戏开发

动画 图像
原理：能够识别的最小的时间间隔是18帧
动画：只需要让动画的切换时间间隔大于18帧，一般情况下电影院里面放映的电影24帧
简单运送：让一个div从左向右开始运动

1. 停不下来
2. 当速度取某些值的时候停不下来的问题
3. 到达目的值以后，点击还会继续往前运动
   if…else将运动和停止分开
4. 重复点击按钮，速度加快
   保证只有一个定时器
   每次启动定时器之前，先将上一次定时器关闭

运动框架：
1. 每次启动定时器之前，先将上一次定时器关闭
2. if…else将运动和停止分开

 window.onload = function () {
      var oBtn = document.getElementById("btn1");
      var oDiv = document.getElementById("div1");

       var speed = 7;
       var timer = null;
       oBtn.onclick = function () {
           clearInterval(timer);
           timer = setInterval(function () {
               if (oDiv.offsetLeft >= 500) {
                  clearInterval(timer);
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
             }, 30);
       }
}