ES6学习——day01

反思

前段时间学习的mysql到现在还停留在day1阶段，现在就突然学es6。其实我是这么想的因为这段时间在帮老师弄前端项目，用的JQuery。我想着这东西比较老，然后想用vue逐渐替换掉(做一次尝试吧)，学完vue发现还需要es6的基础，所以看了一下es6语法，并不是很难而且为我写js提供了更好地方法。那就学吧。。。

let 和 const

其实学习es6并不打算一个代码一个代码敲过来，可能眼高手低吧。我先学着反正也要项目中使用es6，那我项目中使用多练练吧。

在let 和 const之前我们都使用的是var声明变量。这里无非就是作用域的不同，let的作用域是块作用域简单来说就是大括号括起来的部分，而var是函数作用域，如果在全局声明那就全局的。然后let 不准重复声明，又因为es6强制开启了严格模式，所以变量不准在未声明之前引用，不然会报引用错误。

而const就是常量，常量是不准重新赋值且声明时必须赋值。有个特殊一点的就是对象常量，对象常量里面的字段都是可以修改的，也许你认为这违反了常量，其实不是(有点像C++里面的常量指针)，在es6中常量对象意味着这个对象引用的地址是不改变的(因为对象是引用类型，所以值其实是地址)，但是里面的内容是可以改变的。这在我学习vuex全局变量的时候看到别人使用const定义全局的变量就很不解，原来是因为他们定义的是全局对象变量。

解构赋值

什么是解构赋值，它有很多分类，数组解构赋值(左右都是数组),对象解构赋值(左右都是对象),字符串解构赋值(左数组，右字符串)，布尔解构赋值，函数参数解构赋值(数组解构赋值在函数上的引用)，数值解构赋值

数组解构赋值和对象解构赋值使用的比较多。

数组解构赋值例子，在要对数组成员进行变量赋值的时候，尽量使用解构赋值

//这个打印出来的ab就是1和2
{
  let a,b,rest
  [a, b] = [1, 2]
  console.log(a)
  console.log(b)
}

{
  let a,b,rest
  [a, b, ...rest] = [1, 2, 3, 4, 5]
  console.log(a, b, rest);
  //打印结果ab还是1 2 但是rest是[3, 4, 5]数组
}

{
  //默认值
  let a,b
  [a, b  = 3] = [1]
  console.log(a, b)
  //结果是a为1 b为3  
  //如果b为赋值那么就是undefined
}

//将两个变量交换
{
  let a = 1
  let b = 2
  [a, b] = [b, a]
}

//获取函数返回值
{
  function f() {
    return [1, 2]
  }
  let a,b
  [a, b] = f()
  //ab则为12
}

//选择型获取
{
  function f () {
    return [1, 2, 3, 4, 5, 6]
  }
  let a,b
  [a, , , b] = f()
  //这时候 a为1  b为6
}

对象解构赋值例子

{
  //对象解构赋值
  let a,b
  ({a, b} = {a:1, b:2})
  console.log(a, b)
  //a为1b为2
}
{
  let o = {p: 42, q: true}
  let {p, q} = o
  console.log(p, q)
  //这里的p为42 ，q为true
}

//使用场景
{
  let jsonData = {
    title: 'abc',
    test: [{
      title: 'test',
      desc: 'description'
    }]
  }
  let {title: esTitle, test: [{title: testTitle}]} = jsonData
  console.log(esTitle, testTitle)
  //这时候esTitle获取到的就是bc testTitle获取到的就是test
}

数组扩展

其实就是对数组的api进行扩展了。

Array.of()方法

{
  let arr = Array.of(3, 4, 5, 5, 3)
  console.log('arr', arr)     //[3, 4, 5, 5, 3]
  console.log('arr',Array.of())   //[]
}

Array.from()方法

let p=document.querySelectorAll('p');
let pArr=Array.from(p); //将上面的集合转义成数组
pArr.forEach(function (item) {
    console.log(item.textContent);
});
//map
console.log(Array.from([1,3,5],function (item) {return   item + 2;}));//3 5 7

填充数组

1 2	console.log('fill-7',[1,'a',undefined].fill(7));//[7,7,7] console.log('fill,pos',['a','b','c','d','e'].fill(7,1,3));//["a", 7, 7, "d", "e"] 1和3表示起始和截至位置，不包括位置3

获取索引和值

for (let index of ['1','c','ks'].keys()){
    console.log('keys',index);//0 1 2
}
for (let value of ['1','c','ks'].values()){
    console.log('values',value);//1 c ks
}
for (let [index,value] of ['1','c','ks'].entries()){
    console.log(index,value);
}
//替换
console.log([1,2,3,4,5].copyWithin(0,3,4));//[4,2,3,4,5] （从0开始替换，从3开始读取，也就是第一个读取的数是4，4是截至位置，也就是在位置4之前，因此只取4）

查找和判断包含

console.log([1,2,3,4,5,6].find(function (item) {
    return item>3;//4，只找第一个
}));
console.log([1,2,3,4,5,6].findIndex(function (item) {
    return item>3;//3
}));
console.log('number',[1,2,NaN].includes(1));//true
console.log('number',[1,2,NaN].includes(NaN));//true