标签 es6 下的文章

标签搜索

少年

累计撰写 189 篇文章
累计收到 26 条评论

搜索到 1 篇与的结果

2022-03-06
ES6语法 ES6语法一、let<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // { // //var 声明的变量往往会跨域 // //let 声明的变量有严格局部作用域 // var a = 1; // let b = 2; // } // console.log(a); //1 // console.log(b); //Uncaught ReferenceError: b is not defined // //var 可以声明多次 // //let 只能声明一次 // var m = 3; // var m = 4; // let n = 5; // // let n=5; // console.log(m); //3 // console.log(n); //Identifier 'n' has already been declared // //var 会变量提升 // //let 不存在变量提升 // console.log(x); //undefined // var x = 10; // console.log(y); //Cannot access 'y' before initialization // let y = 20; // // const 用于定义常量 // //1、声明之后不允许改变。 // //2、一旦声明必须初始化，否则会报错 // const a = 1; // a = 3; //Assignment to constant variable. </script> </body> </html>二、解构表达式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // //数组结构 // let arr =[1,2,3]; // // let a = arr[0]; // // let b = arr[1]; // // let c = arr[2]; // //快速复制 // let [a,b,c] = arr; // console.log(a,b,c); // //对象结构 // const person = { // name: "jack", // age: 21, // language: ['java','js','css'] // } // // const name = person.name; // // const age = person.age; // // const language = person.language; // //新语法 // const {name:abc, age, language} = person; // console.log(abc,age,language); // //字符串扩展 // let str ="hello.vue"; // console.log(str.startsWith("hello")); // console.log(str.endsWith(".vue")); // console.log(str.includes("e")); // console.log(str.includes("hello")); // //字符串模板 // let ss = // ` // <div> // <span>Hello World</span> // </div> // `; // console.log(ss); //字符串插入变量和表达式。变量名写在${}中，在${}中可以放入JavaScript表达式。注意符号是·不是单引号 function fun(){ return "这是一个函数"; } let abc = "zhangsan"; let age = 20; let info = `我是${abc},今年${age+10}岁了，我想说:${fun()}`; console.log(abc,age,info); </script> </body> </html>三、函数优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // //在SE6，我们无法给一个函数参数设置默认值，只能采用变通写法； // function add(a, b){ // //判断是否为空，为空就给默认值1 // b = b || 1; // return a + b; // } // console.log(add(10)); // //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值 // function add2(a, b = 1){ // return a + b; // } // console.log(add2(10)); // //不定参数 // function fun(... values){ // console.log(values.length); // } // console.log(fun("1111","22",33)); // //箭头函数 // // var print = function (obj){ // // console.log(obj); // // } // // console.log(print("Hello")); // //现在写法，一个参数 // var print = obj => console.log(obj); // print("China") // //多个参数 // var sum = function(a, b){ // return a + b; // } // console.log(sum(1,9)); // var sum2 = (a, b) => a+b; // console.log(sum2(1,9)); // //以前写法 // var sum3 = function(a, b){ // c = a +b; //多了一步操作 // return a + c; // } // console.log(sum3(1,9)); // //新写法 // var sum4 = (a, b) =>{ // c = a + b; // return a + c; // } // console.log(sum4(1,9)); //实战：箭头函数结合解构表达式 const person = { name: "jack", age: 20, language: ['java','js','css'] }; function hello(person){ console.log("你好："+person.name); } hello(person); var hello2 = (person)=>console.log("你好哟："+person.name); hello2(person); //箭头函数+解构表达式 var hello3 = ({name})=>console.log("你好哟："+ name); hello3(person); </script> </body> </html>四、对象优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // const person = { // name: "jack", // age : 20, // fun : ['jva','css','html'] // }; // console.log(Object.keys(person)); // console.log(Object.values(person)); // console.log(Object.entries(person)); // const a ={aa: 1}; // const b ={bb: 2}; // const c ={cc: 3}; // console.log(Object.assign(a,b,c)); // //声明对象简写 // const name ="zhangsan"; // const age =10; // const person = {name, age}; // console.log(person); // //对象大的函数属性简写 // let person = { // name: "jack", // //以前 // eat: function(food){ // console.log(this.name+ "在吃"+ food); // }, // //箭头函数this不能使用 // eat2: food => { // console.log(this.name+ "在吃"+ food); // }, // eat3: food => { // console.log(person.name+ "在吃"+ food); // }, // eat4(food){ // console.log(person.name+ "在吃"+ food); // } // } // person.eat("香蕉"); // person.eat2("苹果"); // person.eat3("草莓"); // person.eat3("芒果"); //对象拓展运算符 //1、拷贝对象(深拷贝) let p1 = {name: "zhangsan", age: 19}; let p2 = {... p1}; console.log(p2) //2、合并对象 const a ={name: "lisi"} const b = {age: 20}; //后面的name会覆盖之前的name let person = {name: "wangwu"}; person = {...a, ... b}; console.log(person); </script> </body> </html>五、map和reduce<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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','4']; // arr = arr.map((item)=>{ // return item * 2; // }); arr = arr.map(item => item*2); console.log(arr); //reduce()为数组中的每一个袁术一次执行回调函数，不包括数组中被删除或从未被赋值的元素。\ //arr.reduce(callback,[initialValue]) /** * 1、previousValue(上一次调用回调返回的值，或者是提供的初始值(initialValue)) * 2、currentValue（数组中当前被处理的元素） * 3、index（当前元素在数组中的索引） * 4、array（调用reduce的数组） **/ let result = arr.reduce((a,b )=>{ console.log("上一次处理后："+a); console.log("当前正在处理："+b); return a+b; },100); console.log(result); </script> </body> </html>六、promise<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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>  <script> //原始写法 // $.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("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); //promise写法 // const promise = new Promise(function (resolve, reject) { // // 执行异步操作 // if (/* 异步操作成功*/) { // resolve(value);// 调用resolve，代表Promise 将返回成功的结果 // } else { // reject(error);// 调用reject，代表Promise 会返回失败结果 // } // }); // const promise = new Promise((resolve, reject) => { // // 执行异步操作 // if (/* 异步操作成功*/) { // resolve(value);// 调用resolve，代表Promise 将返回成功的结果 // } else { // reject(error);// 调用reject，代表Promise 会返回失败结果 // } // }); // promise.then(function (value) { // // 异步执行成功后的回调 // }).catch(function (error) { // // 异步执行失败后的回调 // }) // new Promise((resolve, reject) => { // $.ajax({ // url: "mock/user.json", // success(data) { // console.log("查询用户：", data); // resolve(data.id); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }).then((userId) => { // return new Promise((resolve, reject) => { // $.ajax({ // url: `mock/user_corse_${userId}.json`, // success(data) { // console.log("查询到课程：", data); // resolve(data.id); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }); // }).then((corseId) => { // console.log(corseId); // $.ajax({ // url: `mock/corse_score_${corseId}.json`, // success(data) { // console.log("查询到分数：", data); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }); // promise优化处理后写法 let get = function (url, data) { // 实际开发中会单独放到common.js 中 return new Promise((resolve, reject) => { $.ajax({ url: url, type: "GET", data: data, success(result) { resolve(result); }, error(error) { reject(error); } }); }) } // 使用封装的get 方法，实现查询分数 get("mock/user.json").then((result) => { console.log("查询用户~~：", result); return get(`mock/user_corse_${result.id}.json`); }).then((result) => { console.log("查询到课程~~：", result); return get(`mock/corse_score_${result.id}.json`) }).then((result) => { console.log("查询到分数~~：", result); }).catch(() => { console.log("出现异常了~~：" + error); }); </script> </body> </html>七、模块化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>  </body> </html>
- 2022年03月06日
- 280 阅读
- 0 评论
- 1 点赞