ES6进阶——学完直接起飞

2024-01-16 22:08
文章标签 进阶 直接 frontend es6 学完 起飞

本文主要是介绍ES6进阶——学完直接起飞，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ES6进阶版

文章目录

  • 前言
  • 一、类
    • 1.创建类
  • 二、模块化
    • 1.export 导出和import导入
  • 三、可迭代对象
    • 1.set 数组去重
    • 2.WeakSet
    • 3.Map
    • 4.for of
    • 4.Promise
      • 异步处理
      • Promise解决回调地狱
      • Promise实现网络请求
  • 总结

前言

ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念

目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6

ES6基础链接: http://t.csdn.cn/xUElx.

一、类

ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。

1.创建类

代码如下：

//创建一个类
class Animal {constructor(color,age){this.color = color;this.age = age;}yeil(){alert("我大声咆哮");}}class Cat extends Animal{constructor(color,age,name){//父类构成函数//调用Animal构造函数constructorsuper(color,age); this.name = name;}skill(){alert("我超级会卖萌");}}// 实例化猫类var c1 = new Cat("黄色",2,"kitty");var c2 = new Cat("黑色",1,"可乐");c1.skill();c1.yeil();

二、模块化

1.export 导出和import导入

在html中模块化引入js 
1. 有http服务器
2. <script type="module">

HTML代码如下：

//导入
import{name,fun} from"./js/utils.js"
console.log(name);
//导入函数
import{fun} from'./js/utils.js'
fun()
//导入默认  名称可以随便起
import Cat from'./js/utils.js'
var c1=new Cat("小不点")
console.log(c1);

导入所有内容

//导入所有内容 起一个别名叫utils 从url里面找到import * as utils from './js/utils.js';console.log(utils.name);utils.fun()var c=new utils.default("小白")console.log(c);

JS代码如下：

var name="索隆";
export{name}
//导入name
function fun(){console.log('我叫'+name+"我要成为世界第一大剑豪");
}
//导出函数
export{fun}//导出默认
class Cat{constructor(name) {this.name=name}
}
//一个文件里面只能导出一个默认
export default Cat

三、可迭代对象

1.set 数组去重

代码如下（示例）：

var s2 = new Set([1, 2, 3,2]); 
console.log(s2);
//  {1, 2, 3}

var arr=[1,2,3,4,5,1,1,2]
var s2=new Set(arr)
//把数组展开放入新数组内
arr=[...new Set(arr)]		
console.log(arr);
//{1,2,3,4,5}

2.WeakSet

WeakSet结构与Set类似，也是不重复的值的集合。
WeakSet的成员只能是对象，而不能是其他类型的值

3.Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);

方法

set get delete clear has size

WeakMap 就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。
另一个需要注意的点是，WeakMap 的所有 key 必须是对象。没有size

4.for of

for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。

    var arr = ["路飞", "索隆", "山治", "乌索普"]for (let a of arr) {console.log(a);}var str = "富士山什么时间爆发啊：）"//一些生僻字一个字占两个字符长度； 避免出错可以用for offor (let s of str) {console.log(s);}//keys（）键的集合for (let k of arr.keys()) {console.log(k);}//values 值的集合for (let v of arr.values()) {console.log(v);}//entries 键与值的集合for (let [k, v] of arr.entries()) {console.log(k, v);}

可以被 for of 遍历的元素

字符串，数组，set，map

4.Promise

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

promise 承诺 resolve完成解决 reject 拒绝兑现

异步处理

 //Promise 主要做异步处理//索隆对路飞说要成为世界第一大剑豪（现在还未完成）//索隆不能立即执行成为世界第一大剑豪 需要3000毫秒后完成var p = new Promise((resolve, reject) => {setTimeout(() => {var num = Math.random();//随机数if (num > 0.5) {//大于0.5时完成承诺resolve("成为世界第一大剑豪")} else {//未完成承诺reject("鹰眼手下打猩猩")}}, 3000);})//一段时间后（3000毫秒）路飞问索隆然后呢p.then(res => {//箭头函数简写 完成承诺console.log(res);}).catch(function (err) {//回调函数  未完成承诺console.log(err);})

Promise解决回调地狱

 //2秒后对女生说“你好，很高兴认识你”//3秒后 说“能加个微信吗”//5秒后被警察抓走 和凣凣做室友function say(msg, time) {return new Promise((resolve, reject) => {setTimeout(() => resolve(msg), time)})}//调用函数 2秒后执行say("你好，很高兴认识你", 2000).then(res => {console.log(res);return say("咱俩能加个微信吗", 3000)}).then(res => {console.log(res);return say("被警察抓走，和凣凣做室友", 5000);}).then(res => {console.log(res);})

Promise实现网络请求

找到当前城市地址

 function getApi(url){return new Promise((resolve,reject)=>{$.ajax({url,dataType:"jsonp",success(res){resolve(res)  },error(err){reject(err)}})})}var url = " https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp"getApi(url);

获取当前城市的天气

 <span class="city"></span><span class="weather"></span><script>function getApi(url) {return new Promise((resolve, reject) => {//发送ajax请求 url请求的地址 datatype请求数据类型 success成功后回调 error失败后回调$.ajax({url,dataType: "jsonp",success(res) {//兑现成功 对应。thenresolve(res);},error(err) {//拒绝兑现 对应。catchreject(err)}})})}var url = " https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp"//执行函数 传入 urlgetApi(url)// resolve被执行通过。then获取resolve的结果.then(res => {console.log(res);//设置.city的文本为获取的城市$(".city").text(res.result.ad_info.city)//获取该城市的天气var url2 = `http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=${res.result.ad_info.province}&city=${res.result.ad_info.city}`return getApi(url2)}).then(res => {console.log("天气", res);var str = `${res.data.observe.degree}度,${res.data.observe.weather}`$(".weather").text(str)})//失败后控制台输出失败的结果.catch(err => console.log(err))</script>

总结

在这里插入图片描述

以上就是 ES6 最常用的一些语法，可以说这20%的语法，在ES6的日常使用中占了80%
  • 创作不易，深夜肝文，如果对大家有帮助，还请大家支持一波~
  • 点赞，关注，收藏走一波，感激不尽！
  • 好人一生平安，一胎生八个！

这篇关于ES6进阶——学完直接起飞的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/614045。

相关文章

详解Vue如何使用xlsx库导出Excel文件

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件，使用第三
阅读更多...
Java实现Excel与HTML互转

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式，广泛用于数据处理和分析，而HTM则是一种用于创建网页的标记语言。虽然两
阅读更多...
Python进阶之Excel基本操作介绍

Python进阶之Excel基本操作介绍

《Python进阶之Excel基本操作介绍》在现实中,很多工作都需要与数据打交道,Excel作为常用的数据处理工具,一直备受人们的青睐,本文主要为大家介绍了一些Python中Excel的基本操作,希望... 目录概述写入使用 xlwt使用 XlsxWriter读取修改概述在现实中，很多工作都需要与数据打交
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2