es6的新特性和数组常用方法及扩展

####let和const
ES6 新增了let/const命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。代码块是在大括号 {} 中所写的语句,if语句和 for语句里面的{ }也属于块作用域。对于var, 在function内部， 加var的是局部变量， 不加var的则是 全局变量；

• let可以重新赋值,const不可以赋值

  let i = 10;
  const j = 20;
  i = 30;
  console.log(i); //30
  j = 40;
  console.log(j);//报错
  

#####1.let
let特点:

• 1.let定义的变量不存在变量提升
• 2.let定义的变量只在当前的代码块内有效
• 3.let定义的变量不能被重复声明

console.log(num);  //报错,不存在变量提升
let num = 10;
console.log(num);  //10

console.log(age); //报错
console.log(name); //undefined
{
    var name = "张三";
    let age = 30;
    console.log(age); //30
    {
        console.log(age);  //报错,输出的变量优先查找当前代码块内的变量,let不存在变量提升
        let age = 40;
        console.log(age);  //40
    }
}
console.log(name); //张三
console.log(age); //报错

• let 和 var

  for(var i = 0;i< 10;i++){
      //setTimeout会有延迟,for循环会很快,当for循环结束i=10,才会执行这一段代码
      setTimeout(function(){
          console.log(i); // 会打印10次10
      },1000)
  }
  
  //let定义的变量不存在变量提升,所以即使有延迟输出的内容与循环的内容是一致的
  for(let j = 0 ; j < 10;j++){
      setTimeout(function(){
          console.log(j); //打印0,1,2,3,4,5,6,7,8,9
      },1000)
  }
  

#####2.const
const定义的是不可被修改的变量,特点:

• 1.const定义的变量不存在变量提升
• 2.const定义的变量只在当前的代码块内有效
• 3.const定义的变量不可被重复声明
• 4.当const定义的变量为引用数据类型的时候,可以对里面的属性进行修改,不能直接对本身进行修改

const obj = {
    age:10
} 
obj.age = 20;
console.log(obj);//age:20

const obj = {
    age:10
}
obj = 20;
console.log(obj); //报错

####箭头函数
声明箭头函数的几种方式:

• 1.带一个参数的箭头函数

  var fun1 = a => a;
  //第一个a代表参数, =>代表箭头函数,第二个a代表return出去的值
  console.log(fun1(3)); // 3
  

• 2.不带参数的箭头函数写法,需要在箭头前面加一个括号

  var fun2 = () => 4;
  

• 3.带多个参数的写法,括号就不能省略

  var fun3 = (a,b) => a + b;
  

• 4.多个return写法

  var fun4 = (a,b)=>{
      if(a>10){
          return b;
      }else{
          return 1;
      }
  }
  

箭头函数的特点:this指向在箭头函数中指向父级

var obj = {
    num : 10,
    fun:function(){
        console.log(this); //指向obj
        setTimeout(function(){
            console.log(this); // 不指向obj,指向window,setTimeout会改变this指向
        });

        setTimeout(()=>{
            console.log(this);//指向obj
        })
    }
};
console.log(obj.fun());

####函数默认值
对参数赋予初值,如果没有传递参数,那么输出这个参数的值就是赋予的值;如果传递参数,那么初值就会被覆盖.

var fun = function(a,b=10){
    console.log(a,b); 
}
//不传参数
fun(); //undefined,10
//传参数
fun(1,2); //1,2

####变量解构赋值
从数组和对象中取值,对变量进行赋值,这被称为解构

• 数组的解构赋值
  • 对数组解构需要遵循一定的规则:需要解构的是一个数组,拿到这个数组里面值的时候,需要跟这个数组的格式一样
  • 数组解构的对应关系与下标有关
  • 解构失败对应的值为undefined

  var arr = [1,2,4,6];
  var [a,b,c,d,e] = arr;
  console.log(a,b,c,d,e); //a-d与arr中的值对应,e对应undefined
  
  var newArr = [1,2,[3,4,[10]]];
  //找到数组中的10
  var [, ,[,,[f]]] = newArr;
  console.log(f); //10
  

• 对象的解构赋值
  • 对象的解构与数组不同,数组解构与下标有关,对象解构与属性名称key有关
  • 对象的解构与顺序没有关系

  var obj = {
      num:10,
      name:"张三",
      school:"不凡学院"
  };
  var {school,name} = obj;
  console.log(school,name);
  
  var obj1 = {
      Success:0,
      data:[ID: 28, Name: "茅台", url: "http://www.gjw.com/baijiu-maotai/"}],
      message:"查询成功"
  }
  function ajax({Success,data , message}){
      console.log(message)
  }
  ajax(obj1);
  

####数组的扩展

• 剩余运算符(…)
  最主要的作用:用作生成新的数组或者连接几个数组

  需求:连接两个数组生成一个新的数组
  var arr = [1,2,5,8],arr1 = [3,4,7];
  var newArr = [...arr,...arr1]
  console.log(newArr);
  

• Array.from
  Array.from方法用于将类对象转为真正的数组(类数组对象比如arguments)
  类数组对象特点:表现像数组,却没有数组该有的方法,比如:push

  var fun = function(a,b){
      var arrs = Array.from(arguments);//将类数组对象转化成真正的数组
      arrs.push(3);//成为数组后能够使用数组的方法
      console.log(arrs);
  };
  fun(1,2);
  

• find/findIndex
  • find
    数组实例的find方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员,则返回undefined.
    find特点:
    • 如果匹配到符合条件的元素,会跳出循环
    • find只会找到符合条件的第一个元素,如果后面有符合条件的元素不会继续进行匹配
    • find里面有三个参数:第一个参数是数组中的每一项,第二个参数每一项对应的下标,第三个参数代表原数组

    var arr = [
          {
              name :"张三"
          },
          {
              name :"李四"
          },
          {
              name :"李四"
          }
      ]
    //找到数组中名称为李四的对象
    for(var i = 0;i<arr.length;i++){
         if(arr[i].name == "李四")
    }
    var item = arr.find((ele,index,arr)=>{
        console.log(arr);
        return ele.name == "李四"
        //只会找数组中的第一个名称为李四的对象
    });
    console.log(item);
    

  • findIndex
    返回第一个符合条件的数组成员的下标,如果所有成员都不符合条件,则返回-1

    找到数组中名称为李四的对象的对应的下标 
    var index = arr.findIndex((ele,index,arr)=>{
        return ele.name == "李四"
    })
    console.log(index);
    

####Set和Map数据结构

• set
  类似与数组,但是成员的值都是唯一的,没有重复的值.
  Set本身是一个构造函数,用来生成Set数据结构

  • add方法:向set结构中添加成员

    var arr = [1,2,3,4,50];
    var set = new Set(arr);
    set.add(1);
    

  • size属性
    set.size:返回set数据结构的长度,类似于数组的length
  • delete方法
    set.delete(value):删除某个值,返回一个布尔值,便是删除成功.删除成功true,否则false
  • set.has(value):返回一个布尔值,表示该值是否为Set的成员
  • set.clear():清空数据结构
  • set实现数组去重

    var items = new Set(arr);
    var array = Array.from(items);
    

• Map
  类似于对象,也是键值对的集合,但是键的范围不限于字符串,各种类型的值包括对象都可以当做键.object结构提供了字符串与值一一对应,Map结构提供了值与值的对应
  Map属性和操作方法:

  • size属性:返回Map结构的成员总数
  • Map.set(key,value)
    set方法设置键名对应的键值为value,然后返回整个Map结构.如果key已经有值,则键值会被更新,否则就新生成该键.
  • Map.get(key)
    get方法读取key对应的键值,如果找不到key,返回undefined
  • Map.has(key)
    has方法返回一个布尔值,表示某个键是否在当前Map对象之中
  • Map.delete(key)
    delete方法删除某个键,返回true.如果删除失败,返回false
  • Map.clear()
    清除所有成员,没有返回值
    ####promise
    异步编程,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.
    promise是一个对象,从它可以获取异步操作的消息

• Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

  • resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
  • reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

• Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

• Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了 解决了层层嵌套

  var pro = new Promise(function(resolve , reject){
  // resolve 用于处理成功的回调 
  // reject 用于处理失败的回调 
    setTimeout(()=>{
      var num = Math.random()*10;
      if(num > 5){ // 如果返回的数据大于5 就默认服务器返回数据成功
         console.log("成功" , num)
         resolve(num);
      }else{
         console.log("失败" , num)
         reject("失败");
      }
    },2000)
  });
  pro
    .then(res =>{ // .then 用于获取成功的回调  
       console.log(res)
    })
    .catch(res =>{ // .catch 用于获取失败的回调 
       console.log(res)
    })
  

####常用的数组的操作

• map()
  主要创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果
  返回新的数组,必须有return

  • map()特点:不改变原数组,而且生成一个新的数组
  • map回调函数:第一个参数是数组中的每一项,第二个参数是下标

    var arr = [1,4,7,5];
    //对数组中的每一项乘以2
    //var newArr = arr.map(ele => ele*2);
    var newArr = arr.map((ele,index)=>{
        console.log(ele,index);
    })
    console.log(arr,newArr);
    

• forEach:对数组的每个元素执行一次提供的函数
  forEach相当于for循环,对数据进行遍历
  特点:
  1.不能对每一项进行更改
  2.不能终止
  3.不用加return
  4.没有返回值

  //这种情况可以修改age值
  var arr = [
    {
        age:40
    },
    {
        age:50
    },
    {
        age:60
    },
  ];
  arr.forEach(ele => ele.age = ele.age*2);
  console.log(arr)
  

• filter:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.
  filter:过滤 过滤出符合条件的元素 ,返回的一定是一个数组

var list = [1,2,3,4];
var newList = list.filter(ele => ele > 2);
console.log(list,newList) // [1,2,3,4] [3,4]

• every()与some()
  都是JS中数组的迭代方法。
  • every()对数据循环的时候进行条件判断 如果全部符合 那么返回true 如果有一项不符合 返回false 返回布尔值

  var arr = [1,2,3];
  var bol = arr.every(ele => ele>1);
  console.log(bol);
  

  • some()对数据循环的时候进行条件判断 如果有一项符合 那么返回true 如果全部不符合 返回false 返回布尔值

  var arr = [1,2,3];
  var bol = arr.some(ele => ele>3);
  console.log(bol);
  

• includes
  判断是否包含某个元素,与indexOf差不多
  • includes返回的是布尔值,如果包含true否则false
  • 既适用于数组,也可适用于字符串

  var strs = "abcdefg";
  var str = strs.includes("c");
  console.log(str)
  

• reduce()
  接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.用途求和
  • reduce里面的参数:total默认数组中的第一项,current代表第二项
  • reduce必须把total给return出去
  • 可以给total指定初始值
    • total不带初始值

      var arr = [1,2,3,4];
      var totals = arr.reduce((total,current)=>{
          console.log(otal",total , "current",current);
          return total = total + current;
      })
      

    • total带初始值

      var arr = [1,2,3,4];
      var totals = arr.reduce((total,current)=>{
          console.log(otal",total , "current",current);
          return total = total + current;
      },0)
      

t)=>{
console.log(otal",total , “current”,current);
return total = total + current;
})
- total带初始值
var arr = [1,2,3,4];
var totals = arr.reduce((total,current)=>{
console.log(otal",total , “current”,current);
return total = total + current;
},0)
```