es6基础学习(1)

1. 箭头函数1.1 基本语法// 传统写法letarr[1,2,3,4,5];letresult1arr.map(function(item){returnitem*2;});// 箭头函数写法letresult2arr.map((item)item*2);console.log(result2);// [2, 4, 6, 8, 10]1.2 核心优势✅ 优势1简洁语法场景传统写法箭头函数单个参数function(x){ return x*2 }x x*2多个参数function(x,y){ return xy }(x,y) xy无参数function(){ return 42 }() 42// 各种写法示例letf1()42;// 无参数letf2xx*2;// 一个参数可省略括号letf3(x,y)xy;// 多个参数必须加括号letf4(x,y){// 多行代码需加花括号和 returnletsumxy;returnsum*2;};优势2隐式返回// 单行表达式自动返回不需要 returnletdoublexx*2;// 自动返回 x*2// 多行代码需要显式 returnletprocess(x,y){lettempxy;returntemp*2;// 必须写 return};// 返回对象时需要加括号letgetUser()({name:张三,age:18});✅ 优势3修复 this 指向问题// ❌ 传统函数this 指向调用者constobj{name:对象,greet:function(){setTimeout(function(){console.log(this.name);// undefinedthis 指向 window},1000);}};// ✅ 箭头函数this 指向定义时的对象constobj2{name:对象,greet:function(){setTimeout((){console.log(this.name);// 对象this 绑定到外层},1000);}};1.3 不能使用箭头函数的场景场景原因正确写法构造函数箭头函数没有自己的this使用普通函数对象方法this 会指向全局使用普通函数DOM 事件回调需要动态 this 指向元素使用普通函数需要 arguments箭头函数没有 arguments使用普通函数或 rest 参数2. 块级作用域2.1 概念对比作用域类型说明示例全局作用域全局变量var a 1全局函数作用域函数内有效function fn() { var b 2 }块级作用域ES6新增 {}内有效 let c 32.2 实际应用// ES5只有函数作用域没有块级作用域for(vari0;i5;i){// ...}console.log(i);// 5变量泄露// ES6块级作用域for(letj0;j5;j){// ...}console.log(j);// ReferenceError: j is not defined// if 语句块if(true){letx10;vary20;}console.log(y);// 20var 不受块级限制console.log(x);// ReferenceErrorlet 受块级限制3.类构建函数3.1类的基本使用方法es6新增类概念可以使用class关键字声明一个类之后以这个类来进行实例化。类抽象了对象的公共部分它泛指某一大类对象特指某一个通过类来实例化一个具体的对象class Star { constructor(name,age) { this.namename; this.ageage; } say (){ console.log(song) } const starnew Star() star.say()注意方法之间不能加逗号分割同时方法不需要添加function关键字。constructor构造函数constructor方法是累的构造函数用于传递参数返回实例对象通过new命令生成对象实例时自动调用该方法如果涅昭显示定义类内部会自动给我们创建一个创建实例var ldhnew Star(李德华‘18console.log(ldh.name)3.2 类的构造方法方法1导出实例单例模式classUserController{asyncgetUsers(req,res){/* ... */}}module.exportsnewUserController();// 导出类// app.jsconstuserControllerrequire(./controller.js);// 直接就是实例userController.getUsers(req,res);// 不需要 new方法2classUserController{asyncgetUsers(req,res){/* ... */}}module.exportsUserController;// 导出类// app.jsconstUserControllerrequire(./user.controller);constuserControllernewUserController();// 需要手动实例化userController.getUsers(req,res);3.3 类 工具类静态方法user.jsclassResponseHandler{// 静态方法staticsuccess(res,data){returnres.json({code:0,data});}staticerror(res,message){returnres.json({code:400,message});}}module.exportsResponseHandler;app.jsconstResponseHandlerrequire(./user.js)// 使用直接通过类名调用ResponseHandler.success(res,{name:张三});ResponseHandler.error(res,操作失败);总结方式导出使用适用场景导出实例new Class()直接调用单例、无状态导出类Classnew Class()需要多实例、依赖注入静态方法不需要实例Class.method()工具函数4 es6中新增字符串函数4.1 startsWith()检查是否以指定字符串开头返回布尔值varstr321366199008092086console.log(str.startsWith(32))//true4.2 endsWith()检查是否以指定字符串结尾,返回布尔值varstr2CSS-HTML-JAVASCRIPT;console.log(str2.endsWith(JAVASCRIPT));//true4.3 includes()检查字符串是否包含指定字符串 返回布尔值varstr32jipmjhhklkl;console.log(str3.includes(l));//true4.4 repeat()指定字符串重复次数varstr4你好哇~;console.log(str4.repeat(4));//你好哇~你好哇~你好哇~你好哇~5. ES6模板字符串1.如果使用模板字符串表示多行字符串所有的空格和缩进都会被保留在输出之中。可以包涵换行$(#box).html(ul li哈哈哈/li li哼哼哈哈哈/li li哦哦哦/li /ul);2.可以嵌入变量使用美元符号和大括号包裹变量${对象名.属性名}letnamewcy,age18,gendermale;console.log(name :${name}, age :${age}, gender :${gender}3.可以原生输出lettest1String.raw;letresult1test1哈哈哈哈我是谁\\;console.log(result1);//哈哈哈哈我是谁\\4.模板字符串还可以嵌套5.大括号内部可以放入任意的JavaScript表达式可以进行运算以及引用对象属性而且还能调用函数6.标签函数会接收多个参数。第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组后面的参数是已经替换后的变量值functionyun_fun(str,one,two){console.log(str,one,two)}letonewcylettwowtyun_fun${one}我是谁?我在哪里?${two}