箭頭函數(shù)
// 箭頭函數(shù)
const func3 = () => {
console.log("func3");
};
func3();
箭頭函數(shù)省略寫(xiě)法
小括號(hào)省略
// 箭頭函數(shù)傳參
// 如果只傳一個(gè)參數(shù)锦庸，小括號(hào)可以省略。const func2 a => {console.log(a);};
// 如果不傳參數(shù) 或者傳多個(gè)參數(shù)，小括號(hào)不能省略
const func2 = (a, b) => {
console.log(a, b);
};
//小括號(hào)可以省略
const func3 = a => {
console.log(a);
};
//調(diào)用
func2("2", "3");
func3("456");
大括號(hào)省略
const func1 = () => {
return 123;
};
console.log(func1());
// 簡(jiǎn)潔返回值的寫(xiě)法,如果函數(shù)代碼只有一行,那么大括號(hào)可以省略,同時(shí),這一行代碼運(yùn)行結(jié)果也會(huì)被直接返回
// 省略大括號(hào),建議代碼不要換行
const func2 = (a) => a + 1;
const num = func2(2);
console.log(num);
const func3 = (a) => console.log(a);
func3(123);
// const func4 = a => a + 1;
// const num2 = func2(5);
// console.log(num2); //結(jié)果6
返回對(duì)象
箭頭函數(shù)返回值為對(duì)象時(shí),如果要省略大括號(hào),那么對(duì)象得用小括號(hào)包起來(lái)
const func1 = () => 123;
const func2 = () => true;
const func3 = () => "哈哈哈";
const func4 = () => [1, 2, 3, 4, 5];
// 調(diào)用并輸出
console.log(func1());
console.log(func2());
console.log(func3());
console.log(func4());
// 箭頭函數(shù)如果在省略大括號(hào)時(shí),返回值是對(duì)象就得用()小括號(hào)包起來(lái)
const func5 = (a) => ({ name: "哈哈哈", age: 18 });
console.log(func5());
默認(rèn)值
// (msg="你好") 你好就是mag的默認(rèn)值
// 如果調(diào)用函數(shù)時(shí),沒(méi)有傳遞參數(shù),就使用默認(rèn)值
// 如果傳遞了參數(shù),就會(huì)用傳遞的參數(shù),而不會(huì)使用默認(rèn)值
const func1 = (msg = "你好") => {
console.log(msg);
};
func1();
const func2 = (msg) => {
console.log(msg);
};
func2(); //undefined 沒(méi)有默認(rèn)值也沒(méi)有傳參,就會(huì)返回undefined
// 定義一個(gè)函數(shù),接收一個(gè)數(shù)組,返回?cái)?shù)組長(zhǎng)度
const getLength = (arr = []) => console.log(arr.length);
const list = ["a"];
getLength(list); //1 這里傳入一個(gè)值
getLength(); //0
解構(gòu)
// 解構(gòu)只是一種更簡(jiǎn)潔,方便來(lái)獲取數(shù)據(jù)的寫(xiě)法
const arr = [1, 2, 3, 4];
// 獲取前兩位,老方法
// const str3 = arr[0];
// const str4 = arr[1];
// console.log(str3, str4);
const [str1, str2] = arr;
console.log(str1, str2); //1 2
// 交換變量,解構(gòu)
let a = 100;
let b = 200;
[b, a] = [a, b];
console.log(a, b); //200 100
// 對(duì)象解構(gòu)
const obj = { name: "哈哈哈", age: 18 };
const { name, age } = obj;
console.log(name, age); //哈哈哈 18
對(duì)象簡(jiǎn)寫(xiě)
const name = "哈哈";
const age = 18;
// const obj = {
// name: "哈哈",
// age: 18,
// };
// 如果變量名跟屬性名稱一致的話,可以簡(jiǎn)寫(xiě)成一下形式
// const obj = {
// name, //name:'name'
// age,
// };
// console.log(obj);
// 方法簡(jiǎn)寫(xiě)可以將:function省略掉
// const obj = {
// name,
// say: function () {
// console.log("哈哈哈");
// },
// };
const obj = {
name,
say() {
console.log("這是一個(gè)方法,函數(shù)");
},
};
obj.say();
// console.log(obj.say); //? say() {console.log("這是一個(gè)方法,函數(shù)");}
剩余運(yùn)算符...
// 剩余運(yùn)算符 是一種比較方便的獲取數(shù)據(jù)的方式
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const [letter1, letter2] = arr;
console.log(letter1, letter2);
// 希望獲取到剩余所有元素 放在新數(shù)組中 newArr是新數(shù)組名字(自定義)
const [let1, let2, let3, ...newArr] = arr;
console.log(newArr);
const list = ["a", "b", "c"];
const [str1, str2, str3, ...newList] = list;
console.log(newList); //得到空數(shù)組[]
const obj1 = { a: 1, b: 2, c: 3, d: 4 };
const { a } = obj1;
console.log(a); //1
const obj2 = { b: 2, c: 3, d: 4 };
const { b, c, d, ...obj3 } = obj2;
console.log(obj3); //空對(duì)象
calc(1); //[1]
calc(1, 2); //[1,2]
calc(1, 2, 3); //[1,2,3]
function calc(...params) {
// params可以獲取所有傳遞給calc的參數(shù) 封裝到一個(gè)數(shù)組中
console.log(params);
// 對(duì)數(shù)組做什么業(yè)務(wù)都可以 計(jì)算總和 計(jì)算最大值 最小值
}
值類(lèi)型和引用類(lèi)型
// js數(shù)據(jù)類(lèi)型 分成了兩種 1 值類(lèi)型 2 引用類(lèi)型
// 1 值類(lèi)型 簡(jiǎn)單數(shù)據(jù)類(lèi)型 字符串豌注、數(shù)字夫偶、布爾類(lèi)型晕鹊、
// 2 引用類(lèi)型 對(duì)象 蜻拨、 數(shù)組
// 兩者區(qū)別 體現(xiàn) =
// 值類(lèi)型 使用 = 復(fù)制
// 引用類(lèi)型 使用 = 關(guān)聯(lián)在一起
// let a =1 ;
// let b = a;
// // b a 的一份復(fù)制 兩個(gè)值 一樣 但是兩個(gè)數(shù)據(jù)是完全獨(dú)立元扔！
// b=10;
// // a 不會(huì)發(fā)生變化
// console.log(a);
const obj = { username: "悟空" };
// 也使用 =
const newObj = obj; // newObj 看起來(lái)和 obj 數(shù)據(jù)一樣 兩個(gè)數(shù)據(jù) 本身一起掐场！ 修改了其中的任意一個(gè)往扔，另外一個(gè)也會(huì)收到影響
newObj.username = "八戒";
console.log(obj); //{username: '八戒'}
復(fù)制引用類(lèi)型-剩余運(yùn)算符
// 復(fù)制一份對(duì)象,修改新的數(shù)據(jù)之后,舊的數(shù)據(jù)不會(huì)受到影響
const obj = { name: "哈哈", height: 170 };
const newObj = obj;
// const newObj = { ...obj }; //復(fù)制一份
// console.log(obj);//{name: '哈哈', height: 170}
// console.log(newObj);//{name: '哈哈', height: 170}
newObj.name = "悟空";
// console.log(newObj);
console.log(obj); //{name: '悟空', height: 170} 舊的數(shù)據(jù)被更改了
const list = ["a", "b"];
const newList = [...list]; //將舊的復(fù)制一份并放入新數(shù)組newList
newList.push("c");
console.log(list); //["a", "b"]
console.log(newList); //["a", "b","c"]
數(shù)組
map方法
// 處理原數(shù)組,返回新數(shù)組
// map 返回 處理后的數(shù)組
// map 數(shù)組的一個(gè)方法 也會(huì)遍歷數(shù)組 接收一個(gè)函數(shù)
// value 值 index 索引
const arr = ["a", "b", "c"];
const newArr = arr.map(function (value, index) {
return `<li>${index}-${value}</li>`;
});
console.log(newArr); //['<li>0-a</li>', '<li>1-b</li>', '<li>2-c</li>']
map方法跟箭頭函數(shù)結(jié)合
const arr = ["a", "b", "c"];
const newArr = arr.map((value) => `<li>${value}</li>`);
console.log(newArr); //['<li>a</li>', '<li>b</li>', '<li>c</li>']
filter方法
// filter 過(guò)濾 返回 過(guò)濾后的數(shù)組
const arr = [1, 6, 3, 5, 8, 45, 21, 12];
// 返回大于40的數(shù)據(jù),重新組成數(shù)組
const newArr = arr.filter(function (value) {
if (value >= 40) {
return true;
} else {
return false;
}
});
console.log(newArr);
// 結(jié)合箭頭函數(shù)
const newArr2 = arr.filter((value) => value > 40);
console.log(newArr2);
const newArr3 = arr.filter((value) => {
return value >= 20;
});
console.log(newArr3);
every方法
// every 檢測(cè)數(shù)值元素的每個(gè)元素是否都符合條件,全部都符合就會(huì)返回true,否則返回false
const arr = [1, 5, 2, 12, 15, 42, 32, 30, 22];
const result = arr.every(function (value) {
if (value > 20) {
return true;
} else {
return false;
}
});
console.log(result); //false
// 簡(jiǎn)寫(xiě)
const result2 = arr.every((v) => v < 50); //true 全部數(shù)值小于50
console.log(result2); //true
// every 對(duì)于空數(shù)組,也會(huì)直接返回true
some方法
// some檢測(cè)數(shù)組中是否有元素符合指定條件,只要有一個(gè)符合條件都返回true
// 檢測(cè)到符合就返回了,后續(xù)不會(huì)再檢測(cè)下去了
const arr = ["聰明", "聰明", "聰明", "聰明", "憨憨", "聰明", "聰明"];
const result = arr.some((value) => value === "憨憨");
if (result) {
console.log("快樂(lè)");
} else {
console.log("nice");
}
注意點(diǎn):some跟every的區(qū)別
every是全部符合才返回true
some是只要有一個(gè)符合就返回true
