网站开发的层次制作高端app开发公司

网站开发的层次,制作高端app开发公司,开源低代码,做公益网站目录一、ES6介绍1.1 Let变量定义1.2 箭头函数1.2.1 基本语法1.2.2 this 绑定#xff08;重要区别#xff01;#xff09;1.3 模板字符串1.4 解构赋值1.4.1 数组解构1.4.2 对象解构1.5 扩展运算符1.5.1 数组扩展1.5.2 对象扩展1.6 默认参数1.7 剩余参数1.8 Symbol 类型1.10 S…目录一、ES6介绍1.1 Let变量定义1.2 箭头函数1.2.1 基本语法1.2.2 this 绑定重要区别1.3 模板字符串1.4 解构赋值1.4.1 数组解构1.4.2 对象解构1.5 扩展运算符1.5.1 数组扩展1.5.2 对象扩展1.6 默认参数1.7 剩余参数1.8 Symbol 类型1.10 Set 和 Map1.10.1 Set1.10.2 Map1.11 Promise 和异步1.12 async/await1.13 模块化1.13.1 导出1.13.2 导入一、ES6介绍ECMAScript 6简称ES6是于2015年6月正式发布的JavaScript语言的标准正式名为ECMAScript 2015ES2015。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序成为企业级开发语言 。另外一些情况下ES6也泛指ES2015及之后的新增特性虽然之后的版本应当称为ES7、ES8等。1.1 Let变量定义functiontest1(){// var 声明的变量往往会越域// let 声明的变量有严格局部作用域{vara1;letb2;}console.log(a);// 1//console.log(b); // ReferenceError: b is not defined}functiontest1(){// var 可以声明多次// let 只能声明一次varm1varm2letn3//let n 4console.log(m)// 2console.log(n)// Identifier n has already been declared}functiontest2(){// var 会变量提升// let 不存在变量提升console.log(x);// undefinedvarx10;console.log(y);//ReferenceError: y is not definedlety20;1.2 箭头函数1.2.1 基本语法// 传统函数functionsum1(a,b){returnab;}// 箭头函数constsum2(a,b)ab;// 不同写法constsquarenn*n;// 单参数constsayHello()Hello;// 无参数constlogmsgconsole.log(msg);// 单语句// 多语句需要大括号constcalculate(a,b){constsumab;constproducta*b;return{sum,product};};// 返回对象需要用括号包裹constcreateUser(name,age)({name,age});1.2.2 this 绑定重要区别// 传统函数的 this 问题constobj1{name:张三,sayName:function(){setTimeout(function(){console.log(this.name);// undefinedthis指向window},100);}};// 箭头函数解决 this 问题constobj2{name:李四,sayName:function(){setTimeout((){console.log(this.name);// 李四this继承自外层},100);}};// 类方法中不要用箭头函数classPerson{constructor(name){this.namename;}// ❌ 错误箭头函数在原型上this不对sayName(){console.log(this.name);}// ✅ 正确sayName2(){console.log(this.name);}}1.3 模板字符串constname张三;constage25;// ES5console.log(姓名name年龄age);// ES6console.log(姓名${name}年龄${age});// 多行字符串consthtmldiv classuser-card h2${name}/h2 p年龄${age}/p p状态${age18?成年人:未成年人}/p /div;// 标签模板高级用法functionhighlight(strings,...values){returnstrings.reduce((result,str,i){constvaluevalues[i]?span classhighlight${values[i]}/span:;returnresultstrvalue;},);}constresulthighlight用户${name}今年${age}岁;// 输出用户 span classhighlight张三/span 今年 span classhighlight25/span 岁1.4 解构赋值1.4.1 数组解构// 基本解构const[a,b][1,2];// a1, b2const[x,,z][1,2,3];// x1, z3跳过第二个// 默认值const[n110,n220][1];// n11, n220// 剩余元素const[first,...rest][1,2,3,4];// first1, rest[2,3,4]// 交换变量letm1,n2;[m,n][n,m];// m2, n1// 函数返回多个值functiongetUser(){return[张三,25,北京];}const[userName,userAge,city]getUser();1.4.2 对象解构constuser{name:张三,age:25,address:{city:北京,street:朝阳路}};// 基本解构const{name,age}user;// name张三, age25// 重命名const{name:userName,age:userAge}user;// 默认值const{name,gender男}user;// gender男// 嵌套解构const{address:{city}}user;// city北京// 函数参数解构functionprintUser({name,age18}){console.log(${name}-${age}岁);}printUser({name:李四});// 李四 - 18岁// 多次解构functiongetData(){return{data:{users:[{id:1,name:张三}],total:100},code:200};}const{data:{users,total}}getData();1.5 扩展运算符1.5.1 数组扩展// 复制数组constarr1[1,2,3];constarr2[...arr1];// 深拷贝一层arr2[0]100;// arr1不受影响// 合并数组constarr3[1,2];constarr4[3,4];constmerged[...arr3,...arr4];// [1,2,3,4]// 函数参数functionsum(a,b,c){returnabc;}constnumbers[1,2,3];sum(...numbers);// 6// 替代 applyMath.max(...[1,2,3]);// 相当于 Math.max(1, 2, 3)// 创建新数组constnewArr[0,...arr1,4,5];// [0,1,2,3,4,5]// 字符串转数组constchars[...hello];// [h,e,l,l,o]1.5.2 对象扩展constobj1{a:1,b:2};constobj2{c:3,d:4};// 合并对象浅拷贝constmerged{...obj1,...obj2};// {a:1,b:2,c:3,d:4}// 后面的覆盖前面的constobj3{a:1,b:2};constobj4{b:3,c:4};constresult{...obj3,...obj4};// {a:1,b:3,c:4}// 添加新属性constuser{name:张三,age:25};constuserWithId{id:1,...user};// {id:1,name:张三,age:25}// 默认值constdefaults{theme:dark,fontSize:14};constsettings{fontSize:16,...defaults};// {theme:dark,fontSize:14}1.6 默认参数// ES5 方式functiongreet(name){namename||游客;return你好name;}// ES6 方式functiongreet(name游客){return你好${name};}// 表达式作为默认值functioncreateUser(name,roleuser,createTimenewDate()){return{name,role,createTime};}// 默认参数可以是函数调用functiongetDefaultAge(){return18;}functioncreatePerson(name,agegetDefaultAge()){return{name,age};}// 结合解构functiondrawChart({sizebig,coords{x:0,y:0},radius25}{}){console.log(size,coords,radius);}drawChart();// big {x:0,y:0} 25// 注意事项默认参数在函数参数列表中形成独立作用域letx1;functionfoo(x,y(){x2;}){varx3;// 这里不会影响参数xy();console.log(x);// 3}foo();// 输出 31.7 剩余参数// 收集剩余参数functionsum(...numbers){returnnumbers.reduce((total,num)totalnum,0);}sum(1,2,3,4);// 10// 与普通参数结合functionmultiply(multiplier,...numbers){returnnumbers.map(nn*multiplier);}multiply(2,1,2,3);// [2,4,6]// 替代 argumentsfunctionmax(...args){returnMath.max(...args);}// 在箭头函数中箭头函数没有argumentsconstmax(...args)Math.max(...args);// 解构中的剩余参数const[first,second,...others][1,2,3,4,5];// first1, second2, others[3,4,5]const{a,b,...rest}{a:1,b:2,c:3,d:4};// a1, b2, rest{c:3,d:4}1.8 Symbol 类型// 创建 Symbolconstsym1Symbol();constsym2Symbol(description);// 可选的描述constsym3Symbol(description);sym2sym3;// false每个 Symbol 都是唯一的// 作为对象属性constuser{name:张三,[Symbol(id)]:123,// 不可枚举[Symbol.for(email)]:zhangsanexample.com// 全局 Symbol};// 获取 Symbol 属性constsymbolsObject.getOwnPropertySymbols(user);console.log(symbols);// [Symbol(id), Symbol(email)]// 常用内置 SymbolclassMyArray{constructor(...args){this.dataargs;}// 自定义迭代行为[Symbol.iterator](){letindex0;constdatathis.data;return{next(){return{value:data[index],done:indexdata.length};}};}// 转为原始值[Symbol.toPrimitive](hint){if(hintnumber){returnthis.data.reduce((a,b)ab,0);}if(hintstring){returnthis.data.join(,);}returnthis.data.length;}}constarrnewMyArray(1,2,3);[...arr];// [1,2,3]Number(arr);// 6String(arr);// 1,2,31.10 Set 和 Map1.10.1 Set// 创建 SetconstsetnewSet([1,2,3,3,4]);// [1,2,3,4]// 基本操作set.add(5);// 添加元素set.has(3);// trueset.delete(2);// 删除元素set.size;// 4set.clear();// 清空// 去重数组constarr[1,2,2,3,4,4,5];constunique[...newSet(arr)];// [1,2,3,4,5]// 集合操作constset1newSet([1,2,3]);constset2newSet([3,4,5]);// 并集constunionnewSet([...set1,...set2]);// [1,2,3,4,5]// 交集constintersectionnewSet([...set1].filter(xset2.has(x)));// [3]// 差集constdifferencenewSet([...set1].filter(x!set2.has(x)));// [1,2]// WeakSet弱引用constweakSetnewWeakSet();constobj{};weakSet.add(obj);console.log(weakSet.has(obj));// true1.10.2 Map// 创建 MapconstmapnewMap();map.set(name,张三);map.set(age,25);// 可迭代对象初始化constmap2newMap([[name,李四],[age,30]]);// 基本操作map.get(name);// 张三map.has(age);// truemap.delete(age);// 删除map.size;// 1map.clear();// 清空// 遍历for(let[key,value]ofmap){console.log(key,value);}// 与 Object 对比constobjKey{};map.set(objKey,value);// ✅ Map允许对象作为键constobj{[objKey]:value};// ❌ Object会把对象转为字符串[object Object]// WeakMap弱引用constweakMapnewWeakMap();constelementdocument.getElementById(app);weakMap.set(element,{clickCount:0});1.11 Promise 和异步// 创建 PromiseconstpromisenewPromise((resolve,reject){setTimeout((){constsuccessMath.random()0.5;if(success){resolve(操作成功);}else{reject(newError(操作失败));}},1000);});// 使用 Promisepromise.then(result{console.log(成功:,result);returnresult.toUpperCase();}).then(upperResult{console.log(处理后的结果:,upperResult);}).catch(error{console.error(失败:,error.message);}).finally((){console.log(无论成功失败都会执行);});// Promise 静态方法Promise.all([fetch(/api/user),fetch(/api/posts),fetch(/api/comments)]).then(([user,posts,comments]){// 所有请求都成功}).catch(error{// 任意一个失败});Promise.race([fetch(/api/data),newPromise((_,reject)setTimeout(()reject(newError(超时)),5000))]);Promise.allSettled([Promise.resolve(成功),Promise.reject(失败)]).then(results{console.log(results);// [// { status: fulfilled, value: 成功 },// { status: rejected, reason: 失败 }// ]});1.12 async/await// 基本用法asyncfunctionfetchData(){try{constresponseawaitfetch(/api/data);if(!response.ok){thrownewError(网络请求失败);}constdataawaitresponse.json();returndata;}catch(error){console.error(错误:,error);throwerror;// 重新抛出错误}}// 并行执行asyncfunctionfetchAllData(){// 并行执行const[user,posts]awaitPromise.all([fetch(/api/user),fetch(/api/posts)]);// 顺序执行constuserDataawaituser.json();constpostsDataawaitposts.json();return{user:userData,posts:postsData};}// 在箭头函数中使用constfetchUserasync(userId){constresponseawaitfetch(/api/users/${userId});returnresponse.json();};// 在类方法中使用classUserService{asyncgetUser(id){constresponseawaitfetch(/api/users/${id});returnresponse.json();}// 注意async 方法返回的是 PromiseasyncupdateUser(id,data){constresponseawaitfetch(/api/users/${id},{method:PUT,body:JSON.stringify(data)});returnresponse.json();}}// 立即执行 async 函数(async(){constdataawaitfetchData();console.log(data);})();// 错误处理最佳实践asyncfunctionprocess(){constresultawaitfetchData().catch(error{console.error(处理错误:,error);returnnull;// 返回默认值});if(result){// 处理成功结果}}1.13 模块化1.13.1 导出// math.js// 命名导出exportconstPI3.14159;exportfunctionadd(a,b){returnab;}exportclassCalculator{multiply(a,b){returna*b;}}// 默认导出一个文件只能有一个exportdefaultfunction(){console.log(默认导出);}// 聚合导出export{add,PI}from./math.js;1.13.2 导入// 导入命名导出import{PI,add}from./math.js;// 导入默认导出importmyFunctionfrom./math.js;// 重命名import{addasaddNumbers}from./math.js;// 导入所有import*asmathfrom./math.js;math.PI;// 3.14159// 动态导入constmoduleawaitimport(./math.js);module.add(1,2);// 浏览器原生支持script typemodulesrcapp.js/script