【学习笔记】ES6 基础语法

变量

let

let 关键字就是 var 的升级版，它具有以下特点：

• 不能重复声明
• 不能随便修改
• 声明的是块级变量，而不是 var 的函数级：var 只有函数内的变量有作用域，其他地方 var 出来的变量都是全局作用域（包括 for，if），外部均可调用

let 的作用域

以前我们实现点一个按钮，就弹出当前按钮的索引值，使用的如下代码：

for (var i = 0; i < btns.length; i++) {
  (function (i) {
    btns[i].onclick = function () {
      console.log(i);
    }
  })(i)
}

这是运用了立即执行函数造成闭包，给每个按钮分配了一个 i，这里的 i 都是函数级作用域

我们将 var 变成 let：

for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log(i);
  }
}

因为 let 创建的 i 是块级作用域，所以也能实现效果

const关键字

const 关键字也是 var 的升级版，它具有以下特点：

• 不能重复声明
• 是一个常量，禁止修改
• 声明的也是块级作用域
• const声明的对象，其属性可以修改，而对象的地址不可以修改，因为对象名本质上保存的就是该对象的地址

解构赋值

let arr = [1, 3, 5];
let [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);

注意：

• 两边的结构必须一样，不能 let {a，b} = [12, 5];
• 等号右边必须是个数组或别的，不能直接 let {a, b} = {12, 5};
• 赋值和结构必须同时完成，不能拆开

快速赋值

let a = 1;
let b = 2;
let c = 3;
let obj = {
  //当对象里的元素的key/value和外面的变量完全相同时，直接写变量名即可，会自动赋值
  a,
  b,
  c
}
console.log(obj.a); // 1
console.log(obj.b); // 2
console.log(obj.c); // 3

箭头函数

基本使用

箭头函数就是函数 function() {} 的简写：() => {}

假如有一个排序方法：

let arr = [12, 8, 5, 23, 6];
arr.sort(function (n1, n2) {
  return n1 - n2;
})

可以简写为：

console.log(arr.sort((n1, n2) => {
  return n1 - n2
}));

精简规则

• 如果有且仅有一个参数，() 可以不写
• 如果有且仅有一个语句，那么 return 和 {} 也可以不写

箭头函数中的this的指向

箭头函数向外层作用域一层层查找 this，将找到的第一个 this 作为它的 this

什么时候使用箭头函数？

当我们要将一个函数作为另一个函数的参数时，使用箭头函数
如：

setTimeout(function () {
  ...
}, 1000)

使用箭头函数：

setTimeout(() => {
  ...
})

对象中快速定义函数

let obj = {
  //ES5写法
  drink: function () {
    console.log('我要吃吃吃');
  },
  //ES6写法
  eat() {
    console.log('不要胖胖胖');
  }
}
obj.eat();
obj.drink();

参数展开 …

... 有两个作用，分别是参数的收集与展开

参数收集：

function fn(a, b, ...c) {
  console.log(a, b, c);
}
fn(1, 2, 3, 4, 5, 6, 7);

打印结果:

1 2 [3, 4, 5, 6, 7]

...c 表示将接收所有的第三个参数及以后的参数

let arr = [1, 2, 3]
arr.push(...[4, 5, 6])
console.log(arr);

打印结果：

[1, 2, 3, 4, 5, 6]

参数展开

let arr = [1, 2, 3];
console.log(...arr);   

原生对象扩展

Array 扩展

map（映射）

let arr = [1, 2, 3];
//将arr中的1,2,3陆续作为value参数传入到function中，对其进行操作后，返回的值将添加到一个新数组中
var arr1 = arr.map(function (value) {
  if (value > 2) {
    return '及格';
  } else {
    return '不及格';
  }
})

如果符合条件则返回及格，如果不符合条件则返回不及格
如果不设置条件，则返回undefined

reduce

不管进去几个，只出来一个

var num = [1, 2, 3, 4, 5];
var res = num.reduce(function (total, num) {
  return total + num;
  //return total + Math.round(num);//对数组元素四舍五入并计算总和
}, 0);
console.log(res)； //15

模板字符串

模板字符串可以在字符串中插入变量，用 $ 加 {} 表示
字符串不能用引号，要用反单引号，即波浪键 `

以前的引号只能接受一行内的数据，换行的话要用 + 拼接，而反单引号能一次接收多行的字符串

let a = 2;
let b = 3;
// ES5：
console.log('今天是星期' + a + '，我吃了' + b + '个包子');
// ES6：
console.log(`今天是星期${a}，我吃了${b}个包子`);

JSON

JSON格式字符串的键必须使用双引号包裹

JSON对象的方法：

// 序列化，即将传递的内容转换为字符串
JSON.stringify()
JSON.stringify({
  a: 12,
  b: 5
}) // 返回'{"a":12,"b":5}'

// 解序列化，将收到的字符串转换为非字符串
JSON.parse()
JSON.parse('{"a":12,"b":5}') // 返回{a: 12, b: 5}