晓舟报告学习笔记-ES2015基础语法-let,const,函数等

ES2015基础语法

ECMAscript简称ES，是JavaScript的标准

ES6是ECMAScript（ECMA International定义的商标脚本语言规范）的第六版。它于2015年推出。所以ES6又叫ES2015，ES7等后续的版本，我们都可以统称为ES2015+

ES5是ECMAScript（由ECMA International定义的商标脚本语言规范）的第五版。 它于2009年推出。

变量

1 使用Let代替var；

用let 声明变量

2 块级作用域；

let声明变量，变量只在块级作用域下有效

3 不存在变量提升；

{ console.log(a) // 报错，a is not defined let a=2; }

变量是使用，一定要在变量的声明之后

4 不允许重复声明；

多次声明是没有意义的。let 只能声明一次，具有唯一性

总之，就是让变量使用更加规范，严谨。

常量 const

1 定义之后不可以修改；

对于具体数值，不能发生改变，不能重新为这个常量赋值；

对于常量存储的是一个对象，那我们是可以改变这个对象的属性的值的，只是不能再添加其他的函数，或者变量属性，可以对其中的属性值进行赋值修改，例如：

const obj = {name:‘小明’}; obj.name = ‘小红’; console.log(obj.name); //小红

2 不变的值常用常量进行声明；

3 函数表达式可以使用常量；

var fun = function(){ //ES2015之前的函数表达式var 输出hello world

​ console.log("hello world");

​ }

​ const fun1 = function(){ //ES6输出hello world.ES6之后常用const 以及let

​ console.log("hello world");

​ }

​ let fun2 = function(){ //ES6输出hello world

​ console.log("hello world");

​ }

​ fun();

​ fun1();

​ fun2()

4 对象声明可以使用常量

function getObject(){

​ return{name:"anhao"};

​ }

​ const ah = getObject();

​ console.log(ah.name);

5 引入外部模块可以使用常量

const express = require(“express”);

模板字符串

1 支持换行；

//此时使用的是键盘上面的“1”屏旁边的反引号

2 支持嵌入变量 $ 此时的变量的输出索引更加明白清晰

	let year = "2020";
	let month = "10";
	let date = "10";
	let result1 = year +"年"+month+"月"+date+"日";
	console.log("第一种方式输出："+result1);
	let result2 = `${year}年${month}月${date}日`;  //称为模板字符串
	console.log("第二种方式输出："+result2)；

结构赋值

1 数组的结构赋值 相当于对应位置进行赋值

let [n,m] = [10,20];
//同 let n=10; let m = 20;
console.log(m);
console.log(n);

交换两个的值
let [n,m]=[10,20];
[n,m]=[m,n];//交换两个的值

2 对象的结构赋值

​	let {name,age} = {name:"anhao",age:10};

//可以直接输出
console.log(name);

console.log(age);

//通过结果赋值传递参数
	//之前的做法
		// let ah = {name:"anhao",age:10};
		// function getName(obj){
		// 	return obj.name;
		// }
		// let result = getName(ah);
		// console.log(result);

3 通过解构赋值传递参数

//现在可通过结果赋值传递参数的时候，因为只关心Name变量，所以可

//只关注某一个属性,只要里面有name属性
	let ah = {name:"anhao",age:10};
function getName({name}){
	return name;
}
	let result = getName(ah);
console.log(result);

函数进阶

函数表达式没有函数提升的作用，而函数声明的方法有函数提升的作用

//函数声明提升
	let result = fun(2,3);
	console.log(result);
	function fun(n,m){
		return n+m;
	}
	

回调函数

：将匿名函数作为参数产地给另外一个函数，或者方法，例如之前的定时器功能

对于函数表达式,只能先定义函数，然后才能调用函数
第一种是可以的
const  fun = function(n,m){
	return n+m;
}
let result1 = fun(10,20);
console.log(result1);

//函数表达式，当把函数的调用提前的时候，不会主动检测到函数的定义
let result1 = fun(10,20);
console.log(result1);
const  fun = function(n,m){
	return n+m;
}
//此时报错
//数组.html:141 Uncaught ReferenceError: fun is not defined`

函数简写的方式

sayName(){

}

函数进阶本节内容

1 设置默认参数值

function fun(n=10,m=100){ return n+m; }

2 立即执行函数

(function(){ console.log("hello world"); })()

特点：声明之后直接调用，不可以多次调用，某些第三方库实现封装（ES2015有模块化的语法，所以立即执行函数现在也不经常用了）

3 闭包

1 闭包函数：声明在一个函数中的函数，叫做闭包函数。

2 闭包：

内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回之后。（内部函数被返回，外部函数不会被销毁）个人理解，因为内部函数依赖于外部函数，故当内部函数在使用的时候，外部函数不能销毁啦

代码封装的示例

const module = (function(){ let a = 10; let b = 20; function add(){ return a+b; } return add(); })() console.log(module)

此时相当于内部变量a,b是外部不可访问的，但是可以返回一个函数计算的结果，从而实现外部的输出的访问，对内部变量具有一定的保护性。

4 箭头函数

const fun = (x,y)=>{ return x*y; } let result = fun(2,3); console.log(result);

再次简化

const fun = (x,y)=>x*y;

const fun = (x,y)=>(x*y); let result = fun(2,3); console.log(result);

两者的输出结果是一致的

箭头函数和普通函数的this指向不同

1 setInterval指向的this是window对象的

const cat = { name:"miaomiao", sayName(){ let self = this; //这一层的this是指向cat的 window.setInterval(function(){ console.log(self.name); //要想输出miaomiao，this必须指向cat },1000) } }

cat.sayName();

2 箭头函数版

const cat = { name:"miaomiao", sayName(){ window.setInterval(()=>{ console.log(this.name); },1000) } } cat.sayName();

//普通函数的this指向调用该函数的对象。

//箭头函数：在哪里定义，this就指向那个函数，比如此时是在cat中的sayName中定义的，所以指向sayName而不是指向window

将函数作为参数的时候，此时我们常用箭头函数，考虑的是它的This指向功能

name:"miaomiao",
			sayName(){
				window.setInterval(()=>{
					console.log(this.name);
				},1000)
			}
		}
		cat.sayName();

//普通函数的this指向调用该函数的对象。

//箭头函数：在哪里定义，this就指向那个函数，比如此时是在cat中的sayName中定义的，所以指向sayName而不是指向window

将函数作为参数的时候，此时我们常用箭头函数，考虑的是它的This指向功能