學習記錄(day02-Es6模板字符串、解構賦值、箭頭函數、數據結構、for..of遍歷、rest參數、擴展運算符))

Day02(Es6模板字符串、解構賦值、箭頭函數、數據結構、for..of遍歷、rest參數、擴展運算符)

[TOC]

1.1.1 模板字符串

• 模板字符串，用於簡化字符串拼湊

//聲明
var str = ``;
//嵌入變量
var str = `${變量}`;
			// username + "___" + password
			// `${username} ---- ${password}`

• 在模板字符串中，能夠經過${變量}獲取變量的值。

var username = 'jack';
var age = 18;

console.info(`你的姓名是${username} , 你的年齡是${age}`);

1.1.2 解構賦值

• ES6容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）
• ES5得到對象數據的語法，以下：

const people = {
    name: 'lux',
    age: 20
}
const name = people.name;				//ES5寫法
const age = people.age;
console.log(name + ' ‐‐‐ ' + age)

• 對象解構賦值:從一個對象一次性解析出多個屬性給不一樣變量

let {變量1,變量2,...} = 對象;
//例如：
	{} = {}

• 解構的變量名，必須與屬性名保持一致。

let student = {
    name : "張三",
    age : 21,
    course : {
        en : 100,
        math : 99
    }
};

let {name,age} = student;
console.info(name + "_" + age);

let {course : {en , math }} = student;
console.info(en + "_" + math );

• 數組解構賦值：按照數組排序依次賦值

let [變量1,變量2,...] = 數組;
//例如：
	[] = []

let arr = ['安徽','滁州'];
let [province,city] = arr;			//arr[0]賦值給province，arr[1]賦值給city
console.info(province);
console.info(city);

let [pro,cit,cou = '全椒'] = arr;	//arr[3]若是不存在，就使用默認值’全椒’
console.info(province);
console.info(city);
console.info(province);
console.info(cou);

• 常見應用：交換變量

[x, y] = [y, x];

• 常見應用：遍歷Map

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

• 常見應用：模塊內容的提取

const { SourceMapConsumer, SourceNode } = require("source-map");

1.1.3 函數參數名默認值

• 默認值和解構

function 函數名(參數名 = 默認值){

}

function fun1({x = "x1" , y } = {y : "y2"}){
    return [x , y] ;
}
console.info( fun1() );     //[ 'x1', 'y2' ]
console.info( fun1({}) );   //[ 'x1', undefined ] ，
							//{} 覆蓋 {y:"y2"} ,解構默認值，x=x1,y=undefined

• 默認值應用：參數必填

function fun2(args = new Error("參數必須填寫")){
    console.info(args);
}

fun2();
fun2("abc");

• 對象簡寫

  //屬性名和屬性值(變量)相同時，能夠簡寫成一個。注意：不能使用雙引號
  //匿名函數，能夠省略function關鍵字
  var user = {
  	username,			// "username" : username
  	password,
  	show () {
  
  	}
  }

1.1.4 箭頭函數

• 箭頭函數：用於定義匿名函數的一種簡潔寫法。（與Java中Lambda表達式極其類似）
• 基本格式：

(參數1, ….) => {
	//語句
	return 返回值;
}

• 實例：

var fn = function(a,b){         //ES5定義匿名函數的方式
    return a+b;
}

var fn2 = (a,b) =>{             //ES6箭頭函數匿名函數
    return a + b;
}

• 若是隻有一個參數，小括號能夠省略

var fn2_1 = () => {
    console.info("沒有參數");
}
var fn2_2 = (a) => {
    console.info("一個參數");
}
var fn2_1 = (a,b) => {
    console.info("多個參數");
}
var fn2_3 = a => {              		//省略寫法
    console.info("一個參數");
}

• 若是函數體只有一條語句，大括號能夠省略。若是此語句時return語句，return必須省略。

var fn3_1 = (a,b) => {//普通語句
    console.info("普通語句");
}
var fn3_2 = (a,b) => {
    return a+b;//return語句
}

var fn3_3 = (a,b) => console.info("普通語句");	//普通語句的省略寫法

var fn3_4 = (a,b) => a+b; //return語句的省略寫法，必須省略return

• this對象：
• 箭頭函數沒有本身的this，箭頭函數的this不是調用的時候決定的，而是在定義的時候所在的對象就是它的this
• （瀏覽器的環境下）也就是說，箭頭函數的this看外層的是否有函數，若是有，外層函數的this就是內部箭頭函數的this，若是沒有，則this是window。

var name = "rose";
var person = {
	name : 'jack',
	show : function(){
		console.info( this.name );
	},
	show2 : () => {
		console.info( this.name );
	} 
};

person.show();			//輸出jack
person.show2();			//輸出undefined，在Node.js中沒有window對象，沒法得到對應值
				//若是但願得到jack，必須經過person.name方式得到

1.2.1 Map數據結構（Map集合）

• JavaScript的對象（Object），本質上是鍵值對的集合（Hash結構），可是傳統上只能用字符串看成鍵。這給它的使用帶來了很大的限制。
• ES6提供了Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串。

建立
new Map();
設置數據
map.set(k,v);
得到數據
let v = map.get(k)
是否存在
let b = map.has(k)
刪除數據
map.delete(k)

1.2.2 Set數據結構（Set集合）

• ES6提供了新的數據結構Set。它相似於數組，可是成員的值都是<u>惟一</u>的，沒有重複的值。

//Set集合：存儲惟一數據
建立
new Set()
添加數據
set.add(val)

• 過濾數組中重複的數據

var arr = [2, 3, 5, 4, 5, 2, 2];

//方式1
var set2 = new Set();
// 1) 遍歷數組，將數據添加到set
arr.map( s => set2.add(s) );
// 2) 遍歷set集合，添加到新數組
var arr2 = [];
set2.forEach( v => arr2.push(v) );
console.info( arr2 );       //[ 2, 3, 5, 4 ]

//方式2
var arr3 = [ ... new Set(arr) ]
console.info( arr3 );       //[ 2, 3, 5, 4 ]

1.3.1 for...of遍歷

//遍歷數組
for(let a of arr4){       
    console.info(a);
}

//遍歷Map，for…of與解構結合遍歷Map
for(let [k,v] of map4){     
    console.info(`輸出的數據鍵是${k}值是${v}`);
}

//遍歷Set
for(let s of set4){          
    console.info(s);
}

//自定義對象不能遍歷,須要藉助keys轉換成「鍵數組」
for(let key of Object.keys(obj4)){   	
    console.info(`對象的鍵是${key},值是${obj4[key]}`);
}

//也能夠藉助entries轉換成「鍵值對」
for(let [k,v] of Object.entries(obj4)){
    console.info(`entries : 對象的鍵是${k},值是${v}`);
}

JS中已有的遍歷

遍歷方式	描述	實例
for循環遍歷	普通循環，經常使用於處理數組	for (let i = 0;i < array.length;i++){
map()	數組鏈式操做函數	array.map( fn ).xxx()
forEach()	簡化數組、Map、Set的遍歷	xxx.forEach( fn )
for…in	任意順序遍歷一個對象的可枚舉屬性	for(let xx in obj) {}
for…of	不一樣的數據結構提供統一的訪問機制	for(let xx of obj) {}

1.4.1rest參數(形參...)

• rest參數，就是JS的可變參數。在形參列表的最後一位變量前，使用「...」

函數名(參數1, 參數2, …可變)
function add(...num){               	//可變參數num，就是一個數組，運行時存放了全部的實參
    var sum = 0 ;
        num.forEach( i => sum += i);
    return sum;
}

console.info( add(1,2,3) );

function count(args,...other){
    console.info(arguments.length);     //雖有參數的個數，僞數組，不能使用forEach進行遍歷
    console.info(other.length);         //可變參數的個數，真數組，可使用forEach進行遍歷
}
count(1,2,3);

1.4.2 擴展運算符（實參…）

• 擴展運算符（spread）是三個點（...）。它比如rest參數的逆運算，

• 操做數據是數組，將一個數組轉爲用逗號分隔的參數序列。

• 操做數據是對象，取出參數對象的全部可遍歷屬性，拷貝到當前對象之中

• 擴展運算符

//將對象或數組徹底拆分
...數組		--> 多個元素
...對象		--> 多個屬性對

var arr = ['a','b','c'];
function fun3(x,y,z){
    console.info( [x,y,z] );
}

fun3( arr );   //[ [ 'a', 'b', 'c' ], undefined, undefined ]
fun3( ...arr );     //[ 'a', 'b', 'c' ]

let z = { a: 3, b: 4 };
let n = { ...z };				// { a: 3, b: 4 }

• 應用：合併數組

var arr1 = ['a', 'b'];

var arr2 = ['c'];

var arr3 = ['d', 'e'];

//經過 concat函數合併
console.info( arr1.concat(arr2 ,arr3 ) );

//經過擴展運算符合並
console.info( [...arr1 ,...arr2 ,...arr3] );

• 應用：字符串拆分

//經過split拆分字符串
console.info( "abc".split("") );

//經過擴展運算符拆分
console.info( [..."abc"] );

---

平常學習的總結，主要是爲了本身之後看，固然你們有什麼好的建議，歡迎評論留言。