ES6课程学习笔记-day02
复习
ES6
1、特点
1. ES5升级版本
2. 提供了简便的语法
Set、Map
迭代器
箭头函数
...
3. 在浏览器上的兼容性比较差
学习环境 nodejs ES6
脚手架
开发环境 windows ES5
2、模块化
ip/dist/index.html
3、基础语法
1) let命令
特点：
1. 变量无法重复声明
let a = 1;
let a = 2; // 报错
2. 存在块级作用域
{
let a = 1;
console.log(a); // 1
}
console.log(a); // 报错
3. 不允许变量的提升
console.log(a); // 报错
let a = 1;
4. 存在暂时性死区
var temp = 1;
if(true){
temp = 2;
let temp; // 报错
}
2) const命令
特点：
1. 存在块级作用域
2. 存在暂时性死区
3. 变量无法重复声明
4. 变量的声明和初始化必须同时进行
const a;
a = 1;
console.log(a); // 报错
3) 解构(模式匹配)
1. 数组的解构
变量的取值为对应索引位置上的值
var a = 1;
var b = 2;
var c = 3;
console.log(a,b,c); // 1 2 3
->ES6
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
等号左边个数大于右边
let [a,b,c] = [1,2];
console.log(a,b,c); // 1 2 undefined
等号左边个数小于右边
let [a,b] = [1,2,3];
console.log(a,b); // 1 2
2. 数组解构默认值
let [a,b,c='d'] = [1,2];
console.log(a,b,c); // 1 2 d
默认值生效的前提是，匹配不成功或者是匹配到的值为undefined
3. 对象的解构
变量的取值由它对应同名的属性名的值决定
var obj = {
name:'xpf',
age:25,
gender:'male'
}
let {name,age,gender} = obj;
==>等价于(对象的简写)
let {name:name,age:age,gender:gender} = obj;
解构失败时，值为undefined
4. 对象解构的默认值
var obj = {
name:'xpf',
age:25
}
let {name,age,gender} = obj;
console.log(gender); // undefined
->
var obj = {
name:'xpf',
age:25
}
let {name,age,gender='male'} = obj;
console.log(gender); // male
默认值生效的前提是，匹配不成功或者是匹配到的值为undefined
5. 解构的用途
1、两个变量的值互换
2、让函数返回多个值
将多个返回值放在{}或[]中返回
es6时通过解构取值比较简单
3、快速从对象中取值
4、函数参数默认值
function sayName({name,age,gender='male'}){
}
sayName({name,age})
学习
4、对象的扩展
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法
1) 对象属性的简写
在之前写对象
let name = 'xpf';
let obj = {
name:name
}
console.log(obj.name); // xpf
ES6的简写
let name = 'xpf';
let obj = {
name
}
console.log(obj.name); // xpf
错误写法：
let gender = 'xpf';
let obj = {
name
}
console.log(obj.name); // name is not defined
对象的解构
var obj = {
name:'xpf',
age:25,
gender:'male'
}
let {name,age,gender} = obj;
===> 等价于
let {name:name,age:age,gender:gender} = obj;
2) 对象方法的简写
在之前写对象的方法
let obj = {
id:1,
name:'xpf',
address:'安徽省',
sayAddress:function(){
console.log('my address is',this.address);
}
}
let {sayAddress} = obj;
obj.sayAddress(); // my address is 安徽省
console.log(sayAddress);
ES6的简写
let obj = {
id:1,
name:'xpf',
address:'安徽省',
sayAddress(){
console.log('my address is',this.address);
}
}
let {sayAddress} = obj;
obj.sayAddress(); // my address is 安徽省
console.log(sayAddress);
注意：
对象中简写的方法不能够当作构造函数，否则会报错
let obj = {
id:1,
name:'xpf',
address:'安徽省',
sayAddress(){
console.log('my address is',this.address);
}
}
let {sayAddress} = obj;
new sayAddress(); // sayAddress is not a constructor
3) 构造函数的扩展 Object.xxx
var obj = new Object();
obj 实例
Object 构造函数
Object.prototype 构造函数的原型
实例能够调用构造函数原型中的方法，但是无法调用构造函数中的方法
1. Object.is(value1,value2)
判断两个值是否相等
var res1 = Object.is(1,1);
var res2 = Object.is(1,'1');
var res3 = Object.is('1','1');
var res4 = Object.is({},{});
var res5 = Object.is(+0,-0);
var res6 = Object.is(NaN,NaN);
console.log(res1); // true
console.log(res2); // false
console.log(res3); // true
console.log(res4); // false
console.log(res5); // false
console.log(res6); // true
与 === 类似，会进行数据类型的比较，但是也有不同
1、NaN使用Object.is判断的时候，等于自身
2、+0和-0使用Object.is判断时，不相等
2. Object.assign(target,source1,source2...)
将所有可枚举属性的值从一个或多个源对象复制到目标对象中，并且返回目标对象
可枚举：一般指用户自己写的属性，不包含继承的属性
源对象：source1,source2...
目标对象：target
1、合并对象
let obj1 = {
id:1
}
let obj2 = {
name:'xpf'
}
let obj3 = {
gender:'male'
}
let obj = Object.assign(obj1,obj2,obj3);
console.log('obj',obj); // { id: 1, name: 'xpf', gender: 'male' }
console.log('obj1',obj1); // { id: 1, name: 'xpf', gender: 'male' }
此时，obj1是目标对象，obj2和obj3是源对象
合并后目标对象自身也会改变
注意：当合并的对象具有相同的属性名时，属性会被源对象当中具有相同属性名的值覆盖掉
let obj1 = {
id:1
}
let obj2 = {
name:'xpf'
}
let obj3 = {
name:'male'
}
let obj = Object.assign(obj1,obj2,obj3);
console.log('obj',obj); // { name: 'male', id: 1 }
2、复制对象(克隆)
let obj1 = {
name:'tom',
age:13,
gender:'male'
}
let obj = Object.assign({},obj1);
console.log(obj); // { name: 'tom', age: 13, gender: 'male' }
console.log(obj1); // { name: 'tom', age: 13, gender: 'male' }
console.log(obj == obj1); // false
案例：
一、当源对象中某一个属性值为对象时(即对象嵌套对象)
let obj1 = {
name:'tom',
address:{
province:'安徽省',
city:'合肥市'
}
}
let obj2 = {
name:'tom',
address:{
province:'江苏省'
}
}
let obj = Object.assign(obj1,obj2);
console.log(obj); // { name: 'tom', address: { province: '江苏省' } }
并不会出现如下所期望的结果
address:{
province:'江苏省',
city:'合肥市'
}
也就是说，obj1中的address是被完全替换掉的，这个现象叫做浅拷贝，
如果需要实现深拷贝，可以使用JSON.stringify或者第三方库(lodash)
let obj1 = {
name:'tom',
address:{
province:'安徽省',
city:'合肥市'
}
}
let obj2 = obj1;
let obj3 = JSON.parse(JSON.stringify(obj1));
let obj4 = Object.assign({},obj1);
obj1.address.city = '苏州市';
console.log('obj1',obj1); // 苏州市
console.log('obj2',obj2); // 苏州市
console.log('obj3',obj3); // 合肥市
console.log('obj4',obj4); // 苏州市
注意：如果对象中包含方法，使用JSON.stringify时，该方法会丢失
let obj1 = {
name:'tom',
address:{
province:'安徽省',
city:'合肥市',
sayAddress(){
console.log(111);
}
}
}
let obj3 = JSON.parse(JSON.stringify(obj1));
console.log(obj3); // { name: 'tom', address: { province: '安徽省', city: '合肥市' } }
3. Object.setPrototypeOf(obj,prototype)
将一个对象的原型(prototype)设置到另一个对象obj中
4. Object.getPrototypeOf(obj)
获取一个对象的原型(prototype)
function Person(name){
this.name = name;
}
Person.prototype.sayName = function(){
console.log('你好');
}
var p1 = new Person();
p1.sayName();
function Dog(){
}
//ES5解决方案：子构造函数的原型指向父构造函数的实例，需要在实例创建之前
//Dog.prototype = new Person();
var dog1 = new Dog();
//ES6解决方案：Object.setPrototypeOf
Object.setPrototypeOf(dog1,Person.prototype);
dog1.sayName();
var res = Object.getPrototypeOf(dog1);
console.log(res); // Person { sayName: [Function] }
5. Object.keys(obj)
键
返回一个对象obj的可枚举属性名组成的数组
6. Object.values(obj)
值
返回一个对象obj的可枚举属性值组成的数组
7. Object.entries(obj)
键值对
返回一个对象obj的可枚举属性的键值对数组
let obj = {
name:'xpf',
age:25,
gender:'male'
}
console.log(Object.keys(obj)); // [ 'name', 'age', 'gender' ]
console.log(Object.values(obj)); // [ 'xpf', 25, 'male' ]
console.log(Object.entries(obj)); // [ [ 'name', 'xpf' ], [ 'age', 25 ], [ 'gender', 'male' ] ]
用途：将一个对象转换为Map集合
let obj = {
name:'xpf',
age:25,
gender:'male'
}
//let map = new Map(obj); // 直接放进去会报错
let map = new Map(Object.entries(obj));
console.log(map);
5、函数的扩展
1) 函数简写
1. 函数声明在对象中
let obj = {
name:'xpf',
sayName:function(){
console.log(1);
}
}
===>等价于
let obj = {
name:'xpf',
sayName(){
console.log(1);
}
}
2. 函数声明在参数中(回调函数/匿名函数)
forEach(function(){})
setInterval(function(){},1000)
ES6中允许使用箭头 => 定义函数
function(){}
===>等价于
()=>{}
let fun1 = function(item){
return item;
}
let fun2 = item => item;
console.log(fun1);
console.log(fun2);
箭头函数可以根据参数个数来省略()，可以根据函数体内部代码的行数来省略{}
一个参数时，可以省略()
item => {}
不要参数或者多个参数时，不可以省略()
() => {}
(item,index) => {}
函数体内部只有一行代码的时候，可以省略{}
多行代码时，不可以省略{}
案例一：
let arr = [{
name:'xpf',
gender:'male'
},{
name:'tom',
gender:'male'
},{
name:'xiaohong',
gender:'female'
}]
let res1 = arr.filter(function(item){
return item.gender == 'female';
})
let res2 = arr.filter( (item)=>{
return item.gender == 'female';
} )
console.log(res1);
console.log(res2);
案例二：
let obj = {
name:'xpf',
age:25,
sayName:()=>{
console.log(this.name);
},
sayAge:function(){
console.log(this.age);
}
}
obj.sayName(); // undefined
obj.sayAge(); // 25
注意：箭头函数中的this指向该箭头函数的外部函数
如果箭头函数外部没有函数，那么这个this就只想全局对象
案例三：
let obj = {
list:[1,2,3,4],
add(){
this.list.forEach(function(){
console.log(this.list); // undefined
})
}
}
obj.add();
解决方案一：手动更改this
let obj = {
list:[1,2,3,4],
add(){
var that = this;
this.list.forEach(function(){
console.log(that.list)
})
}
}
obj.add();
解决方案二：使用箭头函数
let obj = {
list:[1,2,3,4],
add(){
this.list.forEach(()=>{
console.log(this.list)
})
}
}
obj.add();
箭头函数的this先指向了外部的add函数，由于add函数被obj对象调用，所有add方法中的this指向了obj
最终，箭头函数中的this指向了obj
2) 函数参数的默认值
在ES6之前，一般无法为函数的参数提供默认值
function sayName(name,age,gender){
console.log(gender); // undefined
}
sayName(name,age)
如何设置默认值？
function person(name,age){
age = age || 15;
console.log(name,age);
}
person('xpf'); // xpf 15
person('xpf',25); // xpf 25
person('xpf',''); // xpf 15
在ES6时，可以使用解构给函数参数提供默认值
function sayName({name,age,gender='male'}){
console.log(gender); // male
}
sayName({name,age})
应用：
1、ajax参数默认
2、可以规定函数必须要传递某一个参数(即该参数不可省略)
function throwErr(){
throw new Error('该参数不可被省略！')
}
function sayName({name = throwErr,age}){
console.log(name,age);
}
sayName({name:'xpf',age:25}); // xpf 25
sayName({name:'xpf'}); // xpf undefined
sayName({age:25}); // 抛出错误 25