ES6

一、ES6概念

　　JavaScript是EMCAScript的一种，它只是一种标准，js一直被各个语言诟病，因为js的作用域让开发者困扰，也因为js在以前不算是面向对象的语言。ES6的出现，让js语言上了一个台阶。js在发展过程中，一直在完善自己的漏洞。ES6将弱类型的js提升为中弱类型。所以我们必须要学习ES6。

二、定义变量

　　1.let是定义变量的关键字，特点是：

　　　　1）不允许重复声明

　　　　2）不存在预解析

　　　　3）在大括号中声明的变量只能在大括号中使用，如if、for的大括号中声明的变量

　　2.const是声明常量的，特点：

　　　　1）不允许重复声明

　　　　2）不允许重新赋值（可以给对象中新增属性）

　　　　3）声明的时候必须赋值

　　　　4）不存在预解析

　　　　5）在大括号中声明的变量只能在大括号中使用，如if、for的大括号中声明的变量

三、箭头函数

　　es6中的箭头函数是用来简写函数的例：let fn = function(){console.log(111);}

使用箭头函数简写：let fn = ()=>{console.log(111);}

　　带参数的写法：let fn = function(a,b){console.log(a+b);}

使用箭头函数改写：let fn = (a,b)=>{console.log(a+b);}

　　注意：如果只有一个形参的时候，小括号可以省略：let fn = function(a){console.log(a);}

使用箭头改写：let fn = a = > {console.log(a);}

　　注意：如果代码块中只有一行代码，箭头函数可以省略大括号，并将这行代码作为返回值let fn = function(a){return a + 1;}

箭头函数的写法let fn = a = > a+1;

　　例：使用箭头函数定义一个返回m到n范围内的随机数的函数：let fn = (m,n) => parseInt(Math.random()*(n-m+1))+m;

箭头函数使用注意事项：

　　1.箭头函数中的this比较混轮，所以在函数和方法中使用到this的时候，就不要用箭头函数

　　2.箭头函数中没有arguments

函数默认值

　　以前的函数不能有默认值，es6的函数中可以定义默认值：function add(a,b=2){return a + b;}console.log(add(5));

　　可以用箭头函数改写：let add = (a,b=2) => a+b;console.log(add(5));

四、模板字符串

　　es6新增了定义字符串的方式，使用反引号

　　　　1.可以换行书写，保持字符串中的换行和空格

　　　　2.模板字符串中可以识别变量，使用美元符大括号：${变量}

五、解构赋值

　　1.解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号

　　2.解构对象

　　　　之前从对象中取到内容的方式

　　　　　　let obj = {

　　　　　　　　name:"张三",

　　　　　　　　age:12,

　　　　　　　　sex:"男",

　　　　　　}

　　　　　　let name = obj.name;

　　　　　　let age = obj.age;

　　　　解构的方式：

　　　　　　let obj = {

　　　　　　　　name:"张三",

　　　　　　　　age:12,

　　　　　　　　sex:"男",

　　　　　　}

　　　　　　let {name} = obj;/*表示从obj中获取name属性，并赋值给声明的name变量*/

　　使用说明：

　　　　1）obj必须是一个对象

　　　　2）obj中必须有name属性

　　还可以一次性解构多个变量：

　　　　let obj = {name:"张三",age:12,sex:"男"}

　　　　let {name,age} = obj; // 声明并赋值了两个变量

　　可以将变量名换成一个别的名字：

　　　　let obj = {name:"张三",age:12,sex:"男"}

　　　　let {name:username,age:a} = obj; // 将obj的name属性值赋值给username变量，age属性值赋值给变量a

　　多级解构：

　　　　let obj = {

　　　　　　name:"张三",

　　　　　　age:12,

　　　　　　sex:"男",

　　　　　　wife:{

　　　　　　　　name:"翠花",

　　　　　　　　age:11

　　　　　　}

　　　　}

　　　　let {wife} = obj;

　　　　let {name} = wife;

　　　　// 写为一行

　　　　let {wife:{name:wname}} = obj;

　　3.解构数组

　　　　let arr = [1,2,3];

　　　　let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量

　　使用说明：

解构数组的时候是按顺序取出数组中的值，解构一个变量，只能拿到第一个元素

　　解构多个元素：

　　　　let arr = [1,2,3];

　　　　let [num1,num2] = arr; // num1 = arr[0] num2 = arr[1]

　　多维数组解构：

　　　　let arr = [1,2,3,[4,5,6]];

　　　　let [a,b,c,[aa,bb]] = arr;

　　　　console.log(aa,bb); // 4 5

　　利用结构交换两个变量的值：

　　let num1 = 1;

　　let num2 = 2;

　　[num2,num1] = [num1,num2]

六、展开与算符&&合并运算符

　　1.展开运算符

　　　　将一个数组展开为多个变量赋值给多个形参

　　　　let arr = [1,2,3];
　　　　function fn(a,b,c){
    　　　　console.log(a,b,c); // 1 2 3
　　　　}
　　　　fn(...arr);

　　　　利用展开运算求数组的最大值

　　　　let arr = [5,3,6,9,8,1,7];
　　　　let max = Math.max(...arr); 
　　　　console.log(max); // 9

　　　　利用展开运算合并数组

　　　　// 之前的写法
　　　　let arr = [1,2,3];
　　　　let arr1 = [4,5,6].concat(arr);
　　　　// 利用展开运算合并
　　　　let arr2 = [4,5,6].concat(...arr);
　　　　// 再简化
　　　　let arr3 = [4,5,6,...arr]

　　　　利用展开运算合并对象：

　　　　const obj = {
    　　　　name:"Jack",
    　　　　age:20,
    　　　　sex:"男",
　　　　}
　　　　const obj1 = {
    　　　　...obj,
    　　　　wife:{
        　　　　name:"Rose",
        　　　　age:18
    　　　　}
　　　　}
　　　　console.log(obj1);

　　2.合并运算符

　　　　将多个实参合并为一个数组

　　　　function fn(...arr){
    　　　　console.log(arr);
　　　　}
　　　　fn(1,2,3); // [1,2,3]

　　　　箭头函数中没有arguments，可以使用合并运算符来模拟arguments

　　　　var fn = (...arr) => {console.log(arr)};

　　　　fn(1,2,3); // [1,2,3]

七、对象的简写方式

　　let name = '张三';
　　let age = 12;
　　let obj = {
    　　name,
    　　age
　　}
　　console.log(obj);

　　如果对象的属性名和变量名同名，则可以光写属性名

八、判断数据类型

　　之前使用typeof检测数据类型，但这种方式只能检测基本数据类型。在判断数组或对象的时候不能准确判断。

　　有一个比较长的方法，可以检测所有数据类型：

　　　　Object.prototype.toString.call(被检测的数据类型)

　　例：

　　　　console.log(Object.prototype.toString.call(123));

　　　　console.log(Object.prototype.toString.call('abc'));

　　　　console.log(Object.prototype.toString.call(true));

　　　　console.log(Object.prototype.toString.call(undefined));

　　　　console.log(Object.prototype.toString.call(null));

　　　　console.log(Object.prototype.toString.call([]));

　　　　console.log(Object.prototype.toString.call({}));

　　　　console.log(Object.prototype.toString.call(function(){}));

　　　　console.log(Object.prototype.toString.call(/^abc$/));

　　　　console.log(Object.prototype.toString.call(new Date()));

九、字符串语法

 

1. startsWith() 是否以谁开头，返回布尔值

   let str1 = "file:///C:/Users/iTAze/Desktop/1.html";
   let str2 = "https://mp.csdn.net/postedit";
   console.log(str1.startsWith("https://"))// false;
   console.log(str1.startsWith("file:///"))// true;
   

 

2. endsWith() 是否以谁结尾，返回布尔值

3. includes() 判断一个字符串或数组是否包含一个指定的值

   "Blue Whale".includes("blu"'); // returns false

十、this 关键字

• 每一个函数内部都有一个关键字是 this

• 可以让我们直接使用的

• 重点： 函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系

• 函数内部的 this 指向谁，取决于函数的调用方式

• 全局定义的函数直接调用，this => window

  function fn() {
    console.log(this)
  }
  fn()
  // 此时 this 指向 window
  

• 对象内部的方法调用，this => 调用者

  var obj = {
    fn: function () {
      console.log(this)
    }
  }
  obj.fn()
  // 此时 this 指向 obj
  

• 定时器的处理函数，this => window

  setTimeout(function () {
    console.log(this)
  }, 0)
  // 此时定时器处理函数里面的 this 指向 window
  

• 事件处理函数，this => 事件源

  div.onclick = function () {
    console.log(this)
  }
  // 当你点击 div 的时候，this 指向 div
  

• 自调用函数，this => window

  (function () {
    console.log(this)
  })()
  // 此时 this 指向 window
  // 自调用函数还可以在前面加！或~

十一、上下文调用模式

　　也叫作方法借用模式。任何函数都能调用call、apply、bind这三个方法

　　1、call

　　　　call方法也可以用来调用函数：

　　　　　　function fn1(){
    　　　　　　console.log(123);
　　　　　　}
　　　　　　// fn1();
　　　　　　fn1.call(); // 使用call方法调用函数和小括号调用时一样的

　　　　call方法不仅可以用来调用函数，还可以指定调用函数的this指向。call的第一个参数就可以改变函数内的this指向：

　　　　　　function fn2(){
    　　　　　　console.log(this);
　　　　　　} 
　　　　　　fn2.call([1,2,3]); // 打印结果就是这个数组

　　　　这时候的this就变成了call的第一个参数，也就是这个数组

　　　　call的参数可以有若干个，第一个参数用来改变函数内的this指向，其余的函数是作为调用函数的实参

　　　　　　function fn3(num1,num2){
    　　　　　　console.log(this);
    　　　　　　console.log(num1+num2);
　　　　　　}
　　　　　　// fn3(10,20);
　　　　　　var arr = [10,20];
　　　　　　fn3.call(arr,arr[0],arr[1]); //结果： Array  30

　　　　如果call没有参数或第一个参数为null，那么函数中的this执行window

　　　　　　function fn4(){
    　　　　　　console.log(this);
　　　　　　}
　　　　　　fn4.call(); // window
　　　　　　fn4.call(null); // window
　　　　　　fn4.call(undefined); // window

　　2、apply

　　　　apply的作用和call是一样的，区别只在于写法，apply只有两个参数，第二个参数是一个数组或者伪数组

　　　　　　function fn5(num1,num2){
   　　　　　　 console.log(this);
    　　　　　　console.log(num1+num2);
　　　　　　}
　　　　　　var arr = [10,20];
　　　　　　fn5.apply(null,arr); // window  30

　　　　apply的特性： apply的平铺性： 将数组的中每一项取出来，作为借用函数的实参

　　什么时候用什么方法（call、apply）

1. 如果参数比较少的情况下，使用call比较方便
2. 如果参数已经存放在数组中，使用apply

　　3、bind

　　　　语法：var fn2 = fn.bind(thisArg);

　　　　作用： bind会创建并返回一个新的函数， 新的函数和借用的函数是一模一样的, 但是新函数内的this已经被改变成了bind的参数thisArg

　　　　　　function fn6(){
    　　　　　　console.log(this);
　　　　　　}
　　　　　　fn6(); // window
　　　　　　var arr = [1,2,3];
　　　　　　var fn7 = fn6.bind(arr);
　　　　　　fn7(); // Array(1,2,3)
　　　　　　console.log(fn6,fn7);

　　　　使用场景：经常用于将定时器的this（window）变成指定的对象：
　　　　　　bind 是不会去调用fn函数的，不像call、apply会去调用函数。bind会创建并返回一个新的函数，和借用的函数是一模一样的，但是新函数内部的this变成了指定的对象

　　　　　　var obj = {
    　　　　　　name:'张三',
    　　　　　　lover:'李四',
    　　　　　　sayLove:function(){
        　　　　// 使用bind将属于window的setTimeout变成当前对象的setTimeout
        　　　　　　setTimeout(function(){
            　　　　　　console.log(this.name+"爱"+this.lover);
        　　　　　　}.bind(this),500); 
    　　　　　　}
　　　　　　}
　　　　　　obj.sayLove(); // 张三爱李四

　　　　　　如果没有bind的话，打印结果是：""爱undefined

十二、json

　　json对象

　　　　js中的数组或者对象都可以是json对象

　　json字符串

　　　　json格式的字符串叫做json字符串

　　字符串和对象的转换

　　　　json.stringify 是将 js 的对象或者数组转换成为 json 格式的字符串

　　　　JSON.parse 是将 json 格式的字符串转换为 js 的对象或者数组