JavaScript变量定义-ES6

为了解决老版标准的两个注意点：

  1. 在JavaScript中如果定义了同名的变量，那么后定义的变量会覆盖先定义的变量
  2. 在老版本的标准（ES6之前）的JavaScript中可以先使用变量，再定义变量，并不会报错

ES6中就推出了一种新的定义变量的方式

格式：

  • ES6之前：var 变量名称；
  • ES6开始：let 变量名称；

JavaScript-变量作用域-ES6

  1. 什么是全局变量
  • 全局变量就是定义在{}外面的变量，我们就称之为全局变量
  1. 什么是局部变量
  • 局部变量就是定义在{}里面的变量，我们就称之为局部变量
  1. 全局变量和局部变量的区别
  • 如果是全局变量，那么有效范围是从定义变量的那一行开始知道文件的末尾都可以使用
  • 如果是局部变量，那么有效范围是从定义的那一行开始直到大括号结束为止（只有在大括号中才能使用）

JavaScript-数组解构赋值-ES6

  1. 什么是数组解构赋值？
  • 解构赋值是ES6中新增的一种赋值方式
  1. let arr = [1,3,5]
  2. let [a,b,c] = arr;
  3. //let a = arr[0];
  4. //let b = arr[1];
  5. //let c = arr[2];
  1. 数组解构赋值的注意点
    1. 在数组的解构赋值中，等号左边的格式必须和等号右边的格式一模一样，才能完全解构
  1. let [a,b,c] = [1,3,5];
  2. //a = 1;
  3. //b = 3;
  4. //c = 5;
  6. let [e,f,g] = [1,3,[2,4]];
  7. //e = 1;
  8. //f = 3;
  9. //g = [2,4];
  11. let [x,y,[j,k]] = [1,3,[2,4]];
  12. //x = 1;
  13. //y = 3;
  14. //j = 2;
  15. //k = 4;
  1. 2. 在数组解构赋值中，左边的个数可以和右边的个数不一样 
  1. let [a,b] = [1,3,5];
  2. //a = 1;
  3. //b = 3;
  5. let [a,b,c] = [1];
  6. //a = 1;
  7. //b = undefined;
  8. //c = undefined;
  1. 3. 在数组解构赋值中，我们可以给左边指定默认值
  1. let [a,b] = [1,3,5];
  2. //a = 1;
  3. //b = 3;
  5. let [a,b = 666,c = 888] = [1];
  6. //a = 1;
  7. //b = 666;
  8. //c = 888;
  1. 4. 在数组的解构赋值中，还可以使用ES6中新增的扩展运算符来打包剩余的数据(注意：扩展运算符只能写在最后)
  1. let [a,...b] = [1,3,5];
  2. //a = 1;
  3. //b = [3,5];

JavaScript-函数扩展运算符-ES6

  1. 扩展运算符在左边：将剩余数据打包到一个新的数组（注意：扩展运算符只能写在最后）
  1. let [a,...b] = [1,3,5];
  2. //a = 1;
  3. //b = [3,5];
  1. 扩展运算符在右边：将数组中数据解开
  1. let arr1 = [1,3,5]
  2. let arr2 = [2,4,6]
  3. let arr = [...arr1,...arr2]
  4. // arr = [1,3,5,2,4,6]
  1. 扩展运算符在函数的形参列表中：将传递给函数的所有实参打包到一个数组中(注意：扩展运算符只能写在最后)
  1. function getSum(...values){
  2.   // values = [10,20]
  3.   let sum = 0;
  4.   for(let i = 0; i < values.length; i++){
  5.     let num = values[i]
  6.     sum += num
  7.   }
  8.   return sum
  9. }
  11. let res = getSum(10,20) // res = 30

JavaScript-函数形参默认值-ES6

  • 从ES6开始，可以直接在形参后面通过=指定默认值
  1. function getSum(a = 'aa', b = 'bb') {
  2.   console.log(a,b)
  3. }
  5. getSum() // a = 'aa' b = 'bb'
  6. getSum(10,20) // a = '10' b = '20'
  • ES6开始的默认值还可以从其他函数中获取
  1. function getSum(a = 'aa', b = getDefault()) {
  2.   console.log(a,b)
  3. }
  5. getSum() // a = 'aa' b = 'default'
  6. getSum(10,20) // a = '10' b = '20'
  8. function getDefault() {
  9.   return 'default'
  10. }

JavaScript-对象解构赋值-ES6

  • 对象的解构赋值和数组的解构赋值 除了符号不一样，其他的一模一样
  • 数组解构使用[]
  • 对象解构使用{}
  1. let obj = {
  2.   name:'magic',
  3.   age:21
  4. }
  6. let {name,age} = obj // name = 'magic' age = 21
  8. // 左右一样
  9. let {name,age} = {name:'magic',age:21}
  10. // name = 'magic' age = 21
  12. // 左多右少
  13. let {name,age,height} = {name:'magic',age:21}
  14. // name = 'magic' age = 21 height = undefined
  15. let {name,age,height = 1.80} = {name:'magic',age:21}
  16. // name = 'magic' age = 21 height = 1.80
  18. // 注意点：在对象解构赋值中，左边的变量名称必须和对象的属性名称一致，才能解构出数据
  19. let {a,b} = {name:'magic',age:21}
  20. // a = undefined b = undefined
  22. let {age} = {name:'magic',age:21}
  23. // age = 21