js复习的：变量,解构赋值,展开,箭头函数,模块化,类；数组方法补充

声明变量得方式

三种:var,let,const

var 声明得变量具有全局作用，相当于cpp中得全局变量，只有通过闭包解决

let声明得变量具有代码块得作用，能用let绝对不用var

const:声明常量

三种声明方式中，第一优先使用推荐是const，如果希望变量被改变则使用let，最差使用var，并且var得变量会被提升，提升到开头！！！！

---

解构赋值

就是数组得赋值!!!

let arr=[1,2,3,4];
let a,b,d;

更简单的 const[a,b]=arr
等价于 a=arr[0],b=arr[1]

加了个逗号直接跳过3接收4
[a,b,,d]=arr;

加三个点就是把剩余参数全部接收到c中
[a,b,...c]=arr;


结构体也可以这种方式解构
let a,b;
const obj={
name:1
age:2
}
({name:a,age:b}=obj);
const{name,age}=obj;如果属性名和变量名一致
那么可以只写一个就不需要写成const{name:name,age:age}=obj了

利用数组结构交换两个变量位置
a=10
b=20

[a,b]=[b,a];相当于解构一个数组！！！！！！！！！！！

---

展开

展开数组

function fn(a,b,c){
return a+b+c;
}
const arr=[1,2,3]

let ans=fn(arr)这么写是错误的
let ans=fn(...arr)这么才是对的,多的数据就不会用后面的

let arr=[1,2,3,4]
arr2=[1,2,3,...arr,5,6,7]这里arr2就是1,2,3,1,2,3,4,5,6,7

展开对象

let obj1 ={ }
const obj2={...obj1,age:20}
如果重名的话，前面的就会被后面的覆盖！！！！！！！！！！！！！

展开就相当于浅赋值

---

箭头函数

箭头函数
只有一个参数的箭头函数
   const 名字 = 参数 =>返回值;

如果没有参数或者多个参数,需要使用()括起来
   const 名字 = ()=>返回值
   const 名字 = (a,b,c)=>返回值

注意事项:
1.箭头后面的返回值必须是一个表达式(有返回值的语句),log的返回值是undefine
2.返回值是对象必须要加(),（{name:1,age:2}）
3.如果需要再箭头函数中定义复杂的函数，只需要再=>后面跟一个{}

 const fun=(a,b)=>{
     ...;
     ...;
     ...;
     return ...;
};

---

箭头函数和普通函数区别

首先我们要知道arguments是用来保存函数的实参的

1.箭头函数里面没有arguements!!!!!!!!!!!!!!!
为什么没有，因为这个东西不是一个数组，而是一个类数组对象，所以数组的方法我们不能去调！

function fu(){
  console.log(arguements.length)
}
这里不传参数进去就是0


function fu()=()=>{
    console.log(arguements.length)
};
这么写会报错所以我们引出了第一点！！！


如果我们需要我们的实参怎么办？这个叫剩余参数
function fu(...a){
  console.log(a.length)
}
function fu()=(...a)=>{
    console.log(a.length)
};

----------------------------------------------------------------------------------
2.箭头函数里面没有this，没有自己的this，他的this总是外层作用域的this

obj={
hello:()=>{
console.log(this)
}
}
obj.hello()
这里我们hello的上层obj里面没有this，所以this还是windows(全局this)

obj2={
hello:function(){
const test=()=>{
console.log(this);
}
}
}
obj2.hello();
这里的this就有用了，就是obj2

3.箭头函数的this无法被修改

4.箭头函数无法作为构造函数用，没法new()

---

模块化

模块化分为两部分
1.export 暴露，导出：用来一个模块哪些东西可以被外部看见
2.import 引入，就是将外面的东西导入进去

作为一个模块不希望完全被暴露，
作为导入方我也不希望不需要的代码

导出
1.默认导出(注意一个模块中只有一个默认导出)export default xxxx;//将变量xxxx作为默认导出

2.命名导出:直接命名变量的时候指出我们是导出的属性

export const b=20;
export const c=30;
obj={
   age=1;
}
function fn(){
    return 1;
}

export{obj,fu};这也算命名导出

导入
1.默认导入import,import xxxx from 模块的路径’./js’，这里的xxxx可以自己起，因为只有一个默认导出，所以就认定是那一个了
2.在网页导入模块的时候，模块的路径必须写完整(./,…/开头，扩展名也得写上)

<script>
//导入上面的xxxx
import xxxx from 模块的路径'./js'
</script>
这么是错误的，因为在<script>中不能使用import,
如果需要使用那么我们必须设置<script>的信息改成<script type="moudle">

3.命名导入的名字就必须为固定的，不能像默认导出一样自定义名字

import {b as d,c,obj,fn} from '路径'
这里的名字不能重命名，模块里面是啥名字这里就该啥子名字，可以用as重命名为d，重命名后我们的b就会失效

---

类
类是对象的模板，类中定义了对象中包含了哪些方法和熟悉感，也可以直接通过function来定义类，到那时两种定义方式并不完全通用

class person{
age= 10;
name='孙悟空'
//实例方法
run(){
console.log("11111");
}
}
const per1 = new person()
const per2 = new person()
但是per1===per2是false


里面写构造函数
class person(){
age;
name;
constructor(name,age){
console.log("new函数实际上就是调用constructor函数！！！！！！！！！！！！")
this.name=name;
this.age=age;
}
用构造函数来赋值！！！！就是动态赋值，类似于cpp
}

类中的this

1.谁调用方法this就是谁

2.我们通过函数来调用类中函数就是undefine！！！为什么不是这个类却是undefine，类中所有代码都会在严格模式下执行，严格模式下的其中一个特点就不再是window而是undefine，所以类中this不是固定的！！！！！！！！！！！！！

在有些场景下我们希望this是固定的，不会因为调用方式不同而改变

2.1在构造函数中this.fn=this.fn.bind(this)，this就写死了
2.2用箭头函数！！！！

如果有上诉需求用箭头函数定义
fn=()=>{
};
如果类中方法以箭头函数定义，则this永远是这个类，永远不会变

继承

1.继承是 class子 extends 父{ …}
2.子类可以重写父类函数
3.子类的构造函数怎么写？

class an{
name;
age;
  construtir(name,age){
   this.name=name;
   this.age=age;
   }
}

class s extends an{
len;
construtir(name,age,len){
super(name,age);//调用父类构造函数
   this.len=len;
   }
}

当子类重写父类的构造函数的时候，必须在子类构造函数中第一时间调用父类构造函数，否则会报错

---

类的静态属性和方法

1.直接通过类调用的属性和方法叫做静态属性和静态方法(类属性,类方法)

class per{
name 
}
per.name
会报错因为那是实例属性

class per{
static name 
}
per.name
这样就不会报错了

2.在静态方法里，它的this就是class本身而不是实例本身

---

数组方法补充

map,需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素

const arr=[1,2,3,4,5]
map根据原有数组返回一个新数组
arr.map(()=>10);
map里面传函数
arr就是[10,10,10,10,10]

用处,所有数字＋返回值,这里item相当于它的值，其实还有第二个参数是index，第三个参数是数组本身
arr.map((item)=>item+10);
[11,12,13,14,15]

用法：
reset= arr.map(item=>"<li>"+item+"</li>")

filter过滤

const arr = [1,23,4,5,6,7,8]
res = arr.filter(item=>item%2===0)
根据回调函数来决定是否保留元素，true保留,false不保留。这里就是找出是偶数的数

find函数,找第一个满足条件的值

和filter的用法一样。find的作用是返回第一个符合条件的数字！！！！！！！！！！！！！！！

reduce,将元素合并到一起

第三个参数是初始值!!!!!!!!!!!!,可以指定初始值
arr = [1,3,4,1,6,78]
arr.reduce((prev,curr)=>prev+curr)