ES6

学习方法

看千遍不如写一遍

学习内容

• ES6 是什么

• ECMAScript 是什么

• ECMAScript 的历史版本

• ECMAScript 的命名方式

• EVMAScript 与 JavaScript 的关系

• ES6 的兼容性

（以上内容简单了解即可）

• let 和 const 是什么
• let 、const 和 var 的区别
• let 和 const 的应用

ES6

ECMAScript 是语言的标准，6是版本号
ECMAScript = 语法 + API（方法或函数）

ES 与 JavaScript 的关系

• JavaScript（浏览器端）= ECMAScript（语法 + API）+ DOM + BOM

let 和 const

声明变量或常量

var、let声明变量
const 声明常量 constant

const声明的常量，允许在不重新赋值的情况下修改它的值（主要针对引用数据类型）

<script>
    const person = {username:'Alex'};
    person.username = 'Mike';
    console.log(person)   //Mike
  </script>

实际开发中，不知道用什么可以先用 const

let、const 和 var 的区别

1.重复声明：已经存在的变量或常量，又声明了一遍
var 允许重复声明，let、const 不允许

2.变量提升:var会提升变量的声明到当前作用域的顶部，let 和 const 不存在变量提升

3.暂时性死区：只要作用域内存在let、const，他们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响
let 和 const 存在暂时性死区

let a = 2;
function func() {
  console.log(a);
  let a = 1;
}
func();

4.window 对象的属性和方法：全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法，let 和 const 不会

5.块级作用域（重要）：var没有块级作用域，let 和 const 有块级作用域
作用域链：内层作用域->外层作用域->全局作用域

let 和 const 的应用

HTML DOM querySelectorAll() 方法

//获取文档中 class = "example"的所有元素：
var x = document.querySelectorAll(".example");

//要求点击0号按钮时，打印出索引值0，1号打印出1，2号打印出2

//函数循环了3次，每次循环都给相应的按钮绑定了一个点击事件，这是事件处理函数

//分析循环的过程中作用域是怎样的：
//最外层是全局作用域，i = 3
//只有在函数被调用时，才存在函数作用域，没有调用函数就没有函数作用域，此时只有点击相应的按钮，才会调用相应的函数，形成函数作用域
//点击3个按钮会各自生成一个函数作用域

//结果打印出来的都是3
//1.var
    var btns = document.querySelectorAll('.btn');

    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener(
        'click',
        function () {
          console.log(i);
        },
        false
      );
    }

一般使用闭包来解决相应的问题

//2.闭包
var btns = document.querySeletorAll('.btn');

for(var i = 0; i < btns.length; i++) {
  (function (index) {
    btns[index].addEventListener(
    'click',
      function () {
      console.log(index);
    },
    false
    );
  })(i);
}

//3. let/const
let btns = document.querySelectorAll(".btn");
	for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener(
    'click',
    function () {
      console.log(i);
    },
    false
    );
  }

块级作用域

剩余参数 与 展开运算符

剩余参数

//1.认识剩余参数
const add = (x,y,z, ...args) => {};

//2.剩余参数的本质
const add = (x,y, ...args) => {
  console.log(x,y,args);
};
add(1,2,3,4);
//剩余参数永远是个数组，即使没有值，也是空数组


注意事项：

1.箭头函数的剩余参数
箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号

const add = (...args) => {};

2.使用剩余参数替代 arguments 获取实际参数

/*const add = function() {
  console.log(arguments);
};
add(1,2);
*/

const add = (...args) => {
  console.log(args);
};
add(1,2);

3.剩余参数的位置：剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

剩余参数的应用

//1.add方法
const add = (...args) => {
  let sum = 0;
  
  for (let i = 0; i < args.length; i++) {
    sum += args[i];
  }
  
  return sum;
};

//2.与解构赋值结合使用（剩余参数不一定非要作为参数函数使用）

数组展开运算符的基本用法

    //1.认识展开运算符
    //[3,1,2] -> 3,1,2

    //2.数组展开的基本用法
    // console.log(Math.min(...[3,1,2]));
    //相当于 console.log(Math.min(3,1,2));

区分剩余参数 和 展开运算符

根本区别：

• 展开运算符：[3,1,2] -> 3,1,2
• 剩余参数：3,1,2 -> [3,1,2]

数组展开运算符的应用

1.复制数组

const a = [1,2];
const c = [...a];
console.log(c);

2.合并数组

const a = [1,2,3];
const b = [4,5];
const c = [6,7,8];

console.log(...a,...b,...c);

3.字符串转为数组：字符串可以按照数组的形式展开

console.log(...'Alex');
//A l e x

4.常见的类数组转化为数组

function func() {
  //console.log(arguments.push);
  console.log([...arguments]);
}
func(1,2);

//Nodelist
//console.log(document.querySelectorAll('p'));
console.log(...document.querySelectorAll('p').push);

对象展开运算符

//1.展开对象：把属性罗列出来，用逗号分隔，放到一个{}中，构成新对象
//对象不能直接展开，必须在{}中展开
    const apple = {
      color:'红色',
      shape:'球形',
      taste:'甜'
    };
    console.log({...apple})

//2.合并对象
//新对象拥有全部属性，相同属性，后者覆盖前者
    const apple = {
      color:'红色',
      shape:'球形',
      taste:'甜'
    };

    const pen = {
      color:'黑色',
      shape:'圆柱形',
      use:'写字'
    };

    console.log({...pen, ...apple});

对象展开运算符的注意事项

1.空对象的展开：如果展开一个空对象，则没有任何效果
2.非对象的展开：如果展开的不是对象，则会自动将其转为对象，再讲其属性罗列出来
如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象

console.log({...'alex'});
console.log([...'alex']);
console.log(...'alex');

3.对象中的对象 属性的展开：不会展开对象中的对象属性

对象展开运算符的应用

1.复制对象

const a = {x:1, y:2};
const c = {...a};
console.log(c);

2.用户参数和默认参数

const logUser = userParam => {
  const defaultParam = {
    username:'Zhangsan',
    age:'0',
    sex:'male'
  };
  
  const {username, age, sex} = {...defaultParam, ...userParam};
  console.log(username, age, sex);
};

总结

剩余参数
...剩余参数名
剩余参数是数组
1,2 -> [1,2]

箭头函数中使用剩余参数时，不能省略圆括号
可以使用剩余参数替代 arguments 获取实际参数
剩余参数只能是最后一个参数

数组的展开运算符
...[]
[1,2] -> 1,2

对象的展开运算符
{...{}}
对象只能在 {} 中展开
展开对象时，把属性罗列出来，用逗号分隔，放到一个 {} 中，构成新对象