ES6和ES5的区别

最新推荐文章于 2024-09-10 22:32:32 发布

古娜拉黑暗之神乌拉呼

最新推荐文章于 2024-09-10 22:32:32 发布

阅读量111

点赞数

分类专栏： JavaScript 文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/m0_49851270/article/details/130702105

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ES6引入了let和const命令，改变了变量声明的方式，带来了块级作用域。文章还提到了解构赋值、字符串遍历、模板字符串、箭头函数、以及新的数据结构Set和Map。此外，还讨论了Promise对象在异步编程中的应用。

摘要由CSDN通过智能技术生成

ES6新增了let、const命令和块级作用域
声明变量的方法
1. ES5
  1. function
  2. var
2. ES6
  1. const
  2. let
  3. var
  4. function
  5. import
  6. class
全局变量和顶层对象（在浏览器中是window，node里是global）的属性脱离：为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
增加了解构赋值（即从数组和对象中提取值，对变量进行赋值）
```
let {age,index}={age:10,index:1}
console.log(age,index)
```
增加了字符串的遍历接口，就可以使用for...of...

模板字符串

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);//使用${}方变量

函数参数

es5：
function oo(obj){
    let re={}
    for(let i=0;i<arguments.length;i++){
        re[arguments[i]]=obj[arguments[i]]
    }
    return re
}
let o={
    age:'ji',
    name:12
}


es6:
function oo(obj,...keys){
        let re={}
        for(let i=0;i<keys.length;i++){
            re[keys[i]]=obj[keys[i]]
        }
        return re
    }
let o={
    age:'ji',
    name:12
}

箭头函数没有this指向，内部this指向通过查找到最外层的作用域
```
let add=(a,b)=>a+b
console.log(add(1,3))//4
```
1. 不能使用new，不是一个对象，是一个语法糖
2. 没有arguments

symbol：用于定义唯一的值

  const s1=Symbol('ii')
  const s2=Symbol('ii')
  console.log(s1 == s2)//false，保存的是对应的内存地址
  let obj={
    [s1]:1
  }
  console.log(obj[s1])
//   获取以symbol作为对象的key的key
for(let key in obj){
    console.log(key)//1
}
console.log(Object.getOwnPropertySymbols(obj))//[ Symbol(ii) ]
console.log(Reflect.ownKeys(obj))

set：集合，里面的值都是唯一的，可用于数组去重，对对象的引用为强引用，无法回收

let set=new Set()
set.add(1);
console.log(set)//{1}
set.add([2,3,4])
console.log(set)//{1,[2,3,4]}
set.delete(1)
console.log(set)
console.log(set.has([2,3,4]))//true
set.forEach((value,key)=>{
    console.log(value)
    console.log(key)//set中键值相等
})
// s数组去重
const arr=[1,2,3,4,5,6,6]
let s= new Set(arr)
s=[...s]
console.log(s)//[1,2,3,4,5,6]

map

let w=new Map([['a',1],['dd','jk']])
w.set(1,1)
console.log(w)// { 'a' => 1, 'dd' => 'jk', 1 => 1 }
console.log(w.has(1))//true
console.log(w.get(1))//1
w.set('name','hj')
w.delete(1)
console.log(w)//{ 'a' => 1, 'dd' => 'jk', 'name' => 'hj' }

数组的扩展

// 类数组转为真正的数组
function add(){
    return arguments
}
let srr=add(1,2,3)
console.log(Array.from(srr))//[ 1, 2, 3 ]
console.log([...srr])//[ 1, 2, 3 ]
console.log(Array.of(...[1,2,3,4]))//[ 1, 2, 3 ,4]

console.log([1,2,3,4].copyWithin(0,2))//[ 3, 4, 3,4 ]


// 生成数组的迭代器
let arr=[1,2,3,4]
console.log(arr.keys())//返回键的迭代器
for(let key of arr.keys()){
    console.log(key)
}
console.log(arr.values())//返回值的迭代器
for(let value of arr.values()){
    console.log(value)
}
console.log(arr.entries())//返回键值对的迭代器
for(let item of arr.entries()){
    console.log(item)
}

//判断数组是否包含元素
let arr=[1,23,3]
console.log(arr.includes(1))//true（es6）
console.log(arr.indexOf(1))//0，无则是-1（es5）

from
of

迭代器
生成器

promise：是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，语法上来说是一个对象

     //Promise.race()
        function getImage(url) {
            return new Promise((reslove, reject) => {
                reslove(url)
            })
        }

        Promise.race([getImage('222222'), new Promise((reslove, reject) => {
            setTimeout(() => {
                reject(111)
            }, 1000)
        })]).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })//222222
        //Promise.all()
        let p1=new Promise((resolve,reject) => {
            resolve(1)
        })
        let p2=new Promise((resolve,reject)=>{
            resolve(12)
        })
        let p3=new Promise((resolve,reject)=>{
            reject(new Error('yyyyy'))
        })
        Promise.all([p1,p2,p3]).then(res=>{
            console.log(res)
        }).catch(err=>console.log(err))//Error: yyyyy