福特 F-150 Lightning 電動皮卡動力資訊公佈，最高續航 483 公里
阿新 • • 發佈：2021-12-18
1、let
//var宣告的變數往往會越域 //let宣告的變數有嚴格區域性作用域 // { // vara=1; // letb=2; // } // console.log(a);//1 // console.log(b);//ReferenceError:bisnotdefined //var可以宣告多次 //let只能宣告一次 // varm=1 // varm=2 // letn=3 // // letn=4 // console.log(m)//2 // console.log(n)//Identifier'n'hasalreadybeendeclared //var會變數提升 //let不存在變數提升 // console.log(x);//undefined // varx=10; // console.log(y);//ReferenceError:yisnotdefined // lety=20; // let //1.常量、宣告之後不允許改變 //2.一但宣告必須初始化，否則會報錯 consta=1; a=3;//UncaughtTypeError:Assignmenttoconstantvariable.
2、解構表示式
//陣列解構,想將1，2，3分別賦值給a,b,c，以前的方法 // let arr=[1,2,3]; // // let a = arr[0]; // // let b = arr[1]; // // let c = arr[2]; //使用解構表示式 // let [a,b,c] = arr; // console.log(a,b,c) const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } //以前的方法 // constname=person.name; // constage=person.age; // constlanguage=person.language; //物件解構 //將person中name的值賦值給abc const { name: abc, age, language } = person; console.log(abc, age, language) //4、字串擴充套件 let str = "hello.vue"; console.log(str.startsWith("hello"));//true console.log(str.endsWith(".vue"));//true console.log(str.includes("e"));//true console.log(str.includes("hello"));//true //字串模板 let ss = `<div> <span>helloworld<span> </div>`; console.log(ss); ////2、字串插入變數和表示式。變數名寫在${}中，${}中可以放入JavaScript表示式。 function fun() { return "這是一個函式" } let info = `我是${abc}，今年${age + 10}了, 我想說： ${fun()}`; console.log(info);//我是jack，今年31了，我想說這是一個函式
3、函式優化
//在ES6以前，我們無法給一個函式引數設定預設值，只能採用變通寫法： function add(a, b) { //判斷b是否為空，為空就給預設值1 b = b || 1; return a + b; } //傳一個引數 console.log(add(10)); //現在可以這麼寫：直接給引數寫上預設值，沒傳就會自動使用預設值 function add2(a, b = 1) { return a + b; } console.log(add2(20)); //2）、不定引數 function fun(...values) { console.log(values.length) } fun(1, 2)//2 fun(1, 2, 3, 4)//4 //3）、箭頭函式 //以前宣告一個方法 //varprint=function(obj){ //console.log(obj); //} var print = obj => console.log(obj); print("hello"); var sum = function (a, b) { c = a + b; return a + c; } var sum2 = (a, b) => a + b; console.log(sum2(11, 12)); var sum3 = (a, b) => { c = a + b; return a + c; } console.log(sum3(10, 20)) const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } functionhello(person){ console.log("hello,"+person.name) } //箭頭函式+解構 var hello2 = ({name}) => console.log("hello,"+name); hello2(person); //hello,jack
4、物件優化拓展運算子
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name","age","language"]
console.log(Object.values(person));//["jack",21,Array(3)]
console.log(Object.entries(person));//[Array(2),Array(2),Array(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//{a:1,b:2,c:3}
Object.assign(target, source1, source2);
console.log(target);//["name","age","language"]
//2）、宣告物件簡寫
const age = 23
const name = "張三"
const person1 = { age: age, name: name }
const person2 = { age, name }
console.log(person2);
//3）、物件的函式屬性簡寫
let person3 = {
name: "jack",
//以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭頭函式this不能使用，物件.屬性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉");
person3.eat2("蘋果")
person3.eat3("橘子");
//4）、物件拓展運算子
//1、拷貝物件（深拷貝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone)//{name:"Amy",age:15}
//2、合併物件
let age1 = { age: 15 }
let name1 = { name: "Amy" }
letp2= {name:"zhangsan"} //注意
p2={...age1,...name1}
console.log(p2) //{age:15,name:"Amy",}
5、map和reduce
//陣列中新增了map和reduce方法。
//map()：接收一個函式，將原陣列中的所有元素用這個函式處理後放入新陣列返回。
letarr=['1','20','-5','3'];
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item=> item*2);
console.log(arr);
//reduce() 為陣列中的每一個元素依次執行回撥函式，不包括陣列中被刪除或從未被賦值的元素，
//[2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
reduce(a,b,c,d)
1、a: previousValue （上一次呼叫回撥返回的值，或者是提供的初始值（initialValue））
2、b: currentValue （陣列中當前被處理的元素）
3、c: index （當前元素在陣列中的索引）
4、d: array （呼叫 reduce 的陣列）*/
//let result = arr.reduce((a,b)=>{
// console.log("上一次處理後："+a);
// console.log("當前正在處理："+b);
// return a + b;
// } //arr為[2,40,-10,6]
// conlole.log(result)// 上一次處理後：2 當前正在處理：40 上一次處理後：42 當前正在處理：-10 上一次處理後：32 當前正在處理：6 38
let result = arr.reduce((a,b)=>{
console.log("上一次處理後："+a);
console.log("當前正在處理："+b);
return a + b;
},100); //第一次處理時使用100和2相加，即列印 上一次處理後：100 當前正在處理：2 上一次處理後：102 當前正在處理：40 上一次處理後：142 當前正在處理：-10 上一次處理後：132 當前正在處理：6 138
console.log(result)
6、Promise
//1、查出當前使用者資訊
//2、按照當前使用者的id查出他的課程
//3、按照當前課程id查出分數
// $.ajax({
// url: "mock/user.json",
// success(data) {
// console.log("查詢使用者：", data);
// $.ajax({
// url: `mock/user_corse_${data.id}.json`,
// success(data) {
// console.log("查詢到課程：", data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success(data) {
// console.log("查詢到分數：", data);
// },
// error(error) {
// console.log("出現異常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出現異常了：" + error);
// }
// });
// },
// error(error) {
// console.log("出現異常了：" + error);
// }
// });
//1、Promise可以封裝非同步操作
// let p = new Promise((resolve, reject) => {
// //1、非同步操作
// $.ajax({
// url: "mock/user.json",
// success: function (data) {
// console.log("查詢使用者成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err);
// }
// });
// });
// p.then((obj) => {
// return new Promise((resolve, reject) => {
// $.ajax({
// url: `mock/user_corse_${obj.id}.json`,
// success: function (data) {
// console.log("查詢使用者課程成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err)
// }
// });
// })
// }).then((data) => {
// console.log("上一步的結果", data)
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success: function (data) {
// console.log("查詢課程得分成功:", data)
// },
// error: function (err) {
// }
// });
// })
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
get("mock/user.json")
.then((data) => {
console.log("使用者查詢成功~~~:", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("課程查詢成功~~~:", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("課程成績查詢成功~~~:", data)
})
.catch((err)=>{
console.log("出現異常",err)
});