欢迎光临
我的个人博客网站

年轻人,你搞定对象了吗? -cyy

函数编程与面向对象实例对比:

<!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>

年轻人,你搞定对象了吗? -cyy

 

 

函数参数的解构特性及使用技巧:

<!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使用:

赞(0) 打赏
未经允许不得转载:张拓的天空 » 年轻人,你搞定对象了吗? -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏