ES6
箭頭函數(shù)甲锡、this指向問題
function foo(a,b){
return a+b;
}
console.log(3,2);
//用箭頭函數(shù)簡(jiǎn)寫
let foo = (a,b) => a + b;
console.log(foo(13,2));
箭頭函數(shù)就是用來承接一堆代碼的
箭頭函數(shù)更加輕量級(jí)，性能會(huì)更好
-
箭頭函數(shù)特性
不支持arguments關(guān)鍵字
this指向生而固定
箭頭函數(shù)在哪聲明唯笙，this就指向哪里
let obj = { fn : () => { console.log(this,"外部函數(shù)指向window"); //Window "外部函數(shù)指向window" let foo = () => { console.log(this,"內(nèi)部函數(shù)指向window"); //Window "內(nèi)函數(shù)指向window" } foo(); }, //這里如果改成以下形式會(huì)對(duì)外部和內(nèi)部函數(shù)的this指向造成影響 //第二種 // fn : function(){ // console.log(this) // //{fn: ?, fnn: ?}fn: ? ()fnn: ? ()__proto__: Object // let foo = () => { // console.log(this) // //{fn: ?, fnn: ?}fn: ? ()fnn: ? ()__proto__: Object // } // } //第三種 // fn : function(){ // console.log(this) // //{fn: ?, fnn: ?}fn: ? ()fnn: ? ()__proto__: Object // let foo = function(){ // console.log(this) // //Window // } // } fnn : function(){ console.log(this); }.bind(this) //bind()方法創(chuàng)建一個(gè)新的函數(shù)，在調(diào)用時(shí)設(shè)置this關(guān)鍵字為提供的值。 } obj.fn(); obj.fnn();分析：
第一種情況下的this指向箭頭函數(shù)聲明處
fn : () =>{}fn是全局變量酱畅，所以this指向window解虱，而第二個(gè)this則跟第一個(gè)this指向相同攘须。第二種情況下
fn : function(){}此時(shí)沒有了箭頭函數(shù)，所以第一個(gè)this指向調(diào)用其所在函數(shù)的對(duì)象fn殴泰，第二個(gè)this則也指向fn于宙。第三種情況下第一個(gè)this指向fn，第二個(gè)this指向window悍汛。
箭頭函數(shù)的this指向是聲明箭頭函數(shù)時(shí)的this指向
this指向調(diào)用其所在函數(shù)的對(duì)象捞魁，而且是離誰近就是指向誰；構(gòu)造函數(shù)下离咐，this與被創(chuàng)建的新對(duì)象綁定谱俭；DOM事件，this指向觸發(fā)事件的元素宵蛀；內(nèi)聯(lián)事件分兩種情況昆著，bind綁定，call & apply 方法等
構(gòu)造函數(shù)
function foo(){
console.log("helllo");
}
var value = foo(); //函數(shù)
var obj = new foo(); //構(gòu)造函數(shù)
console.log(value,obj)
函數(shù)返回值 => return 關(guān)鍵字返回的內(nèi)容
0構(gòu)造函數(shù)返回值 => 根據(jù)構(gòu)造函數(shù)構(gòu)造的對(duì)象
foo()注意 箭頭函數(shù)不能當(dāng)作構(gòu)造函數(shù)
some( )方法
var arr = [1,23,4,5,3,2,42];
var res = arr.some(item => >6);
console.log(res);
//true
some( )方法測(cè)試是否至少有一個(gè)元素通過有提供的函數(shù)實(shí)現(xiàn)的測(cè)試术陶。
注意 對(duì)于放在空數(shù)組的任何條件凑懂，此方法返回false。
ES6中的字符串拼接
//es6中字符串拼接用${變量名}的方式引用變量
//``里的`要用\`轉(zhuǎn)義
var value = "hello world";
var html = `<ul>
<li>${value}</li>
<li>\`</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>`
//ES6中``內(nèi)的所有東西都被解析為字符串梧宫，相對(duì)于ES5的字符串拼接來說更為方便
模板引擎
數(shù)據(jù)驅(qū)動(dòng)思想
目標(biāo)：只更改數(shù)據(jù)接谨，可以得到不同的頁(yè)面渲染。
維護(hù)的內(nèi)容：1.html塘匣，js脓豪，css => json數(shù)據(jù)
<script type="text/html"> 的作用是存儲(chǔ)字符串模板
//如何獲取模板字符串
//1.放在script => text / html 之中的字符串
//2.定義語法規(guī)則(artTemplate / ejs)
//2.1 JS代碼放在哪里？
//2.2 輸出的變量放在哪里忌卤？
//3.區(qū)分正則
//3.1 輸出語句正則 => /<%=(.+?)%>/g
//3.2 JS語句的正則 => /<%([\s\S]+?)%>/g
//[\s\S] => 可以匹配 \n \r 特殊字符的寫法
//4.拼接
//設(shè)：x,y x => 輸出語句; y => js語句;
//4.1 echo函數(shù) => 字符串拼接函數(shù);
var html= "";
function echo(arg){
html += arg;
}
<ul>
y
<li> x </li>
y
</ul>
//x => <li>`) \n echo( x ); \n echo(`</li>
// y => `); \n y \n echo ('
//5. eval => 用eval將處理好的代碼進(jìn)行執(zhí)行扫夜、拼接字符串得到的結(jié)果
ES6中的新工具
數(shù)組、對(duì)象的擴(kuò)展
Array.from()方法從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。
console.log(Array.from('foo'));
//Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
//Array [2, 4, 6]
Object.assign ：一個(gè)向前合并對(duì)象的方法：
Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象笤闯。它將返回目標(biāo)對(duì)象现拒，Object.assign方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象望侈。
var obj1 = {a : 1,b : 2,c : 3}
var obj2 = {d : 1,e : 2,f : 3}
var obj3 = Object.assign(obj1,obj2);
//將obj2復(fù)制到obj1后面印蔬，obj1成為一個(gè)新的對(duì)象數(shù)組，obj2不變
console.log(obj3 , obj1)
Object.keys(obj)ES2017 引入了跟Object.keys配套的Object.values和Object.entries脱衙，作為遍歷一個(gè)對(duì)象的補(bǔ)充手段侥猬，供for...of循環(huán)使用。
let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
console.log(key);
// 'a', 'b', 'c'
}
for (let value of values(obj)) {
console.log(value);
// 1, 2, 3
}
for (let [key, value] of entries(obj)) {
console.log([key, value]);
// ['a', 1], ['b', 2], ['c', 3]
}
Array.prototype.flat()用于將嵌套的數(shù)組“拉平”捐韩，變成一維的數(shù)組退唠。該方法返回一個(gè)新數(shù)組，對(duì)原數(shù)據(jù)沒有影響荤胁。
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
//flat()默認(rèn)只會(huì)“拉平”一層瞧预，如果想要“拉平”多層的嵌套數(shù)組，可以將flat()方法的參數(shù)寫成一個(gè)整數(shù)仅政，表示想要拉平的層數(shù)垢油，默認(rèn)為1。若參數(shù)為Infinity圆丹，則無論多少嵌套都會(huì)被拉伸為一維數(shù)組
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
Symbol(name)的作用是在key值相同的情況下使用assign方法不會(huì)導(dǎo)致前面的被覆蓋掉
var obj1={
[Symbol("name")]:"111";
}
var obj2={
[Symbol("name")]:"222";
}
Object.assign(obj1,obj2);
console.log(obj1);
//{Symbol(name): "111", Symbol(name): "222"}
//如果不用Symbol方法滩愁，結(jié)果輸出是 {Symbol(name): "222"}
//作為字典量存在切不會(huì)導(dǎo)致key值重復(fù);
const size = {
XS : Symbol("XS"),
S : Symbol("S")
}
let close = {
[size.XS] : 1
}
console.log(close);
//{Symbol(XS): 1}
console.log(close[size.XS]);
//1
Set、Map的作用
//Set自動(dòng)去重
var set = new Set([1,2,3,4,5,5,6,7,8]); // key值 和 value值一樣;
console.log(set);
var set = new Set([1,2,3,4,5,5,6,7,8]);
// 增刪改查;
set.add(123);
console.log(set);
//Set(9) {1, 2, 3, 4, 5, 6, 7, 8, 123}
//Set可以用for...of循環(huán)進(jìn)行遍歷辫封，唯一的區(qū)別是keys()是對(duì)鍵名的遍歷硝枉、values()是對(duì)鍵值的遍歷，entries()是對(duì)鍵值對(duì)的遍歷倦微。
for(let value of set.entries()){
console.log(value);
//[1, 1][2, 2][3, 3][4, 4][5, 5][6, 6][7, 7][8, 8][123, 123]
}
set.delete(3);//刪除key為3的元素
set.clear();//情空數(shù)組
var map = new Map();
map.set("key","value");
console.log(map.keys());
console.log(map.values());
//Map可以將key和value獨(dú)立的取出
