1、var 和let 的區別
var ：
1.var 可以重複聲明
2.作用域：全局作用域和函數作用域
3.會進行預解析
let ：
1. 同一作用域不能下不能重複聲明
2.作用域：全局作用域和塊級作用域（塊級作用域指{}）
3.不進行與解析
2、塊級作用域
在ES6之前作用域只有全局作用域和函數作用域，不存在塊級作用域的概念。ES6中新增了塊級作用域。塊級作用域由{}包括，if語句和for語句裏面的{}也屬於塊級作用域。
3、解構賦值
對象解構賦值
let obj = {
a:1,
b:2
}
let {a,b}= obj
console.log(a,b);//1 2
前面大括號裏的要和對象裏的屬性名一一對應關係
數組解構賦值
let arr=["a","b","c"];
let [e,f]=arr;
console.log(e,f);//a b
前面的第一項對應數組的第一項，第二項對應數組的第二項，順序保持一致。
//面試題 怎麼快速交換a,b的值
let a = 0;
let b=1;
[a,b]=[b,a]
4、展開運算符
數組展開運算符
let arr=[1,2,3,4];
let arr2=["a","b",...arr,"c","d"];
console.log(arr2);//["a","b",1,2,3,4,"c","d"]
對象展開運算符
let obj ={
a:1,
b:2
}
let obj2={
...obj,
c:3,
d:4
};
console.log(obj2);//{a:1,b:2,c:3,d:4}
剩餘參數
var arr=[1,2,3,4]
let [a,b,...c]=arr;
console.log(a,b,c);//1 2 [3,4] //前面的兩個數據賦值給a,b 剩下的放在c裏面
5、Set對象
Set 需要注意的是：
- Set 是ES6提供的一種新的數據結構，類似於數組，但是成員的值都是唯一的，沒有重複的值。
- Set本身是一個構造函數，用來實例化生成Set數據結構。
- Set對象允許你存儲任何類型的唯一值，無論是原始值還是對象引用
Set 的屬性和方法
1、size 屬性相當於length屬性
var arr = [2,4,7,1,3,2,8,6];
let s = new Set(arr);
console.log(s.size);//7
2、clear()清空所有值
var arr = [2,4,7,1,3,2,8,6];
let s = new Set(arr);
s.clear();
console.log(s);
3、delete() 刪除某一項
s.delete("a")
4、add()添加某個值
s.add(5)
5、has()查看是否包含某個值
s.has("a");
6、map對象
Map 需要注意的是：
Map是ES6提供的一種新的數據結構，類似與對象。
let arr =[
["a",1],
["b",2],
["c",3]
]
let m = new Map(arr);
console.log(m);
Map 的屬性和方法
1、clear();清空所有的值
m.clear()
2、delete(key) 刪除某一項
3、get(key) 獲取某一項值
4、has(key) 是否包含某一項值
5、set(key,val) 設置一個值
7、函數新增內容
1.箭頭函數的基本語法
箭頭函數最基本的寫法： 形參=>返回值
let fn= nub => nub*2;
console.log(fn(10));//20
多個形參要加括號： (形參，形參)=>返回值
let fn = (nub,nub2)=>nub*nub2;
console.log(fn(10,3))//30
如果沒有參數也要加括號：()=>返回值
let fn= ()=>'jiantouhanshu';
console.log(fn());//jiantouhanshu
如果後面不是返回值是執行語句
()=>{
執行語句
}
let fn =()=>{
console.log("天氣不錯");
}
fn()//天氣不錯
2.箭頭函數沒有arguments
let fn = ()=>{
console.log(arguments);//報錯
}
fn(1,2,3,4)
可以使用剩餘參數獲取箭頭函數的參數
let fn= (..arg)=>{
console.log(arg);
}
fn(1,2,3,4)//[1,2,3,4]
3.箭頭函數的this問題
箭頭函數本身沒有this，調用箭頭函數的this時，指向是其聲明時所在作用域的this。
let fn;
let fn2 = function(){
console.log(this);
fn=()=>{
console.log(this);
}
}
fn2 = fn2.bind(document.body);
fn2();//body
fn();//body
4.函數參數默認值
let fn= (a=10,b=2)=>{
console.log(a*b);
}
fn();//20 如果沒有傳參數，那函數的默認值就是a等於10，b等於2
8、數組新增內容
1.Array.from(類數組)
把一個類數組轉換成真正的數組（類數組：有下標有length）
返回值：轉換之後的新數組
語法：Array.from(arrayLike[, mapFn[, thisArg]])
參數：arrLike :想要轉換成數組的僞數組對象或可迭代對象。
mapFn:（ 可選）如果制定了該參數，新數組中的每個元素會執行該回調函數。
thisArg:（可選）可選參數，執行回調函數mapFn時this對象。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
{
let lis =document.querySelectorAll("#list li");
console.log(lis);//類數組
lis = Array.from(lis);
}
{
let lis =document.querySelectorAll("#list li");
let arr =[];
lis = Array.from(lis,function(item,index){
console.log(item,index,this);
return index;
},arr);
console.log(lis);
}
</script>
2.Array.of()創建數組
Array.of() 方法創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。
Array.of() 和 Array 構造函數之間的區別在於處理整數參數：Array.of(7) 創建一個具有單個元素 7 的數組，而 Array(7) 創建一個長度爲7的空數組（注意：這是指一個有7個空位(empty)的數組，而不是由7個undefined組成的數組）。
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
3.Array.isArray() 檢測數據是否是個數組
Array.isArray(data) 參數data要檢測的數據，返回值 true 數組，false 非數組
index
9、數組的find和findIndex
arr.find() 查找數組中滿足要求的第一個元素的值
Value arr.find(callback[,thisArg])
參數：callback 在數組每一項上執行的函數。element 當前遍歷到的元素，index當前遍歷到的索引，array 數組本身。
findIndex 和find用法一樣，區別是findexIndex返回的不是具體值，而是索引。
10、數組扁平化
數組扁平化是指將一個多維數組變爲一維數組
[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]
1、arr.flat
Array arr.flat([depth]) 扁平化多維數組
可選參數：depth 指定要提取嵌套數組的結構深度，默認值爲1.
返回值：一個包含將數組與子數組中所有元素的新數組。
var arr = [
["小明","18"],
["小剛"，"18"],
[
[1,
[3,4]
]
]
]
console.log(arr.flat());
console.log(arr.flat(2));
console.log(arr.flat(3));
使用Infinity 可以提取無線層，有多少層可以提取多少層
console.log(arr.flat(Infinity));
2、arr.flatMap
arr.flatMap(function callback(currentValue[,index,[,array]]){
//返回新數組的元素
}[,thisArg])
方法對原數組的每個成員執行一個函數，然後對返回值組成的數組執行flat()方法。該方法返回一個新數組，不改變原數組。但是flatMap()只能展開一層數據。
let arr =[
["小明","18"],
["小剛"，"18"]
];
let newArr = arr.flatMap((item)=>{
item = item.filter((item,index)=>{
return index==0;
});
return item;
})
console.log(newArr);
3、arr.fill
arr.fill(value[,start[,end]]); 用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引
參數：用來填充數組元素的值。
可選參數：start 起始索引，默認值爲0。 end 終止索引，默認值爲arr.length
let arr=[0,1,2,3,4];
arr.fill("a",1,20);
console.log(arr);
4、arr.includes
arr.includes(valueToFind[,fromIndex]) 判斷數組中是否包含一個指定的值。
參數：valueTofind 需要查找的值
可選參數 ： 從fromIndex 處開始向後查找
返回值：true 代表數組中包含valueTofind ,false 代表數組中不包含從fromIndex後
let arr =["a","b","c","d","e"];
console.log(arr.includes("c",3));//false
11、字符串方法
JavaScript 只有indexOf方法，可以用來確定一個字符串是否包含在另一個字符串中。如果不存在返回-1，如果存在返回字符串的位置。ES6 又提供了三種新方法。
includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。
let str = '小貓和小狗是好朋友';
console.log(str.startsWith("小貓"));//true
console.log(str.startsWidth("小貓"，2));//false
console.log(str.endsWidth("好朋友"));//true
console.log(str.endsWidth("好朋友",2));//false 後面的參數是從前計算的第幾位
repeat 方法返回一個新字符串，表示將原字符重複n次。
{ let str ="a";
console.log(str.repeat(3));//aaa
12、模板字符串
let p =document.querySelector("p");
let name ="小明";
let age=18;
let school="初中";
p.innerHTML =`今年<strong>${name}</strong>就要<strong>${age>13?"保密":age}</strong>歲了，終於升入了<strong>${school}</strong>了`;
${} 插值表達式 {}裏面可以插入任何js表達式，可以是一個對象、數組，甚至是一個函數。
13、對象新增方法
1、對象簡潔表示法
let a = 0;
let b = 1;
//let obj ={
//a:a,
//b:b
//}
//簡潔寫法是
let obj ={
a,
b
}
2、屬性名錶達式
let name="小明";
let obj ={
[name]:111
}
3、Object.assign對象合併
Object.assign(target,…sources) 將所有的可枚舉屬性的值從一個或多個源對象複製到目標對象
參數： target 目標對象 source源對象 返回值目標對象
4、Object.is
Object.is(value1,value2)判斷兩個值是否是相同的值。
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
14、Babel 是一個JavaScript編譯器。
利用babel就可以讓我們在當前的項目中隨意的使用這些新最新的es6，甚至es7的語法。說白了就是把各種javascript千奇百怪的語言統統專爲瀏覽器可以認識的語言。