es6
1.let与const在之前有介绍
2.扩展运算符
const arr1 = [100,200,300];
const arr2 = [400,500,600];
const arr3 = [700,800,900];
// 需求需要合并三个数组
// es6之前
// const arr = arr1.concat(arr2).concat(arr3);
// es6
const arr = [...arr1,...arr2,...arr3]
3.默认参数
// es6前
function fn(name,age){
var name = name || '小白';
var age = age || 18;
console.log(name,age);
}
// es6
function fn(name='小白',age=18){
console.log(name,age);
}
fn('小赖');//小赖 18
4.不定参
function fn(name,...arr){
console.log(name);
console.log(arr);
// 注意与es5的arguments效果相同,形式却不同,这里的arr是真实数组,而arguments是类数组这里的arr是可以直接使用数组的原型方法的
}
5.Object.keys
const obj = {
name: '小白',
age: 18,
gender: '男'
}
const keys = Object.keys(obj);
// keys = ['name','age','gender']
6.模板字符串
// es5
var name = "小白";
var age = 18;
console.log(name+'永远'+age+'岁');
// es6
let name = '小白';
var age = 18;
console.log(`${name}永远${18}岁`);
// ${}里面是可以放表达式的如=,++,--,*,以及三目运算
7.箭头函数
const fn = () =>{};
const fn=name=>{};//函数为fn参数为name的函数,只有一个参数时
const fn=num=>num*2;//如果只有一个参数并且逻辑这是运算可简写为
const fn = name=>({name:name});//返回一个对象
//箭头函数不能作为构造函数,因为构造函数的this始终指向父级作用域,构造函数的this需要指向new
//箭头函数没有arguments,不定参需要通过...
// 箭头函数也没有原型对象
8.新增原型方法forEach(),map(),filter(),some(),every(),reduce()
forEach()循环遍历数组
const arr = [111,222,333,444,555,666];
//forEach
arr.forEach((item,index,arr)=>{
console.log(item,index,arr);
//item为value,index为key,arr为数组arr
})
map()用于处理一个返回处理过后的新数组
const arr = [111,222,333,444,555,666];
let arr2 = arr.map((item,index,arr)=>{
return item*2;
})
console.log(arr2);
//[222,444,666,888,1110,1332]
filter()过滤数组
const arr = [111,222,333,444,555,666];
let filter = arr.filter((item,index,arr)=>item>333);
console.log(filter);//[444,555,666]
some()只要数组中有一个存在就返回true
const arr = [111,222,333,444,555,666];
let some = arr.some((item,index,arr)=>item>333)
console.log(some);//true
every()全部满足即为真
const arr = [111,222,333,444,555,666];
let every = arr.every((item,index,arr)=>item>111);
console.log(every);//false
reduce()
const arr = [111,222,333,444,555,666];
let reduce = arr.reduce((pre,next)=>{
// console.log(pre,next);
//pre为上一次return的值,next为当前次的值
return pre+next;
},0)//0为初始值
// console.log(reduce);//2331
// 统计次数
let reduce2 = arr.reduce((pre,next)=>{
//每一次返回的都是一个对象
//判断当前的对象是否存在
if(pre[next]){
// 存在让value++
pre[next]++;
}else{
//不存在让其value=1
pre[next]=1;
}
return pre;
},{});
console.log(reduce2);
//得到的为所有元素出现的次数的一个对象
9.对象同名简写
let name = '小白';
let age = 18;
//es5
const obj = {
name:name,
age:age
}
//es6
const obj2 = {
name,
age
}
10.class
//es5
function Obj(name){
this.name=name
}
Obj.prototype.sayName = function(){
console.log(this.name);
}
let myname = new Obj('小白');
myname.sayName()
//es6
class Obj{
constructor(name){
this.name = name
}
sayName(){
console.log(this.name);
}
}
let youname = new Obj('小香');
Obj.sayName();
class的本质依然为function,可理解为function的语法糖
使用static定义的方法与属性,实例无法使用,只能class自己使用
extend为继承
class Name{
constructor(name){
this.name = name
}
}
class Age extends Name{
constructor(name,age){
super(name)
this.age = age
}
static sex = '男'
}
let my = new Age('小白',18);
console.log(my.name); //小白
console.log(my.age); //18
console.log(my.sex); //undefined
console.log(Age.sex); //男
11.Promise
12.解构赋值
// es6之前想要提取变量的属性或方法
var obj = {
name : '小白',
age : 18,
sex : "女"
}
var name = obj.name;
var age = obj.age;
var sex = obj.sex;
console.log(name,age,sex);//小白 18 女
// es6新增结构赋值
const obj = {
name : '小白',
age : 18,
sex : "女",
fun :function(){
console.log('我是解构赋值');
},
sonobj:{
name : '小强'
}
}
const {name,age,sex,fun} = obj;
console.log(name,age,sex); //小白 18 女
fun() //我是解构赋值
// 也可以重命名
const {name:myname} = obj;
console.log(myname); //小白
const {sonobj:{ name }} = obj
console.log(name); //小强
解构赋值同样也可以是数组
const arr = [1,2,3,4,5];
const [a,b,c,d,e] = arr;
console.log(a,b,c,d,e);//1 2 3 4 5
//也可赋默认值
const [a,b,c,d,e,f=6] = arr;
console.log(f); // 6