函式編程與面向物件實體對比：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // 函式編程 let name = 'cyy'; let scores = [ { name: 'html', score: 90 }, { name: 'css', score: 77 }, { name: 'js', score: 57 }, ]; function average(scores, name) { let total = scores.reduce((t, i) => t + i.score, 0); let res = Math.round(total / scores.length); return `${name}的平均成績是${res}`; } console.log(average(scores, name)); // 面向物件編程 let user = { name: 'cyy', scores: [ { name: 'html', score: 90 }, { name: 'css', score: 77 }, { name: 'js', score: 57 }, ], average() { let total = this.scores.reduce((t, i) => t + i.score, 0); let res = Math.round(total / this.scores.length); return `${this.name}的平均成績是${res}`; } } console.log(user.average()); </script> </body> </html>
屬性的基本操作方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> let user = { name: 'cyy', 'pass word': 111 } console.log(user.name); console.log(user['name']); // console.log(user.pass word); console.log(user['pass word']); // 不規則的命名要用方括號 for (const k in user) { console.log(user.k); console.log(user[k]); // 變數要用方括號 } // 動態添加屬性和方法 user.age = 19; user.show = function () { return `${this.age}`; } console.log(user.show()) </script> </body> </html>
物件的參考傳址：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // 傳址 // let user = {} // let user2 = user; // user2.name = 'cyy'; // console.log(user, user2); // 傳值 function show(a) { a += 100; console.log(a); } let a = 1; show(a); // 函式的環境會在函式執行結束后被銷毀 console.log(a); // 傳址 function show2(obj) { obj.name = 'cyy'; console.log(obj); } let obj = {}; show2(obj); // 函式的環境會在函式執行結束后被銷毀 console.log(obj); </script> </body> </html>
使用展開語法完成引數合并：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // let arr = [1, 2, 3]; // let arr2 = [...arr, 4, 5]; // console.log(arr2); // let user = { // name: 'cyy', // age: 18 // }; // let user2 = { ...user, lang: 'ch' }; // console.log(user2); function upload(params) { let config = { type: '*.jpeg,*.png', size: 10000 }; config = { ...config, ...params }; // 物件中存在同名屬性，后面的會覆寫前面的 return config; } console.log(upload({ type: '*.gif' })); </script> </body> </html>
解構賦值新增特性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // let user = { name: 'cyy', age: 18 }; // let { name: a, age: b } = user; // console.log(a, b); // let user = { name: 'cyy', age: 18 }; // let { name: name, age: age } = user; // console.log(name, age); // let user = { name: 'cyy', age: 18 }; // let { name, age } = user; // console.log(name, age); // 函式的回傳值也可以進行解構賦值 // function func() { // return { name: 'cyy', age: 18 }; // } // let { name, age } = func(); // console.log(name, age); // function user({ name, age }) { // console.log(name, age); // } // user({ name: 'cyy', age: 18 }); // let { random } = Math; // console.log(random()); let user = { name: 'cyy', age: 18 }; let { name } = user; console.log(name); // 不一定要獲取全部，獲取一個也是可以的 </script> </body> </html>
嚴格模式中解構的差異：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // let user = { name: 'cyy', age: 18 }; // let { name, age } = user; // console.log(name, age); // let user = { name: 'cyy', age: 18 }; // ({ name, age } = user); // console.log(name, age); 'use strict'; let user = { name: 'cyy', age: 18 }; ({ name, age } = user); console.log(name, age); </script> </body> </html>
解構操作的簡寫形式與變數解構：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // let user = { name: 'cyy', age: 18 }; // let { name, age } = user; // console.log(name, age); // let arr = [1, 2, 3]; // let [a, b, c] = arr; // console.log(a, b, c); // let arr = [1, 2, 3]; // let [, , c] = arr; // console.log(c); // let user = { name: 'cyy', age: 18 }; // let { age } = user; // console.log(age); // let name = 'cyy', age = 18; // let obj = { name: name, age: age }; // console.log(obj); // 屬性和值同名時，可以省略 let name = 'cyy', age = 18; let obj = { name, age }; console.log(obj); </script> </body> </html>
多層物件的解構操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> let user = { name: 'cyy', grade: { title: 'title1', score: 199 } }; let { name, grade: { title, score } } = user; console.log(name, title, score); </script> </body> </html>
解構默認值實作配置項合并：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // let arr = [1, 2, 3]; // let [a, b, c, d = 'aaa'] = arr; // console.log(a, b, c, d); // let user = { // name: 'cyy', // age: 18 // }; // let { name, title = 'html' } = user; // console.log(name, title); // 引數的合并 function createEle(options) { let { width = 100, height = 100, backgroundColor = 'lightblue' } = options; let div = document.createElement('div'); div.style.width = width + 'px'; div.style.height = height + 'px'; div.style.backgroundColor = backgroundColor; document.body.append(div); } createEle({ width: 200, bgcolor: 'pink' }); </script> </body> </html>
函式引數的解構特性及使用技巧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> button { position: absolute; } </style> </head> <body> <script> // function func([a, b]) { // console.log(a, b); // } // func([111, 222]); // function func({ name, age }) { // console.log(name, age); // } // func({ name: 'cyy', age: 18 }); // 部分解構 function func(name, { sex, age }) { console.log(name, age, sex); } func('cyy', { sex: 'girl', age: 18 }); </script> </body> </html>
物件屬性的添加洗掉操作：
// 屬性的添加 let obj = {}; obj.name = 'cyy'; obj['age'] = 18; console.log(obj); // 屬性的洗掉 delete obj.name; console.log(obj); // 檢測物件是否含有屬性 console.log(obj.hasOwnProperty('name')); console.log(obj.hasOwnProperty('age'));
物件與原型鏈屬性檢測實體：
<script>
// hasOwnProperty只查找自身的屬性，不會去查找原型上的屬性
// let arr = [1, 2, 3];
// console.log(arr.hasOwnProperty('length'));
// console.log(arr.hasOwnProperty('concat'));
// let arr = [1, 2, 3];
// console.log('length' in arr);
// console.log('concat' in arr);
// 把obj1的原型指向obj2
// let obj1 = {
// name: 'cyy'
// };
// let obj2 = {
// age: 18
// }
// Object.setPrototypeOf(obj1, obj2);
// console.log(obj1);
// console.log(obj1.hasOwnProperty('age'));
// console.log('age' in obj1);
function oss(options) {
if (!options.hasOwnProperty('host')) {
throw new Error('必須設定主機地址');
}
}
oss({ name: 'admin' });
</script>
計算屬性與assign使用：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/225059.html
標籤：JavaScript