Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 数组与函数的调用（0226）
Blogger Information
Blog 26
fans 0
comment 2
visits 35112
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数组与函数的调用（0226）
小辰
Original
977 people have browsed it

1.数组的访问与遍历

数组对象的作用是：

使用单独的变量名来存储一系列的值。

数组的访问

使用数组索引可以直接访问
例如：arr[i]
其中i可以是数字表示数组的顺序，也可以是一个数组中值得键名表示

数组的遍历

for循环来遍历
for in ：遍历对象
ES5: forEach()
ES6中的箭头函数

类数组：

借助的对象字面量的语法来创建的类数组，和数组大致相同。
1.成员的键名必须是0递增的正整数
2.对象必须要有一length属性
下面是实验的过程

控制台的效果图

代码部分
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>数组遍历</title>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <!-- 1 将课程中的所有案例全部在按制台运行一遍
  9. 2 对于数组的声明,访问,遍历常用的方法全部全部熟练掌握
  10. 3 对于函数的声明,调用,参数,以及常用属性,arguments对象必须掌握
  11. 4 将数组的遍历与函数的调用与参数处理提交到博客中 -->
  12. <script type="text/javascript">
  13.     var apho = ['apple','apple1','apple2','apple3'];
  14.     apho.name = 'daapp';
  15.     apho['user name'] = 'app';
  16.     //for循环遍历
  17.     for (var i = 1; i <= 1; i++) {
  18.     console.log(apho[i]);
  19.     }
  21.     //for in: 遍历对象
  22.     for (var i in apho) {
  23.         console.log(apho[i]);
  24.         }
  25.     // foreach遍历数组
  26.     apho.forEach(function(item, key, apho){
  27.             // console.log(item);
  28.             console.log(apho[key]);
  29.         });
  30.     //foreach箭头函数，遍历数组
  31.     apho.forEach(item=>console.log(item));
  32. //类数组
  33.     var objArr = {
  34.             0: 'hello',
  35.             1: 'wrold',
  36.             2: {1:33.5, 2:44.5},
  37.             3: 'defind',
  38.             length: 4
  39.         };
  40.   //  objArr.forEach(function (item){
  41.   //           console.log(item);
  42.   //       })
  43.     for (var i = 0; i < 3; i++) {
  44.             var p = document.createElement('p');
  45.             p.innerHTML='hello wrold';
  46.             document.body.appendChild(p);
  47.             console.log(p);
  48.         }
  49.     var eles = document.getElementsByTagName('p');
  50.     console.log(eles);
  51.     for (var i = 0; i < eles.length; i++) {
  52.             console.log(eles[i].innerHTML);
  53.         }
  54. </script>
  55. </body>
  56. </html>

2.函数的声明,调用

函数的声明

function show1(value) { console.log(value); }

函数的调用

show1('what you name ');
构造函数:构建JS语句大厦的基础
构造函数是用来创建对象的
构造函数可以由任何函数构成,但并不是都会创建出对象,除非用new
function show() {...}

函数的重复申明

js中的函数允许重复声明,以最后一个为准
es5中变量允许重复声明

return返回

一旦遇到return 返回给调用者后面的语句全部忽略

函数也是对象, 对象就会有属性/方法

函数有name, length的属性
console.log(add.name);
console.log(add.length);

函数的方法:

toString(), 返回函数源代码console.log(add.toString());

函数作用域

全局: global: 顶层函数之外声明的,可以在函数内访问
局部: local: 函数内部声明,仅限内部访问,外部不可见
函数内部声明的变量如果不加var,就不能和当前的作用域绑定, 自动与全局绑定

下面是控制台的效果图

主要代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>函数</title>
  7. </head>
  9. <body>
  10.     <script>
  11.     //函数的声明
  12.     function show1(value) {
  13.         console.log(value);
  14.         }
  15.     //函数的调用
  16.     show1('what you name ');
  18.     // 函数表达式 / 匿名函数声明与调用,函数表达式后面没有‘；’
  19.     var show2 = function display(value) {
  20.             console.log(value);
  21.         }
  22.     show2('wo jiao da wei ');
  23.     console.log(show2.name);
  24.     //由于是函数表达式，所以函数未定义，无法传值，显示错误
  25.     // display(" How old are You");
  28.     //构造函数 
  29.     var sum = Function('a','b', 'return a + b');
  30.     console.log(sum(11, 111));
  31.     //与上面的函数意义相同
  32.     // var sum = function (a, b) {return a + b;}
  33.     // console.log(sum(20, 90));
  35.     // 函数做为值的使用场景
  36.     function add (a, b, c) {
  37.         // 输出结果
  38.         return a + b +c; 
  39.        }
  40.     // 赋值，由于还有一个c没传值，结果为NAN
  41.     var sum = add;
  42.     console.log(sum(12, 23));
  44.     // 函数当做对象属性
  45.     var obj = {};
  46.     obj.sum = add;
  47.     console.log(obj.sum(50, 90,13));
  49.     // 函数当参数: 回调
  50.     function huidiao(callback, a, b,c) {
  51.         return callback(a, b,c);
  52.     }
  53.     console.log(huidiao(add, 28, 49,123));
  55.     // 函数当返回值
  56.     function fun1() {
  57.         return add;
  58.     }
  59.     console.log(fun1()(39, 27,12) );
  61.     // es5: 不支持块作用域
  62.     if (true) {
  63.             var name = '测试1';
  64.         }
  65.     console.log(name);
  66.     // es6: 支持块作用域，显示未定义
  67.     // if (true) {
  68.     //     let names = '测试2';
  69.     //     }
  70.     // console.log(names);
  72.     // 函数的参数对象/参数类数组
  73.     function sum(...params) {
  74.     console.log(arguments);
  75.     for (var i = 0; i < arguments.length; i++) {
  76.         console.log(arguments[i]);
  77.     }
  78.     console.log(a + b);
  79.         }
  80.     sum(10,20,40,50);
  81.     console.log(sum.length);
  83.     // 闭包用来访问私有变量
  84.     function demo1() {
  85.     var email = '144682@qq.com';
  86.     // 子函数
  87.     return function hello(){
  88.     console.log(email);
  89.        }
  90.         hello;
  91.        }
  92.     // console.log(email);
  93.     // console.log(typeof demo1()());
  94.     console.log(demo1());
  95.     console.log(demo1()());
  96.     </script>
  97. </body>
  99. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的很认真
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post