es6基础知识点整理一

变量

var的缺点

• 1、可重复声明
• 2、无法限制修改，不能规定常量
• 3、没有块级作用域，只有函数可以限制作用域，比如闭包

let 、const 的好处(弥补var的缺点)

• 1、不能重复声明
• 2、变量-可改变、常量-不可改变
• 3、块级作用域

---

块级作用域：包含{}的就是一个块，比如if，都是

{
let a = 1;
}
console.log(a); //这里是访问不到a的，程序会报错，a is not defined

*let const 声明，不会被提前

cosole.log(a);// 会打印出undefined，因为var会把声明提前
var a = 3;

var换成let,同样的代码

console.log(a); // 程序报错  a is not defined
let a = 3;

---

函数—箭头函数

1、写法规则：
只有一个参数时，（）可以省略，

前提只有一个参数，多一个少一个都不行，无参数时不能省

只有一个return语句时，{}可以省略

// 普通写法
var show = function (a){
      return a*2;
}
// 箭头函数写法
let show = a => a*2; // 写法遵循规则即可

2、this的指向
箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。

var a=12;
function Test(){
    this.a = 88;
    return ()=>{console.log(this.a)};
}
var x = new Test();
x();// 88

---

函数—参数

1、参数扩展/数组扩展
… 三点运算符，可用于参数的收集，或数组的展开
注意： …必须是最后一个收集剩余参数，不能放在中间

// ...arg存放的参数是剩余参数
function test(a, b, ...arg){
      console.log(...arg);   // 3,4,5,6,7
      console.log(a, b);// 1,2
}
test(1,2,3,4,5,6,7);

2、默认参数
传值就用传的值，不传值就用默认的

function test(a,b=3,c=4){
     console.log(a,b,c);
}
test(1); // 1,3,4
test(7,8,9);// 7.8.9

3、解构赋值
左右两边结构必须一样
右边必须是个东西，有效的东西
声明和赋值不能分开（必须在同一行完成）

// 正确写法
let [a,b,c] = [1,2,3];
let {e,f,g} = {e:12,f:13,g:14};
let [[n1,n2,n3],{e1,f1}] = [[2,3,4],{e1:12,f1:13}];
let [arr,json] = [[2,3,4],{e:12,f:13}];// 数组、json可以单独赋值也可以整体赋值

// 错误实例
let [a,b,c] = {e:12,f:13,g:14}; // 结构不一样 
let {e,f,g} = {12,13,14}; // 右边非东西，非数组非对象
let  [a,b];
[a,b] = [1,2]; // 声明和赋值不在一行

---

数组

map 映射，一个对一个
作用于数组每一项，返回一个新值，不改变原数组
一个参数，对应数组的每一个
arr.map( function (item) {return …})

// 示例1：  将[1,2,3,4,5]  变成 [1,4,9,16,25]
let arr = [1,2,3,4,5];
let arr2 = arr.map(item=>item*item);
console.log(arr2);

// 示例2：   成绩对应
let grade= [23,45,99,86,75,39];
let grade2 = grade.map(item => item>60 ? "及格" : "不及格")
console.log(grade2);

reduce 汇总，一堆对应一个结果
arr.reduce( function (tmp,item,index) {return …})

//示例：平均数
let  arr = [1,2,3,4,5,6,7,8,9];
let  result1 = arr.reduce((tmp, item, index) => {
      if (index != arr.length - 1) { // 不是最后一次，求和
           return  tmp + item;
      } else {
           return (tmp + item)/arr.length; // 最后一次，除数组长度
      }
})

console.log(result1);

三个参数
tmp 两两计算得出的值，第一次是数组的第一个值，相当于多数值运算
item 相加的第二个值（a+b 中的b），第一次是数组的第二个值
index 代表运算次数，从1开始

三个参数示意图

filter 过滤器，留一部分删一部分，true留，false删
arr.filter( function (item) {return …})

let  arr = [1,2,3,4,5,6,7,8,9];
let result = arr.filter(item => item % 3 == 0 ? true : false);
console.log(result);  // 能整除3的留下 [3,6,9]

forEach循环
forEach(item,index){…}

let  arr = [1,2,3,4,5,6,7,8,9];
arr.forEach((item,index) => {
    console.log("第" + index + "个，的值是" + item);
});

---

字符串

• 1、增加了两个方法
  startswith 以…开始
  endswith 以…结束

var str = "http://123.com";
if (str.startsWith("http://")) {
    console.log("这是一个网址")
}
if (str.endsWith(".com")) {
    console.log("这是一个网址")
}

• 2、模板字符串
  反引号包裹 ``，
  可以将变量直接加进去 $(变量)
  可以折行
  友情提示：反引号的位置在键盘1的左边

举个例子对比下，超好用的

let title = "标题";
let con = "内容";
// 普通拼接
let str = '<div>\
             <h1>'+title+'</h1>\
              <p>'+con+'</p>\
              </div>';
// 字符串模板拼接
let str2 = `<div>
               <h1>${title}</h1>
               <p>${con}</p>
               </div>`