前端ES6入门笔记-01

最新推荐文章于 2023-09-22 22:30:11 发布

爱上口袋的天空

最新推荐文章于 2023-09-22 22:30:11 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/K_520_W/article/details/106130209

版权

一：let相关特性
   1:var申明的变量往往会越域，let申明的变量有严格的局部作用域
       {//这个大括号是一个代码块作用域
           var a = 1;
           let b = 2;
       }
       console.log(a);
       console.log(b);//这个b会出现:Uncaught ReferenceError: b is not defined
   2:var可以申明多次，let只能申明一次
       var m = 1;
       var m = 2;
       let n = 3;
       let n = 4; //let申明多次就会出现下面的问题
       console.log(m);
       console.log(n);//这个会出现:SyntaxError: Identifier 'n' has already been declared
   3:var会出现变量提升，let不会,let必须提前定义变量
       console.log(x);
       var x = 10;
       console.log(y);// ReferenceError: Cannot access 'y' before initialization
       let y = 20;

二：const申明常量(只读变量),const申明之后不允许改变,一旦申明必须初始化,否则会报错
   const a = 1;
a = 4; //TypeError: Assignment to constant variable.

三：解构表达式
1：数组解构
       1):一般正常的操作如下，能够正常打印出来
           let arr = [1,2,3];
           let a = arr[0];
           let b = arr[1];
           let c = arr[2];
           console.log(a,b,c)
       2):使用es6中的解构表达式语法,直接一次性赋值
           let arr = [1,2,3];
           let [a,b,c] = arr;
           console.log(a,b,c)

   2：对象解构
       1):一般的操作如下
           const person = {
               name:"jack",
               age:21,
               language:['ajava','js','css']
           };
           const name = person.name;
           const age = person.age;
           const language = person.language;
           console.log(name,age,language);
       2):   使用es6中的解构表达式语法,直接一次性赋值
           const person = {
               name:"jack",
               age:21,
               language:['ajava','js','css']
           };
           const {name,age,language} = person;
           console.log(name,age,language);
           注意：如果我们想将对象中的名称换掉，可以使用下面的做法
           const person = {
               name:"jack",
               age:21,
               language:['ajava','js','css']
           };
           const {name:name2,age,language} = person;//使用冒号加上新的变量名
           console.log(name2,age,language);

四：字符串扩展的新API
   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

五：字符串模板(直接使用反单引号，不需要使用字符串拼接了)
   let ss = `<div>
<span>hello world<span>
</div>`;
console.log(ss);

六：字符串插入变量和表达式。变量名写在${}中,${}中可以放入Javascript表达式
1):常规插入
       let a = "zhangsan";
       let age = 21;
       let info = `我是${a},今年${age}了`;
       console.log(info);   //可以成功打印出来
   2):可以运算
       let a = "zhangsan";
       let age = 21;
       let info = `我是${a},今年${age + 10}了`;
       console.log(info);   //可以成功打印出来

   3):可以调用方法
       let a = "zhangsan";
let age = 21;
function fun(){
return "这是一个函数";
}
let info = `我是${a},今年${age}了,我想说:${fun()}`;
console.log(info);


七:函数优化
   1：为函数方法添加默认值,下面表示如果调用时没有传递b参数,那么b默认是1
       function fun(a,b=1){
return a+b;
}
console.log(fun(20));//结果打印21
   2：不定参数
       function fun(...values){//表示参数可以接受n个
console.log(values.length);//打印总共传递参数的个数
}
fun(1,2,3,4,5,6)
   3：箭头函数
       1):一个参数的箭头函数
           var print1 = function(obj){//这是传统的方式
               console.log("传统的方式:"+obj);
           }
           var print2 = obj => console.log("箭头函数："+obj);
           print1("hello1");//调用print1
           print2("hello2");//调用print2
       2):2个参数的箭头函数
           var print1 = function(a,b){//这是传统的方式
               return a+b;
           }
           var print2 = (a,b) => a+b;//这是箭头函数的方式
           console.log(print1(1,2));
           console.log(print2(2,3));
       3):多个参数的箭头函数
           var print1 = function(a,b){//这是传统的方式
               return a+b;
           }
           var print2 = (a,b) => {//可以在方法体中做计算
               e = a-b;
               return e;
           }
           console.log(print1(1,2));
           console.log(print2(2,3));
   4：箭头函数加上解构表达式
       var person = {
name:"jack",
age:21
};
var print = ({name})=>console.log("hello:"+name);
print(person);//打印的结果是hello:jack

八：ES6新增常用的API
   1：获取对象里面key和value的方式
       var person = {
name:"jack",
age:21,
language:['java','js','css']
};
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21,["java", "js", "css"]]
console.log(Object.entries(person));//[["name", "jack"],["age", 21],["language", ["java", "js", "css"]]]
   2：使用assign函数将数据复制给目标
       const target = {a:1};
const target2 = {d:1};
const source1 = {b:2};
const source2 = {c:3};
Object.assign(target,source1,source2);//将source1，source2复制到target中
Object.assign(target2,source1);//将source1复制到target2中
console.log('target',target);//结果：{a: 1, b: 2, c: 3}
console.log('target2',target2);//结果：{d: 1, b: 2}

   3：什么对象的简写
       const name = "zhangsan";
const age = 21;
var person = {//传统方式
name:name,
age:age
};
//如果变量名称和值一样，可以直接如下
var person1 = {name,age};
console.log(person1);//结果：{name: "zhangsan", age: 21}
   4：对象的函数属性的简写
       let person = {
name:'jack',
eat:function(food){
console.log(this.name+"在吃"+food);
},
//下面的箭头函数,不能使用this,必须使用对象.属性
eat2:food => console.log(person.name+"在吃"+food),//箭头函数
eat3(food){//简化函数写法
console.log(this.name+"在吃"+food);
}
}
//直接调用
person.eat("香蕉");//结果：jack在吃香蕉
person.eat2("香蕉2");//结果：jack在吃香蕉2
person.eat3("香蕉3");//结果：jack在吃香蕉3

九：对象扩展运算符
1：对象深拷贝
let person = {
name:"lisi",
age:21
};
let someone = {...person};//ES6的深拷贝,将person拷贝给someone
console.log(someone);//结果：{name: "lisi", age: 21}

   2：合并对象
       let person1 = {
           name:"lisi",
           age:21
};
let person2 = {
addree:"上海",
sex:"男"
};
let someone = {...person1,...person2};//ES6的合并对象,将person1,person2中的属性都给拷贝给someone
console.log(someone);//结果：{name: "lisi", age: 21, addree: "上海", sex: "男"}

十：数组中新增的map和reduce函数
   1：map函数(接受一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回)、
       //将数组中的所有元素都乘以2
var arr = ['1','2','3','4'];
arr = arr.map(item=>item*2);
console.log('arr',arr);//打印结果：[2, 4, 6, 8]

   2：reduce函数(为数组中的每一个元素一次执行回调函数，不包括数组中被删除或从未被赋值的元素)
       1):语法
           reduce(callback回调函数,initValue)
           注意：
               callback回调函数中包含4个参数：
                   a：priviousValue(上一次调用返回的值，或者是提供的初始值initValue)
                   b：curruentValue(数组中当前被处理的元素)
                   c：index(当前元素的索引)
                   d：array(调用reduce的数组)
       2):案例，求和
           //将数组中的所有元素都乘以2
           var arr = [1,2,3,4];
           let sum = arr.reduce((a,b)=>{
               //这里我们只使用了前两个参数,就是
               //1:上一次调用返回的值，或者是提供的初始值initValue
               //2:curruentValue(数组中当前被处理的元素)
               //这里我们给了初始值,从100开始
               return a+b;
           },100);
           console.log('sum',sum);//打印结果110

十一：ES6之promise异步编排
   1：需求：
       //1、查出当前用户信息
//2、按照当前用户的id查出他的课程
//3、按照当前课程id查出分数
       目前有3个测试的json文件：
       1):user.json
           {
               "id":1,
               "name":"jack",
               "password":"123456"
           }
       2):   user_course_1.json
           {
               "id":10,
               "name":"chinese"
           }
       3):   corse_score_10.json
           {
               "id":100,
               "score":90
           }
   2：按照原本Jquery使用ajax请求的逻辑，中间要嵌套多层ajax请求
       $.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);
}
});
   3：使用promise封装异步操作1(最简单的操作)
       //使用promise来封装异步操作,首先创建一个Promise函数
let p = new Promise((resolve,reject)=>{
//resolve：这个是操作成功以后用来解析数据的
//reject：这个是操作失败了以后用来拒绝数据的
$.ajax({
url: "mock/user.json",
success:function(data){
//查询用户信息
resolve(data);//这个就是成功后我们将data数据再传递给promise对象
},
error:function(err){
reject(err);//这个就是失败后我们将错误数据再传递给promise对象
}
});
});
//下面我们再通过promise对象回调成功后失败后的操作
p.then((obj)=>{//这个是之前promise成功后会调的方法,obj接收上面resolve传递的数据
return new Promise((resolve,reject)=>{
//再次发送请求，查询课程
$.ajax({
url: `mock/user_course_${obj.id}.json`,
success:function(data){
//查询课程信息
resolve(data);
},
error:function(err){
reject(err);
}
});
})
}).then((data) => {//如果上面请求完之后，还需要发请求我们就可以一直用then方法,并且返回Promise对象
console.log("上一步的结果", data)
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询课程得分成功:", data)
},
error: function (err) {
}
});
})
// }).catch((err)=>{//这个是之前promise失败后会调的方法,err接收上面reject传递的数据

// })
4：封装Promise操作
//直接将Promise提取出来称为一个公共的方法，只需要传递url和参数即可
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)
});

十二：ES6的模块化
   1：什么是模块化？
       模块化就是把代码拆分，方便重复利用，类似于java中的导包。要使用一个包，必须先导包，而js没有包的概念，而是“模块”
   2：模块功能主要是有两个命令构成`export`和`import`
       a：export命令用于规定模块的对外接口,`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
       b: import用于导入其他模块提供的功能
   3：   实例
       1):定义一个hello.js，内容如下
           // export const util = {//这个是定好了导出的方法名称util，那么在其他js文件中使用import引入时候名称必须是util
           // sum(a, b) {
           // return a + b;
           // }
           // }

           export default {这个是没有定义导出的方法名称，那么在其他js文件中使用import引入时候名称可以自定义
               sum(a, b) {
                   return a + b;
               }
           }
           // export {util}

           //`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
       2):定义一个main.js引入hello.js暴露的方法
           import abc from "./hello.js"//hello.js中的export default时，我们随意起名称
           import {name,add} from "./user.js"//可以引入其它js中多个方法
           abc.sum(1,2);//调用对象中的方法
           console.log(name);
           add(1,3);