- A+
所属分类：Web前端
函数编程与面向对象实例对比：
<!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使用：
