首先感謝Carnia幫我指出ES6箭頭函數(shù)中this指向的錯(cuò)誤扣蜻，此次主要更新箭頭函數(shù)中this指向問題互广。
ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標(biāo)準(zhǔn)科侈，已經(jīng)在2015年6月正式發(fā)布了懈贺。它的目標(biāo)堂氯，是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序得院，成為企業(yè)級(jí)開發(fā)語言。
ES6新增添很多功能柿扣。更加方便我們的使用功能肖方，話不多少。進(jìn)入主題未状。
一俯画、關(guān)于變量
ES5
1.只有全局作用域變量和函數(shù)作用域變量
2.“變量提升”（當(dāng)程序進(jìn)入一個(gè)新的函數(shù)時(shí)，會(huì)將該函數(shù)中所有的變量的聲明放在函數(shù)開始的位置娩践。僅僅會(huì)提升變量的聲明活翩，不會(huì)提升變量的賦值）
ES6新增：塊級(jí)作用域變量
1、let定義塊級(jí)作用域變量
1翻伺、沒有變量的提升材泄，必須先聲明后使用
2、let聲明的變量吨岭，不能與前面的let拉宗，var，conset聲明的變量重名
{
{
//console.log(a)//報(bào)錯(cuò) 必須先聲明再使用
let a = 10;//只在當(dāng)前大括號(hào)可以使用
var b = "abc";//全局作用域變量
console.log(a);//10
//let a = 10//報(bào)錯(cuò) Uncaught SyntaxError: Identifier 'a' has already been declared
console.log(b);//bac
}
console.log(b);//abc
// console.log(a);//報(bào)錯(cuò) 只能在大括號(hào)中使用
}
2辣辫、const 定義只讀變量
1旦事、const聲明變量的同時(shí)必須賦值，const聲明的變量必須初始化急灭，一旦初始化完畢就不允許修改
2姐浮、const聲明變量也是一個(gè)塊級(jí)作用域變量
3、const聲明的變量沒有“變量的提升”葬馋，必須先聲明后使用
4卖鲤、const聲明的變量不能與前面的let， var 畴嘶， const聲明的變量重名
{
const VERSION = "1.2.3"
console.log( VERSION )//也只能在括號(hào)里使用
}
//console.log( VERSION )//VERSION is not defined 報(bào)錯(cuò) 也是只讀變量
二蛋逾、關(guān)于函數(shù)
ES6可以給形參函數(shù)設(shè)置默認(rèn)值
就是說，當(dāng)我們調(diào)用函數(shù)時(shí)窗悯，如果設(shè)置了默認(rèn)形參区匣，即使沒給函數(shù)傳入實(shí)參，那么函數(shù)的實(shí)參就是默認(rèn)形參蒋院。
function fun2(a=1,b=2){
console.log(a,b)//1,2
}
fun2(11,22);//11 22
fun2(100);//100 2
在構(gòu)造函數(shù)中也可是使用的
function Person(name,age,sex="男"){
this.name = name;
this.age = age;
this.sex = sex;
}
var p1 = new Person("張三",20);
console.log(p1)// Person {name: "張三", age: 20, sex: "男"}
var p2 = new Person("趙四",30);
console.log(p2)// Person {name: "趙四", age: 30, sex: "男"}
var p3 = new Person("翠花",20,"女");
console.log(p3)// Person {name: "翠花", age: 20, sex: "女"
箭頭函數(shù)
//正常函數(shù)
var fun3 = function(a){
console.log(a);
}
//箭頭函數(shù)
var fun3 = (a)=>{console.log(a);}
fun3(999);
比如我們用箭頭函數(shù)計(jì)算一個(gè)1到100的和
var fun4 = ()=>{
var sum=0;
for(var i = 0; i<=100; i++){
sum = sum+i
}
return sum;
}
console.log(fun4());//1000
var person = {
name:"tom",
sayHi:()=>{
console.log(this);//window對(duì)象
console.log("hello,everyone. my name is "+this.name);//hello,everyone. my name is window的name
}
}
person.sayHi();
同時(shí)復(fù)習(xí)一下this的認(rèn)識(shí)
1.在函數(shù)體外亏钩，this指的就是window對(duì)象
2.在函數(shù)替內(nèi)，誰調(diào)用函數(shù)this就指向誰
3.在構(gòu)造函數(shù)中悦污，this指的是新創(chuàng)建的對(duì)象
4.在html標(biāo)簽中铸屉，this指的是當(dāng)前的這個(gè)標(biāo)簽元素
5.在ES6中，對(duì)于箭頭函數(shù)切端，要看它在哪里創(chuàng)建的彻坛，和當(dāng)前函數(shù)的作用域。
三、關(guān)于數(shù)組的展開運(yùn)算
在數(shù)組之前加上三個(gè)點(diǎn)（...）
var arr = [1,2,3,4,5];
console.log(arr);//[1, 2, 3, 4, 5]
console.log(...arr)// 1 2 3 4 5
可以根據(jù)數(shù)組的展開運(yùn)算用數(shù)組給函數(shù)批量的傳參
function fun5(a,b,c,d,e,f){
//如果沒有展開數(shù)組昌屉，打印結(jié)果如下
//console.log(a,b,c,d,e,f)//[1, 2, 3, 4, 5] undefined undefined undefined undefined undefine
console.log(a,b,c,d,e,f)//11 22 33 44 55 66
//return a+b+c+d+e+f
}
//fun5([1,2,3,4,5])
fun5(...[11,22,33,44,55,66])
四钙蒙、關(guān)于apply和call
apply和call，都是對(duì)象本身沒有某個(gè)屬性或者方法间驮，去引用其他對(duì)象的屬性或方法躬厌，也就是說兩者都可以改變this的屬性
不同之處
apply(this的指向，數(shù)組/arguments)
call(this的指向竞帽，參數(shù)1扛施，參數(shù)2，參數(shù)3)
var name ="window的name";
var obj = {
name:"obj的name",
showName:function(v1,v2,v3){
console.log(v1,v2,v3)
}
}
obj.showName();
obj.showName.apply(window,[10,20,30]);//10 20 30
//apply括號(hào)里的是誰屹篓，調(diào)用的前面的函數(shù)里面的this就是誰
obj.showName.call(window,10,20,30)//10 20 30
var color = "yellow";
function showColor(){
console.log(this.color)
}
var obj = {
color:"red",
}
showColor();//yellow
showColor.apply(obj);//red
showColor.call(obj);//red
showColor.apply(this);//yellow
showColor.call(window);//yellow
五疙渣、關(guān)于解構(gòu)賦值
數(shù)組的解構(gòu)賦值
var [a,b,c]=[11,22,33]
console.log(a,b,c)//11 22 33
var [e,[f,g],k] = [1,[2,3],5]
console.log(e,f,g,k)//1 2 3 5
對(duì)象的解構(gòu)賦值
var{name,age}={name:"張三",age:"20"}
console.log(name,age)//張三 20
以前我們互換兩個(gè)變量的值，需要借助第三個(gè)變量堆巧，利用解構(gòu)賦值妄荔，就方便很多了
var f1 = 88;
var f2 = 99;
[f1,f2]=[f2,f1];
console.log(f1,f2)//99 88
解構(gòu)json
var jike = {"name":"tom","age":"23","sex":"男"};
var {name,age,sex}=jike;
console.log(name,age,sex)//tom 23 男
function cal(a,b){
var ret1 = a+b;
var ret2 = a-b;
var ret3 = a*b;
var ret4 = a/b;
return [ret1,ret2,ret3,ret4]
}
var [r1,r2,r3,r4] = cal(10,5);
console.log(r1,r2,r3,r4)//15 5 50 2
六、string中加入include方法
includes("字符"); 用于判斷字符串中是否包含某個(gè)字符
存在返回true 不存在返回false
includes("字符",startIndex); 用于判斷字符串中下標(biāo)startIndex是否是某個(gè)字符
是返回true 不是返回false
var str = "hello";
console.log( str.includes("e") )//true
console.log( str.includes("e",3) );//false
七谍肤、創(chuàng)建對(duì)象
ES5中創(chuàng)建對(duì)象的幾種方法
1.字面量法
2.工廠模式
3.構(gòu)造函數(shù)
4.組合方式 構(gòu)造函數(shù)+原型模式
ES6中創(chuàng)建對(duì)象
class 類名{
//肯定存在一個(gè)構(gòu)造函數(shù)
//如果不寫構(gòu)造函數(shù)啦租，有一個(gè)默認(rèn)的構(gòu)造函數(shù),內(nèi)容為空
constructor(){} //注意：這里不需要逗號(hào)
//下面是函數(shù)屬性 比如屬性有run dark
run(){}
dark(){}
}
舉個(gè)例子
class Person{
//肯定存在一個(gè)構(gòu)造函數(shù)
constructor(name,age,sex,nativePlace){
this.name=name;//注意：這里是分號(hào)
this.age=age;
this.sex=sex;
this.nativePlace=nativePlace;
}
//下面是函數(shù)屬性
eat(){console.log("紅燒排骨")}
study(){console.log("英文")}
play(){console.log("敲代碼")}
}
var sunShine = new Person("fanfan","22","女","黑龍江");
console.log(sunShine)//Person {name: "fanfan", age: "22", sex: "女", nativePlace: "黑龍江"}
八、繼承
class Animal{
constructor(age,sex){
this.age = age;
this.sex = sex;
}
eat(){
console.log("吃吃吃")
}
}
class Dog extends Animal{
constructor(name,age,sex){
//super指的是父類荒揣，先調(diào)用父類的構(gòu)造函數(shù)篷角，然后再去添加屬性
super(age,sex)
//console.log(super);//不能打印只能使用
this.name=name;
}
bark(){
console.log("哇哇哇")
}
//重寫：在子類中重新定義父類中的方法
// eat(){
// console.log("喝喝喝")
// }
}
var d = new Dog("妞妞","男",5)
console.log(d)
d.bark();
d.eat();
//ES6的繼承，有兩條繼承鏈系任，構(gòu)造函數(shù) 和 原型函數(shù)條
console.log( Dog.prototype)//Animal {}
console.log( Dog.constructor==Animal.constructor)//true
console.log( Dog.prototype.__proto__==Animal.prototype)//true
九内地、Set（）和Map（）
set（）有序列表集合（沒有重復(fù)）
Set()是指有序列表集合 (set中的元素是沒有重復(fù)的)
set包含的方法
add()、has()赋除、delete()、clear()等
add（）添加
var s = new Set();
s.add(1);
s.add(window);
s.add(true);
s.add(1);
console.log(s);//一共三個(gè)元素
console.log(s.size)//數(shù)組的長度是3
delete（value） 刪除指定元素
//結(jié)合上栗
s.delete(window);
console.log(s) //1 true
console.log(s.size) //2
has( value )用來判斷指定的值是否在set集合中
存在返回true 不存在返回false
//結(jié)合上栗
console.log( s.has(1) )//true
clear（） 同來清空set集合的
//結(jié)合上栗
s.clear()
console.log(s)//此時(shí)為空
舉個(gè)例子：生成10個(gè)1-20的隨機(jī)數(shù)非凌，要求不可以重復(fù)
var arr3 = new Set();
while(arr3.size<10){
var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1);
arr3.add(yuan);
}
console.log(arr3)
Map() 用來存放鍵值對(duì)的集合 key/value
var map = new Map();
map.set("name","張三");
map.set("age",20);
console.log(map) //Map {"name" => "張三", "age" => 20}
get(key)根據(jù)key值取得value
console.log( map.get("name"))//張三
has() 判斷是否存在某個(gè)鍵值對(duì)
存在返回true 不存在返回fasle
console.log( map.has("age") ) //true
console.log( map.has("age1") ) //false
clear() 清空集合
map.clear();
console.log(map);//Map {}
怎么有種戛然而止的感覺举农。
那就戛然而止吧。
不不不敞嗡。
拜個(gè)晚年颁糟。
晚年快樂呀！
不不不喉悴。
各位讀者老爺~~~新年快樂呀棱貌！，給個(gè)贊唄
