前端技术相关 (ES6)

1. ES6

1.1 简介
ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma 国际（前身为欧洲计算机制造商协会，英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言）是lavascript 语言的下一代标准，已经在2015年6月正式发布了，并且从ECMAScript6开始，开始采用年号来做版本。即ECMAScript2015，就是ECMAScript6。
它的目标，是使得JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。每年一个新版本。

ECMAScript是浏览器脚本语言的规范，而各种我们熟知的is语言，如JavaScript则是规范的具体实现。

2. ES6新特性

2.1 let声明变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//1. var声明的变量往往会越域// let声明的变量有严格的局部作用域// {//     var a=1;//     let b=2;// }// console.log(a); // 1// console.log(b); //'b' is not defined//2. var可以声明多次// let只能声明一次// var m=1;// var m=2;// let n=3;// let n=4;// console.log(m); //2// console.log(n); //Identifier 'n' has already been declared//3. var会变量提升// let不存在变量提升// console.log(x); //undefined// var x=10;// console.log(y); //Uncaught ReferenceError: Cannot access 'y' before initialization// let y=1;//2.const声明常量（只读变量）const a=1;a=2; //Uncaught TypeError: Assignment to constant variable.</script>
</body>
</html>

2.2 const声明常量（只读变量）

        //2.const声明常量（只读变量）const a=1;a=2; //Uncaught TypeError: Assignment to constant variable.

2.3 解构表达式&字符串扩展

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 解构表达式 --><script>//1.数组解构let arr=[1,2,3];// let a=arr[0];// let b=arr[1];// let c=arr[2];// console.log(a,b,c);//1 2 3// let [a,b,c]=arr;// console.log(a,b,c); //1 2 3//2.对象解构const person={name: "aaa",age: 66,language: ['java','js','css']}// const name=person.name;// const age=person.age;// const language=person.language;// console.log(name,age,language);//aaa 66 (3) ["java", "js", "css"]// const {name,age,language}=person;// console.log(name,age,language);////aaa 66 (3) ["java", "js", "css"]const {name:abc,age,language}=person;console.log(abc,age,language);//aaa 66 (3) ["java", "js", "css"]//3.字符串扩展//3.1 ES6为字符串扩展了几个新的APl：//-includes()：返回布尔值，表示是否找到了参数字符串。//-startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。//-endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。let str="hello.vue";console.log(str.startsWith("hello"));//trueconsole.log(str.endsWith(".vue"));//trueconsole.log(str.includes("e"));//trueconsole.log(str.includes("hello"));//true//3.2 字符串模板//模板字符串相当于加强版的字符串，用反引号`，//除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。//多行字符串let ss=`<div><span>hello aaa</span><div>`;console.log(ss);//<div>//    <span>hello aaa</span>//<div>//字符串插入变量和表达式。变量名写在${}中，${}中可以放入Javascript表达式。let name2="张三";let age2=18;let info=`我是${name2},今年${age2}`;console.log(info);//我是张三,今年18let info2=`我是${abc},今年${age}`;console.log(info2);//我是aaa,今年66//字符串中调用函数function fun(){return "这是一个函数";}let sss=`ahahaha,${fun()}`;console.log(sss);//ahahaha,这是一个函数</script></body>
</html>

2.4 函数优化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//函数优化//1.函数参数默认值//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法function add(a,b){//判断b是否为空，为空就给默认值1b=b || 1;return a+b;}//传一个参数console.log(add(10));//11//现在可以这么写直接给参数写上默认值，没传就会自动使用默认值function add2(a,b=1){return a+b;}//传一个参数console.log(add2(20));//21//2.不定参数 任意多个参数function fun(...value){console.log(value.length)}fun(1,2,3,4);//4fun();//0//3.箭头函数//es6中定义函数的简写方式//一个参数时var print=function(obj){console.log(obj);}print("aaa");//aaavar print2=obj=>console.log(obj);print2("bbb");//bbb//多个参数var sum=function(a,b){return a+b;}var sum2=(a,b)=>a+b;console.log(sum2(10,20));//30var sum3=function(a,b){c=a+b;return a+c;}var sum4=(a,b)=>{c=a+b;return a+c;}console.log(sum4(20,30));//70const person={name: "aaa",age: 66,language: ['java','js','css']}function hello(person){console.log("hello",person.name);}var hello2=(person)=>console.log("hello",person.name);hello2(person);//hello aaa//{name} 直接解构person  箭头函数+解构var hello2=({name})=>console.log("hello",name);hello2(person);//hello aaa</script>
</body>
</html>

2.5 对象优化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//对象优化  1.新增的api//Es6给Object拓展了许多新的方法，如：//keys(obj): 获取对象的所有key形成的数组//values(obj): 获取对象的所有value形成的数组//entries(obj): 获取对象的所有key和value形成的二维数组。格式：`[[k1,v1],[k2,v2],...]`//assign(dest,…src): 将多个src对象的值持贝到dest中。（第一层为深持贝，第二层为浅持贝）const person={name: "aaa",age: 66,language: ['java','js','css']}console.log(Object.keys(person));// ["name", "age", "language"]console.log(Object.values(person));// ["aaa", 66, Array(3)]console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]const target={a:1};const source1={b:2};const source2={c:3};//Object.assign方法的第一个参数是目标对象，后面的参数都是源对象Object.assign(target,source1,source2);console.log(target);//{a: 1, b: 2, c: 3}//2.声明对象简写const age=66;const name="aaa";const person1={name:name,age:age};console.log(person1);//{name: "aaa", age: 66}const person2={name,age};console.log(person2);//{name: "aaa", age: 66}//3.对象的函数属性简写let person3={name:"aaa",//以前eat:function(food){console.log(this.name+"在吃"+food);},//箭头函数版 this不能使用  这里this.name 拿不到，对象.属性可以获取信息eat2: food=>console.log(person3.name+"在吃"+food),//简写版eat3(food){console.log(this.name+"在吃"+food);}}person3.eat("apple");//aaa在吃appleperson3.eat2("apple");person3.eat3("apple");//4.对象拓展运算符//拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。//--拷贝对象 深拷贝let person4={name:"bbb",age:1};let someone={...person4}console.log(someone);//{name: "bbb", age: 1}//--合并对象let age2={age:123};let name2={name:"zxcv"};let person5={name:"abc"};person5={...age2,...name2};//后面的name2会覆盖之前的值console.log(person5);//{age: 123, name: "zxcv"}</script>
</body>
</html>

2.6 map和reduce

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//数组中新增了map和reduce方法。//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。let arr=['1','2','3','10'];arr=arr.map((item)=>{return item*2;});//arr=arr.map(item => item*2);console.log(arr);//2 4 6 20//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，//arr.reduce（callback，[finitialValue]）//reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，//接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。//callback（执行数组中每个值的函数，包含四个参数）//1、previousvalue（上一次调用回调返回的值，或者是提供的初始值（initialValue））//2、currentValue（数组中当前被处理的元素）//3、index（当前元素在效组中的索引）//4、array（调用reduce的数组）initialValue（作为第一次调用callback的第一个参数。）let result=arr.reduce((a,b)=>{console.log("上一次处理后："+a);console.log("当前正在处理："+b);return a+b;});console.log(result);//32//reduce 指定初始值let result2=arr.reduce((a,b)=>{console.log("上一次处理后："+a);console.log("当前正在处理："+b);return a+b;},100);console.log(result2);//132</script>
</body>
</html>

2.7 Promise

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body><!-- 在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的ajax请求a，b，c，d.后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，裁们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…….总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：1.查询用户，查询成功说明可以登录2.查询用户成功，查询科目3.根据料目的查询结果，获取去成绩分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，为了渲染方便，最好响应json数据。在这里就不编写后台接口了，而是提供三个ison文件，直接提供ison效据，模拟后台接口： --><script>//1、查出当前用户信息//2、按照当前用户的id查出他的课程//3、按照当前课程id查出分数        // $.ajax({//     url:"mock/user.json",//     success(data){//         console.log("查询用户：",data);//         $.ajax({//             url: `mock/user_corse_${data.id}.json`,//             success(data){//                 console.log("查询课程：",data);//                 $.ajax({//                     url: `mock/corse_score_${data.id}.json`,//                     success(data){//                         console.log("查询到分数",data);//                     },//                     error(error){//                         console.log("出现异常了3:"+error);//                     }//                 });//             },//             error(error){//                 console.log("出现异常了2:"+error);//             }//         });//     },//     error(error){//         console.log("出现异常了1:"+error);//     }// });//1.promise 可以封装异步操作// let p=new Promise((resolve,reject)=>{//     //1.异步操作//     $.ajax({//         url:"mock/user.json",//         success:function(data){//             console.log("查询用户：",data);//             resolve(data);//         },//         error:function(error){//             reject(error);//         }//     });// })// p.then((obj)=>{//     //console.log("上一步的结果",obj.id);//     return new Promise((resolve,reject)=>{//         $.ajax({//         url: `mock/user_corse_${obj.id}.json`,//         success:function(data){//             console.log("查询用户课程：",data);//             resolve(data);//         },//         error:function(error){//             reject(error);//         }//     });//     })// }).then((data)=>{//     console.log("上一步的结果",data);//     $.ajax({//         url: `mock/corse_score_${data.id}.json`,//         success:function(data){//             console.log("查询用户课程分数：",data);//             //resolve(data);//         },//         error:function(error){//             //reject(error);//         }//     });// })function get(url,data){return new Promise((resolve,reject)=>{$.ajax({url:url,data:data,success:function(data){resolve(data);},error:function(error){reject(error);}})});}get("mock/user.json").then((data)=>{console.log("用户查询成功：",data);return get(`mock/user_corse_${data.id}.json`);}).then((data)=>{console.log("课程查询成功：",data);return get(`mock/corse_score_${data.id}.json`);}).then((data)=>{console.log("成绩查询成功：",data);}).catch((error)=>{console.log("遇到异常..");});</script>
</body>
</html>

2.8 模块化

什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而s中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export和import。
·`export`命令用于规定模块的对外接口。
·`import`命令用于导入其他模块提供的功能。

3. Babel

Babel是一个Javascript编译器，我们可以使用es的最新语法编程，而不用担心浏览器兼容问题。他会自动转化为浏览器兼容的代码

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Linux串口编程（中断方式和select方式）
Linux下的串口编程，在嵌入式开发中占据着重要的地位，因为很多的嵌入式设备都是通过串口交换数据的。在没有操作系统的我们可以使用UART的中断来出来数据的接受和发送，而在Linux操作系统下，我们也可以使用软中断的方式来处理数据的接受和发送，这里主要使用的是信号SIGIO，也…...
2024/5/1 1:08:00
【strike Fish】构筑Render的两种途径的思考
导读：ib render的构建曾经深深缠绕过我，这里我介绍一篇关于这方面的文章，看看作者的态度。我个人觉得可以用MXML解决的代码不必要动用AS，当然我也非常同意作者的观点AS更加强大，更加体现程序员的价值　　I was recently working with item renderers on a project and wa…...
2024/4/30 17:25:20
看看女程序媛们的自述
我叫仓鼠，作为女程序员写了8年代码了~感觉自己职业发展到目前还算顺利，很幸运没怎么因为性别受到不公正的待遇和评价，分享点体验吧：）首先完全不要去管这个问题下那些说什么"女程序员只是鼓励师"之类的人，我敢保证他们不是水平很高、在好公司呆过的工程师，因为…...
2024/4/30 21:20:47
C++实现Floyd算法
C++实现Floyd算法 Floyd算法是计算任意两点之间最短路的一种算法。相比于Dijkstra和逐次逼近法来说最大的优点在于可以全局的计算任意两点间的最短路径。相关原理很多博主写的都非常好，这里就不再赘述。此代码是在完成作业是不想手动计算，有些题目迭代次数有点多，矩阵又比较…...
2024/4/30 22:14:17
JS的三大组成部分
1. 什么是JS？ JavaScript是一种高级的、解释型的编程语言（脚本语言）高级编程语言是高度封装的编程语言，以人类日常语言为基础，使用一般人易于接受的文字表示，有较高的可读性。解释型语言是一种编程语言类型，它会直接运行代码，不像编译语言（经过编译器先行编译为机器代…...
2024/5/1 1:11:26
js格式化日期（字符串方法）
var str = 201909032115;function format(str){var dateString = str.substring(0,8);var pattern = /(\d{4})(\d{2})(\d{2})/;return dateString.replace(pattern, $1年$2月$3日)}...
2024/4/30 20:40:28
适合讲给女朋友听的极品笑话
1. 单身的小王问老李：为什么法律规定一个男人只能娶一个老婆，老李语重心长地说：你有了老婆之后就会发现，其实这条法律是保护男人的　　2. 一对情侣吵架。女：“你每一样东西都比不上任何人！”男：“对，尤其是女朋友！” 3.女：你喜欢我天使的脸孔，还是魔鬼的身材？男：…...
2024/4/30 21:25:57
Javascript系列（一）语法、关键保留字、变量
ECMA是European Computer Manufacturers Association的缩写，即欧洲计算机制造商协会。欧洲计算机制造商协会是制定信息传输与通讯的国际化标准组织。 ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。一、使用javascript 在html…...
2024/4/30 18:12:35
JS格式化long类型的时间
今天在做一个时间显示时，ajax接收到的时间是long类型的，但前台要显示2017-08-23这种格式：网上搜了一下，发现好多人写得挺麻烦的，参考了其中的方法，就自己封装了一个：function formatDate(longDate){var date = new Date(longDate);var yyyy = date.getFullYear();var mm…...
2024/4/30 22:50:39
js 格式化时间戳函数
一：年月日时分秒可以任意组合 function formatDate(date,fmt){if(/(y+)/.test(fmt)){date= new Date(date*1000);fmt = fmt.replace(RegExp.$1,(date.getFullYear()+"").substr(4-RegExp.$1.length));var o ={M+:date.getMonth()+1,d+:date.getDate(),h+:date.getHo…...
2024/4/26 7:28:16
BOM，DOM，ECMAScripts三者的关系
一：DOM 文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API） DOM是HTML与JavaScript之间沟通的桥梁。DOM下，HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个…...
2024/4/26 21:44:37
5个文献免费下载神器
文献免费下载神器，这里放5个可以直接下载SCI等论文网站。以下网站去地址栏直接搜！1、Sci-Hub可谓是无人不知无人不晓，其自开发以来，便以星火燎原之势席卷学术界，因为它可以免费下载论文文献全文。只要输入文献链接，就可以在线浏览PDF，也可以免费下载文献。网站：sci-hu…...
2024/5/1 0:56:02
偷菜算啥，到日本恋爱社交游戏上偷他们妹子去
据分析，曾经风靡一时的偷菜游戏之所以会火是因为它挖掘了人心中的阴暗面，体验当小偷不劳而获的小快感，不过现在日本的这款社交游戏则刷新了游戏界的下限，玩家可以在里面和别人的女友偷情，挖他们墙脚，给他们戴绿帽。抵制日货？抢日本宅男的妹子比砸中国人的车子要有意义多…...
2024/4/27 7:51:04
js格式化秒数
function formatTime(value) { var theTime = parseInt(value);// 秒var theTime1 = 0;// 分var theTime2 = 0;// 小时if(theTime > 60) {theTime1 = parseInt(theTime/60);theTime = parseInt(theTime`);if(theTime1 > 60) {theTime2 = parseInt(theTime1/60);theTime1…...
2024/4/30 20:06:56
Js函数中的参数
ECMAScript（欧洲计算机制造协会对JS的规范）函数的参数和其他语言中的函数参数有所不同。ECMAScript函数不介意传递进来多少个参数和参数类型。比如，你定义了一个函数接受两个参数，在调用的时候，你可以传一个、两个、三个……都没问题，就算不传，JS解析器也不会报错。ECMA…...
2024/4/30 19:53:21
WSL下卸载了zsh / fish后无法启动bash解决方案
最近在鼓捣wsl，感觉自己用还是蛮好用的。听说1903要更新新的cmd，还蛮期待的解决步骤：建议先下载个everything , windows下非常好用的文件查找软件。启动后搜索.bashrc，找到路径后缀为你默认登录账号的对应的.bashrc文件用编辑器打开后，如果要卸载zsh则搜索zsh，如果是Fis…...
2024/4/27 5:30:04
这名程序员的求婚方式，是我见过最浪漫的！
为了向心中的女神求婚，每个男生都会挖空心思地想出一些非常特别的创意。例如这位网名叫做 LA pike 的程序员，他为了向交往已久的女友求婚，利用自己的专长，写出了一个以两人的回忆为主题的闯关游戏。他假装邀请女友来玩游戏，于是女友便在不知情的状况下，开始了闯关游戏。第…...
2024/4/27 18:35:35
java格式json和js格式json互转
遇见问题：在开发爬虫过程中，我们会遇见提取html页面中的json数据。由于java与js的json格式不同，故需要转化。举例： js中json：{number: "188**727499",intLoginType: "4",areaCode: "0471",isBusinessCustType: "N",identifyType:…...
2024/4/27 5:12:18
通关！游戏设计之道的学习笔记（二）创意
在了解了什么是游戏以及游戏是哪些人做出来后，心中不由想知道游戏到底是怎么做出来的？这就得了解游戏设计，而好的游戏设计则来源于好的创意。那么，创意到底从哪来的呢？又如何能把握住好的创意？创意好的创意与愚蠢的创意只有一线之隔。 ——米歇尔冈瑞（Michel Gondry）…...
2024/4/30 19:56:37
javascript/DOM/BOM简介
1.javascript的历史1995年，Netscape(网景)公司的Brendan Eich(布兰登艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个名为LiveScript的脚本语言——该语言将同时在浏览器和服务器中使用，目的是在浏览器中执行预检测程序（表单校验）。后来Ne…...
2024/4/27 17:49:10