day3 ES6基础
1)let & var
1.var可以多次声明变量 let不行 例：let a=1;let a=2;报错 2.var可作用到{}外 let不行 例: {let a=1;}console.log(a);取不到a值 3.var定义之前可以使用，let定义之前不可使用 例：console.log(a);var a=1; //undefined; console.log(b);var b=1; //ReferenceError: y is not defined
2）const
变量一旦声明不能改变 例子：const a=1;a=2;//报错
3）解构
1）数组解构 例子： let arr=[1,2,3]; //把数组arr值分别赋予给a b c js中let arr=d[0]; let b=d[1]; let c=d[2]; es6中 let[a,b,c]=arr; 2)对象解构 例子: const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } //同上例 把对象person值赋予其它变量 js中 const name = person.name;... es6中 const { name, age, language } = person;//默认赋予变量名称就是对象中的key const { name: abc, age, language } = person; //若要赋予变量名称自定义用name: abc 即变量名称为abc 3）字符串扩展 例子： let str = "hello.vue"; console.log(str.startsWith("hello"));//true console.log(str.endsWith(".vue"));//true console.log(str.includes("e"));//true console.log(str.includes("hello"));//true 4）字符串模板 1）反引号 //js中字符串中出现回车等符号需要转换 //es6中可以用反引号`处理 let ss = `<div> <span>hello world<span> </div>`; 2）字符串可以插入变量和方法 //js中字符串插入变量需要拼接 //es6可以通过${}插入变量和方法 例子： let abc="me"; let age=10; function fun() { return "这是一个函数" } let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
4）函数优化
1）为函数参数设默认值 例子： //js function add(a, b) { // 判断b是否为空，为空就给默认值1 b = b || 1; return a + b; } // 传一个参数 console.log(add(10)); //es6 function add2(a, b = 1) { return a + b; } console.log(add2(20)); 2)不定参数 例子： function fun(...values) { console.log(values.length) } fun(1, 2) //2 fun(1, 2, 3, 4) //4 3）箭头函数=> 类似lambda 1）// var print = function (obj) { // console.log(obj); // } var print = obj => console.log(obj); print("hello"); 2) const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } function hello(person) { console.log("hello," + person.name) } //箭头函数+解构 var hello2 = ({name}) => console.log("hello," +name); hello2(person);
5）对象优化
1）一些对象处理的api const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } console.log(Object.keys(person));//["name", "age", "language"] console.log(Object.values(person));//["jack", 21, 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 }; //{a:1,b:2,c:3}将对象合并到target Object.assign(target, source1, source2); console.log(target); 2）声明对象简写 const age = 23 const name = "张三" const person1 = { age: age, name: name } const person2 = { age, name } console.log(person2); 3）对象的函数属性简写 let person3 = { name: "jack", // 以前： eat: function (food) { console.log(this.name + "在吃" + food); }, //箭头函数this不能使用，对象.属性 eat2: food => console.log(person3.name + "在吃" + food), eat3(food) { console.log(this.name + "在吃" + food); } } 4）对象拓展运算符 1、拷贝对象（深拷贝） let p1 = { name: "Amy", age: 15 } let someone = { ...p1 } console.log(someone) //{name: "Amy", age: 15} 2、合并对象 let age1 = { age: 15 } let name1 = { name: "Amy" } let p2 = {name:"zhangsan"} p2 = { ...age1, ...name1 } console.log(p2)
6）map和reduce
1.map let arr = ['1', '20', '-5', '3']; //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。 // arr = arr.map((item)=>{ // return item*2 // }); arr = arr.map(item=> item*2); console.log(arr); 2.reduce let arr=[2, 40, -10, 6]; let result = arr.reduce((a,b)=>{ console.log("上一次处理后："+a); console.log("当前正在处理："+b); return a + b; },100); console.log(result); 打印： 上一次处理后：100 1.html:46 当前正在处理：2 1.html:45 上一次处理后：102 1.html:46 当前正在处理：40 1.html:45 上一次处理后：142 1.html:46 当前正在处理：-10 1.html:45 上一次处理后：132 1.html:46 当前正在处理：6
7）Promise 封装ajax异步操作
例子：先查用户信息 再根据用户信息查课程 再根据课程查分数 //js中 // $.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可以封装异步操作 resolve是成功时操作 reject失败时 // let p = new Promise((resolve, reject) => { // //1、异步操作 // $.ajax({ // url: "mock/user.json", // success: function (data) { // console.log("查询用户成功:", data) // resolve(data); // }, // error: function (err) { // reject(err); // } // }); // }); // p.then((obj) => { // return new Promise((resolve, reject) => { // $.ajax({ // url: `mock/user_corse_${obj.id}.json`, // success: function (data) { // console.log("查询用户课程成功:", data) // resolve(data); // }, // error: function (err) { // reject(err) // } // }); // }) // }).then((data) => { // console.log("上一步的结果", data) // $.ajax({ // url: `mock/corse_score_${data.id}.json`, // success: function (data) { // console.log("查询课程得分成功:", data) // }, // error: function (err) { // } // }); // }) //进一步封装类 function get(url, data) { return new Promise((resolve, reject) => { $.ajax({ url: url, data: data, success: function (data) { resolve(data); }, error: function (err) { reject(err) } }) }); } 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((err)=>{ console.log("出现异常",err) });
8）模块化 //就是调用其它类的方法/变量
1） user.js//导出 var name = "jack" var age = 21 function add(a,b){ return a + b; } // 导出变量和函数 export {name,age,add} main.js//导入 import{}中变量名称与export{}中的变量名称需一致 import {name,add} from "./user.js" console.log(name); add(1,3); 2）export default可以重命名 // 导出后可以重命名 hello.js export default { sum(a, b) { return a + b; } } main.js import abc from "./hello.js" abc.sum(1,2);
