js

1.var, let, const

区别：var没有块级作用域

值有可能改变用let，值不变用const，总之不要用var

2.解构

//数组
arr = ['我','真','帅','啊']
const [a,b] = arr
const [a,b, ,c] = arr //可以跳过元素
const [a,b,...c] = arr //...代表剩余参数
//对象
const obj = {
    name:'Ronin',
    age:23,
    gender:male
}
let a,b,c
({name:a,age:b,gender:c}=obj) //加括号是因为直接以大括号开头代表代码块
//如果变量名和属性名相同
const {name,age,gender} = obj

//利用数组解构交换值
a = 10
b = 20
[a,b] = [b,a]

arr = [1,3,2]
[arr[1],arr[2]] = [arr[2],arr[1]] //arr = [1,2,3]

//展开 (可迭代：数组、字符串、对象等)
fn = (a,b,c)=>a+b+c
arr = [1,2,3]
const res = fn(...arr) //res = 6
	//直接fn(arr)，结果是1,2,3undefinedundefined,拼串

const obj = {
    name:'Ronin',
    age:23,
    gender:male
}
const obj2 = {...obj,address:"SZ"} //浅复制

3.箭头函数

//特点
//1.没有arguments
const fn = function(){
    console.log(arguments.length)
}

const fn2 = (...args)=>{
   ... 
}
//2.没有自己的this
 	//--this总是外层作用域的this
const obj = {
    fn = ()=>{
    	console.log(this)   
	}
}
obj.fn()  //windows

const obj2 = {
    fn:funtion(){
        const fn2=()=>{
            console.log(this)
        }
		fn2()
    }
}
obj2.fn()  //obj2  //外层函数的this是谁就是谁

//3.无法作为构造函数

4.网页里使用模块化

//导出export：
//1.默认导出 一个模块只能有一个默认导出
export default a
//2.命名导出
export x

//导入import：
<script type='module'>  //如果不改type，默认text/javascript。不认为是模块，不能import
    //1.导入默认模块时，变量名自定义
    import b from './wuhu.js' 
	//2.导入命名模块，变量名不可自定义(可以用x as o改名)，并且要用{}
	import {x} from './wuhu.js' 
</script>  

5.类（this，extends）

class Person{
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
}

const per = new Person("Ronin",18)

//类的this
//类中的代码以严格模式执行 "use strict"
	//---1.函数的this不是windows，而是undefined

//注意：
	//类中方法的this不固定：
		//1.以方法形式调用，this为当前实例
		//2.以函数形式调用，this为undefined
class Myclass{
    hello(){
        console.log(this)
    }
}

const mc = new Myclass()
mc.hello() //mc

const test = mc.hello
test() //undefined

//当子类重写父类构造函数时，要第一时间调用父类的构造函数
class Animal{
    constructor(name,age){
        this.name = name;
		this.age = age;
    }
}

class Dog extends Animal{
    constructor(name,age,gender){
        super(name,age) //调用父类构造函数
        this.gender=gender
    }
}

6.静态属性、方法

//可通过类直接调用
class Myclass{
    static hello = ()=>console.log(this)
}

//静态方法的this不是实例对象而是当前的类对象
Myclass.hello() //class Myclass{}

7.数组的方法

map()

/*
	map() 
	1.可以根据原有数组返回一个新的数组（不破坏原数组）
	2.需要一个回调函数作为参数，回调函数的返回值会作为新数组的元素
	3.三个参数： 
		当前元素
		当前元素索引
		原数组
*/
const arr = [1,2,3]

let res = arr.map(()=>10) //map主要看返回值
console.log(res) //[10,10,10]

let res1 = arr.map((item) => item + 2) 
console.log(res1) //[3,4,5]

let res2 = arr.map((item,index,array) => ...)
                   

filter() / find()

/*
	filter()
	1.可以从一个组数中获取符合条件的元素形成一个新数组（不破坏原数组）
	2.需要一个回调函数作为参数，根据其返回值判断是否留下（true留下）
	
*/
const arr = [1,2,3,4]

let res = arr.filter(() => true)
console.log(res) //[1,2,3,4]

let res1 = arr.filter((item) => item % 2 === 0) //取偶数
console.log(res1) //[2,4]

/*
	find()
	几乎同上，但是只返回第一个符合的元素
*/

let res2 = arr.find((item) => item % 2 === 0)
console.log(res1) // 2

reduce()

/*
	reduce()
	1."减少" -将前一个值和后一个值进行某种运算
	2.参数：
		回调函数：
            previewValue
            currentValue
            currentIndex
            array
        初始值
*/

const arr = [1,2,3,4]

let res = arr.reduce((pre,cur) => pre + cur)
console.log(res) // 10

let res1 = arr.reduce((pre,cur) => pre * cur)
console.log(res1) // 24

let res2 = arr.reduce((pre,cur) => {
    return pre+cur
}, 0) //指定初始值，没有的话其实相当于第一次没算，因为没有previewValue
console.log(res2) // 10