ECMAScript 6 (复习）

es6与js的关系：前者是后者的规格，后者是前者的一种实现。 es6更加的方便，工程性更高。变量 // var：不可以重复声明、没有块级作用域、不能限制； //let 声明变量：不存在预解析 ，在同一个作用域里不可重复；for循环括号里声明的变量智能在循环体中使用 const 声明常量 ：不允许重复声明，必须初始化，禁止重复声明 、控制修改 、支持块级作用域； ES6块内部定义的变量，在外部是不可以访问的；在块级作用域内部，变量只能先声明再使用 作用域 //传统的：函数级 //ES6：块级 块级有：语法块{}、if(){}、for(){}、{} 解构赋值 //数组的结构赋值 //let [a,b,c] = [1,2,3]; //console.log(a,b,c); //1 2 3 //let [a,b,c] = [ ,123, ]; //console.log(a,b,c); //undefined 123 undefined //对象的解构赋值 // let {foo,bar} = {foo: 'hello',bar : 'hi'}; // console.log(foo,bar) //hello hi //对象属性别名(如果有了别名，原来的名字就无效了) let {foo:abc,bar} = {bar:'hi',foo:'nihao'}; //console.log(foo,bar);//foo is not defined console.log(abc,bar);//nihao hi //字符串的解构赋值 let [a,b,c,d] = 'hello'; console.log(a,b,c,d); //h e l l let {length} = 'hi'; console.log(length); //2

字符串的相关扩展

//字符串扩展 //includes():判断字符串之中是否包含指定的字串（有的话为true,否的话为false） // 参数一：匹配的字串； 参数二：从第几个开始匹配 console.log('hello nihao'.includes('hello')); //true console.log('hello nihao'.includes('nihao',7)); //false //startsWith()：判断字符串是否以特定的字串开始 //endsWith()：判断字符串是否以特定的字串结束 let url = 'admin/index.php'; console.log(url.startsWith('admin'))//true console.log(url.startsWith('admind'))//false console.log(url.endsWith('php'))//true console.log(url.endsWith('php2'))//false //模板字符串 //反引号表示模板，模板中的内容可以有格式，通过${}方式填充数据 let obj = { username:'shiru', age:'20', gender:'male' } let tpl = ` <div> <span>${obj.gender}</span> <span>${obj.username}</span> <span>${obj.age}</span> </div> `; console.log(tpl); //打印出来为下面所示 //<div> <span>male</span> <span>shiru</span> <span>20</span> </div> 函数 //1.箭头函数 function(参数){ } (参数）=>{} //如果有且仅有1个参数，（）可省略 如果有且仅有1条语句-return,{}可省略 //2.参数展开 //剩余参数----必须是最后一个 //展开参数----与数组的类型差不多

函数的扩展

/* 函数扩展 1.参数扩展 2.参数解构赋值 3.rest参数 4....扩展运算 */ //参数默认值 function foo(param = 'nihao'){ console.log(param); } foo('hello'); function bar(name='lisi',age=11) { console.log(name,age); } bar(); //lisi 11 bar('wanger','13'); //wanger 13 //参数解构赋值 function war({name='lisi',age='14'}={}) { console.log(name,age); } war({name:'zhangsan'})//zhangsan 14 //rest参数(剩余参数) function too(a,b,...param) { console.log(param) } too(1,2,3,4,5,6,7,)//[3,4,5,6,7] //扩展运算符（...） function too(a,b,...param) { console.log(param) } too(1,2,3,4,5,6,7,)//[3,4,5,6,7] 对象 Array：map let arr=[25, 67, 37, 99, 29, 39, 49, 59]; let res=arr.map(function (item){ if(item>=30){ return true; }else{ return false; } }); let res=arr.map(item=>item>=30); //箭头函数 console.log(arr, res); forEach：遍历 循环遍历filter(过滤） let arr=[12, 88, 19, 27, 82, 81, 100, 107]; let arr2=arr.filter(item=>item%2==0); console.log(arr); console.log(arr2); //Array(4)0: 121: 882: 823: 100length: 4__proto__: Array(0) .filter(item=>item.loc==cur_loc) .filter(item=>item.price>=60 && item.price<100); reduce:减少 多对1String:startsWith、 endsWithJSON //1.标准写法：{"key": "aaa", "key2": 20} //2.JSON对象：stringify:把其变成字符串、parse let json={a: 5, b: 19, c: 'jjjj'}; let str=JSON.stringify(json); console.log(str); //{"a":5,"b":19,"c":"jjjj"} let str1='{"a":6,"b":8,"c":"bbbb"}'; let json1=JSON.parse(str1); console.log(json1); //Objecta: 5b: 29c: "jjj"__proto__: Object

7.异步处理 同步—一个一个进行操作 异步—多个操作可以一起进行，互不干扰

同步

$.ajax({ url: 'data/1.json', dataType: 'json', success(data1){ $.ajax({ url: 'data/2.json', dataType: 'json', success(data2){ $.ajax({ url: 'data/3.json', dataType: 'json', success(data3){ console.log(data1, data2, data3); } }); } }); } });

异步 Promise

Promise.all([ $.ajax({url: 'data/1.json', dataType: 'json'}), $.ajax({url: 'data/2.json', dataType: 'json'}), $.ajax({url: 'data/3.json', dataType: 'json'}), ]).then(([data1, data2, data3])=>{ console.log(data1, data2, data3); }, (res)=>{//箭头函数 alert('错了'); }); /*总结： Promise.all([ p1, p2, p3 ]).then();*/

async/await

async function show(){ let data1=await $.ajax({url: 'data/1.json', dataType: 'json'}); if(data1.a<10){ let data2=await $.ajax({url: 'data/2.json', dataType: 'json'}); alert('a'); }else{ let data3=await $.ajax({url: 'data/3.json', dataType: 'json'}); alert('b'); } } show(); /*总结： async function xxx(){ let a=12; let b=5; let data=await promise; ... alert(a+b); } let xxx=async ()=>{ }*/

8.兼容 在线：babel: https://babeljs.io/ 引入时要在书写的js 上加入 type=“text/babel” 编译：

安装Node.jsnpm i @babel/core @babel/cli @babel/preset-env添加脚本添加.babelrc——声明preset