说一说es6新增那些？

最新推荐文章于 2023-10-15 16:10:02 发布
最新推荐文章于 2023-10-15 16:10:02 发布
阅读量107 收藏
点赞数
文章标签： es6 okhttp 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55451254/article/details/132345312
版权

1、promise

promise是es6解决异步一种方案，解决了es5处理异步回调函数的回调地狱问题。它本质上是一个对象，在new对象的时候参数是一个函数，这个函数有两个形参 成功后的回调 和失败后的回调 。Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。错误回调的处理可以使用 then的第二个回调函数 还有catch 。常用的api有 then catch 还有几个常用静态方法 Promise.all 所有函数都成功才成功 Promise.race 有一个成功就成功。

es7处理异步的方法是async 和 await

<script>
    //async 是一个关键字  他可以把一个普通函数  变成一个返回promise对象的函数
    // await 是一个异步函数同步化的方法  就是先执行异步方法  然后必须等待着异步方法完成后在执行后面的代码
    async function  fun(){
        console.log('一秒后看到了什么')
        let res=await test()
        console.log(res)
    }
    fun()
    
    function  test(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('hello')
            },1000)
        })
    }
    // test().then((res)=>{
    //     console.log(res)
    // })
</script>

promise封装axios

function get(url,data={}){
    return new Promise((resolve,reject)=>{
        //用原生的ajax发起请求 
        //1、生成一个ajax的对象
        var obj= new XMLHttpRequest()
        //open方法 open("get/post",url,"true/flase") true异步 false是同步
        obj.open("get",url,true)
        //如果请求方式是get的话，需要发送一个null
        obj.send(null)
        //有两个属性 来标识着是否请求成功
        //  status  网络请求状态码   200 404  500****
        //  readyState  请求状态码   0到4的转换   
        // 0 ajax对象创建成功 但是还没有调用open   1  open以及调用完成   
        //2 send已经完成  3 拿到部分数据  4 拿到全部数据
        //事件  onreadystatechange  标识状态码的改变
        obj.onreadystatechange=()=>{
            if(obj.status==200&&obj.readyState==4){
                //成功了
                //属性 responseText  就是从服务器返回的数据
                //console.log(obj.responseText)
                var dataobj=JSON.parse(obj.responseText)
                resolve(dataobj)
            }
        }
    })
}


export default{get}

promise封装post

function post(url,data={}){
    return new Promise((resolve,reject)=>{
        //用原生的ajax发起请求 
        //1、生成一个ajax的对象
        var obj= new XMLHttpRequest()
        //open方法 open("get/post",url,"true/flase") true异步 false是同步
        obj.open("post",url,true)
        //如果请求方式是post的话，需要设置一个请求头
        obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        obj.send(data)
        //有两个属性 来标识着是否请求成功
        //  status  网络请求状态码   200 404  500****
        //  readyState  请求状态码   0到4的转换   
        // 0 ajax对象创建成功 但是还没有调用open   1  open以及调用完成   
        //2 send已经完成  3 拿到部分数据  4 拿到全部数据
        //事件  onreadystatechange  标识状态码的改变
        obj.onreadystatechange=()=>{
            if(obj.status==200&&obj.readyState==4){
                //成功了
                //属性 responseText  就是从服务器返回的数据
                //console.log(obj.responseText)
                var dataobj=JSON.parse(obj.responseText)
                resolve(dataobj)
            }
        }
    })
}
async getData(){
      //let res=await axios.get("data.json")
      var str="username=admin&password=123456"
      let res=await axios.post("http://82.156.12.132:8080/api/private/v1/login",str)
      console.log(res)
    }

2、新增了let const关键字

let和var的区别：

    1. let 不存在变量的提升 var有变量的提升
    2. let是块级作用域有效 var是全局有效
    3. let是不能重复声明的 var是可以重复声明的

const:

const定义的常量如果数据类型是基本数据类型  值是不能修改

const如果定义的是引用数据类型的变量值是可以修改的

3、新增了模块化

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取

我们可以使用export default来将数据整体的抛出 使用import 接受这个整体

我们可以用export 将数据一个一个的抛出 通过 import {名，名} from "文件”来接收数据

js文件

const username="小三"
function fun(){
    console.log('第一天上课')
}


//export default{username,fun}
export {username}

4、函数上的扩展

（增加了默认参数 增加了剩余参数 增加l箭头函数）

箭头函数与普通函数的区别：

  • 箭头函数不能做构造函数 普通函数可以作为构造函数
  • 箭头函数的参数需要使用不定参数来获取形参，普通函数使用arguments(伪数组：可以遍历 但是不能使用数组的方法 别入 forEach push等等)
  • 普通函数的this指向是谁调用指向谁，箭头函数是在哪定义 this就指向谁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //别名
    //let {变量:别名}={属性1:值1，属性2：值2……}
    // let {username:name}={username:'小三',age:20,classname:"2206B"}
    // console.log(name)
    // let [a,...b]=[1,2,3,4,5,6]
    // console.log(b)
    // 普通函数作为构造函数  箭头函数是不可以当成构造函数的
    function Person(name,age){
        this.name=name;
        this.age=age
    } 
    //构造函数就是制造对象的机器
    var per1=new Person('小三',10)
    var per2=new Person('小四',20)
    //普通函数的参数对象是arguments(是可以接受所有实参的伪数组  有length属性可以遍历 但是不能使用数组的方法)  箭头函数是rest
    function fun(){
        console.log(arguments)
    }
    //函数调用
    fun(1,2,3,4,5,6)
    //rest是一个真数组
    const  test=(...rest)=>{
        console.log(rest)
    }
    test(1,2,3)
    function fn(){
        setTimeout(()=>{
            // 定义时，this 绑定的是 fn 中的 this 对象
            console.log(this.a);
        },0)
    }
    window.a = 20;
    //在全局中调用  对于普通函数来说 谁调用this指向就指向谁
    //箭头函数 在那块2定义this指向就指向谁
    //fn来说 在全局调用  所以 this指向的是全局
    fn()
    var obj={a:10,b:20}
    fn.call(obj)
</script>

5、解构赋值

解构赋值是对赋值运算符的扩展，可以解构数组或者对象的结构数据

//let {变量:别名}={属性1:值1，属性2：值2……}
    let {username:name}={username:'小三',age:20,classname:"2206B"}
    console.log(name)
    let [a,...b]=[1,2,3,4,5,6]
    console.log(b)

6、新增了class关键字

es5的构造函数和原型创建对象

<script>
    //构造函数
    function Person(name,age,classname){
        //属性
        this.username=name
        this.age=age
        this.classname=classname
        //方法
    }
    
    Person.prototype.say=function(){
            console.log(this.username+"会说话")
    }
    //构造函数创建对象缺点  给每个对象的方法都开辟一个新空间  会造成空间的浪费   解决办法 
    //完美的解决方案是构造函数+原型模式创建对象  利用构造函数定义属性  保证每个对象的属性空间是独立的
    //利用原型定义方法 来保证每个对象的方法空间是一样的 es6 的class创建对象是构造函数+原型的一个语法糖
    var obj=new Person("lisi",20,"2206B")
    obj.say()
    var per=new Person('wangwu',21,"2206B")
    console.log(obj)
    console.log(obj.say==per.say)
</script>

es6创建对象

<script>
    // class  类名
    class Person{
        //构造函数
        constructor(name,age,classname){
            this.username=name
            this.age=age
            this.classname=classname
        }
        //普通方法
        say(){
            console.log(this.username+"爱上课笑")
        }
        //静态方法  需要用类名去调用  
        static run(){
            console.log("会跑")
        }
    }
    const per=new Person('lisi',20,'2206B')
    per.say()
    const per1=new Person('lisi-2',20,'2206B')
    console.log(per.say==per1.say)
    Person.run()
    //子类继承父类
    class Student  extends Person{
        //如果子类有自己的构造方法  那么需要在构造方法中通过super()函数调用父类的构造放啊发
        constructor(name,age,classname,sno){
            super(name,age,classname)
            this.sno=sno
        }
    }
    const stu=new Student('xiaosan',23,'2206B',110)
    console.log(stu)
</script>

7、新增了map和set数据结构

map:

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Maps 和 Objects 的区别

  • 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
  • Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
  • Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
  • Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

Set 对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set 中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

  • +0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
  • undefined 与 undefined 是恒等的，所以不重复；
  • NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
    //对象
    var obj={
        username:'lisi',
        age:20
    }
    console.log(obj)
    console.log(Object.keys(obj))
    //map
    var mymap=new Map()
    mymap.set(0,'hello')
    console.log(mymap.size)
    //set  值是唯一的  所以可以用来给数组去重
    var myset=new Set()
    myset.add('hello')
    myset.add(0)
    myset.add(3)
    myset.add('hello')
    console.log(myset)
    //实现一个数组的去重
    var arr=[1,2,3,3,2,1]
    let newarr=[...new Set(arr)]
    console.log(newarr)
    //写一个自定义函数 实现可以对数组的去重
    function remove(arr){
        return [...new Set(arr)]
    }
    var array=[1,2,3,5,3]
    console.log(remove(array))
</script>

8、新增了一些字符串和数组的函数

字符串

  1. includes 返回值是什么 怎么用 什么意思
  2. padStart()
  3. padEnd()
  4. 模板字符串

数组

  1. find
  2. findIndex
  3. includes
  4. filter
  5. map
  6. forEach
  7. Array.from
不屈油条
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES6新增内容
weixin_59151150的博客
12-20 274
let和const关键字 1、let声明变量用法类似于var但是比var严谨； 2、const用来声明常量，一旦声明，其值就不能改变。也就是只读变量。 let/const与var的区别： 1、var会进行预解析，let/const不会 2、var定义变量允许重名，但是let/const不允许在同一个作用域下，定义重名变量 3、var没有块级作用域，let/const有 let和const的区别： 1. 声明时赋值 （let和const的功能基本类似，只是let用来修饰变量,const用来修饰
浅谈ES6新增的数组方法和对象
08-29
ES6新增的数组方法和对象 ES6中新增了许多实用的数组方法和对象，下面我们将逐一介绍这些新增的方法和对象。 首先，ES6中新增了遍历数组的方法，使用for...of语句可以遍历数组或对象。例如： ``` let arr = [1, 2,...
es6新增哪些特性
热门推荐
jiangshen_a的博客
09-01 1万+
es6新增哪些特性？
Es6新增了哪些东西？？
qq_52449203的博客
11-10 294
es6新增了哪些东西
ES6新增哪些内容？
qq_45587547的博客
06-23 1696
今天分享一些ES6中新增的内容1、let和const关键字2、箭头函数3、解构赋值4、对象扩展5、模板字符串6、展开运算符7、es6模块化开发8、新增数据类型Symbol9、新增数据结构set和map。
es6数组新增东西
weixin_33816946的博客
07-01 86
2019独角兽企业重金招聘Python工程师标准>>> ...
详解es6新增数组方法简便了哪些操作
01-19
在这里不过多阐述，我也是跟着阮一峰大佬的《es6入门 》来学习的，es6新增了很多的方法、属性，让我们在编码中得到了很高的提升，在这里只对array这块进行阐述，其他的就过不多介绍了。 言归正传，在项目中，经常会...
ES6新增的数组知识实例小结
10-15
以下是一些重要的ES6新增的数组知识点： 1. **JSON数组格式转换**： 在某些场景下，我们需要将JSON对象转换为数组。在ES6中，我们可以利用`Array.from()`方法实现这一转换。例如，对于一个具有`length`属性的特殊...
ES6新增的math,Number方法
08-29
在ES6（ECMAScript 2015）版本中，JavaScript引入了一些新的数学和数字相关的函数，使得处理数学计算和数值操作更加便捷。这里主要介绍`Math`对象的几个新方法以及`Number`对象的一些扩展。 1. `Number.isInteger()...
ES6 新增内容
weixin_62548988的博客
07-23 187
6.新增一些数组、字符串等内置构造函数方法，例如 Array.from、Array.of、Math.sign、Math.trunc 等。4.类(class、constructor、extends)7.新增一些语法、例如扩展操作符、解构、函数默认参数等。9.新增元编程相关，例如 proxy、Reflect。3.支持模块化(import、export)8.新增一些基本数据类型 Symbol。10.Set 和 Map 数据结构。12.Generator 生成器。5.let、const 关键字。
ES6的新特性有哪些?
qq_59068526的博客
10-15 436
ES6的新特性有哪些?
ES6 新增的几个知识点
weixin_44868390的博客
06-09 185
js这门语言是一个不断完善，功能加强的一个过程 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能 let,const,var let 声明变量的关键字 块级作用域 防止循环遍历变成 全局变量 不存在变量声明提升 for (var i =...
ES6新特性都有哪些
weixin_70191743的博客
11-27 1098
ES6新特性
ES6新特性。对象、数组新增方法
study_way的博客
08-17 347
ES6（ECMAScript 2015）是 JavaScript 的一个重要版本，引入了许多新的语法和功能，增强了语言的表达能力和开发体验。是一种类似于数组的数据结构，但它的值是唯一的，不允许重复。它提供了一种存储无重复值的集合的方式。Promise 提供了更便捷的处理异步操作的方式，避免了回调地狱，改善了代码的可读性。是 ES6 中引入的一种新的原始数据类型，用于创建独一无二的值。的键可以是任何类型的值，包括对象、函数等，而不仅仅是字符串。是一种新的数据结构，它是一种键值对的集合，与对象不同，
ES6里新增变量声明与解构赋值
一个无聊的前端写点无聊的东西
03-21 244
ECMAScript是JavaScript的语法标准，而ES6是JavaScript 的下一个版本标准 严格来说，ECMAScript还包括其他很多语言的语法标准 ES6中增加了很多功能上的不足，比如常量、作用域、对象代理、异步处理、类、继承、面向对象等 ECMAScript发展历史 1995：ECMAScript的诞生 1997：ECMAScript1.0标准确立 1998.6: ECMASc...
ES6新增语法
Jacob_vue的博客
09-30 486
ES6新增语法
js ES6类class类（语法糖）整理
HwH66998的博客
02-28 1139
在es5中,生成实例对象的方法是通过构造函数 在es6中,通过class关键字,可以定义类, 类必须要用new调用否则会报错 //es5 function Person(name,age){ this.name=name; this.age=age; } var obj =new Person("张三",18); console.log(obj.name,o...
es6有哪些新增特性？
sy_yan的博客
05-24 2772
es6的优点 箭头函数的问题在我面试的时候也遇到了 es6新增的特性： Let和const关键字：var支持变量提升 let不支持 for(let itemof Arr)可以达到和for(vari=0;i<Arr.length;i++)原来的同样得效果。 字符串模板：在ES6之前,将字符串连接到一起的方法是+或者concat()方法, 而字符串模板： let message = `${student.name} please see ${teacher.name} in ${teacher.room}
ES6相关新特性介绍
weixin_30840573的博客
07-07 271
你可能已经听说过ECMAScript 6(简称 ES6)了。ES6 是 Javascript 的下一个版本，它有很多很棒的新特性。这些特性复杂程度各不相同，但对于简单的脚本和复杂的应用都很有用。在本文中，我们将讨论一些精心挑选的 ES6 特性，这些特性可以用于你日常的 Javascript 编码中。 请注意，当前浏览器已经全面展开对这些 ES6 新特性的支持，尽管目前的支持程度还有所差异。如...
es6新增语法有那些
最新发布
02-06
以下是ES6新增的一些主要语法： 1. let和const关键字：用于声明块级作用域的变量。let声明的变量可以被重新赋值，而const声明的变量是常量，不可被重新赋值。 2. 箭头函数：使用箭头（=>）定义函数，简化了函数的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值