1.let、const和var區別
let允許聲明一個在作用域限制在塊級中的變量、語句或者表達式，不會被預解析，必須先聲明後使用，不能重複聲明，全局作用域，塊級作用域
var全局作用域 函數作用域，可以先聲明後使用，能重複聲明
const聲明一個常量只能在聲明時賦值，並且一旦賦值不能修改，不能重複聲明，不會被預解析
2.解構賦值
let str = "ABCD";
let [a,b] = str;
console.log(a,b);
let obj = {
a: 1,
b: 2,
c: 3
};
// 交互對象的 a,c兩個屬性
// let a = obj.a;
// let c = obj.c;
// obj.a = c;
// obj.c = a;
// 對象的解構賦值
let {a,c} = obj;
console.log(a,c);
// let {a} = obj ==> let a = obj.a;
let {d} = obj;
console.log(d);
// let arr = [1,2,3];
// let [a,b,c] = arr;
// console.log(a,b,c);
/*
對象解構：變量名 和 屬性名 要對應
數組解構：變量名 和 值索引對應
*/
let a = 0;
let b = 1;
let arr = [a,b];
[b,a] = arr;
console.log(a,b);
3.展開運算
// 展開運算符
let arr = [1,2,3,4,5];
let arr2 = ["a",...arr,"b","c"];
// 把 arr 中的數據放入 arr2 中，從 第 1 位開始排列
// ["a",1,2,3,4,5,"b","c"]
console.log(arr2);
// 剩餘參數
let arr3 = [1,2,3,4,5];
let [a,...b] = arr3;
console.log(a,b);
// 展開運算符
let obj = {
a: 1,
b: 2
};
let obj2 = {
...obj,
c: 3,
d: 4
};
console.log(obj2);
// 剩餘參數
let {a,...d} = obj2;
console.log(a,d);
4.Set對象 ，會進行去重
size 返回數據長度
set.clear() 清空所有值
set.delete(val) 刪除某一項
參數：val刪除的值
返回值：true || false 是否刪除成功（沒有這個值纔會刪除不成功）
set.has(val) 是否包含某一項
參數：val要查找的值
返回值：true || false 是否包含這個值
set.add(val) 添加一項
參數：val要添加的項
返回值：set對象本身
let arr = [1,2,3,4,1,3,5,2];
let data = new Set(arr);
console.log(data);
//去重
console.log([...data]);
let arr = [1,2,3,4,1,3,5,2,"c"];
let data = new Set(arr);
//console.log(data.add("a").add("b"));
// console.log(data.delete("b"));
//console.log(data.has(2));
data.clear();
console.log(data.size,data);
5.Map對象
clear() 清空所有值
delete(key) 刪除某一項
參數：key 數據的key值
返回值：true || false 是否刪除成功（沒有這個key纔會刪除不成功）
get(key) 獲取某一項的值
參數：key數據的key值
返回值：返回鍵對應的值，如果不存在，則返回undefined。
has(key) 包含某項
參數：key數據的key值
返回值：true || false，表示Map實例是否包含鍵對應的值。
set(key,val) 添加一項
參數：key 數據的key值 val 數據的val值
返回值：map對象本身
let data = new Map([["leo",40],["zmouse",30],["reci",20]]);
data.set("劉偉",41);
data.delete("leo");
console.log(data.get("zmouse"));
console.log(data);
6.箭頭函數用法
形參=>返回值
(形參，形參)=>返回值
()=>返回值
()=>{
執行語句
return 返回值;
}
(形參)=>{
執行語句
return 返回值;
}
原始的函數接收全部的參數可以使用arguments來接收，但是箭頭函數沒有不定參，可以使用rest 參數 剩餘參數來接收全部參數
箭頭函數本身沒有this,調用箭頭函數的this時，指向是其聲明時所在的作用域的this
let fn = ()=>{
console.log(1);
};
fn();
// let fn = (nub1,nub2)=>nub1*nub2;
// console.log(fn(2,3));
let fn = (a,...arg)=>{
//console.log(arguments);
console.log(a,arg);
};
fn(1,2,3,4);
document.onclick = function(){
let fn = (a,...arg)=>{
console.log(this);
};
fn();
};
//參數的默認值
let fn = (nub=0,nub2=0)=>{
console.log(nub+nub2);
}
fn();
7.數組的新增方法
Array.from
Array Array.from(arrayLike[, mapFn[, thisArg]]) 將類數組轉換成數組
參數：arrayLike 類數組
可選參數：mapFn 類似 map 方法，循環類數組時的回函函數，返回值組成新數組
thisArg mapFn 函數執行時的 this 指向
返回值：根據 arrayLike 生成的新數組
(function(){
// let list = document.getElementById("list");
// let lists = list.getElementsByTagName("li");
// //lists = [...lists];
// lists = Array.from(lists);
// // lists.forEach(item => {
// // console.log(item);
// // });
// console.log(lists);
let datas = {
0: "a",
1: "b",
2: "c",
length: 3
};
// datas = Array.from(datas);
datas = Array.from(datas,function(item,index){
console.log(item,index,this);
return item.toUpperCase();
},document);
console.log(datas);
})();
Array.isArray
Boolean Array.isArray(data) 檢測數據是否是個數組
參數：data 要檢測的數據
返回值:true 數組，false 非數組
(function(){
let list = document.getElementById("list");
let lists = list.querySelectorAll("li");
let arr = [];
console.log(Array.isArray(lists));
})();
Array.of
Array Array.of(element0[, element1[, ...[, elementN]]]) 將參數轉成一個數組
參數：elementN 要放入數組中的數據
返回值：新數組
(function(){
let arr = Array.of(1,2,3,4,5,5,6);
console.log(arr);
let arr2 = [].of(12,23);
})();
arr.find
Value arr.find(callback[, thisArg]) 查找數組中滿足要求的第一個元素的值
參數：callback
在數組每一項上執行的函數，接收 3 個參數：element：當前遍歷到的元素；index：[可選]當前遍歷到的索引；array：[可選]數組本身
可選參數：thisArg：執行回調時用作this 的對象
返回值：數組中第一個滿足所提供測試函數的元素的值，否則返回 undefined
arr.findIndex
Index arr.findIndex(callback[, thisArg]) 查找數組中滿足要求的第一個元素的值的索引
參數:callback
針對數組中的每個元素, 都會執行該回調函數, 執行時會自動傳入下面三個參數:element：當前元素；index：當前元素的索引；array：調用findIndex的數組。
可選參數：thisArg：執行callback時作爲this對象的值
返回值：滿足要求的值的索引
// let arr = [1,2,5,6];
// let val = arr.find((item)=>{
// return item >= 5;
// });
// console.log(val);
let arr = [1,2,5,6];
let index = arr.findIndex((item)=>{
return item >= 5;
});
console.log(index);
arr.flat
Array arr.flat([depth]) 扁平化多維數組
可選參數：depth：指定要提取嵌套數組的結構深度，默認值爲 1。
返回值：一個包含將數組與子數組中所有元素的新數組
let arr = [
[1,2],
[3,4],
[
[6,7],
[
[8],
[9,10]
]
]
];
console.log(arr.flat(Infinity));
arr.flatMap
Array arr.flatMap(function callback(currentValue[, index[, array]]) {
// 返回新數組的元素
}[, thisArg]) 方法首先使用映射函數映射每個元素，然後將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 通常在合併成一種方法的效率稍微高一些
參數：callback
可以生成一個新數組中的元素的函數，可以傳入三個參數：currentValue：當前正在數組中處理的元素；index可選：可選的，數組中正在處理的當前元素的索引；array可選：可選的，被調用的 map 數組
可選參數：thisArg：執行 callback 函數時 使用的this 值
返回值：一個包含將數組與子數組中所有元素的新數組
let arr = [
[1,2],
[3,4],
[6,8]
];
let arr2 = arr.flatMap(item=>{
item = item.filter(item=>item>=2);
return item;
});
console.log(arr2);
arr.fill
Array arr.fill(value[, start[, end]]); 用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引
參數：用來填充數組元素的值。
可選參數：start：起始索引，默認值爲0；end：終止索引，默認值爲 arr.length
/*
Array arr.fill(value[, start[, end]]); 用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引
參數：
用來填充數組元素的值。
可選參數：
start
起始索引，默認值爲0。
end
終止索引，默認值爲 arr.length
*/
let arr = ["a","b","c","d","e"];
arr.fill("f",1,3);
console.log(arr);
arr.includes
Boolean arr.includes(valueToFind[, fromIndex]) 判斷數組中是否包含一個指定的值
參數：valueToFind 需要查找的值
可選參數：從 fromIndex 處開始向後查找
返回值：true 代表數組中包含 valueToFind， false 代表數組中不包含 fromIndex
let arr = ["a","b","c","d"];
console.log(arr.includes("a",-3));
8.字符串新增方法
str.includes
Boolean str.includes(valueToFind[, fromIndex]) 判斷字符串是否包含一個指定的值
詳細： 參考數組的 includes
str.endsWith
Boolean str.endsWith(searchString[, length]) 判斷當前字符串是否是以另外一個給定的子字符串“結尾”
參數：searchString：要搜索的子字符串。
可選參數：length ：作爲 str 的長度；默認值爲 str.length
返回值：如果傳入的子字符串在搜索字符串的末尾則返回true；否則將返回 false。
str.startsWith
Boolean str.startsWith(searchString[, position]) 判斷當前字符串是否以另外一個給定的子字符串開頭
參數：searchString：要搜索的子字符串。
可選參數：position：在 str 中搜索 searchString 的開始位置，默認值爲 0，也就是真正的字符串開頭處。
返回值：如果傳入的子字符串在搜索字符串的開始則返回true；否則將返回 false。
let str = "123456789";
//console.log(str.startsWith("56",4));
console.log(str.endsWith("67",7));
str.repeat
String str.repeat(count) 構造並返回一個新字符串，該字符串包含被連接在一起的指定數量的字符串的副本
參數：count：介於0和正無窮大之間的整數。表示在新構造的字符串中重複了多少遍原字符串
返回值：生成的新字符串
let str = "123";
console.log(str.repeat(10000000));
模板字符串
模板字面量 是允許嵌入表達式的字符串字面量。你可以使用多行字符串和字符串插值功能。它們在ES2015規範的先前版本中被稱爲“模板字符串”。
let name = "LEO";
let age = 40;
let gender = "男";
//let str = '姓名：' + name + '，年齡：' + age + '歲，性別：男';
let str = `姓名：${name}，
年齡：${age}歲，
性別：${gender}`;
console.log(str);
let name = "LEO";
let age = 40;
let gender = function(){
return "男"
};
let str = `姓名：${[1,2,3,4]}，
年齡：${age}歲，
性別：${gender()}`;
// 插值表達式
console.log(str);
9.新增對象方法
Object.assign
Object Object.assign(target, ...sources) 將所有可枚舉屬性的值從一個或多個源對象複製到目標對象
參數：target：目標對象；sources：源對象
返回值：目標對象
let obj = {
a: 1,
b: 2
};
let obj2 = {
c: 3,
d: 4
};
let f = null;
let obj3 = Object.assign({},obj,obj2,{f});
console.log(obj,obj2,obj3);
Object.is
Boolean Object.is(value1, value2) 判斷兩個值是否是相同的值。
規則：兩個值都是 undefined
兩個值都是 null
兩個值都是 true 或者都是 false
兩個值是由相同個數的字符按照相同的順序組成的字符串
兩個值指向同一個對象
兩個值都是數字並且
都是正零 +0
都是負零 -0
都是 NaN
let nub = NaN;
let str = NaN;
console.log(Object.is(nub,str));
對象簡潔表示法
- 屬性簡潔表示
- 方法簡潔表示
let a = 0;
let b = 1;
let obj = {
a,// a: a
b, // b: b
c(){
console.log(123);
}
};
obj.c();
//console.log();
屬性名錶達式
let n = "name" ;
let obj = {
[n]: "leo"
};
console.log(obj);
10.babel
babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中.
<script src="babel.min.js"></script>
<script type="text/babel">
let name = "LEO";
let age = 40;
let gender = "男";
let str = `姓名：${name}，
年齡：${age}歲，
性別：${gender}`;
console.log(str);
let arr = [1,2,3];
let val = arr.find((item)=>{
return item > 1
});
console.log(val);
</script>