ECMAScript常用语法

1.语法变化

1. const let
作用: 1.具有块级作用域 2.没有变量的提升 3.const定义的变量不能够重新复制,初始化的时候一定要给值
2. 解构复制
let 初始值 = arr|| obj

```js
//arr 
let [a,b,c]=[1,2,3]

//obj
let {name,age}={name:'fly',age:18}

//修改名称
let {name:name123,age}={name:'fly',age:18}
console.log(name123);  //fly
```

3. 默认参数

//设置属性的默认参数
 function show(a=1){
    console.log(a) //1
 }

2.字符串扩展

1. 字符串模板
<div>${el.name}</div>
2. includes

var str='fly'
var flag=str.indexOf('l') //返回下标 1
var flag=str.includes('l') //找到返回true 否则 false

3. startWith 和 endWith
startWith 查询是否以 xxx 开头
endWith 查询是否以 xxx 结尾
4, padStart(length,str)和padEnd(length,str)

//参数1 length 拼接够的字符串的总长度
//参数2 str  以 xx字符串拼接
let str='《哪吒》票房超《红海行动》，饺子收入过亿，跻身最赚钱导演';
str.slice(0,7).padEnd(10,'*'); //《哪吒》票房超...

3.函数

1. rest参数 和 ...扩展运算符

 //args 得到的是一个新的数组
 function (...args){} //在函数定义的时候使用得 ...obj 叫rest参数
 
 let arr=[1,2,3,4]
 show(...arr) //在函数调用的时候 使用 ...obj 叫做扩展运算符

2. 箭头函数

//标准写法
var show=(item)=>{return item}

//简化写法
//当只有一个参数的时候可以省略 ()
//当方法体只有一行的时候 可以 省略 {} return 
let show=item=>item 

4.for of 遍历数组和对象

let arr=[1,2,3,4]
for(let item of arr.entries()){
    console.log(item); //[0,1][1,2][2,3][3,4]
}
for(let item of arr.keys()){
    console.log(item);//0 1 2 3
}
for(let item of arr.values()){
    console.log(item);//1 2 3 4
}
//遍历数组的另一种写法 
for(let [index,item] of Object.entries(arr)){
    console.log(index,item)//0,1 1,2 2,3 3,4
}

let obj={
    name:'fly',
    age:18
}
for(let [key,value] of Object.entries(obj)){
    console.log(key,value)//name,fly age,18
}

5. set 和 map

//set 不能重复
let setList=new Set();
//添加 
setList.add(0)
//删除
setList.delete(0)
//清空
setList.clear()
//最短数组去重
[...new Set(arr)];

let map =new Map()
//添加
map.set('name','fly')
//删除
map.delete('name')
//清空
map.clear()

6.proxy 代理

let obj={
    name:'fly',age:'2018'
}
let proxy=new Proxy(obj,{
    //target 原来的对象 key 是获取键
    get(target,key){
        reutnr target[key].replace('2018','2019')
    },
    set(target,key,val){
        if(key==='name'){
            return target[key]=val
        }else{
            return target[key]
        }
    }
})
proxy.time  //2019

proxy.name='ssr'
console.log(proxy.name) //ssr

7.继承

    //1.es5
    //构造函数 + 原型 组合继承
    //父类
    function Person(name,age){
        //创建私有属性
        this.name=name;
        this.age=age;
    }
    Person.prototype={
        //强行改变自身的构造器属性
        constructor:Person,
        say(){
            console.log(this.name)
        },
        show(){
            console.log(this.age)
        }
    }
    //子类
    function ZS(name,age,job){
        //继承父类的私有属性
        Person.apply(this,arguments);
        this.job=job;
    }
    //继承父类的方法
    ZS.prototype=new Person();
    //创建自身的方法
    ZS.prototype={
        constructor:Person,
        hide(){
            console.log(this.job);
        }
    }
    
    //2. es6
    //父类
    class Person{
        constructor(name,age){
            this.name=name;
            this.age=age;
        },
        say(){
            console.log(this.name)
        }
    }
    //子类
    class ZS extends Person{
        constructor(name,age,job){
            super(...arguments);
            this.job=jon
        },
        show(){
            console.log(this.job)
        }
    }