一、变量的声明:
let 不可以重新声明同样变量，变量可修改，产生块级作用域
const 不可以重新声明同样变量，变量不可修改，产生块级作用域
二、箭头函数:
function的this指向window（或者理解为没有this）
箭头函数的this指向上一层的this
三、解构赋值:
1.左右两边结构必须一致(如下)
2.声明和赋值不能分开
let[{a,b},[n1,n2,n3],num,str] = [{a:100，b:5}，[1,2,3],8,'lch']
四、ES6中新增数组的方法:
map 遍历 映射
let arr = [12,13,14,15];
let result = arr.map((item)=>{
return item;
})
console.log(result);//12 13 14 15
reduce 汇总
let arr = [100,101,102,103];
let resule = arr.reduce((temporary,item,index)=>{ //result是当前临时计算的结果 初识值为0
return temporary + item
},0)
console.log(resule ); //406 结果就是他们加起来的总和
filter 过滤
let arr = [1,3,5,7,9,11,15];//过滤出能被3整除的数字
let result = arr.filter((item)=>{
return item % 3 === 0
})
console.log(result);
forEach遍历
let arr = [1,3,5,7,9,11,15];
arr.forEach((item,index)=>{//拿出数组中的每一项
return item
})
let obj = {
name:'lch',
id:123,
number:1112
}
Object.keys(obj).forEach(key => {
console.log(obj[key]);
})
五、ES6新增的字符串方法：
startsWith判断字符串以什么内容开始
let str = 'https://www.baidu.com/';
if(str.startsWith('https://')){ //判断字符串以什么开头
alert('加密地址');
}else if(str.startsWith('http://')){
alert('普通地址');
}else if(str.startsWith('git://')){
alert('git地址');
}else{
alert('未识别');
}
endWith判断字符串以什么名称结尾
let str = '1.txt';
if(str.endWith('.txt')){
alert('文本文件');
}else if(str.endWith('.jpg')){
alert('jpg图片')
}else if(str.endWith('.vue')){
alert('vue文件')
}else{
alert('未识别')
}
模板字符串 可以用来插入标签内容<div>${a}</div>
let a = '模板字符串';
let str = '`${a}`的使用';//将字符串连接
//打印结果 模板字符串的使用
六、ES6的面向对象:
class User{ //创建一个类名为user
constructor(name,age){
this.name = name;
this.age = age;
},
showName(){
console.log('我叫' + this.name + '，今年' + this.age + '岁');
},
}
let u = new User('lch',18);//new出一个类
u.show()//调用show方法并执行
//对象的继承
class VipUser extends User{
constructor(name,age,level){
super(name,age) //super为父类的意思，name和age是继承过来的
}，
showName(){
console.log('我叫' + this.name + '，今年' + this.age + '岁,等级为' + this.level);
},
}
let u = new VipUser ('lch',18,3);//new出一个类
u.show()//调用show方法并执行
七、JSON对象的解析:
JSON.stringify(json);//解析成为字符串
JSON.parse(str);//解析成为对象
八、Promise中使用ajax请求:
function creactPromise(url){
return new Promise((resolve,reject)=>{//resolve解决，reject失败
//异步代码
$.ajax({
url,
dataType:'json',
success(arr){ //success是ajax的成功回调
resolve(arr); //resolve是Promise的成功回调
},
errer(err){ //error是ajax的失败回调
reject(err);//reject是Promise的失败回调
}
})
})；
}
//一个请求的Promise
creactPromise(url).then((res)=>{ //成功执行第一个函数，失败执行第二个函数
console.log('请求成功')
},(err)=>{
console.log('请求失败')
})
//如果有多个promise请求
Promise.all([
creactPromise('请求地址1'),
creactPromise('请求地址2')
]).then((resArr)=>{ //多个请求都成功之后才会指向成功回调，否则失败
resArr[0],//第一个请求结果
resArr[1] //第二个请求的结果
},(err)=>{
})
//高版本ajax的返回值支持Promise
Promise.all([
$.ajax(url:'地址1'),
$.ajax(url:'地址2')
]).then((resArr)=>{ //多个请求都成功的回调
resArr[0],
resArr[1]
},(err)=>{ //失败的回调
})
//Promise.all 方法必须都成功才可执行成功回调
//Promise.race 方法成功一个就可执行成功回调
九、扩展运算符
对象篇：
let objA = { a: 1, b: 2 };
let objB = { ...objA, c:3, d:4}; //这个场景也可以使用Object.assign(objA,{c:3,d:4})
console.log(objB)//{a: 1, b: 2, c: '3', d: '4'}
let objA = { a: 1, b: 99999 };
let objB = { ...objA, b:2, c:3};
console.log(objB);//{a: 1, b: 2, c: 3}
//如果合并的对象中有相同参数b，则优先使用未使用扩展运算符的参数Object.assign则优先使用第一个参数内的相同值
数组篇：
let arrA = [1,1,1,1];
console.log([n1,n2,n3,...arrA] = [1,2,3,4,5,6,7])//[1,2,3,4,5,6,7]]
//数组的合并会更简单
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);//[0,1,3,4,5]
console.log([...arr1, ...arr2])//[0,1,2,3,4,5]
let a = [1,2,3];
let b = a
console.log(a === b)//把地址也赋值到b了为true
let arr1 = [1,2,3];
let arr2 = [...arr1]
console.log(arr1 === arr2)//false 这里实现了数组的深拷贝,对象拷贝同理
//扩展运算符内可以添加三元运算符
let x = false;
let arrA = ['a','b','c'];
let arrB = ['c','B','a']
const arr = [...(x === true ? arrA : arrB),'条件合并数组'];//先进行小括号内的判断，随后进行...运算
console.log(arr)//结果为['c', 'B', 'a', '条件合并数组']
十、ES7预览
//includes 检查数组是否包含某个值
let arr = [1,3,5,7,9];
console.log(arr.includes(10)); //结果为false 不包含