ES5-13

47 阅读4分钟

一、ES5

1.1 保护对象

  • 6大特性
Object.defineProperties(obj,{
        "属性名":{
                value:,
                writable:true/false,
                enumerable:true/false,
                configurable:true,false
                get:()=>{
                        拦截操作
                },
                set:()=>{
                        拦截操作
                }
        }
})
  • 3个级别
    1. 防扩展:Object.preventExtensions(obj);
    2. 密封:Object.seal(obj);
    3. 冻结:Object.freeze(obj);

1.2 数组新增的六个API:

  • 判断:arr.every/some((v,i,arr)=>判断条件)
  • 遍历:
arr.forEach((v,i,arr)=>操作)
var newArr=arr.map((v,i,arr)=>操作)
  • 过滤和汇总:
var subArr=arr.filter((v,i,arr)=>判断条件)
var sum=arr.reduce((prev,v,i,arr)=>prev+v);

1.3 call、apply-借用、bind-买

  • Array.prototype.slice.call(借用的人,实参1,....)
  • Array.prototype.slice.apply(借用的人,arr)
  • var 新的slice=Array.prototype.slice.bind(指定的人,永久实参1)

1.4 严格模式:"use strict"

二、ES6

2.1 模板字符串:${name}

2.2 let 变量名=值;

2.3 箭头函数

2.4 for of

for(var v of arr){
    v - 值
}

2.5 解构赋值

  • new Vue({}) - 很多框架底层都用到了解构赋值

2.6 Set和Map

  • [...new Set(arr)] - 数组去重变回数组

2.7 class关键字 - 简化面向对象的三大特点:封装、继承、多态

class plane extends flyer{
        //extends有两个作用:1、继承自有属性全部都不用再写,只需要写一次super(),2、自动继承到共有方法
        constructor(name,speed,rl){//放在constructor里面的都是自有属性
                super(name,speed);
                this.rl=rl;
        }
        fly(){//flyer提供的fly方法不好用,我自己封装了一个,覆盖他的 - 多态
                return `${this.name}正在以时速${this.speed}飞行,可以容纳${this.rl}人`;
        }
}

2.8 Promise - 让异步有顺序的执行,但是还是异步

  • new Promise(ajax1).then(ajax2).then(ajax3); - 记得一定要放行,而且前一个return Promise才可以连.then操作

2.9 模块化开发

  • 目的:1、分工合作 2、新的引入方式
1、分支模块要公开自己的成员
    export var obj={
            ...
    }

2、主模块要引入:
    import {obj} from "./文件路径"

3HTML在引入主模块的时候要注意设置类型:
    <script src="主模块路径" type="module"></script>

三、ES7

3.1 ArrayAPI:includes

  • 在ES7之前,如果我们想要判断一个数组中是否包含某个元素,需要通过 indexOf 获取结果,并且判断是否为-1
  • 在ES7之后,我们可以通过includes来判断数组中是否包含一个指定元素,得到结果直接就是一个布尔值
var arr=[1,2,3,4,5];
//原来
console.log(arr.indexOf(6)!=-1);
//现在
console.log(arr.includes(3))
console.log(arr.includes(6))

3.2 指数运算符

  • 在ES7之前,如果我们想要计算数字的乘方,必须通过 Math.pow(底数,幂);
  • 在ES7之后,增加了 ** 运算符 ,可以对数字进行乘方操作
Math.pow(2,3) -> 8
2**3	      -> 8

四、ES8

4.1 Object.values

  • 作用:可以将一个对象转为数组
  • 之前我们可以通过 Object.keys 获取一个对象所有的key,可以针对对象操作:
var obj={
        name:"袍哥",
        age:18,
        hobby:"学习"
}
console.log(Object.keys(obj));//["name","age","hobby"];
  • 在ES8中提供了 Object.values 获取一个对象所有的value
console.log(Object.values(obj));//["袍哥",18,"学习"]

4.2 Object.entries

  • 作用:将对象、数组、字符串 变为 二维数组
  • 通过 Object.entries 可以获取到一个数组,数组中会存放可枚举属性的键值对数组
console.log(Object.entries(obj));//[["name","袍哥"],["age",18],["hobby","学习"]]
  • 也可以针对数组、字符串进行操作,数组和字符串会将下标作为key

4.3 StringPadding

  • 某些字符串我们需要对其进行前后的填充,来实现某种格式化操作,ES8之中就给字符串添加padStart和padEnd方法,分别填充前面和后面
//日期格式化,为个位数,前面添加了一个0
var h="8";
var m="3";
var s="50";
console.log(`${h.padStart(2,"0")}:${m.padStart(2,"0")}:${s.padStart(2,"0")}`)

4.4 尾部逗号的添加,不会报错了

4.5 async 和 await

  • async作为一个关键字放到函数前面,用于表示函数是一个异步函数,异步函数也就意味着该函数不会阻塞后续代码,意味着任何函数都可以变为异步
async function f1(){
        return "我是f1函数";
}
f1().then(rs=>{
        console.log(rs);
        console.log("得到结果要干什么就在这里操作")
});
console.log("后续代码");
  • await是等待的意思,那么他等待的是什么呢,他后面又该跟着什么呢?其实它后面可以放任何表达式,不过我们更多的是放一个返回Promise对象的表达式
  • 注意:await 关键字只能放在async函数里面
async function f1(){
        return 1;
}
async function f2(){
        return 2;
}
async function f3(){
        return await f1() + await f2();
}
f3().then(rs=>{
        console.log(rs);
});
console.log("后续代码");

五、ES9

5.1 扩展运算符:...

  • ES6引入了扩展运算符,但是仅仅只有数组可以使用,ES9过后不光数组,对象也可以使用了,而且它还不光可以脱衣服,还可以穿衣服
//脱掉数组的衣服
var arr=[32,1,54,76,98,7,23,54,24,764];
console.log(Math.max.apply(Math,arr));
console.log(Math.max(...arr));

//脱掉对象的衣服
var obj1={a:1,b:2,c:3}
var obj2={...obj1,d:4}
console.log(obj2);

//穿上了对象的衣服
function f1({a,...c}){
        console.log(a);
        console.log(c);
}
f1({a:1,b:2,c:3})

六、ES10

6.1 flat方法

它会按照一个可指定的深度遍历递归你的数组,并将所有的元素与遍历到的子数组中的元素合并为一个新数组

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

6.2 flatMap

两个方法二合一flat和map,先执行map在执行flat,但是flat只能脱1层

var arr=["hello world","你好 中国","hello h52301"];
var newArr=arr.flatMap(v=>v.split(" "));
console.log(newArr);//["hello","world","你好","中国","hello","h52301"];

6.3 trimStart/trimEnd

七、ES11

7.1 全局对象全新写法:

  • 在浏览器中可以通过window访问全局对象
  • 在Node.js中可以通过global来访问对象
  • 在ES11中对全局对象添加了一个新的名字,统一了规范:globalThis

7.2 for...in循环标准化

  • 在ES11之前,虽然很多浏览器支持for...in来遍历对象,但是并没有被ECMA标准化

八、ES12

8.1 逻辑赋值运算符

function f1(a){
        a||="默认值";
        console.log(a);
}
f1();//a=默认值
var obj={
        name:"袍哥"
}	
obj&&=obj.name;
console.log(obj);//袍哥

九、ES13

9.1 字符串、数组API:at();

可以通过at方法获取字符串、数组的元素

var arr=[1,2,3,4,5,6];
console.log(arr.at(0));
console.log(arr.at(2));
console.log(arr.at(-1));
console.log(arr[arr.length-1])
var str="hello world";
console.log(str[str.length-3])
console.log(str.at(-3))