ES6（一）

一、 解构赋值

ES6中可以从数组中提取值，按照对应的位置，对变量赋值，对象也可以实现解构。

数组解构

let[a,b,c,d]=[1,2,3];
console.log(a);//1
console.log(b);//2
console.log(c);//3
console.log(d);//undefined

对象解构

let person={name:"zhangsan",age:20};
let{name,age}=person;
console.log(name);//“zhangsan”
console.log(age);//20

let{name:myName,age:myAge}=person;
console.log(myName);//"zhangsan"
console.log（myAge);//20

二、箭头函数

ES6新增的定义函数的方式

() => { }
const fn = () => { }

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(num1,num2){
     return num1+num2;
}
const sum=(num1,num2) => num1+num2

如果形参只有一个，可以省略小括号

function fn(v){
   return v;
}
const fn = v => v;

箭头函数中的this关键字

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this（也就是说箭头函数被定义在哪，箭头函数中的this就指向哪）

const obj={name:"zhangsan "}
function fn(){
  console.log(this);//obj对象
  return()=>{
    console.log(this);//obj对象
   }
}
const resFn=fn.call(obj);
resFn();

var obj={
   age:20,
   say:()=>{
    alert(this.age);//undefined 因为是指向window的this
   }
}
obj.say();

三、扩展符

剩余参数

剩余参数允许将一个不定数量的参数表示为一个数组

function sum(first,...args){
   console.log(first);//10
   console.log(args);//[20,30]  
}
sum(10,20,30);

const sum=(...args)=>{
  let total=0;
  args.forEach(item=>total+=item);
  return total;
};
console.log(sum(10,20));//30

Array的扩展方法

let ary=[1,2,3];
...ary//1,2,3
console.log(ary);1 2 3

let ary1=[1,2,3];
let ary2=[4,5];
let ary3=[...ary1,...ary2];
console.log(ary3);//[1,2,3,4,5]

ary1.push(...ary2);

将伪数组转换为真正的数组

let divs=document.getElementByTagName("div");
divs=[...divs];

Array.from() 可将伪数组转换为真正的数组

let arrayLike={
   "0":"a",
   "1":"b",
   "2":"c",
   "length":3
}
let arr2=Array.from(arrayLike);//["a","b","c"]

该方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

let arrayLike={
   "0":"1",
   "1":"2",
   "length":2
}
let arr2=Array.from(arrayLike,item => item * 2);
console.log(arr2);//[2,4]

find() 用于找出第一个符合条件的数组成员，如果没有找到就返回undefined

let ary=[{
   id:1,
   name:"zhangsan"
},{
   id:2,
   name:"lisi"
}];
let target=ary.find(item=>item.id==2);
console.log(target);

findIndex()用于找出第一个符合条件的数组的成员的索引，如果没有找到返回-1

let ary=[1,3,10,13];
let index=ary.findIndex((value,index)=>value>9);
console.log(index);//2

includes()表示某个数组是否包含给定的值，返回布尔值

[1,2,3].includes(2);//true
[1,2,3].includes(4);//false

四、类的继承 super关键字

super关键字用于访问和调用对象父类上的函数，可以调用父类的构造函数，也可以调用父类的普通函数

class Father{
 constructor(x,y){
   this.x=x;
   this.y=y;
 }
 sum(){
 console.log(this.x+this.y);//3
 }
}
class Son extends Father{//extends继承（子类继承父类的属性和方法）
 constructor(x,y){
    super(x,y);//调用了父类中的构造函数
 }
}
var son=new Son(1,2);
son.sum();

class Father{
   say(){
     return"我是爸爸";
   }
}
class Son extends Father{
    say(){
       // console.log("我是儿子");
       console.log(super.say()+'的儿子);//super.say()就是调用父类中的普通函数 say()
       
    }
}
var son=new Son();
son.say();//"我是儿子"就近原则

继承中属性和方法的查找原则：就近原则

1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
2. 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）