JavaScript第16天_学习笔记

ES6语法

ES6定义变量

以前的定义变量方式var
ES6定义变量方式有两个

1. 使用了let，const(常量)这二者定义的变量不能使用重复的变量名
   例如：

   let a = 10;
   let a = 20; 	//报错
   const b = 10;
   const b = 20;	//报错 
   var c = 10;
   var c = 20;		//覆盖
   

2. let,const关键字声明的变量没有预解析
   例如：

   console.log(a);//undefined
   var a = 10;
   
   //没有预解析
   let a = 10;
   console.log(a);//10
   
   //没有预解析
   console.log(a);//报错，这个时候变量a还没有定义
   const a = 10;
   

3. 使用let，const关键字声明的变量有块级作用域
   例如：

   <ul>
       <li>第1个</li>
   	<li>第2个</li>
    	<li>第3个</li>
   	<li>第4个</li>
   	<li>第5个</li>
   </ul>
   

   //let 块级作用
   let lis = document.querySelectorAll("ul li")
   for(let i = 0 ; i < lis.length ; i++){//用var定义变量i的话，下面的输出的始终是5
   	lis[i].onclick = function(){
       console.log(i);//而使用let，有块级作用域，这样的话，每点击一次，就会生成一个块，在一个块中将i即点击的li对应的下标输出以后才进入下一次循环
   	}
   }
   

4. let与const的区别
   我们一般认为：
   – 使用let关键字声明的变量，叫变量，变量的值可以参考for循环中的变量，会随着循环不断发生改变
   –使用const关键字声明变量，如同单词意思一样叫常量，即不可改变的量
   例如：

   let a = 10;
   a = 20; //将let声明的这个变量的值进行修改了
   
   //常量的值不可改变
   const a = 10;
   a = 20;
   console.log(a);
   

   注意： 变量初始话可以不赋值，但是常量的初始化必须要赋值

模板字符串

1. 使用撇号声明字符串`我两端的符号就是撇号`
2. 可以换行使用
3. 在字符串当中可以声明变量

箭头函数

1. 箭头函数是对匿名函数的一个进化
   例如：

   	const fn = function(){
       console.log("这就是一个没有名字的函数");
   }
   /*
       1. 将function关键字给去掉
       2. 将function使用一个箭头替换掉
       3. 将=>写到()后面
   */
   const fn = () =>{
       console.log("这是一个箭头函数");
   }
   

2. 箭头函数的特性1

• 参数

  • 如果箭头函数只有一个的参数的时候，那么箭头函数的小括号()可以省略
  • 如果箭头函数没有参数，或者有两个或两个以上的参数，那么需要写小括号()

  例如：

  //两个或两个以上的参数，要加()
  const fn = (a,b,c) =>{
  	console.log(a,b,c);
  }
  
  //只有一个参数，那么可以省略()
  const fn = a =>{
  	console.log(a);
  }
  //没有参数，需要加上()
  const fn = () =>{}
  

3. 箭头函数的特性2
   在此前的 if 语句中，在 if 语句后面只有一句代码的时候，可以省略大括号不写，箭头函数同理。
   函数体即大括号里面的代码，只有一句代码的时候，可以省略大括号，同时省略return
   例如：

   //获取这个数组所有的奇数
   const arr = [1,2,3,4,5,6,7,8]
   //普通的匿名函数
   const arr1 = arr.filter(function(item){//过滤
   	return item % 2 === 1//返回数组中的奇数
   })
   //改成箭头函数，省略function关键字
   const arr1 = arr.filter((item) => {
   	return item % 2 === 1
   })
   //省略大括号以及return关键字,因为只有一个参数item，因此参数item括号省略
   const arr1 = arr.filter(item => item % 2 === 1)
   

4. 箭头函数中的this问题
   箭头函数没有自己的this，他的this是沿着作用域链的形式往外找
   例如：

   <button>点我</button>
   

       const btn = document.querySelector("button")
       btn.onclick = function(){
           setTimeout(function(){
               console.log("----------------");
               console.log(this); //window
               console.log("----------------");
           })
           //箭头没有自己的this,箭头函数当中this是沿着作用域链的形式往外找
           setTimeout(()=>{
               console.log("+++++++++++++++++");
               console.log(this);//<button>点我</button>
               console.log("+++++++++++++++++");
           })
       }
   

5. 对象的简写
   ES6提供一个语法：可以简写对象的属性与属性值
   当对象的key，value一样的时候，可以省略：后面的内容
   例如：

       const name = "十九"
       const age = 18;
       const gender = "男"
       //正常写法
       const obj1 = {
           name: name,
           age: age,
           gender: gender,
           eat:function(){
           	console.log("吃吃吃")
           }
       }
       console.log(obj1)
       obj1.eat()
       //进行简写
       const obj2 = {
           name,
           age,
           gender,
           //方法可以简写成
           eat() {
               console.log("吃的简写")
           }
       }
       console.log(obj2)
       obj2.eat()
   

解构赋值

简化代码

1. 数组的解构
   语法：

   const arr = [1,2,3,4]
   const [a,b,c,d] = arr;
   console.log(a,b,c,d);
   

2. 对象的解构
   语法：

   const obj = {username:"十九",age:18,gender:"男"}
   const {username:account,age,gender} = obj;//给username取了一个别名account
   console.log(acount,age,gender)
   

扩展运算符

1. 扩展数组
   语法：

   const arr = [1,2,3,4,5,6]
   console.log(arr)
   console.log("----------")
   console.log(...arr)
   consoel.log("++++++++++")
   console.log([...arr])
   

2. 扩展对象
   语法：

   //一般用于合并对象，也可以合并数组
   const obj1 = {
   	name1:"十九",
   	age1:18,
   	address:{
   		place1:"厦门",
   		place2:"深圳"
   	}
   }
   const obj2 = {
   	name2:"X.I.X",
   	age2:18
   }
   console.log({...obj1,...obj2})
   

3. 合并数组
   语法：

   const arr1 = [1,2]
   const arr2 = [3,4]
   console.log = ([...arr1,...arr2])
   

参数默认值

1. 简单的回顾
   arguments => 用来干嘛的？
   回顾：

   function fn(){
   	console.log(arguments)
   }
   fn(1,2,3,4,5,6)
   

2. 参数

• 剩余参数
  例如：

  function fn(a,...rest){	//1传给a，剩余的传过来给rest
  	console.log(rest)
  }
  fn(1,2,3,4,5,6)
  

• 参数默认值
  语法：

  function fn(a = 10 , b = 20){
  	console.log(a,b)
  }
  fn()	//不传值的情况下，就使用上面的默认值
  fn(1,2)		//传值的情况，就输出传入的值
  

ES6的模块化

方式一：单个暴露

1. 目前的模块化必须要安装服务器 live server => 目的就是以服务器的方式启动
2. 在header.js文件中将JS文件暴露出去
   export default []
export default {}
   3.在login.js文件中将JS文件引入进来
   import 名字 from '暴露出来的文件名'
3. 在HTML中引入login.js文件
   <script src:"login.js文件的路径" type:"module"></script> --module(模块)

方式二：批量暴露

1. 目前的模块化必须要安装服务器 live server => 目的就是以服务器的方式启动
2. 将我们的JS文件暴露出来
   如下图文件A.js
3. 将我们JS文件引入进来
   如下图文件B.js
4. 在HTML当中引入JS文件
   如下图文件index.html

• 我们如果不想使用这个名字的话
  如下图文件index.html
  import {a,fn,obj} from './A.js'
  我们使用别名(小名) as
  import {a as num,fn,obj} from './A.js'
  

ES6的类

类是一类事物的统称
对象是一类事物中某一具体的体现
例如：

人 => 一个类
某个叫十九的男性 => 对象

ES6 引入了类的概念
语法：

//创建一个类 class 类名{}
class Person{
//写属性的地方
	constructor(name,age,gender){
		this.name = name;
		this.age = age;
		this.gender = gender;
	}
	//写方法
	eat()(
		console.log("吃")
	)
}
//创建对象
const p1 = new Person("张三",18,"男");
const p2 = new Person("文渊",18,"男");
console.log(p1);
console.log(p2);