学习方法

看千遍不如写一遍

学习内容

  • 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);
}
ES6_ecmascript
//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
    );
  }
ES6_运算符_02

块级作用域

ES6_数组_03

剩余参数 与 展开运算符

剩余参数

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

![image-20210906164414202](../Library/Application Support/typora-user-images/image-20210906164414202.png)

注意事项:

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

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