forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1018-js-4.html
379 lines (344 loc) · 21.3 KB
/
1018-js-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" ./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" ./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<style>
.float {
float: left;
}
</style>
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal default center" role="application" data-transition-speed="slow" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
<section class="past" style="top: 158px; display: none;" hidden="" aria-hidden="true">
<h3>【JS-task4】return的用法是什么？若用在for循环中，还会执行下一次循环吗？</h3>
<p>分享人：冯亚超</p>
</section>
<section class="past" style="top: 3px; display: block;" hidden="" aria-hidden="true">
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>1.背景介绍</h3>
</section>
<section class="stack present" style="top: 0px; display: block;" data-previous-indexv="1">
<h3>什么是return?</h3>
<section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>return 语句从当前<b>函数</b><b>退出</b>，并从那个函数返回一个值。</p>
</section>
<section class="present" style="top: 148.5px; display: block;">
<pre><code class="hljs mel">
语法：
<span class="hljs-keyword">return</span>[()[<span class="hljs-keyword">expression</span>][]];
可选项 <span class="hljs-keyword">expression</span> 参数是要从函数返回的值。如果省略，则该函数不返回值。
</code></pre>
<p>用 return 语句来终止一个函数的执行，并返回 expression 的值。如果 expression 被省略，
或在函数内没有 return 语句被执行，则把值 undefined 赋给调用当前函数的表达式。</p>
</section>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<h3>2.知识剖析</h3>
</section>
<section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
<p>return作为返回关键字，它有以下两种返回方式</p>
</section>
<section style="text-align: left; top: 0px; display: none;" hidden="" aria-hidden="true" class="future">
<h4>1、返回函数结果</h4>
<p>语法为：return+表达式</p>
<p>语句结束函数执行，返回调用函数，而且把表达式的值作为函数的结果。</p>
<pre><code class="hljs kotlin">
function add(){
<span class="hljs-variable"><span class="hljs-keyword">var</span> a</span>=<span class="hljs-number">1</span>;
<span class="hljs-variable"><span class="hljs-keyword">var</span> b</span>=<span class="hljs-number">2</span>;
<span class="hljs-keyword">return</span> a+b;
}
function <span class="hljs-function"><span class="hljs-title">fun</span><span class="hljs-params">()</span>{</span>
console.log(add())
}
<span class="hljs-function"><span class="hljs-title">fun</span><span class="hljs-params">()</span>;</span>
</code></pre>
<p>return 表示从被调函数返回到主调函数继续执行，返回时可附带一个返回值，
由return后面的参数指定。return通常是必要的，因为函数调用的时候计算结果通常是通过返回值带出的。</p>
</section>
<section style="text-align: left; top: 84px; display: none;" hidden="" aria-hidden="true" class="future">
<h4>2、返回函数控制</h4>
<p>语法为：return;</p>
<p>通常情况下return后面跟有表达式，但是并不是绝对的。此情况就是单纯的将控制权转交给主调函数继续执行。</p>
<p>在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为。
例如,默认情况下点击一个a元素,页面会跳转到该元素href属性指定的页。
</p>
<pre><code class="hljs stylus"> <<span class="hljs-selector-tag">a</span> href=<span class="hljs-string">"http:www.baidu.com;alert(11);return false;alert(22)"</span>>链接</a></code></pre>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="future">
<p>在js中，我们常用return false来阻止提交表单或者继续执行下面的代码。 例如下面的例子：</p>
<pre><code class="hljs php">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">if</span> (Ture)
<span class="hljs-keyword">return</span> <span class="hljs-keyword">false</span>;
};
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Test</span><span class="hljs-params">()</span></span>{
a();
b();
c();
};
</code></pre>
<p>即使a函数返回return false 阻止提交了，但是不影响 b()以及 c()函数的执行。在Test()函数里调用a()函数，那么
return false 对于Test()函数来说，只是相当于返回值，而不能阻止Test()函数执行。 </p>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="stack future">
<section style="text-align: center; top: 330px; display: none;"><h3>3.常见问题</h3></section>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="future">
<h3>若return用在for循环中，还会执行下一次循环吗？</h3>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="stack future">
<section style="text-align: center; top: 330px; display: none;"><h3>4 解决方案</h3></section>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<p>代码示例:</p>
<pre><code class="hljs nimrod">
function test() {
<span class="hljs-literal">result</span> = [];
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < <span class="hljs-number">10</span>; i++) {
<span class="hljs-literal">result</span>.push(i);
<span class="hljs-keyword">return</span> <span class="hljs-literal">result</span>;
}
}
console.log(test());
</code></pre>
<p>我们可以看到，for循环只返回return所返回的值，并不会执行下一次循环。</p>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="stack future">
<section style="text-align: center; top: 330px; display: none;"><h3>5.编码实战</h3></section>
</section>
<section hidden="" aria-hidden="true" class="stack future" style="top: 330px; display: none;">
<section style="top: 330px; display: none;">
<h3 style="text-align: center">6.扩展思考</h3>
<p>除了return之外，还有哪些语句可以跳出循环？</p>
</section>
<section class="future" aria-hidden="true" style="top: 330px; display: none;">
<p>break</p>
<pre><code class="hljs hsp">
<span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span><span class="hljs-comment">;i<=10;i++){</span>
<span class="hljs-keyword">if</span>(i==<span class="hljs-number">5</span>){<span class="hljs-keyword">break</span><span class="hljs-comment">;}</span>
console.log(i)<span class="hljs-comment">;</span>
}
</code></pre>
<p>上面这个break实例，输出的结果为：12345，当i的值等于5的时候直接通过break跳出了循环，不再继续往下运行。</p>
</section>
<section class="future" aria-hidden="true" style="top: 330px; display: none;">
<p>continue</p>
<pre><code class="hljs hsp">
<span class="hljs-keyword">for</span>(var i=<span class="hljs-number">1</span><span class="hljs-comment">;i<=10;i++){</span>
<span class="hljs-keyword">if</span> (i == <span class="hljs-number">6</span>) <span class="hljs-keyword">continue</span><span class="hljs-comment">;</span>
console.log(i)<span class="hljs-comment">;</span>
}
</code></pre>
<p>上面这个continue实例，输出的结果为：1234578910，当i的值等于6的时候直接跳过，继续执行循环。</p>
</section>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="future">
<h3>7.参考文献</h3>
<p>参考1：<a href="http://www.jb51.net/article/75985.htm">JavaScript中的return语句简单介绍</a></p>
<p>参考2：<a href="http://www.jb51.net/article/30388.htm">javascript中break，continue和return语句用法小结</a></p>
<p>参考2：<a href="http://blog.csdn.net/gmd_web/article/details/50371841"> js中return的用法</a></p>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h3>8 更多讨论</h3>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="future">
<p>讨论点1：同样是跳出循环，return和break有什么区别？</p>
<p>讨论点2：同样是中断执行，return和return false有什么区别？</p>
<p>讨论点3：在什么应用场景下我们会用到break或continue？</p>
</section>
<section style="text-align: left; top: 330px; display: none;" hidden="" aria-hidden="true" class="future">
<p>1：break只能跳出当前的循环,但不跳出函数.return表示中止当前函数的运行，并将操作权返回给调用者</p>
<p>2：return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。return false就相当于终止符,return true就相当于执行符. </p>
<p>3：break是结束整个循环体;continue只能用于循环内部，作用是跳过当前循环的后面的内容，继续下一次循环判断。</p>
</section>
<section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 冯亚超</small>
</p>
</section>
</div>
<div class="backgrounds"><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background stack present" data-loaded="true" style="display: block;"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div></div><div class="slide-background stack future" style="display: none;"><div class="slide-background present" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 260.19px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left enabled" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up enabled" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">
语法：
return[()[expression][]];
可选项 expression 参数是要从函数返回的值。如果省略，则该函数不返回值。
用 return 语句来终止一个函数的执行，并返回 expression 的值。如果 expression 被省略，
或在函数内没有 return 语句被执行，则把值 undefined 赋给调用当前函数的表达式。
</div></div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
// history: true,
transition: 'default',
transitionSpeed: 'slow',
dependencies: [
{src: '../plugin/markdown/marked.js'},
{src: '../plugin/markdown/markdown.js'},
{src: '../plugin/notes/notes.js', async: true},
{
src: '../plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
// 原始类型对象直接赋值不会相互影响
// var a = 1;
//
// var b = a;
// b = 10;
// console.log(a); // 1
////
// var a = 'hello';
// var b = a;
// b = 'world';
// console.log(a); // hello
//
// var a = true;
// var b = a;
// b = false;
// console.log(a);
//数组浅复制
// var a = ['隔壁老王','冠希哥', '宋经理' //定义一个名为a的属猪，里面有3个值，
// ];
// var b = a; //定义一个变量b，把a赋值给他，这样比、b和a一样了
// b[2] = '冲冲老师'; //然后把b的第三个值等于冲冲老师
// console.log(a)//那么现在打印a 是什么结果呢
//
// var arr = ["One","Two","Three"]; //数组的深复制，slice方法
// var arrtoo = arr.slice(1);
// arrtoo[2] = "set Map";
// console.log(arr);//One,Two,Three
// console.log(arrtoo);//One,set Map,Three
//
// var arr1 = ["One","Two","Three"]; //数组的深复制，concat 方法
// var arrtooo = arr1.concat(111111);
// arrtooo[1] = "set Map To";
// console.log(arr1);//One,Two,Three
// console.log(arrtooo);//One,set Map To,Three
//
// var b=[1,2,3,4,5]; //concat的链接
// var c=[6,7,8,9];
// var d =[4,4,22]
// console.log(b.concat(c,d))
var a = {name: 'yy', age: 26}; //对象的浅拷贝哦
var b = new Object();
b.name = a.name;
b.age = a.age;
b.name = 'xx';
console.log(a);//Object { name="yy", age=26}
console.log(b);//Object { name="xx", age=26}
var d = { //对象的浅拷贝哦 第一种
name: 'd',
oc: {
age: 32
},
oad: {
adds: {
bb: 12
}
}
};
var deepCopy = function (source) {
var result = {};
for (var key in source) {
result[key] = typeof source[key] === 'object' ? deepCopy(source[key]) : source[key]
}
return result
};
var c = deepCopy(d);
c.name = 'c';
c.oc = {
age: 49
};
console.log(c);
console.log(d);
// var person = { //第二种深拷贝
// name: 'aa',
// friends: ['da', 'dsa', 'gf']
// };
//
// var aPerson = Object.create(person, {
//// name: {
//// value: "gee"
//// }
// });
//
// console.log(person.name);
// console.log(aPerson.friends)
var Chinese = {
nation: '中国'
}
var Doctor = {
career: '医生'
}
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
console.log(Doctor); // 中国
Chinese.birthPlaces = ['北京', '上海', '香港'];
var Doctor = extendCopy(Chinese);
Doctor.birthPlaces.push('厦门');
</script>
</body>
</html>