ES6-ES11相关

Posted 2022-03-09 老张在线敲代码

学习ES新特性的原因

语法简介，功能丰富
前端框架上开发应用比较多
前端岗位要求

ES6兼容性查看

声明变量

let方式

let声明不允许重复声明一个变量

let a = '小明'；	
let a = '小刚'；		//报错

let声明的变量会产生块级作用域,

	let a = '小李'

console.log(a)
//作用域外无法访问作用域内变量

let声明不存在变量提升

console.log(b)
var b = 2		//undefined
变量提升实际执行过程
var b;
console.log(b);
b = 2;

console.log(a)
let a = '111'	//不存在提升，报错

let声明不影响作用域链

	let a = '北京';
	function()
		console.log(school)/7
    	
	fn();//北京

const方式

const声明的是常量
const声明一定要赋初始值
常量的值一旦声明就不可修改

const a = 412;
a = 100;
console.log(a)		//报错Identifier 'a' has already been declared

const声明也会产生块级作用域

对数组或者对象的元素修改不算做对常量的修改

const arr = ['1','2','3'];
arr.push('4');
console.log(arr)	//123

解构赋值

数组解构赋值

const arr = ['1','2'];
let [one,two] = arr;
console.log(one,two)	// 1 2

const [a,b] = [1,2]
console.log(a,b)		//1 2 

对象解构赋值

	const people = 
			name:"小明",
			age:23,
			jiNeng:function()
				console.log('我会唱歌')
			
		;
		let name,age,jiNeng = people;
		//解构之后节省了代码
		jiNeng()//我会唱歌
		//解构赋值之前需要people.jiNeng();

模板字符串

let string = `我是一个字符串`;
consooe.log(string);

模板字符串中可以直接换行

let string = `<div>
				<p>11<p>
			 </div>`;
consooe.log(string);

模板字符串使用变量拼接方式

传统方式
let a = '111';
let b= a+'是最帅的'
console.log(b)

模板字符串方式
let a = '小明';
let b= `$a是最帅的`
console.log(b)

对象简化写法

简化的第一处

let name = '小明';
let fn = function()
	console.log('lalal')

//简化前
const obj = 
	name:name,
	fn:fn

console.log(obj)
//简化后
const obj = 
	name,
	fn

console.log(obj)

简化的第二处

const fn = 
	name,
	fn,
	jiu:function()
		console.log('我是简化前的')
	,
	xin()
		console.log('我是简化后的')
	

console.log(fn.jiu)
console.log(fn.xin)

箭头函数

//传统方式
let fn = function(a,b)
	return a+b;

let result = fn(1,2);
console.log(result)

//箭头函数方式
let fn = (a,b) =>
	return a+b

let result = fn(1,2)
console.log(result);

箭头函数中this始终是指向函数声明时所在作用域下的this，无论做出任何更改this始终静态的

//普通函数
function fn()
	console.log(this.name)

//箭头函数
let fn1 = () =>
	console.log(this.name)

window.name = "我指向window";
const obj = 
	name:"我指向对象"

//改变俩个函数的this指向
fn.call(obj)	//我指向对象
fn1.call(obj)	//我指向window
//箭头函数的this还是window上的name，普通函数的this已经成了obj下的name

箭头函数不能作为构造函数实例化对象

let Person = (name,age)=>
	this.name = name;
	this.age = age;

let a = new Person('小名',23)
console.log(a)
// Person is not a constructor

不能使用arguments参数,用…rest替代，用于获取函数的实参

let fn = (a,b,c) =>
	console.log(arguments)

fn(1,2,3)
//arguments is not defined

let fn = (...rest) =>
	console.log(rest)

fn(1,2,3)
//[1,2,3]

箭头函数的简写情况，当参数只有一个，当执行语句只有一条

let fn = a => a*a
console.log(fn(4))

箭头函数实例及使用场景
使用场景一 ：this指向问题

//传统方式
let btn = document.getElementById('btn');
btn.addEventListener('click',function()
	//保存this的值
	let _this = this
	setTimeout(function()
		//此时的this指向window
		console.log(this)
		//此时_this就是指向btn了
		_this.style.background = 'pink'
	,2000)
)

//箭头函数方式
let btn = document.getElementById('btn');
btn.addEventListener('click',function()
	setTimeout(()=>
		console.log(this)
		//箭头函数的this指向的是事件声明时的作用域
		this.style.background = 'pink'
	,2000)
)

使用场景二：打印数组中能被二整除的数

//传统写法
		const arr = [1,6,5,8,9,100];
		const result = arr.filter(function(item)
			if(item%2===0)
				return true
			else
				return false
			
		)
		console.log(result)

//箭头函数写法
		const arr = [1,6,5,8,9,100];
		const result = arr.filter(item => item % 2 ===0);
		console.log(result)

参数默认值（初始值）

带有默认值的形参一般位置都比较靠后（规范）

function add(a,b,c=10)
	return a+b+c;

let result = add(1,2)
console.log(result)

参数默认值可以与解构赋值配合

function content(host,port='3307')
	console.log(host)
	console.log(port)

content(
	host:"localhost",
	port:3306
	//post这里赋值了，覆盖掉了传参时的3307初始值
)

扩展运算符

…能够将【数组】转换为逗号分割的【参数序列】