javascript---ES6 二

map的認識

如果鍵名相等，則後面的會覆蓋前面的。如果鍵名是NaN也是會覆蓋。

'use strict'
var obj={
 'name':'leo',//map的key必須是字符串
 'qq':'1405211',
 'full name':'wang san'
};
//obj.name;
//map中的方法
let map=new Map();
map.set(12,'number=12');
console.log(map.get(12));//number=12
console.log(map.size);//1
map.delete(12);
console.log(map.size);//0
console.log(map.has(12));//false 
map.clear();

//map的創建
let map=new Map([
  ['name','leo'],
  ['qq','1223544']
]);
console.log(map);//Map(2) {"name" => "leo", "qq" => "1223544"}
console.log(map.get('name'));//leo
//map遍歷
let keys=map.keys();
//console.log(keys);//MapIterator {"name", "qq"}
for(let k of keys){
 console.log(k);//name  qq
}
let values=map.value();

for(let v of values){
 console.log(v);//leo 1223544
 }
let entries=map.entries();
for(let o of entries){
console.log(o);// ["name", "leo"] ["qq", "1223544"] 和定義時一樣
}
for(let o of map){
console.log(o);//和map定義的一樣
}
var me={
name:'wang'
};
map.forEach(function(v,k){
  console.log(this.name,v,k)//wang leo name   wang 1223544 qq
},me);//me是綁定的this指向
console.log(Set.prototype[Symbol.iterator]===Set.prototype.values);//true 遍歷
console.log(Map.prototype[Symbol.iterator]===Map.prototype.values);//false
console.log(Map.prototype[Symbol.iterator]===Map.prototype.entries);//true

數組的Array.from的認識

Array.from():將類數組轉化爲數組。也可以將NodeList轉變爲數組。

var set=new Set([1,2,3,3]);//{1,2,3}
var arr=Array.from(set);//[1,2,3]

Array.of():通過多個參數 生成 數組

var arr= new Array(12);//長度爲12的空數組
var arr=Array.of(12);[12] //長度爲1 

原型上的方法
[].copyWithin(target,start,end);通過自身數據（start end） 在指定位置（target） 替換數據

var arr=[1,2,3];arr.copyWithin(0,1,2)// [2, 2, 3] 把1位置上的數字替換到0這個位置上
var arr=[1,2,3,4,5,6,7];arr.copyWithin(1,5,7);//[1,6,7,4,5,6,7]

[].find:遍歷 找到一個符合條件就返回該項，沒有就返回undefined
[].fill:填充

var arr=[1,2,3,4,5,6,7];
//arr.fill(10);//[10,10,10,10,10,10,10]
arr.fill(10,2,5);//[1,2,10,10,10,6,7] 2-5中間替換掉

對象的認識

Object.is({},{})//false {}==={} false
Object.is(NaN,NaN);//true NaN===NaN false
Object.is(+0,-0);//false +0===-0 true

'use strict';
//Object.assgin中第一個參數{}===它所創建對象obj
var obj=Object.assign({},{name:'leo'});//分配 將第二個參數裏的可枚舉的屬性拷貝到第一個參數中
console.log(obj);//{name: "leo"};

遍歷對象屬性

'use strict';
class A{
constructor(){
this.name='leo';
}
getName(){//不可枚舉、原型上

}
}
class B extends A{
constructor(){
 super();
 this.age=22;
}
getAge(){//不可枚舉、原型上

}
[Symbol('fullname')](){
}
}
B.prototype.getClass=function(){}
var b=new B;
//能得到自身可枚舉的屬性,也得不到原型鏈上的屬性。得不到Symbol屬性
console.log(Object.keys(b));//name age 
//自身的全部屬性 包括不可枚舉的。得不到symbol屬性
console.log(Object.getOwnPropertyNames(b));//name age

//[Symbol('fullname')] 可以得到自身的symbol屬性包括不可枚舉的。
console.log(Object.getOwnPropertySymbols(B.prototype));//Symbol(fullname)
//獲取自身和原型上的可枚舉屬性
for(let k in b){
console.log(k);//name age getclass 
}
//判斷是否可枚舉 false爲不可枚舉的屬性 反之可枚舉
console.log(Object.getOwnPropertyDescriptor(B.prototype,'getAge'))//false 

setPrototypeof的認識

Object.setPrototypeOf(person1,person);//person1.__proto__===person
var proto=Object.getPrototypeOf(person1);
proto===person1.__proto__;//ture

字符串的方法和模板

var str='你好啊';
console.log(str.includes('好啊'));//true
console.log(str.startsWith('好啊'));//false 好不是起始位置
console.log(sre.endsWith('好啊'));//true
console.log(str.repeat(3));//你好你好你好 重複三次
//字符串模板
//es5
let html='<div>'+
'<span></span>'+
'</div>';
//es6
let name='leo'
var html2=`<div>
<span>${name}</span>
</div>`;

箭頭函數

//普通函數
setTImeout(function(){
},1000);
//箭頭函數
setTimeout(()=>{},1000);
//箭頭函數也普通函數的區別
//1.沒有自己的this,this是繼承函數所處上下文的this，也就是函數執行環境的this
//2.沒有arguments
//3.沒有辦法new實例化，即不能成爲構造函數
var fn=n=>n*2;//默認放回n*2
var fn=n=>{
 return n*2;//需要return才能返回
}

變量的數組解構賦值

//安裝babel
//之前的賦值
var arr=[1,2,3];
var a=arr[0];
var b=arr[1];
var c=arr[2];
//es6的賦值
var [a,b,c]=arr;
console.log(a,b,c);//1,2,3
//多維數組賦值 結構一樣
let arr=[22,[5,8],11];
let [a,[b,c],d]=arr;
console.log(a,b,c,d);//22 5 8 11
//變量的交換
let x=11;
ket y=12;
[y,x]=[x,y];
console.log(x,y);//12,11
//不完全解析
let arr=[22,[4,5],11];
let [a,[,c],d]=arr;
console.log(a,c,d);//22,5,11
//不能被數組解析的值
//NaN、undefined、null、{}
//Set解析賦值
let [x,y]=new Set([22,23]);
console.log(x,y);//22 ,23
//...可以轉化爲數組  只能放在最後面使用
var [x,...y]=[1,2,3,4,5,6];//1,[2,3,4,5,6]

變量的對象解構賦值

//安裝babel
'use strict';
//name:name===name
var {name}={name:'leo',age:22};
console.log(name);//leo
//模式（右邊有大括號）與變量（右邊無大括號{}）
let obj={
a:{
b:{
c:123
}
}
};
let {a:{b:{c}}}=obj;
console.log(c);//123 如果一直往後解析只能解析c 。a b是不能當做變量打印出來的，只能當做模式
//默認值 undefined就會取默認值
//null，0 不會設置默認值
let [x=15,y]=[undefined,12];
console.log(x,y);//15,12
//字符串
var [a,b,c]='hello';
console.log(a,b,c);//h e l

proxy攔截對象屬性的操作

//火狐
'use strict';
var obj={name:'leo'};
//通過proxy來操作對象屬性
var procy=new Proxy(obj,{
 get:fucntion(target,key){
 return 'no';
 },
 set:function(target,key,value){
  Reflect.set(target,key,value);//設置reflect纔會返回obj的默認值===target[key]=value;
},
deleteProperty:fucntion(target,key){
 Reflect.deleteProperty(target,key);//設置後纔會刪除obj裏的name屬性===delete target[key]
}
})
console.log(proxy.name);//no
proxy.name='zhangsan';
delete proxy.name;//undefined
console.log(obj.name);//zhangsan

模塊化

大型項目，一個js文件就是一個模塊，實現模塊複用。
在模塊內可以修改，模塊外部不可以進行修改,通過default導出的是一個值，而不是引用。（沒辦法通過模塊自身修改影響使用模塊中的值）。
使用jspm，實現模塊化。

//mo.js 模塊
 var name='leo';
function changeName(_name){
name=_name;
};
setTimeout(function(){
name='zhangsan';
},100)
export {name,changeName};//不能在函數作用域定義
//導入模塊 import * from './mo.js' *全部導入、as重命名、* as obj附在obj上
import {name as myname,changeName} from './mo.js'
console.log(myname);//leo
setTimeout(function(){
console.log(myname);//zhangsan
}，2000)