目录
1.let&const
避免了用var声明变量引发的变量提升的问题
1.1 什么是变量提升
变量提升 指的是 js代码执行过程中，js引擎把变量声明部分和函数声明部分提升到作用域顶端，并设置默认值undefined
showName()
console.log(name) // undefined
var name = 'jzy'
function showName() {
console.log('showName')
}相当于：
function showName() {
console.log(name)
}
var name
showName() // showName
console.log(name) // undefined
name = 'jzy'
}
并且函数提升优先级高于变量提升。
function test() {
console.log(name) // 打印function
var name = 'test' //
function name() {}
return name
}
console.log(test()) // test相当于
function test() {
console.log(name) // 打印function
var name = 'test' //
function name() {}
return name
}
console.log(test()) // test1.2 可能存在的问题
var tmp=new Date();
function f(){
console.log(tmp);
if(false){
var tmp='hello world';
}
}
f();// undefinedif代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。
运用let不会出现这样的问题：
let tmp = new Date();
function f(){
console.log(tmp);
i f(false){
tmp='hello world';
console.log(tmp);
}
}
f();// Wed Nov 23 2022 14:24:38 GMT+0800 (中国标准时间)let&const解决了变量提升的问题，在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升(初始化就是给变量先赋值成undefined)，在初始化之前使用变量，就会形成一个暂时性死区。
2.模块化、async、await
前端学习笔记（5）-ES6中promise、Generator、Module等使用场景_江正阳的博客-CSDN博客
3.解构
3.1完全匹配，完全解构
let [a,b,c] = [1,2,3];
//a = 1; b = 2; c= 3
let [a,[b,c],d] = [1,[2,3],4];
//a=1; b=2; c=3; d=4
let [a,,c] = [1,2,3];
//a=1;c=3;3.2 不完全匹配，不完全解构
等号左边的模式，匹配等号右边的一部分模式，从数组中取值，取前两项的值，只需要将数组赋值给左侧的两个变量
let [a,b] = [1,2,3];
//a = 1; b = 2;
let [a,[b,c],d] = [1,[2,3,4],5];
//a= 1; b= 2; c=3; d = 5;3.3 完全不匹配，解构不成功
解构不成功，代表变量赋值为undefine
let [a,b] = [1];
//b 为undefine3.4 例子
从对象中取值例子：
const obj = {
a:1,
b:2,
c:3,
d:4
}
let {a:k,b:l,c,d} = obj并且可以用冒号修改变量名称
交换两个变量的值更方便：
let a=1;
let b=3;
[b,a]=[a,b];4.扩展运算符（...）
4.1 拷贝数组
let arr = [1,2,3];
let arr1 = [...arr];只需要将数组扩展后放到新数组中
4.2 合并数组
let arr = [1,2,3];
let arr1 = [4,5,6]
let arr2 = [...arr,...arr1];
let arr3 = [0,...arr2,7,8];4.3 将数组扩展为函数参数
比如在函数调用时可直接传入数组的扩展作为参数
function a(x,y,z){
return x+y+z;
}
const numbers = [1,2,3]
a(...numbers)4.4 克隆对象，合并对象
扩展后放置到新的对象中
let obj1 = {name:'JZY',age:'20'};
let obj2 = {city:'xiamen'}
let obj3 = {...obj1,...obj2}4.5 排除对象属性
let params = {
name:'JZY',
age:'20',
type:'1'
}
let {type,...other} = params5. 操作对象的方法
5.1 Object.keys得到对象键的集合
const obj = {a:1,b:2,c:3};
const keys = Object.keys(obj);
//[a,b,c]5.2 Object.values得到对象值的集合
const obj = {a:1,b:2,c:3};
const keys = Object.values(obj);
//[1,2,3]5.3 Object.entries得到的是对象键值对的集合
const obj = {a:1,b:2,c:3};
const keys = Object.entries(obj);
//[[a,1],[b,2],[c,3]]遍历对象：
const obj = {a:1,b:2,c:3};
for(let[key,value] of Object.entries(obj){
console.log(`key:${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:36.rest参数
6.1 概念
- rest参数(形式为"…变量名"),用于获取函数的多余参数,这样就不需要使用arguments(参数)对象了.
- rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中.
6.2 使用场景
在创建API时，一个常见的需求是创建可变参数函数（参数个数不确定），这个函数可以接受任意数量的参数。通过使用rest参数，ES6提供了一种编写可变参数函数的新方法。
可变参数函数containsAll，它检查一个字符串是否包含许多子字符串。例如，containsAll("banana","b","nan")将返回true，而containsAll("banana"，"c"，"nan")将返回false。
传统方法：
function containsAll(haystack) {
for (var i = 1; i < arguments.length; i++) {
var needle = arguments[i];
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}arguments主要用于保存调用函数的实际参数数据。函数形参列表只包含一个形参haystack，所以不可能一眼就看出函数实际上有多个实参。而且遍历arguments 索引为1而不是0的参数，因为arguments[0] 对应于haystack参数，难免可读性差。
使用rest参数的ES6实现解决上述问题:
function containsAll(haystack, ...needles) {
for (var needle of needles) {
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
} needles前的省略号...表示它是一个rest参数。所有其他传递的参数都放在一个数组中，并赋值给变量needles。对于示例，needles设置为[“b”，“nan”]。然后函数继续正常执行。只有函数的最后一个参数才可以标记为rest参数。在调用中，rest参数之前的参数照常赋值。任何“额外”参数被放入一个数组中，并赋值给rest参数。
-------------------------------------------------------2023/1/31-------------------------------------------------------------
7.字符串拼接
${ }是es6新增的字符串方法，可以配合单反引号完成字符串拼接的功能
原代码：
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考试成绩及格`;
}else{
result = `${name}的考试成绩不及格`;
}
改进代码：
const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;${}中是可以放入JS表达式的，可以进行运算以及引用对象属性。