ES6学习笔记
2019-04-10 本文已影响0人
guyigg
let与const
let声明变量相当于var声明变量。
let注意事项：
- 没有作用域，不存在变量提升。在代码块内，只要
let定义变量,在这之前使用都是报错。先定义再使用。（暂存性死区） - 同一个作用域里面不能重复定义变量
- for循环，for循环里面是父级作用域，里面又一个作用域
for(let i = 0;i<3;i++){
let i = "aaa";
console.log(i);//3遍aaa
}
const声明常量，定义好了不能改变。
-
const和let特性一样的。 -
const定义完变量，必须有值，不能后赋值，不能修改。
const a;
a = 5;//报错
-
const声明对象，对象里面的属性可以修改的，因为是引用值。如果使用了Object.freeze(obj)就不能修改了。
const arr = [1,2,3];
arr.push(4);
console.log(arr);[1,2,3,4]
const obj = Object.freeze([1,2,3]);
obj.push(4);
console.log(obj);//报错
解构赋值
按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。类似如下的声明变量并赋值
let [a,b,c] = [1,5,8];
console.log(a,b,c)//1,5,8
let {name,age,sex} = {name:'es6',age:15,sex:'male'}
console.log(name,age,sex)//'es6',15,'male'
let json = {name:'es6',age:15,sex};
let {name,sex,age} = json;
console.log(name,sex,age)//'es6','male',15
//如果有些没值，可以给默认值
let [a,b,c='暂无值'] = [1,2];
console.log(a,b,c)//1,2,暂无值
//交换两个变量的值
let a = 5;
let b = 2;
[a,b] = [b,a];
console.log(a,b)//2,5
注意
- 左右两边，结构格式要保持一致
- 解构时候可以给默认值，注意
null和undefined的区别
字符串模板
`${变量名}`这就是字符串模板的符号，优点是可以随意换行。
let json={name:'es5',age:15}
let str = `我叫${json.name},我的年龄是${json.age}`
console.log(str)//我叫es6,我的年龄是15
字符串查找
str.includes(查找内容)查找字符串
str.startsWith(检查内容)字符串是否以检查内容开头
str.endsWith(检查内容)字符串是否以检查内容结尾
str.repeat(次数)字符串重复次数
//ES5查找字符串
let str = 'apple banana';
if(str.indexOf('apple') != -1){
console.log('存在')
}esle{console.log('不存在')}
//ES6查找字符串
let str = 'apple banana';
console.log(str.includes('apple'))//true
函数的改变
- 函数可以直接给默认值
function show(a=1,b=2){return a+b}
console.log(show()) //3
console.log(show(2)) //4
console.log(show(5,4)) //9
- 函数参数默认已经定义了，不能再使用let、const声明
function show(a=8){
let a = 10;//错误
console.log(a)//报错
}
show();
- 箭头函数
() => {
语句;
return
}
注意：
- this问题，定义函数所在的对象，不再是运行时所在的对象
- 箭头函数里面没有arguments，用
...来获取 - 箭头函数不能当构造函数
- ES2017规定了函数参数尾部逗号是可以存在了
扩展运算符，rest运算符 ...
//展开数组
let arr = [1,2,3];
console.log(...arr);//1 2 3
//合并数组
function show(...a){
console.log(a);//[1,2,3,4,5]
}
show(1,2,3,4,5)
//剩余数组
function fun(a,b,...c){
console.log(a,b);//1,2
console.log(c);//[3,4,5]
}
fun(1,2,3,4,5)
//复制数组
let arr = [1,2,3];
let arr1 = [...arr];
数组
ES5新增的一些循环：
- 1、
for循环 - 2、
while循环 - 3、
arr.forEach()代替普通的for循环 - 4、
arr.map()非常有用，做数据交互，映射。正常情况下，需要配合return返回一个新数组，如果没有return就相当于forEach一样。平时用到map，基本就是要有返回值。重新整理数据结构
let arr = [
{name:'张三',age:20,sex:'male'},
{name:'李四',age:25,sex:'female'},
{name:'王麻子',age:22,sex:'male'},
]
let newArr = arr.map((item,index,arr) => {
let json = {};
json.n = item.name;
json.a = item.age;
json.s = item.sex;
return json;
})
consloe.log(newArry);//处理过后的json数据
- 5、
arr.filter()过滤，过滤一些不合格的元素，如果回调函数返回的是一个true，就留下来
let arr = [
{name:'张三',age:20,sex:'male'},
{name:'李四',age:25,sex:'female'},
{name:'王麻子',age:22,sex:'male'},
]
let newArr = arr.filter((item,index) => {
return item.sex == 'male';
})
- 6、
arr.some()类似查找，数组里面某一个符合条件返回true。 - 7、
arr.every()数组里面所有元素都符合条件才返回true。
以上3到7的函数接收两个参数，一个回调函数和this的指向
forEach(fun,this指向)，回调函数里面接收三个参数fun(value,index,arr){}
- 8、
arr.reduce()从左往右求数组的和，阶乘 - 9、
arr.reduceRight()从右往左求数组的和，阶乘
let arr = [1,2,3]
以上8和9的方法里面的回调函数接收4个参数fun(prev,cur,index,arr){} 类似于递归。
ES6循环for...of
arr.keys()数组的下标
arr.entries()数组的某一项
let arr = [1,2,3,4,5];
for(let val of arr){
console.log(val)//1 2 3 4 5
}
for(let index of arr.keys()){
console.log(index)//0 1 2 3 4
}
for(let item of arr.entries()){
console.log(item)//0:1,1:2,2:3,3:4,4:5
}
for(let [key,val] of arr.entries()){
console.log(key,val)//0,1 1,2 ...
}
Array.from() 把类数组对象转成数组，生成一个新数组。Array.of()把一组值转成数组。
function show(){
let arg = Array.from(arguments);
console.log(arg);
}
show(1,2,3,4,5,6);
arr.find() 查找，找出第一个符合条件的数组成员就返回当前数组值，如果没找到返回undefined。
arr.findIndex()找的是位置，没找到返回-1。
arr.fill(填充的东西，开始位置，结束位置)填充
对象简洁语法及对象新增
let name = 'es6';
let age = 15;
let json ={
name, //name:name
age, //age:age
show(){//这里一定注意不要写箭头函数，不然this有问题
return this.name;
}
/*show:function(){
return this.name;
}*/
}
console.log(json.show());//'es6'
Object.is(a,b)用来比较两个对象是否相等，解决了NaN不相等的问题
Object.assign(目标对象，source1,source2...)用来合并对象,复制一个对象
let json = {a:1};
let json1 = {b:2};
let json2 = {c:3};
let newObj = Object.assign({},json,json1,json2);
console.log(newObj)//{a:1,b:2,c:3}
ES2017新增的
Object.keys()Object.entries()Object.values()
Promise
作用：解决异步回调问题。传统方式，大部分用回调函数，事件。
new Promise(function(resolve,reject){
//resolve 成功调用
//reject 失败调用
})
let a = 10;
let promise=new Promise(function(resolve,reject){
if(a == 10){resolve('成功')}else{reject('失败')}
})
promise.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Promise.resolve('aa'):将现有的东西，转成一个Promise对象，resolve状态，成功的状态。
Promise.reject('aaa'):将现有的东西，转成一个Promise对象，reject状态，失败的状态。
Promise.all()打包prosmise对象扔到一个数组里面，最后返回的还是一个promise对象，必须确保所有的Promise对象都是resolve状态。
let p1 = Promise.resolve('a');
let p2 = Promise.resolve('b');
let p3 = Promise.resolve('c');
Promise.all([p1,p2,p3]).then(res =>{
let [res1,res2,res3] = res;
console.log(res1,res2,res3);
})
let status = 1;
let login = (resolve,reject) => {
setTimeout(() => {
if(status == 1){
resolve({data:'登录成功',msg:'111',token:444})
}else{
reject('失败了');
}
},2000);
}
let info = (resolve,reject) => {
setTimeout(() => {
if(status == 1){
resolve({data:'获取信息成功',msg:'111',token:444})
}else{
reject('失败了');
}
},1000);
};
new Promise(login).then(res => {
console.log('登录成功');
return new Promise(info);
}).then(res => {
console.log('获取信息成功');
console.log(res);
})
