es5不兼容es6语法 es6的兼容性

转载

网络安全卫士 2024-03-20 21:49:34

文章标签 es5不兼容es6语法 ES6 新特性 javaScript 数组 User 文章分类 架构后端开发

低版本处理

1.在线编译
2.提前编译 babel

babel=browser.js

变量

var

可以重复声明
无法限制修改
没有块级作用域

let

不能重复声明，不会声明提前，变量可以修改，块级作用域

const

不能重复声明，定义常量不能修改，定义对象，可以修改属性。（栈与堆）

块级作用域
声明在指定块作用域之外无法访问的变量
函数
块中 { }

原生js遍历列表做事件处理，i 都会返回同一个数，把var改成let就可以了

var container = document.getElementsByClassName("container");
        console.log(container.length);          //2
        for (var i = 0; i < container.length; i++) {
            container[i].onmouseup = function(){
                console.log(i)                  //2 
            }
        }

没有声明提前，会有一个临时死区（TDZ）

es5不兼容es6语法 es6的兼容性_数组

函数

箭头函数

如果只有一个参数，参数括号可以省略
如果return一句，{}可以省略
箭头函数没有this，所以调用箭头函数的时候就不要更新上下文，就不要bind(),apply()或者call()，缺少正常函数拥有的prototype属性和arguments绑定。如果访问arguments，那也是访问上一级的
格式：（）=>{}

函数参数

（一）参数扩展，其中有个…

1.搜集剩余参数，…args必须放在最后一位
2.展开数组 arr=[1,2,3,4] = = = …arrr ，但赋值不行

（二）默认参数值

function(a,b,c=1,d=function(){}){
	a=1,
	b=2
	// c = 1
	d=function(){
		...
	}
}

解构赋值

1.左右两边类型必须一样
2.右边是个符合jsleix
3.声明和赋值不能分开，在一行

数组，json都一样

es5不兼容es6语法 es6的兼容性_es5不兼容es6语法_02

数组

Array.of
只要把想要的数组写在Array.of()中就行，主要是new Array有个问题，new Array(number)，会显示length=number,
map // 映射一一对应
find findIIndex (findIIndex 只能找第一次的下标)

reduce //汇总许多项返回一
求和
tmp:中间值第一次 temp:23 第二次 temp：23+45

es5不兼容es6语法 es6的兼容性_es5不兼容es6语法_03

filter // 过滤

arr.filter(item=>item>1000)

forEach // 循环（迭代）

字符串

1.ES6多了两个方法

startsWidth

let a = "http://www.baidu.com"
alert(a.startsWith("http"))

endsWidth
2.字符串模板

面向对象

class 类

class User{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    say(){
        alert("我是一个类")
    }
}

继承

class User{}
	class VipUser extends User{
		constructor(){
		super() //超类 父类继承
		}
}

应用 React

Promise

异步：操作之间没有关系，同时进行多个操作，但代码复杂
同步：同时只能做一件事，但代码简单

promise 用同步的方式，写异步代码

请求数据，高版本的ajax是支持的直接请求 .then
Promise.all

let p1 = new Promise(function(resolve,reject){
    $.ajax({
        url:"/api/list1",
        dataType:'json',
        success(arr){
            resolve(arr)
        },
        error(err){
            reject(err)
        }
    })
})
let p2 = new Promise(function(resolve,reject){
    $.ajax({
        url:"/api/list2",
        dataType:'json',
        success(arr){
            resolve(arr)
        },
        error(err){
            reject(err)
        }
    })
})
p1.then(function(arr){
    alert("成功",arr)
},
function(arr){
    alert("失败",arr)
})

Promise.all([p1,p2],function(arr){
    let [res1,res2] = arr;
    alert(res1)
    alert(res2)
},function(arr){
    console.log(arr)
})

Promise.race 竞速用法与 all一样是请求速度块，先

generator // 生成器

普通函数，一站到底

generator 中途可以暂停

es5不兼容es6语法 es6的兼容性_User_04

function *show(){
    alert("a")
    yield;
    alert("b")
}
// 切分成
function show_1(){
    alert("a")
}
function show_2(){
    alert("b")
}


let genObj =show()
genObj.next()  //a
genObj.next()   // b

yield

传参，用next()，第一次都不作数

es5不兼容es6语法 es6的兼容性_es5不兼容es6语法_05