1、let const var 比较
1、var 是es5提出的。let const 是es6提出的。
2、const定义基本类型时再改值会报错,但定义对象和数组(引用类型)时再更改值不会报错。
原因:基本类型的变量是存放在栈内存中的,值是按值访问的,值是不可以改变的,比较是通过值比较的。
引用类型的值是保存在堆内存中的对象,值是按引用访问,值是可变的,比较是通过引用比较的。
3、let、var声明的都是变量,声明之后可以更改。
4、var允许重复声明变量,后一个变量会覆盖前一个变量。let和const在同一作用域下不允许重复声明变量。
2、反引号(`)标识
es6模板字符串,可以在字符串中嵌入变量
3、函数默认参数
function person(name,age){
name = name ||"张三",
age = age || 12,
console.log(`${name}:${age}`)
}
person("李四",20)//李四:20
person()//张三:12
person("王二",0)//王二:12
从上面代码可以看出,对于传入值为0时,会直接取到默认值而不是传入的值。
解决1:
function person(name,age){
name = name ||"张三";
if(typeof age === 'undefined'){
age = 12
}
console.log(`${name}:${age}`)
}
person("李四",20)//李四:20
person()//张三:12
person("王二",0)//王二:0
但这种方法很麻烦,es6直接在参数里设置默认值
解决2:
function person(name="张三",age=12){
console.log(`${name}:${age}`)
}
person("李四",20)//李四:20
person()//张三:12
person("王二",0)//王二:0
就不用担心传入参数是0或false出错啦!
4、箭头函数
用=>来定义,相当于匿名函数,左边是参数右边是函数中执行语句。
var sum =(x,y)=>{return x+y}
sum(1,2)//3
相当于
var sum =function(x,y){return x+y}
sum(1,2)//3
箭头函数除了让书写变得简洁,可读性变好外,还解决了this指向问题。
es5中this:谁调用this指向谁,普通函数指向window。
es6中this:es6中函数其实没有自己的this指向,他会一层层往外找,找到为止,输出的其实是外层代码的this。
5、属性简写
在es6中允许我们在设置一个对象的属性的时候不指定属性名,使代码简洁。
es5:
const name ="张三",age=12;
const stu={name:name,age:age};
console.log(stu)
es6:
const name ="张三",age=12;
const stu={name,age};
console.log(stu)
6、方法简写
去掉冒号和function
var obj={
a:function(){
console.log("haha")
},
b(num){
console.log(num)
}
}
obj.a();
obj.b(44);
7、Object.keys(obj)
参数:要返回其枚举自身的对象
返回值:要返回其枚举自身的对象的属性
var peroson = [1,2,3,4,5,6];
Object.keys(peroson);
//["0","1","2","3","4","5"]
var peroson = {
name:"张三",
age:12,
getAdd(){console.log(123)}
};
Object.keys(peroson);
//["name", "age", "getAdd"]
var person = "adsfgh";
Object.keys(person);
//["0", "1", "2", "3", "4", "5"]
8、Object.values(obj)
与Object.keys(obj)正好相反,返回值是其枚举自身的对象的属性值。
var peroson = [1,2,3,4,5,6];
Object.values(peroson);
(6) [1, 2, 3, 4, 5, 6]
var person = "adsfgh";
Object.values(person);
//["a", "d", "s", "f", "g", "h"]
var peroson = {
name:"张三",
age:12,
getAdd(){console.log(123)}
};
Object.values(peroson);
//["张三", 12, ƒ]
9、深拷贝和浅拷贝
浅拷贝:当对某个数据进行浅拷贝后,修改新数据的第一层是不会对老数据产生影响,但是如果还要修改第二层或者更深层的数据还是会对老数据产生影响的。Object.assign(target,…source):【target】:目标对象,【source】:源对象。源对象值复制到目标对象,返回目标对象。具有相同属性时源对象会覆盖目标对象。
深拷贝:1、JSON.parse(JSON.stringify(obj))。缺点:如果obj里有时间对象,那么时间将是字符串形式而不是对象。
var test = {
name: 'a',
date: [new Date(1536627600000), new Date(1540047600000)],
}
let b = JSON.parse(JSON.stringify(test))
console.log(b);
//{name: "a",["2018-09-11T01:00:00.000Z", "2018-10-20T15:00:00.000Z"]}
如果有函数或undefined,可能会把函数和undefined丢失。
深拷贝方法2:递归
//判断是否为数组
let isArray =(arr)=>{
return Object.protoType.toString.call(arr) === '[object Array]'
}
//判断是否为对象
let isObject = (obj)=>{
return typeof obj === "object" && obj!==null
}
//方法
let deepCopy = (val) =>{
let oVal = isArray(val)?[]:{};
for(let key in val){
if(isObject(val[key])){
oVal[key] = deepCopy(val[key])
}else{
oVal[key] = val[key]
}
}
return oVal;
}
10、import和export
import :导入
export :导出
11、promise对象
promise对象代表一个异步操作,对象状态不受外界影响。
三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果决定当前是什么状态,任何其他操作都无法改变这个状态。一旦状态改变就不会再变,任何时候都可以获取这个结果。
缺点:一旦新建就会立即执行,中途无法取消。当pending时无法知道当前进行到哪一步。如果不设置回调函数的话,内部跑出的错误无法反应到外部。
ES6规定promise对象是一个构造函数,用来生成promise实例。
基本用法:
const promise = new Promise(function(resolve,reject){
if(success){
resovle(value)
}else{
reject(value)
}
})
Promise构造函数接受一个函数作为参数,这个函数有resolve,reject两个参数,他们是两个函数,这两个函数由js引擎提供。
调用:
promise.then(function(value){
console.log("成功")
},function(error){
console.log("失败")
})
Promise常用属性
Promise.all(iterable):返回一个Promise实例,表示参数中所有的Promise都完成(场景:两个或多个ajax请求完成后才显示)。
Promise.race(iterable):状态与第一个完成的Promise状态相同。
手写Promise:
class Promise{
constructor(executer){
this.status = "pending";//默认状态
this.value = undefined;//成功的值
this.reason = undefined;//失败的值
let resolveFn =value =>{
if(this.status == pending){
this.status = "resolve";
this.value = value;
}
}
try{
executer(resolve,reject);
}catch(e){
reject(e)
}
}
then(onFufilled,onReject){
if(this.state === "resolve"){
onFufilled(this.value)
}
if(this.state === "reject"){
onReject(this,reason)
}
}
}
12、Symbol
创建一个独一无二的值
let s = Symbol('123')
console.log(s,typeof s);
//Symbol(123),"symbol"
注意:不能与其他数据进行运算(拼接,比较)
应用场景:
//一个函数
let game={}
//想给函数添加属性,但又不知道是否有重复
//使用场景:向对象中添加属性和方法(简单高效安全)
let method = {
up:Symbol();
down:Symbol();
}
game[method.up]=function(){
console.log('1111');
};
game[method.down]=function(){
console.log('222');
}