ES6新特性

默认参数

//ES5
function getName(name) {     
    var newName=name!=undefined?name:"张三";//用三元运算符判断
    console.log(newName);
}
getName(0)

//ES6
function getName(name="张三"){
    console.log(name);
}
getName(0);

扩展运算符三个点的使用

扩展运算符作用就是取出对象中所有可遍历的属性，拷贝合并到当前对象之中。可以实现拷贝对象、合并对象。拷贝数组、合并数组

ES5

//浅拷贝  
let obj1 = {a:1,b:2};
let obj2 = obj1;
obj2.a = 3;
console.log(obj1);
console.log(obj2);
//{a:3,b:2}
//{a:3,b:2}

//深拷贝
let obj1 = {a:1,b:2};
let obj2={};
for(let key in obj1){
  obj2[key]=obj1[key];
}
obj2.a = 3;
console.log(obj1);
console.log(obj2);
//{a:1,b:2}
//{a:3,b:2}

ES6

//深拷贝
let obj1={a:1,b:2};
let obj2={...obj1};
obj2.a = 3;
console.log(obj1);
console.log(obj2);

//{a:1,b:2}
//{a:3,b:2}

对象合并

let payload={title:"羊肉串",amount:10,price:2};
let user={uid:1,shop_id:20};
let data={...payload,...user};
console.log(data);

数组拷贝

//浅拷贝（官方文档为浅拷贝，实质为深拷贝）
let arr1[1,2,3];
let arr2[...arr1];
arr1.push(4);
console.log(arr1);
console.log(arr2);
//[1,2,3,4]
//[1,2,3]

数组合并

let arr1=[1,2,3];
let arr2=[4,5,6];
let arrData=[...arr1,...arr2];
console.log(arrData);

案例

let data=[
  {id:1,title:"羊肉串"},
  {id:2,title:"猪肉串"},
  {id:3,title:"牛肉串"},
]；
let newData=[
  {id:4,title:"啤酒"},
  {id:5,title:"可乐"},
  {id:6,title:"雪碧"},
];
//ES5
for(let i=0;i<newData.length;i++){
  data.push(newData[i]);
}
conselo.log(data);

//ES6
data.push(...newData);
console.log(data);

Object.assign对象的拷贝与合并

Object.assign()方法用于将所有可枚举的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。和拓展运算符一样可以实现对象的浅拷贝。Object.assign()第一个参数是目标对象，后面参数是源对象。

常见用途：

1.为对象添加属性

2.为对象添加方法

let target={a:1};
let source1={b:2};
let source2={c:3};
Object.assign(target,source1,source2);
conselo.log(target);

//如果目标对象与源对象有同名属性或多个源对象有同名属性，那么后面的属性会覆盖前面的属性
let target={a:1,b:2};
let source1={b:3,c:3};
let source2={c:4};
Object.assign(target,source1,source2);
console,log(target);
//{a:1,b:3,c:4}

//如果只有一个目标对象，直接返回该参数
let target={a:1};
Object.assign(target);
console.log(target);
//{a:1}

//如果目标对象不是一个对象，先转成对象
let abc=Object.assign("abc");
console.log(abc);
console.log(abc[0],abc[1],abc[2]);
//{0:"a",1:"b",2:"c"}
//a b c

//目标对象不能是undefined和null
Object.assign(undefined);
Object.assign(null);

//为对象添加属性
function Person(name,age){
  Object.assign(this,{name,age});
  //相当于  
  this.name=name;
  this.age=age;
}



let person=new Person("张三",20);
console.log(person.name,person.age);
//张三 20

function Person(name,age){
  this.name=name;
  this.age=age;
}

为对象添加方法

//ES5
Person.prototype.say=function(){
  console.log("say()方法")
}
Person.prototype.run=function(){
  console.log("run()方法")
}

//ES6
Object.assign(Person.prototype,{
  say(){
    console.log("say()方法")；
  }，
  run(){
    console.log("run()方法")；
  }
})；
person.say();
person.run();

//say()方法
//run()方法

对象字面量扩展

属性初始值的简写

//ES5
let title="VUE";
let price=95;
let book={title:title,price:price};
console.log(book);
//{title:"VUE",price:95};

//ES6
let title="VUE";
let price=95;
let book={title,price};
console.log(book);
//{title:"VUE",price:95};

对象方法的简写

//ES5
let person={
  say:function(){
    console.log("say方法");
  }
}
person.say();
//ES6
let person={
  say(){
    console.log("say方法");
  }
}
person.say();

计算属性名

//属性名出现：-或中文，需要用[]
//ES5
let person={};
let ageAttr="age";
person["first-name"]="四";
person["last-name"]="李"
person[ageAttr]=20;
conselo.log(person);

//ES6
let ageAttr="age";
let person={
  ['first-name']:"四",
  ['first-name']:"李",
  [ageAttr]:20,
}
conselo.log(person);

解构赋值

解构赋值语法是一种Javascript表达式。通过解构赋值。可以将属性/值从对象/数组中取出，赋值给其他变量。

//ES5
let person={
  name:"张三"，
  age:20
};
var name=person.name;
var age=person.age;
console.log(name,age);

//ES6
let person={
  name:"张三"，
  age:20
};
let {name,age}=person;
console.log(name,age);

let name,age;
({name,age}=person);
console.log(name,age);

let {name,age,city='北京'}=person;
console.log(name,age,city);
let name="李四";

实例

let classify={
  title:"菜品",
  children:{
    title:"肉类",
    children:{
      title:"羊肉串"
    }
  }
}
let {children:children{tilte}}=classify;
console.log(title);
//羊肉串

let {...personobj}=person;
console.log(personobj);

数组解构

//ES5
let arr=[10,20,30];
let a=arr[0],b=arr[1],c=arr[2];
console.log(a,b,c);
//10,20,30

//ES6
let arr=[10,20,30];
let [a,b,c]=arr;
console.log(a,,b,c);
//10,20,30
let [,,a]=arr;
//30

let a,b,c;
[a,b,c]=arr;
console.log(a,b,c);
//10,20,30

let arr=[10,20,30];
let [a,b,c,d=40,e]=arr;
console.log(a,b,c,d,e)
//10,20,30,40,undefine

//嵌套数组

let book=['PHP','JAVA',['JavaScript','CSS','HTML']];
let [a,,[,,j]]=book;
console.log(a,j);
//PHP HTML

let [a,,...html]=book;
console.log(a,html);
//PHP Arrar(3)

let [a,,...html]=book;
console.log(a,html[0][0]);
//PHP JavaScript

let [a,,html]=book;
console.log(a,html[0]);
//PHP JavaScript

let [a,,[...html]]=book;
console.log(a,html[0]);
//PHP JavaScript

模块化

模块化的好处：

1. 避免受污染
2. 提高代码复用率
3. 提高维护性
4. 可以提升执行效率
5. 避免引入时的层层依赖

导出

//导出  global.js
export let name="张三"
export let age=20;
export const URL="https://www.baidu.com";
//方法
export function getName(){
  return "李四";
}

//导出方式
export{
  name as oldName,/别名，一般不在这
  age,
  URL,
  getName();
}

default.js

let name="张三"；
let age=20;
export default name;
export default age;// 会报错
//只能单个导出，但是导入可以时随意起名
//多个导出可以使用对象形式

export default{
  name,
  age
}

导入

//导入
<script type="module">
  import {name as oldName,age,URL,getName} from "路径/.js";
  let name="王五";
  
  console.log(name);
  console.log(age);
  console.log(URL);  
  console.log(getName());  

  //导入整个模块
  import * as person from "./global.js"
  console.log(person.name);
  console.log(person.age);
  console.log(person.URL);
  console.log(person.getName);
  

  //default.js  文件导入
  import personName from "./default.js"
  console.log(person.name,person.age);
  person.getName();

</script> 

箭头函数

箭头函数在VUE和React中使用非常频繁，箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target 箭头函数表达式更适用于那些本来需要使用匿名函数的地方，并且它不能作构造函数。

//ES5
function person(){
  console.log("大家好");
}

//ES6
let person=()=>{
  console.log("大家好")；
}

//return
let person=()=>"大家好"；
//相当于
function person(){
  return "大家好"; 
}

传参

//传参
let person=(name,age)=>{
  console.log(name,age);
}
person("张三",20);

返回字面量

//返回字面量
let person=()=>({name:"张三",age:20});
console.log(person());

//高阶函数
//ES5
function person(){
  return function(wrap){
    return function(prop){
      console.log(wrap,prop);
    }
  }
}
let person=()=>wrap=>prop=>{
  console.log(wrap.prop);
}
person()('我是wrap')('我是prop');

this指向

//this指向
var person={
  name:"张三",
  getName:function(){
    setTimeout(function(){    //setTimeout指向的是window
      console.log(this);
      console.log(this.name);
    },300);
  }
}

var person={
  name:"张三",
  getName:function(){
    setTimeout(()=>{    //使用箭头函数后this指向上一级
      console.log(this);
      console.log(this.name);
    },300);
  }
}

Promise

Promise就是一个对象，用来传递异步操作的消息。可以解决回调函数的嵌套问题，也就是所谓的“回调地狱”

一个Promise有以下几种状态：

1. pending：初始状态，既不是成功，也不是失败状态
2. fulfilled：意味着操作成功完成。
3. rejected：意味着操作失败
   如果异步操作成功，resolve方法将Promise的状态，从“未完成”变为“成功”（即从pending变为fulfilled）。

如果异步操作失败，reject方法将Promise的状态，从“未完成”变为“失败”（即从pending变为rejected）。

如果执行resolve 方法，对应的会调用then方法，then方法传入一个函数作为参数，该函数的参数的值就是resolve 方法的实参。

如果执行rejected 方法，对应的调用catch 方法，catch 方法传入一个函数作为参数，该函数的参数的值就是reject方法的实参。

let code=200;
let p1=new Promise((resolve,reject)=>{
  setTimeout(()=>{
    if(code=200){
      //执行成功调用resolve函数
      resolve("成功！");
    }else{
      //执行失败调用reject函数
      reject("失败！");
    }
  },300)
});
p1.then((result)=>{
  console.log(result);
}).catch((result)=>{
  console.log(result);
})

class类的使用

ES6引入了Class（类）的概念，作为对象的模板。通过class关键字，可以定义类。可以实现：单例模式、访问器属性、静态方法、extends继承

//ES5
function Person(name,age){
  this.name=name;
  this.age=age;
}
//方法
Person.prototype.show=function(){
  console.log(this.name,this.age);
};
var person=new Person("张三",20);
person.show();

//ES6
class Person{
  //构造函数
  constructor(name,age){
    this.name=name;
    this.age=age;
  }
  //方法
  show(){
    console.log(this.name,this.age);
  }
}
var person=new Person("张三",20);
person.show();

//用表达式的形式来定义
let Person=class(name,age){
  constructor(name,age){
    this.name=name;
    this.age=age;
  }
}
var person=new Person("张三",20);
console.log(person.name);

//单例模式
let Person class{
  constructor(name,age){
    this.name=name;
    this.age=age;
  }
}("张三",20);
console.log(Person.name,Person.age);

//访问器属性
class Person{
  constructor(name,age){
    
  }
}

模板字符串

1. 模板字符串 ``

• 在模板字符串中, 如果需要写一个字符`,则需要在字符前加上 \

  console.log(`\` `);  // 结果 `

2. 字符串的扩展操作方法

1. includes()

• 查找指定字符，有返回值
• 如果能找到返回 true ，找不到返回 false

    let str = 'hellow';
    console.log(str.includes('o'));   // true
    console.log(str.includes('a'));  // false

2. startsWith();

• 判断 是否以 指定字符开头 返回值是 布尔值
• 是返回 true 不是则返回 false

    console.log(str.startsWith('h'));    // true
    console.log(str.startsWith('he'));   // true
    console.log(str.startsWith('hel'));  // true
    console.log(str.startsWith('helo')); // false
    console.log(str.startsWith('o'));    // false
    console.log(str.startsWith('w'));    // false

3. endsWith();

• 判断 是否以 指定字符结尾 返回值是 布尔值
• 是返回true 不是返回false

    console.log(str.endsWith('h'));    // true
    console.log(str.endsWith('w'));    // false

4. repeat();

• 将原字符串重复指定次数， 并将新生成字符串返回。

    console.log(str.repeat(2));
    console.log(str.repeat(4));

5. trim();

• 清除字符串前后空格

    let str1 = ' a b c d e f ';
    console.log(str1);
    console.log(str1.trim());   

6. trimStart();

• 删除首位空格

7. trimEnd();

• 删除末位空格