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
![一個視訊教你做谷歌seo。今天要分享的是谷歌seo優化的技巧。是否有遇到過這樣的情況：網站排名一直上不去，甚至找不到？别[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)