1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>10走进JS对象</title>
9 </head>
10 <body>
11
12 <script>
13 /*
14 对象: 对象是属性和方法的集合，即封装。
15 方法: 定义在对象中的函数我们称为方法(方法是特殊的属性)。
16 示例:
17 let obj = {
18 // 属性
19 name: 'lc',
20 // 方法
21 get: function() {
22 return this.name;
23 },
24 };
25 console.log(obj.get());
26 */
27
28 /*10.1 */
29 /*10.1.1 函数式编程*/
30 // let name = "lc";
31 // let grade = [
32 // {name:"js",score: 99},
33 // {name:"docker",score: 76},
34 // ];
35 // function average(grade, name) {
36 // let total = grade.reduce((t,l) => t + l.score,0);
37 // return `${name} 的平均成绩是：${total / grade.length}`;
38 // }
39 // console.log(average(grade, name)); // lc 的平均成绩是：87.5
40
41 /*10.1.2 对象式编程*/
42 // let user = {
43 // name: "lc",
44 // grade: [
45 // {name:"js",score: 99},
46 // {name:"docker",score: 76},
47 // ],
48 // average: function () {
49 // let total = this.grade.reduce((t,l) => t + l.score,0);
50 // return `${this.name} 的平均成绩是：${total / this.grade.length}`;
51 // },
52 // };
53 // console.log(user.average()); // lc 的平均成绩是：87.5
54
55 /*10.2 对象属性的基本操作*/
56 // let user = {
57 // name: 'zhangSan',
58 // "my age": 18,
59 // };
60 // // 点语法(推荐)
61 // console.log(user.name); // zhangSan
62 // // 没有使用标准命名时使用中括号取对象属性值
63 // console.log(user["my age"]); // 18
64 // // for循环时使用中括号取对象属性值
65 // for (const key in user) {
66 // console.log(user[key]); // zhangSan 18
67 // }
68 // // 给对象添加属性
69 // user.city = "shanghai";
70 // user.get = function () {
71 // return `${this.name}所在的城市为${this.city}`;
72 // }
73 // console.log(user.get()); // zhangSan所在的城市为shanghai
74 // // 给对象删除属性
75 // console.log(delete user.city); // true
76 // console.log(user.city); // undefined
77
78 /*10.3 对象的引用传址*/
79 /*10.3.1 对象是一个引用类型*/
80 // let user = {};
81 // let web = user;
82 // web.name = "liSi";
83 // console.log(user.name); // liSi
84 // console.log(web.name); // liSi
85
86 /*10.3.2 函数传值类型*/
87 // let a = 1;
88 // // show 函数形参 a 属于函数局域变量，和全局变量 a 没有关系
89 // function show (a) {
90 // a = a + 100;
91 // console.log(a);
92 // }
93 // show(a); // 101
94 // console.log(a); // 1
95
96 /*10.3.3 函数传引用类型*/
97 // let user = {name: "liSi"};
98 // // show 函数的形参 user 属于函数局域变量，和全局变量 user 没有关系
99 // function show (user) {
100 // user.age = 18;
101 // console.log(user);
102 // }
103 // show(user); // {name: 'liSi', age: 18}
104 // console.log(user); // {name: 'liSi', age: 18}
105
106 /*10.4 展开语法在对象中的使用*/
107 // let user = {
108 // name: "liSi",
109 // age: 18,
110 // };
111 // let info = {...user,city: "shanghai"};
112 // console.log(user); // {name: 'liSi', age: 18}
113 // console.log(info); // {name: 'liSi', age: 18, city: 'shanghai'}
114
115 /*10.5 解构赋值*/
116 // 将对象变为变量
117 /*10.5.1 解构赋值基本使用*/
118 // let user = {name:"liSi",age:18};
119 // console.log(user); // {name: 'liSi', age: 18}
120 // // 属性名和值名一样时可以只简写属性名
121 // let {name, age} = user; // let {name: name, age: age} = user;
122 // console.log(name, age); // liSi 18
123
124 /*10.5.2 对函数返回的对象进行解构赋值*/
125 // function show() {
126 // return {name:"liSi",age:18};
127 // }
128 // let {name,age} = show();
129 // console.log(name,age); // liSi 18
130
131 /*10.5.3 对函数传参进行解构赋值*/
132 // function user({name,age}) {
133 // console.log(name,age);
134 // }
135 // user({name:"liSi",age:18}); // liSi 18
136
137 /*10.5.4 对象解构时只取一个值*/
138 // let user = {name:"liSi",age:18};
139 // let {age} = user;
140 // console.log(age); // 18
141
142 /*10.6 变量解构*/
143 // 将变量变为对象
144 // let name = "liSi",
145 // age = 18;
146 // // 属性名和值名一样时可以只简写属性名
147 // let opt = {name, age}; // let opt = {name: name, age: age};
148 // console.log(opt); // {name: 'liSi', age: 18}
149
150 /*10.7 多层对象的解构操作*/
151 // let web = {
152 // name: "baidu",
153 // lesson: {
154 // title: "js",
155 // },
156 // };
157 // let {name, lesson:{title}} = web;
158 // console.log(name,title); // baidu js
159
160 /*10.8 解构默认值实现配置项合并*/
161 /*10.8.1 数组解构*/
162 // let arr = ["baidu","baidu.com"];
163 // let [a,b,c="web"] = arr;
164 // console.log(a,b,c); // baidu baidu.com web
165
166 /*10.8.2 对象解构*/
167 // let user = {name: "baidu", url: "baidu.com", title: "搜索引擎"};
168 // // 为title定义默认值，有值时使用已有值，没有值时使用定义的默认值
169 // let {url,name,title="全球第一的中文搜索引擎"} = user;
170 // console.log(name,url,title); // baidu baidu.com 搜索引擎
171
172 /*10.9 函数参数的解构特性使用技巧*/
173 /*10.9.1 数组的方式*/
174 // function web([name,url]) {
175 // console.log(name,url);
176 // }
177 // web(["baidu","baidu.com"]); // baidu baidu.com
178
179 /*10.9.2 对象的方式*/
180 // function web(info, {name, url}) {
181 // console.log(info, name, url);
182 // }
183 // web("搜索引擎", {name: "baidu", url: "baidu.com"}); // 搜索引擎 baidu baidu.com
184
185 /*10.10 对象属性的添加删除操作*/
186 /*10.10.1 对象属性添加操作*/
187 // let web = {};
188 // web.name = "baidu";
189 // web['url'] = "baidu.com";
190 // console.log(web); // {name: 'baidu', url: 'baidu.com'}
191
192 /*10.10.2 对象属性删除操作*/
193 // let web = {name: "baidu", url: "baidu.com"};
194 // console.log(delete web.url); // true
195 // console.log(web); // {name: 'baidu'}
196
197 /*10.10.3 检测对象中属性是否存在*/
198 // let web = {name: "baidu", url: "baidu.com"};
199 // console.log(web.hasOwnProperty("name")); // true
200 // console.log(web.hasOwnProperty("info")); // false
201
202 /*10.11 对象与原型链属性检测实例*/
203 /*10.11.1 基本使用*/
204 // let web = ["baidu","baidu.com"];
205 // console.log(web); // (2)['baidu', 'baidu.com']
206 // // 不能检测对象的原型属性(父级属性)，只能检测自身的属性。
207 // console.log(web.hasOwnProperty("length")); // true
208 // console.log(web.hasOwnProperty("concat")); // false
209 // // 能检测对象的原型属性(父级属性)和自身的属性。
210 // console.log('length' in web); // true
211 // console.log('concat' in web); // true
212
213 /*10.11.2 为对象添加原型*/
214 // let a = {
215 // name: "baidu",
216 // };
217 // let b = {
218 // url: "baidu.com",
219 // };
220 // // 把 b 对象作为 a 对象的父亲
221 // Object.setPrototypeOf(a,b);
222 // console.log(a);
223 // /*
224 // {name: 'baidu'}
225 // name: "baidu"
226 // [[Prototype]]: Object
227 // url: "baidu.com"
228 // [[Prototype]]: Object
229 // */
230 // console.log(a.hasOwnProperty("url")); // false
231 // console.log("url" in a); // true
232
233 /*10.12 对象的计算属性与使用*/
234 /*10.12.1 对象的计算属性基本使用*/
235 // let web = {};
236 // let name = "url";
237 // web[name] = "sina.com";
238 // console.log(web.url); // sina.com
239
240 // let web = {name: "baidu", url:"baidu.com"};
241 // let liu = "chang";
242 // web[liu] = "sky"
243 // console.log(web); // {name: 'baidu', url: 'baidu.com', chang: 'sky'}
244 // console.log(web[liu]); // sky
245 // console.log(web["chang"]); // sky
246
247 /*10.12.2 对象的计算属性示例*/
248 // let web = {};
249 // let id = 0;
250 // web[`id=${++id}`] = id;
251 // web[`id=${++id}`] = id;
252 // web[`id=${++id}`] = id;
253 // console.log(web); // {id=1: 1, id=2: 2, id=3: 3}
254
255 /*10.13 对象的遍历操作*/
256 /*10.13.1 基本用法*/
257 // let web = {
258 // name: 'baidu',
259 // url: "baidu.com",
260 // };
261 // // 获取对象所有的属性名
262 // console.log(Object.keys(web)); // (2)['name', 'url']
263 // // 获取对象所有的属性值
264 // console.log(Object.values(web)); // (2)['baidu', 'baidu.com']
265 // // 同时获取对象的属性名和对应的属性值
266 // console.log(Object.entries(web));// (2)[Array(2), Array(2)]
267
268 /*10.13.2 循环*/
269 // for in 循环
270 // let web = {
271 // name: 'baidu',
272 // url: "baidu.com",
273 // };
274 // for (const key in web) {
275 // console.log(key, web[key]);
276 // /*
277 // name baidu
278 // url baidu.com
279 // */
280 // }
281
282 // for of 循环默认不能操作对象，可以操作数组
283 // let web = [{name:'baidu', url:"baidu.com"}];
284 // for (const value of web) {
285 // console.log(value.name, value.url); // baidu baidu.com
286 // }
287
288 // for of 循环对象
289 // let web = {
290 // name: 'baidu',
291 // url: "baidu.com",
292 // };
293 // // for of 遍历对象属性
294 // for (const key of Object.keys(web)) {
295 // console.log(key); // name url
296 // }
297 // // for of 遍历对象属性值
298 // for (const value of Object.values(web)) {
299 // console.log(value); // baidu baidu.com
300 // }
301 // // for of 同时遍历对象属性和属性值
302 // for (const [key,value] of Object.entries(web)) {
303 // console.log(key,value); // name baidu url baidu.com
304 // }
305
306 /*10.14 对象的浅拷贝多种操作方法*/
307 /*10.14.1 对象是一种引用类型，传递的是内存地址*/
308 // let web = {name: 'baidu'};
309 // let sky = web;
310 // sky.name = 'sina';
311 // console.log(web,sky); // {name: 'sina'} {name: 'sina'}
312
313 /*10.14.2 对象的浅拷贝*/
314 // 浅拷贝不能对深层次的对象进行复制，所以浅拷贝可以理解为是值类型的对象复制
315 // let web = {name: 'baidu'};
316 // let sky = {name: web.name};
317 // sky.name = 'sina';
318 // console.log(web,sky); // {name: 'baidu'} {name: 'sina'}
319
320 // let web = {name:"baidu", url:"baidu.com"};
321 // let sky ={};
322 // for (const key in web) {
323 // sky[key] = web[key];
324 // }
325 // sky.name = "百度";
326 // console.log(web, sky); // {name: 'baidu', url: 'baidu.com'} {name: '百度', url: 'baidu.com'}
327
328 // let web = {name:"baidu", url:"baidu.com"};
329 // let sky = Object.assign({}, web);
330 // sky.name = "百度";
331 // console.log(web, sky); // {name: 'baidu', url: 'baidu.com'} {name: '百度', url: 'baidu.com'}
332
333 // let web = {name:"baidu", url:"baidu.com"};
334 // let sky = {...web}; // 定义花括号等于开辟内存空间
335 // sky.name = "百度";
336 // console.log(web, sky); // {name: 'baidu', url: 'baidu.com'} {name: '百度', url: 'baidu.com'}
337
338 /*10.15 深拷贝多层次分析*/
339 /*10.15.1 浅拷贝深层对象示例*/
340 // let obj = {
341 // name: "baidu",
342 // url: {
343 // name: "baidu.com",
344 // },
345 // };
346 // let web = {
347 // name: obj.name,
348 // url: obj.url,
349 // };
350 // web.name = "百度";
351 // web.url.name = "www.baidu.com"
352 // console.log(obj);
353 // /*
354 // {name: 'baidu', url: {…}}
355 // name: "baidu"
356 // url: {name: 'www.baidu.com'}
357 // */
358 // console.log(web);
359 // /*
360 // {name: '百度', url: {…}}
361 // name: "百度"
362 // url: {name: 'www.baidu.com'}
363 // */
364
365 /*10.15.2 深拷贝对象示例*/
366 // function copy(object) {
367 // let res = {};
368 // for(const key in object) {
369 // res[key] = typeof object[key] == 'object' ? copy(object[key]) : object[key];
370 // }
371 // return res;
372 // }
373 // let obj = {
374 // name: "baidu",
375 // url: {
376 // name: "baidu.com",
377 // },
378 // };
379 // let web = copy(obj);
380 // web.name = "百度";
381 // web.url.name = "www.baidu.com";
382 // console.log(obj);
383 // /*
384 // {name: 'baidu', url: {…}}
385 // name: "baidu"
386 // url: {name: 'baidu.com'}
387 // */
388 // console.log(web);
389 // /*
390 // {name: '百度', url: {…}}
391 // name: "百度"
392 // url: {name: 'www.baidu.com'}
393 // */
394
395 /*10.15.3 深拷贝对象、数组示例*/
396 // console.log(typeof []); // object
397 // console.log(typeof {}); // object
398 // console.log([] instanceof Array); // true
399 // console.log({} instanceof Object); // true
400
401 // function copy(object) {
402 // let res = object instanceof Array ? [] : {};
403 // for(const [key, value] of Object.entries(object)) {
404 // res[key] = typeof value == 'object' ? copy(value) : value;
405 // }
406 // return res;
407 // }
408 // let obj = {
409 // name: "baidu",
410 // url: {
411 // name: "baidu.com",
412 // },
413 // arr: ["新浪","sina.com"],
414 // };
415 // let web = copy(obj);
416 // web.name = "百度";
417 // web.url.name = "www.baidu.com";
418 // web.arr.push("传媒");
419 // console.log(obj);
420 // /*
421 // {name: 'baidu', url: {…}, arr: Array(2)}
422 // arr: (2) ['新浪', 'sina.com']
423 // name: "baidu"
424 // url: {name: 'baidu.com'}
425 // */
426 // console.log(web);
427 // /*
428 // {name: '百度', url: {…}, arr: Array(3)}
429 // arr: (3) ['新浪', 'sina.com', '传媒']
430 // name: "百度"
431 // url: {name: 'www.baidu.com'}
432 // */
433
434 /*10.16 使用工厂函数创建对象*/
435 // function User(name) {
436 // return {
437 // name,
438 // show: function () {
439 // console.log(this.name + "-外星人");
440 // },
441 // };
442 // }
443 // let liSi = new User("李四");
444 // console.log(liSi); // {name: '李四', show: ƒ}
445 // liSi.show(); // 李四-外星人
446 // let wageEr = new User("王二");
447 // console.log(wageEr); // {name: '王二', show: ƒ}
448 // wageEr.show(); // 王二-外星人
449
450 /*10.17 构造函数创建对象的方式*/
451 // 命名规范: 每个单词的首字母大写，this表示调用当前方法(函数)的对象。
452 // function User(name) {
453 // this.name = name;
454 // this.show = function () {
455 // console.log(this.name);
456 // console.log(this);
457 // };
458 // }
459 // let liSi = new User("李四");
460 // console.log(liSi); // User{name: '李四', show: ƒ}
461 // liSi.show(); // 李四 User{name: '李四', show: ƒ}
462 // let func = liSi.show;
463 // func(); //"" windows对象
464
465 /*10.18 面向对象的封装与抽象*/
466 // 将复杂功能隐藏在内部，只开放给外部少量方法，更改对象内部的复杂逻辑不会对外部调用造成影响即抽象。
467 // 使用闭包特性将对象进行抽象处理。
468 // function User(name,age) {
469 // // 为对象属性做抽象处理，不允许外部修改
470 // let data = {name, age};
471 // let info = function () {
472 // return data.age > 50 ? "老年" : "青年";
473 // };
474 // this.show = function () {
475 // console.log(data.name + info());
476 // };
477 // }
478 // let liSi = new User("李四",24);
479 // liSi.name = "王二";
480 // liSi.info = function () {
481 // return "";
482 // }
483 // liSi.show() // 李四青年
484
485 /*10.19 对象的属性特征*/
486 // let user = {
487 // name: "李四",
488 // age: 18,
489 // };
490 // // 查看对象中一个属性的特征
491 // console.log(JSON.stringify(Object.getOwnPropertyDescriptor(user,"name"),null,2));
492 // /*
493 // {
494 // "value": "李四", // 设置属性值
495 // "writable": true, // 属性值可以修改
496 // "enumerable": true, // 属性可以遍历，使用Object.keys()可以读取到内容
497 // "configurable": true // 属性可以删除、属性特征可以被重新配置
498 // }
499 // */
500 // // 查看对象中所有属性的特征
501 // console.log(JSON.stringify(Object.getOwnPropertyDescriptors(user),null,2));
502 // /*
503 // {
504 // "name": {
505 // "value": "李四",
506 // "writable": true,
507 // "enumerable": true,
508 // "configurable": true
509 // },
510 // "age": {
511 // "value": 18,
512 // "writable": true,
513 // "enumerable": true,
514 // "configurable": true
515 // }
516 // }
517 // */
518
519 /*10.20 灵活控制属性的特征*/
520 /*10.20.1 更改对象单个属性特征*/
521 // let user = {
522 // name: "李四",
523 // age: 18,
524 // };
525 // // 查看对象中一个属性的特征
526 // console.log(JSON.stringify(Object.getOwnPropertyDescriptor(user,"name"),null,2));
527 // /*
528 // {
529 // "value": "李四",
530 // "writable": true,
531 // "enumerable": true,
532 // "configurable": true
533 // }
534 // */
535 // // 更改对象某个属性特征
536 // Object.defineProperty(user,"name",{
537 // value: "张三", // 修改属性值
538 // writable: false, // 修改属性值不允许修改
539 // });
540 // // 查看对象中一个属性的特征
541 // console.log(JSON.stringify(Object.getOwnPropertyDescriptor(user,"name"),null,2));
542 // /*
543 // {
544 // "value": "张三",
545 // "writable": false,
546 // "enumerable": true,
547 // "configurable": true
548 // }
549 // */
550 // console.log(user.name); // 张三
551 // // 修改user对象的name属性值修改不成功
552 // user.name = "王二";
553 // console.log(user.name); // 张三
554
555 /*10.20.2 更改对象所有属性特征*/
556 // let user = {
557 // name: "李四",
558 // age: 18,
559 // };
560 // Object.defineProperties(user, {
561 // name: {
562 // // 修改该属性的值
563 // value: "张三",
564 // writable: true,
565 // enumerable: true,
566 // configurable: true
567 // },
568 // age: {
569 // // 修改该属性的值
570 // value: 26,
571 // writable: true,
572 // // 设置该属性不可被遍历
573 // enumerable: false,
574 // configurable: true
575 // }
576 // });
577 // console.log(user.name,user.age); // 张三 26
578 // console.log(Object.values(user)); // ['张三']
579
580 /*10.21 不允许向对象中添加属性API*/
581 // let user = {
582 // name: "liSi",
583 // age: 18,
584 // }
585 // // 设置不允许向对象中添加属性
586 // Object.preventExtensions(user);
587 // // 对象是否可添加新属性判断，为true时可添加，为false时不可添加
588 // if (Object.isExtensible(user)) {
589 // user.city = "上海";
590 // }
591 // console.log(user); // {name: "liSi", age: 18}
592
593 /*10.22 封闭对象的API操作*/
594 // 不能往对象中添加属性，不能删除对象属性，不能修改对象的属性特征
595 // let user = {
596 // name: "liSi",
597 // age: 18,
598 // }
599 // // 设置对象为封闭状态
600 // Object.seal(user);
601 // // 查看对象的所有属性特征
602 // console.log(JSON.stringify(Object.getOwnPropertyDescriptors(user),null,2));
603 // /*
604 // {
605 // "name": {
606 // "value": "liSi",
607 // "writable": true,
608 // "enumerable": true,
609 // "configurable": false
610 // },
611 // "age": {
612 // "value": 18,
613 // "writable": true,
614 // "enumerable": true,
615 // "configurable": false
616 // }
617 // }
618 // */
619 // // 判断对象是否为封闭状态，为true时为封闭状态，false为非封闭状态
620 // if (!Object.isSealed(user)) {
621 // // 增加对象属性
622 // user.city = "shangHai";
623 // // 删除对象属性
624 // delete user.name;
625 // }
626 // console.log(user); // {name: "liSi", age: 18}
627
628 /*10.23 冻结对象API特性*/
629 // 不能往对象中添加属性，不能删除对象属性，不能修改对象属性值，不能修改对象的属性特征
630 // let user = {
631 // name: "liSi",
632 // age: 18,
633 // }
634 // // 设置对象为冻结状态
635 // Object.freeze(user);
636 // // 查看对象的所有属性特征
637 // console.log(JSON.stringify(Object.getOwnPropertyDescriptors(user),null,2));
638 // /*
639 // {
640 // "name": {
641 // "value": "liSi",
642 // "writable": false,
643 // "enumerable": true,
644 // "configurable": false
645 // },
646 // "age": {
647 // "value": 18,
648 // "writable": false,
649 // "enumerable": true,
650 // "configurable": false
651 // }
652 // }
653 // */
654 // // 判断对象是否为冻结状态，true时为冻结状态，false时为非冻结状态
655 // if (!Object.isFrozen(user)) {
656 // // 增加对象属性
657 // user.city = "shangHai";
658 // // 删除对象属性
659 // delete user.name;
660 // // 修改对象属性
661 // user.age = 26
662 // }
663 // console.log(user); // {name: 'liSi', age: 18}
664
665 /*10.24 使用访问器保护数据*/
666 /*
667 (1) getter 方法用于获得属性值，setter 方法用于设置属性，这是 JS 提供的存取器特性即使用函数来管理属性。
668 (2) 用于避免错误的赋值; 需要动态监测值的改变; 属性只能在访问器和普通属性任选其一，不能共同存在。
669 */
670 // let user = {
671 // data : {name: "liSi", age: 18},
672 // // 用set设置访问器，用于
673 // set age(value) {
674 // console.log("setAge");
675 // if(typeof value !== "number" || value < 10 || value > 100) {
676 // throw new Error("年龄格式错误");
677 // }
678 // this.data.age = value;
679 // },
680 // get age() {
681 // console.log("getAge");
682 // return this.data.age;
683 // }
684 // };
685 // user.age = 88; // setAge
686 // console.log(user.age); // getAge 88
687
688 /*10.25 访问器伪造属性操作*/
689 // let lesson = {
690 // lists: [
691 // {name:"js",price: 100},
692 // {name:"mysql",price: 212},
693 // {name:"vue.js",price: 98},
694 // ],
695 // get total() {
696 // return this.lists.reduce((t,l) => t + l.price,0);
697 // },
698 // };
699 // console.log(lesson.total); // 410
700
701 /*10.26 使用访问器批量设置属性*/
702 // let web = {
703 // data : {name: "baidu", url: "www.baidu.com"},
704 // set site(value) {
705 // [this.data.name, this.data.url] = value.split(",");
706 // },
707 // get site() {
708 // return `${this.data.name}的网址是${this.data.url}`;
709 // },
710 // };
711 // console.log(web.site); // baidu的网址是www.baidu.com
712 // web.site = "sina,www.sina.com";
713 // console.log(web.site); // sina的网址是www.sina.com
714
715 /*10.27 TOKEN的读写处理*/
716 // const request = {
717 // set token(content){
718 // localStorage.setItem('token',content)
719 // },
720 // get token(){
721 // const token = localStorage.getItem('token')
722 // if(!token){
723 // alert('请登录')
724 // }
725 // return token
726 // }
727 // }
728 // request.token = 'ecdh8u38uu74lc891'
729 // console.log(request.token)//ecdh8u38uu74lc891
730
731 /*10.28 访问器的优先级*/
732 /*10.28.1 访问器设置属性的优先级高于普通设置属性*/
733 // let user = {
734 // // 普通属性
735 // name: "张三",
736 // // 访问器设置属性
737 // set name(value) {
738 // console.log(value + "-访问器");
739 // },
740 // age: 18,
741 // };
742 // user.name = "李四";
743 // console.log(user); // 李四-访问器 {age: 18}
744
745 /*10.28.2 未私有化data*/
746 // let user = {
747 // // 普通属性
748 // data: {name: "张三"},
749 // // 访问器设置属性
750 // set name(value) {
751 // this.data.name = value+"-访问器";
752 // },
753 // age: 18,
754 // };
755 // user.name = "李四";
756 // console.log(user);
757 // /*
758 // {data: {…}, age: 18}
759 // age: 18
760 // data: {name: '李四-访问器'}
761 // */
762 // console.log(user.data.name); // 李四-访问器
763
764 /*10.28.3 私有化data*/
765 // Symbol是唯一的
766 // console.log(Symbol() === Symbol()); // false
767 // const DATA = Symbol();
768 // let user = {
769 // // 普通属性
770 // [DATA]: {name: "张三"},
771 // // 访问器设置属性
772 // set name(value) {
773 // this[DATA].name = value+"-访问器";
774 // },
775 // age: 18,
776 // };
777 // user.name = "李四";
778 // console.log(user);
779 // /*
780 // {age: 18, Symbol(): {…}}
781 // age: 18
782 // Symbol(): {name: '李四-访问器'}
783 // */
784 // console.log(user[Symbol()]); // undefined
785
786 /*10.29 构造函数中使用访问器*/
787 // function User(name, age) {
788 // // 使用闭包变为私有化属性
789 // let data = {name, age};
790 // Object.defineProperties(this,{
791 // name: {
792 // set(value) {
793 // data.name = value;
794 // },
795 // get() {
796 // return data.name;
797 // },
798 // },
799 // age: {
800 // set(value) {
801 // data.age = value;
802 // },
803 // get() {
804 // return data.age;
805 // },
806 // },
807 // });
808 // }
809 // let zhangSan = new User("张三",18);
810 // console.log(zhangSan.name); // 张三
811 // console.log(zhangSan.age); // 18
812 // console.log(zhangSan); // User{}
813 // zhangSan.name = "李四";
814 // console.log(zhangSan.name); // 李四
815 //
816 // let wangEr = new User("王二", 29);
817 // console.log(wangEr.name); // 王二
818 // console.log(wangEr.age); // 29
819
820 /*10.30 JSON数据*/
821 // let data = {
822 // name: "四川",
823 // city: {
824 // name: "成都",
825 // },
826 // };
827 // let json = JSON.stringify(data,null,2);
828 // console.log(json);
829 // /*
830 // {
831 // "name": "四川",
832 // "city": {
833 // "name": "成都"
834 // }
835 // }
836 // */
837 // console.log(typeof json); // string
838
839 /*10.31 JSON序列化与自定义toJSON*/
840 /*10.31.1 JSON序列化*/
841 // let web = {
842 // title: "百度",
843 // url: "baidu.com",
844 // info: {
845 // describe: "中文搜索引擎",
846 // city: "北京",
847 // created_at: 2005,
848 // },
849 // };
850 // // 1 不添加参数的情况
851 // let json = JSON.stringify(web);
852 // console.log(json); // {"title":"百度","url":"baidu.com","info":{"describe":"中文搜索引擎","city":"北京","created_at":2005}}
853 // // 2 添加参数的情况
854 // // 参数一: 要转为json的数据；参数二: 数据转为json时要保留的属性；参数三: 数据转为json后的tab制表位
855 // let json1 = JSON.stringify(web,["title","url"],2);
856 // console.log(json1);
857 // /*
858 // {
859 // "title": "百度",
860 // "url": "baidu.com"
861 // }
862 // */
863
864 /*10.31.2 自定义toJSON*/
865 // let web = {
866 // title: "百度",
867 // url: "baidu.com",
868 // info: {
869 // describe: "中文搜索引擎",
870 // city: "北京",
871 // created_at: 2005,
872 // },
873 // toJSON: function(){
874 // return {
875 // title: this.title,
876 // city: this.info.city,
877 // };
878 // },
879 // };
880 // let json = JSON.stringify(web,null,2);
881 // console.log(json);
882 // /*
883 // {
884 // "title": "百度",
885 // "city": "北京"
886 // }
887 // */
888
889 /*10.32 JSON转为JS可操作类型*/
890 // let web = {
891 // title: "百度",
892 // url: "baidu.com",
893 // info: {
894 // describe: "中文搜索引擎",
895 // city: "北京",
896 // created_at: 2005,
897 // },
898 // };
899 // // 1 将对象转换为JSON格式
900 // let json = JSON.stringify(web,null,2);
901 // console.log(typeof json); // string
902 // // 2 将JSON格式转换为对象
903 // let obj = JSON.parse(json);
904 // console.log(obj.info.city); // 北京
905 // // 3 对转换的格式进行处理
906 // let obj1 = JSON.parse(json, (key,value) => {
907 // if (key === "title") {
908 // value = "www-" + value;
909 // }
910 // return value;
911 // });
912 // console.log(obj1);
913 // /*
914 // {title: 'www-百度', url: 'baidu.com', info: {…}}
915 // info: {describe: '中文搜索引擎', city: '北京', created_at: 2005}
916 // title: "www-百度"
917 // url: "baidu.com"
918 // */
919
920 </script>
921 </body>
922 </html>
浙公网安备 33010602011771号