ES6详解

谁借莪１个温暖的怀抱￠ 2023-07-17 09:59 24阅读 0赞

首先唠唠ES的发展史，ES6为ECMAScript的六个版本。ESMAScript是一个语言的标准。  
ESMAScript+WEBapi(DOM、BOM)=JavaScript  
ActionScript+WEBapi(DOM、BOM)=flash

<table> 
 <thead> 
  <tr> 
   <th>年份</th> 
   <th>版本</th> 
   <th>事件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1996</td> 
   <td>ES1.0</td> 
   <td>Netscape公司把js交个了ECMA的组织，es正式出现</td> 
  </tr> 
  <tr> 
   <td>2007</td> 
   <td>ES4.0</td> 
   <td>由于更新过大，未被认同，被废除</td> 
  </tr> 
  <tr> 
   <td>2008</td> 
   <td>ES3.1</td> 
   <td>是目前大量使用的，是严重缩水的4.0，名字Harmony</td> 
  </tr> 
  <tr> 
   <td>2015.06</td> 
   <td>ES6.0</td> 
   <td>ES6正式发布 又称 ES2015</td> 
  </tr> 
  <tr> 
   <td>2016</td> 
   <td>ES7</td> 
   <td>就不在使用版本号了，而是使用年份的代号了</td> 
  </tr> 
 </tbody> 
</table>

标准委员会最终决定，标准在每年6月正式发布并作为当年的正式版本，接下来的时间里就在此版本的基础上进行改动，直到下一年6月草案就自然变成新一年的版本，这样一来就无需以前的版本号，只要用年份标记即可。ECMAscript 2015是在2015年6月发布ES6的第一个版本。ECMAscript 2016是ES6的第二个版本、以此类推，…下面步入正题。

### let声明变量 ###

let,const用于声明变量，用来替代老语法的var关键字，与var不同的是，let/const会创建一个块级作用域（通俗讲就是一个花括号内是一个新的作用域）  
总结：  
1.let声明的变量不会挂在window中，不会造成全局变量的污染  
2.新增了一个块级作用域一个\{\}为一个作用域,以前只有函数作用域，全局作用域  
3.let不允许重复声明  
4.let不会声明提前（只是人为看到的效果，实际上是有提前的，提前在临时性的死区中）

console.log(num)
    	let num = 100;
    	console.log(num)
    //报错：Uncaught ReferenceError: Cannot access 'num' before initialization

### const声明常量 ###

1.不允许被修改，否则会报错（不允许改变内存空间的地址）  
2.const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址

const
    		let a = 10;
    		a = 100;
    		console.log(a);
    		
    		const obj = { };
    		obj.name = "jack";
    		console.log(obj)
    		const abc;
    		console.log(abc)

### 字符串模板 ###

模板字符串是增强版的字符串，用反引号（\`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 模板字符串中嵌入变量和函数，需要将变量名写在$\{\}之中

//字符串换行
    let str = `今天 居然 停电了`
    console.log(str)
    const a = 10;
    //ES5
    var string = '这个数字是'+ a;
    //ES6
    var string = `这个数字是${ a}`;

### …运算符 起到参数收集作用 ###

1.  收集符只能出现一次
2.  一个函数，剩余参数收集只能在最后一个形参

//收集、收集参数只能放在最后一个参数
    	function num (a,...arg){ 
    		console.log(a,arg);
    	}
    	num(1,2,3,4)
    //展开
    	let arr = [1,2,3];
    	console.log(...arr);
    	let arr2 = [4,5,6];
    	let newArr = [...arr,...arr2];
    	console.log(newArr)
    // 浅克隆
    	let arr1 = [1,2,3,4,{ name:"jack"}];
    	let arr2 = [...arr1];
    	console.log(arr1,arr2);
    	console.log(arr1 == arr2);
    	console.log(arr1[4] == arr2[4]);

### 函数 ###

1.  ES6中参数可以加默认值

function fun (a,b=10,c=20){ 
    	return a+b+c;
    }
    console.log( fun(30) )//60
    console.log( fun(10,undefined,30) )//50
    //null在数学中，默认的为0，不要传递null
    console.log( fun(10,null,30) ) //40

1.  创建一个元素，插入到某个元素中  
    name：创建的标签，大多数为div  
    container:需要往那个元素中插入，大多数为container、contetn、内容

function createElement(name = 'div',container = getContainere(),content){ 
    	const ele = document.createElement(name);
    	if(content){ 
    		ele.innerHTML = content
    	}
    	container.appendChild(ele)
    }
    function getContainer(){ 
    	return document.getElementById("container");
    }
    createElement(undefined,undefined,"demo")

## 箭头函数 ##

### 箭头函数的写法 ###

1.  如果参数只有一个，可以省略小括号

const fun = num => { 
    	console.log(num)
    }
    fun(100)

1.  如果箭头函数只有一条返回语句，可以省略花括号，可以省略return. 参数 => 返回值

const fun1 = num => num%2 !== 0;
    console.log(fun(3))

3.如果返回值是一个对象的时候，就会认为成函数体，把返回值变成表达式的形式

const obj = (a,b) => ({ 
    	a : a,
    	b : b
    })
    console.log( obj(1,2) )

### 与普通函数的区别 ###

1.箭头函数中没有this、argument、new、target，如果要强行使用，则指向函数外层对应的this，argument，new.target

const fun = () => { 
    	console.log(this)
    }
    fun() //window

1.  箭头函数没有原型，所以占用的空间非常小，不能当成构造函数使用

### 应用场景 ###

1.  临时使用的函数，并不会刻意的去调用。（如：1.异步的事件处理 2.事件处理）
2.  继续去沿用外层的this
3.  对象的属性不要去用箭头函数，除非是特别的需求
4.  数组方法的时候，保证代码的简洁

## this指向问题 ##

1.对象调用函数，this指向对象  
2.直接调用函数，this指向window  
3.如果使用了new关键字，this指向新创建的对象  
4.如果使用apply、call、bind、this指向绑定的数据  
5.如果是DOM事件函数，this指向事件源

## 对象 ##

1.  属性简写
2.  方法简写

function fun(name,age,sex){ 
    	return{ 
    		//属性简写
    		name,
    		age,
    		//方法简写
    		sex(){ 
    			console.log(this.name,this.age)
    		}
    	}
    }
    const user = fun("t
    Tom","16")
    console.log(user);
    user.sex()

1.  计算属性名

const prop1 = "name";
    const prop2 = "say";
    const user = { 
    	[prop1] : "Tom",
    	[prop2](){ 
    		console.log(this[prop1);
    	}
    }
    console.log(user[prop1])
    user[prop3]()

### 新增API ###

1.  is()

//基本上和===一样，除了一下两种情况
    console.log(NaN === NaN);//false
    console.log(+0 === -0)//true
    console.log(Object.is(NaN,NaN));//false
    console.log(Object.is(+0,-0));//false
    console.log(Object.is({ },{ }));//false

1.  assign()用于混合对象，带浅克隆

const obj1 = { 
    		a : 123,
    		b : 456,
    		c : "abc"
    	}
    	const obj2 = { 
    		a : 789,
    		e : "asdf"
    	}
    	// 将2的内容覆盖到1 会对1产生影响
    	const obj = Object.assign({ },obj1,obj2)
    	console.log(obj)//{a: 789, b: 456, c: "abc", e: "asdf"}
    	console.log(obj == obj1)//false

1.  getOwnpropertyNames()枚举的顺序，返回一个数组，枚举出来对象的属性，顺序是由厂商规定的。先排数字，升序，再排其他
2.  setPrototypeOf(),设置某个对象的隐式原型 **proto**

const obj1 = { 
    	a : 1
    	}
    	const obj2 = { 
    		b : 2
    	}
    	//obj1.__proto__ = obj2 必须要通过构造函数来完成
    	// Object.setPrototypeOf(obj1,obj2)
    	console.log(obj1)

### 构造函数 ###

1.类的声明不会被提升，和let constf一样，有临时性死区  
2.类的所有代码都在严格模式中执行  
3.类的所有方法都是不可枚举的  
4.类的所有方法都无法当成构造函数直接使用  
5.类的构造器必须使用new，来调用