5.3 數(shù)組的新方法

• 新增的方法有：

1. Array.from()是內(nèi)置對(duì)象Array的方法，實(shí)例數(shù)組不能調(diào)用
2. includes() 參數(shù)：數(shù)值 -------- 返回值：true/false
3. map()、filter() 參數(shù)：函數(shù)-------- 返回值：數(shù)組
4. forEach() 參數(shù)：函數(shù)-------- 返回值：undefined
5. find() 參數(shù)：函數(shù)-------- 返回值：數(shù)值
6. some()、every() 參數(shù)：函數(shù)-------- 返回值：true/false

5.3.1 Array.from()方法

Array.from()方法可以將可迭代對(duì)象轉(zhuǎn)換為新的數(shù)組。

• 函數(shù)可接受3個(gè)參數(shù)（后兩個(gè)參數(shù)可以沒(méi)有）：
  • 第一個(gè)表示將被轉(zhuǎn)換的可迭代對(duì)象(如果只有一個(gè)參數(shù)就是把形參轉(zhuǎn)變成數(shù)組)
  • 第二個(gè)是回調(diào)函數(shù)，將對(duì)每個(gè)數(shù)組元素應(yīng)用該回調(diào)函數(shù)，然后返回新的值到新數(shù)組，
  • 第三個(gè)是回調(diào)函數(shù)內(nèi)this的指向。

let arr = [1, 2, 3];let obj = {
    double(n) {
        return n * 2;
    }}console.log(Array.from(arr, function (n){
    return this.double(n);}, obj)); // [2, 4, 6]

5.3.2 includes()方法

參數(shù)：數(shù)值 -------- 返回值：true/false
includes()方法------是查看數(shù)組中是否存在這個(gè)元素，存在就返回true,不存在就返回false

let arr = [1,33,44,22,6,9]let ary = arr.includes(22)console.log(ary)

5.3.3 map()、filter() 方法

參數(shù)：函數(shù)-------- 返回值：數(shù)組
map()方法-----要利用原數(shù)組經(jīng)過(guò)運(yùn)算后的數(shù)組，或者從對(duì)象數(shù)組中拿某個(gè)屬性
filter()方法------是將符合挑選的篩選出來(lái)成為一個(gè)新數(shù)組，新數(shù)組不會(huì)影響舊數(shù)組。

<script>
	let arr = [1, 33, 44, 2, 6, 9];

	let newarr1 = arr.filter((v) => v > 10); //newarr1-------[33, 44]
	let newarr2 = arr.filter((v) => v * 2);  //newarr2-------[1, 33, 44, 2, 6, 9]

	let newarr3 = arr.map((v) => v > 10);    //newarr3-------[false, true, true, false, false, false]
	let newarr4 = arr.map((v) => v * 2);     //newarr4-------  [2, 66, 88, 4, 12, 18]</script>

5.3.4 forEach()方法

參數(shù)：函數(shù)-------- 返回值：undefined

forEach() 方法------是循環(huán)遍歷數(shù)組中的每一項(xiàng)，沒(méi)有返回值

find()方法---------是查找數(shù)組中符合條件的第一個(gè)元素，直接將這個(gè)元素返回出來(lái)

let arr = [1,33,44,2,6,9]let a1= []arr.forEach((v, i)=>{
  if (v > 10) {
    a1.push(arr[i])
  }  })console.log(a1) [33,44]let a2= arr.find(v => v > 10)console.log(a2)

5.3.4 find()方法

參數(shù)：函數(shù)-------- 返回值：數(shù)值

find()方法----------是查找數(shù)組中符合條件的第一個(gè)元素，直接將這個(gè)元素返回出來(lái)

let arr = [1,33,44,2,6,9]let a= arr.find(v => v > 10)console.log(a) // 33

5.3.6 some()、every() 方法

參數(shù)：函數(shù)-------- 返回值：true/false

some()方法------找到一個(gè)符合條件的就返回true,所有都不符合返回false。
every()方法------數(shù)組所有值都符合條件才會(huì)返回true,有一個(gè)不符合返回false。

let arr = [1,2,3,4,6,11]let newarr = arr.some(function(v){
  return v > 10})console.log(newarr) 
  //truelet newarr2 = arr.every(function(v){
  return v > 10})console.log(newarr2) 
  //false

5.4 object的新方法

在 ES6 中，添加了Object.is()、Object.assign()、Object.keys()、Object.values()、Object.entries()等方法。

5.4.1 Object.is()

• Object.is()方法用來(lái)判斷兩個(gè)值是否為同一個(gè)值，返回一個(gè)布爾類型的值。

const obj1 = {};const obj2 = {};console.log(Object.is(obj1, obj2)); // falseconst obj3 = {};const value1 = obj3;const value2 = obj4;console.log(Object.is(value1, value2)); // true

5.4.2 Object.assign()

• Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象，并返回目標(biāo)對(duì)象。------難理解看實(shí)例
  對(duì)象合并

const obj1 = { a: 1 };const obj2 = { b: 2 };const obj3 = { a:5 , c: 3 };//對(duì)象合并，把后面對(duì)像合并到第一個(gè)對(duì)象，對(duì)象里相同的屬性會(huì)覆蓋Object.assign(obj1, obj2, obj3);console.log(obj1); // { a: 5, b: 2 , c:3}

5.4.3 Object.keys()、Object.values()、Object.entries()

• Object.keys() 返回對(duì)象所有屬性
• Object.values() 返回對(duì)象所有屬性值
• Object.entries() 返回多個(gè)數(shù)組，每個(gè)數(shù)組是 key–value
  不解釋直接看例子

<script>
	let person = {
		name: "admin",
		age: 12,
		language: ["java", "js", "css"],
	};
	console.log(Object.keys(person)); //[ &#39;name&#39;, &#39;age&#39;, &#39;language&#39; ]
	
	console.log(Object.values(person)); //[ &#39;admin&#39;, 12, [ &#39;java&#39;, &#39;js&#39;, &#39;css&#39; ] ]
	
	console.log(Object.entries(person));    /* [
	                                                     ["name", "admin"],
	                                                     ["age", 12],
	                                                     ["language", ["java", "js", "css"]],
	                                                 ]; */</script>

5.5 對(duì)象聲明簡(jiǎn)寫

<script>
			
      let name =&#39;admin&#39;
      let age = 20
      //es6之前
      // let person={
      //     name:name,
      //     age:age
      // }

      //es6  聲明對(duì)象時(shí)的屬性名與引用的變量名相同就可以省略
      let person={
          name,
          age      }</script>

5.6 …(對(duì)象擴(kuò)展符)

1. 拷貝

<script>
	let person={
		name: "admin",
		age: 12,
		wife:"迪麗熱巴"
	}
	
	let person2={...person}
	
	console.log(person2===person);//false
	console.log(person2);
	//{name: &#39;admin&#39;, age: 12, wife: "迪麗熱巴"}
	</script>

2. 合并對(duì)象

<script>
	const obj1 = { a: 1 };
	const obj2 = { b: 2 };
	const obj3 = { a: 5, c: 3 };
	
    let newObj ={...obj1,...obj2,...obj3}
	console.log(newObj); 
	// { a: 5, b: 2 , c:3}
	</script>

6、函數(shù)方面

6.1 參數(shù)默認(rèn)值

<script>

	// es6之前
	// function add(a, b) {
	//     if(!a) a=0
	//     if(!b) b=0
	// 	return a + b;
	// }
	
	//es6
	function add(a = 0, b = 0) {
		return a + b;
	}
	let x=add(); 
	let y=add(2); 
	let z=add(3, 4); 
          console.log(x,y,z); //x=0, y=2, z=7</script>

6.2 箭頭函數(shù)

箭頭函數(shù)實(shí)現(xiàn)了一種更加簡(jiǎn)潔的書寫方式。箭頭函數(shù)內(nèi)部沒(méi)有arguments，也沒(méi)有prototype屬性，所以不能用new關(guān)鍵字調(diào)用箭頭函數(shù)。

let add = (a,b) => {
    return a+b;}let print = () => {
    console.log('hi');}let fn = a => a * a;
    //當(dāng)只有一個(gè)參數(shù)時(shí)，括號(hào)可以省略，函數(shù)體只有單行return語(yǔ)句時(shí)，大括號(hào)也可以省略。

6.3 箭頭函數(shù)和普通函數(shù)最大的區(qū)別在于其內(nèi)部this永遠(yuǎn)指向其父級(jí)對(duì)象的this。(重點(diǎn))

 var age = 123;
 let obj = {
     age:456,
     say:() => {
         console.log(this.age);  //this指向window
     }
 };obj.say();   //123

7、class（類）

class 作為對(duì)象的模板被引入ES6，你可以通過(guò) class 關(guān)鍵字定義類。class 的本質(zhì)依然是一個(gè)函數(shù)。

1. 創(chuàng)建類

<script>
	class person {
		//關(guān)鍵字聲明方式
		constructor(name) {
                  this.name=name              }           
		say() {
			console.log("hello");
		}
	}

	var p = new person(&#39;p&#39;);
	p.say(); //&#39;hello&#39;
	console.log(p.name);</script>

2. 類的繼承
   類的繼承通過(guò)extends關(guān)鍵字實(shí)現(xiàn)。
   子類必須在constructor中調(diào)用super()

<script>
	class Person {
		constructor(name, age) {
			this.name = name;
			this.age = age;
		}
		say() {
			console.log(this.name + ":" + this.age);
		}
	}
	class Student extends Person {
		constructor(name, age, sex) {
			super(name, age);
			this.sex = sex;
		}
	}
	var student = new Student("admin", 12, "male");
	student.name;   //&#39;admin&#39;
	student.sex;    //&#39;male&#39;
	student.say(); //&#39;ren:12&#39;</script>

8、promise和proxy

講不清楚，等我學(xué)會(huì)了，后面在講

9、模塊化

1. 導(dǎo)入

ES6使用關(guān)鍵字 import 導(dǎo)入模塊（文件），有兩種常用的方式：

import ‘模塊名稱’  from  ‘路徑’；import  ‘路徑’；

2. 導(dǎo)出

ES6 通過(guò) export 和export default 導(dǎo)出模塊。

let name = 'ren',age = 12;export {name,age};
//注意：變量需要用大括號(hào)包裹，然后才能向外輸出

模塊化優(yōu)點(diǎn)

  1.防止命名沖突

  2.復(fù)用性強(qiáng)

10、運(yùn)算符

... 擴(kuò)展運(yùn)算符
可選鏈 ?.
函數(shù)綁定運(yùn)算符::

若本文對(duì)你有幫助 點(diǎn)個(gè)贊 點(diǎn)個(gè)關(guān)注

總結(jié)——ES6思維導(dǎo)圖