函数_预解析_对象

时间：2019-09-16 23:41:38 阅读：105 评论：0 收藏：0 [点我收藏+]

函数练习：

判断一个数是否是质数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         function isPrime(x) {
 8             for (var i = 2; i * i <= x; i++) {
 9                 if (x % i == 0) {
10                     return 0;
11                 }
12             }
13             return 1;
14         }
15         // 判断　２－１００　以内的素数
16         for(var i = 2;i<=100;i++){
17             var flag = isPrime(i);
18             if (flag){
19                 console.log(i + "是素数");
20             }
21         }
22     </script>
23 </head>
24 <body>
25 
26 </body>
27 </html>

求一组数中的最大值和最小值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         function max_array(arr) {
 8             var max =arr[0];
 9             for (var i = 1; i < arr.length; i++) {
10                 if(arr[i] > max){
11                     max = arr[i];
12                 }
13             }
14             return max;
15         }
16         var arr = [12,3,53,34,23,34,2,23];
17         var ret = max_array(arr);
18         console.log("最大值为　"+ ret);
19     </script>
20 </head>
21 <body>
22 
23 </body>
24 </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
    <script>
        function min_array(arr) {
            var min =arr[0];
            for (var i = 1; i < arr.length; i++) {
                if(arr[i] < min){
                    min = arr[i];
                }
            }
            return min;
        }
        var arr = [12,3,53,34,23,34,2,23];
        var ret = min_array(arr);
        console.log("最小值为　"+ ret);

    </script>


</head>
<body>

</body>
</html>

求一组数的最小值

求一组数的和：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         function sum_array(arr) {
 8             var sum = 0 ;
 9             for (var i = 0; i < arr.length; i++) {
10                 sum += arr[i];
11             }
12             return sum;
13         }
14         var arr = [12,3,53,34,23,34,2,23];
15         var ret = sum_array(arr);
16         console.log("总和为　"+ ret);
17     </script>
18 </head>
19 <body>
20 
21 </body>
22 </html>

通过函数实现数组的反转：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         function　reverse(arr) { //选择排序　　从小到大
 8             var temp;
 9             for (var i = 0; 2*i < arr.length; i++) {
10                 temp = arr[i];
11                 arr[i] = arr[arr.length -i-1];
12                 arr[arr.length -i-1] = temp;
13             }
14             return arr;
15         }
16         var arr = [12,3,53,34,23,34,2,23];
17         console.log("逆序之前的数组"+ arr);
18         var ret = reverse(arr);
19         //逆序之后的数组
20         console.log(ret);
21     </script>
22 </head>
23 <body>
24 </body>
25 </html>

通过函数实现冒泡排序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         function　sort_byBubble(arr) { //冒泡　　从小到大
 8             var temp ;
 9             for (var i = 0; i < arr.length - 1; i++) {
10                 for (var j = 0; j < arr.length - 1 - i; j++) {
11                     if (arr[j]　>arr[j+1] ){
12                         temp = arr[j];
13                         arr[j] = arr[j+1];
14                         arr[j+1] = temp;
15                     }
16                 }
17             }
18             return arr;
19         }
20         var arr = [12,3,53,34,23,34,2,23];
21         var ret = sort_byBubble(arr);
22         //冒号排序之后的数组
23         console.log(ret);
24     </script>
25 </head>
26 <body>
27 </body>
28 </html>

通过函数实现选择排序：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         function　sort_bySelect(arr) { //选择排序　　从小到大
 8             var temp ;
 9             var min_idx;
10             for (var i = 0; i < arr.length ; i++) {
11                 min_idx = i;
12                 for (var j = i+1; j <arr.length ; j++) {
13                     if(arr[j] <arr[min_idx]){
14                         min_idx = j;
15                     }
16                 }
17                 if(min_idx!= i){
18                     temp = arr[min_idx];
19                     arr[min_idx] = arr[i];
20                     arr[i] = temp;
21                 }
22             }
23             return arr;
24         }
25         var arr = [12,3,53,34,23,34,2,23];
26         var ret = sort_bySelect(arr);
27         //选择排序之后的数组
28         console.log(ret);
29     </script>
30 </head>
31 <body>
32 </body>
33 </html>

js 中实现整除：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是标题</title>
 6     <script>
 7         console.log(parseInt(12/5));
 8     </script>
 9 </head>
10 <body>
11 </body>
12 </html>

arguments对象伪数组

技术图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset = "UTF-8">
 5     <title>我是网站标题</title>
 6     <script>
 7     function f1(){
 8         console.log(arguments);  //输出的是个伪数组
 9     }
10     f1(1,2,3,4,5);
11     </script>
12 
13 </head>
14 <body></body>
15 
16 </html

输出的是：

技术图片

可以通过　arguments.length 来获取输入参数的长度。

所以，上面的函数就可以简化为如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset = "UTF-8">
 5     <title>我是网站标题</title>
 6     <script>
 7     function func(){
 8         var sum =0;
 9         for(var i=0;i<arguments.length;i++){
10             sum += arguments[i];
11         }
12         return sum;
13     }    
14     var ret = func(1,2,3,4,5);
15     console.log(ret);
16     </script>
17 
18 </head>
19 <body></body>
20 
21 </html>

这样只需要一个函数就可以搞定所有数字的求和运算了！

补：如果直接输入函数名字，输出的是函数的代码：

技术图片

函数的其他定义方式：

技术图片

匿名函数：

它不能直接调用，

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset = "UTF-8">
 5     <title>我是网站标题</title>
 6     <script>
 7     //普通函数
 8     function func(){
 9         console.log("Hello World!");
10     }    
11     //匿名函数
12     var f =function (){
13         console.log("好帅哦");
14     }；　　//函数表达式后面一定要加分号，因为这里是赋值语句。
15     f();
16     </script>
17 
18 </head>
19 <body></body>
20 
21 </html>

技术图片

下面看两种情况：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset = "UTF-8">
 5     <title>我是网站标题</title>
 6     <script>
 7     //普通函数
 8     function f1(){
 9         console.log("Hello World!");
10     }    
11     f1();
12     function f1(){
13         console.log("我去！");
14     }
15     f1();    
16     
17 
18     </script>
19 
20 </head>
21 <body></body>
22 
23 </html>
//输出：　我去！　（２）　此时，函数只是声明，程序执行的时候先看声明，之后再执行。

另外一种情况：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset = "UTF-8">
 5     <title>我是网站标题</title>
 6     <script>
 7     //普通函数
 8     f1 = function (){
 9         console.log("Hello World!");
10     }；    
11     f1();
12     f1 = function (){
13         console.log("我去！");
14     }；
15     f1();    
16     </script>
17 
18 </head>
19 <body></body>
20 
21 </html>
输出：
Hello World!
我去！　　
此时就是，相当于变量了

技术图片

它的好处有：

没有名字，根本就不会发生冲突。

它执行玩之后就会释放内存了！

小结：

函数的声明，函数表达式还有函数的自调用。

函数也是一种数据类型：

输出是：function .

函数作为参数使用：

技术图片

函数作为返回值使用：

技术图片

作用域：

预知：

全局变量和局部变量

它们分别对应全局作用域和局部作用域。

技术图片

在其他语言中，还有块级作用域，但是js 中没有块级作用域。技术图片

小结：只有函数内部定义的是局部变量，其他都是全局变量。

我们使用的时候尽量要使用局部变量，而不是全局变量，因为局部变量在函数执行完毕之后就会释放空间了。

隐式全局变量：

技术图片

还有个问题：

技术图片

输出是：number

　　　　undefined

小结：全局变量不能被删除，隐式全局变量可以被删除。

作用域链：

技术图片

预解析：

技术图片

不仅仅是变量，函数的声明也会被提前。

技术图片

注：Python 中不会预解析的。

技术图片

预解析案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>我是网站标题</title>
    <script>
    function f1(){
        console.log(num);
        var num = 10;  //var  num  会提到当前作用域的最上面，仍然在{}  内
    }
    f1();
    console.log(num); //报错  
    </script>

</head>
<body></body>

</html>

技术图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset = "UTF-8">
 5     <title>我是网站标题</title>
 6     <script>
 7 
 8     f1();
 9     console.log(c);
10     console.log(b);
11     console.log(a);  //此处报错，其余都是9， b,c 不报错因为它们是隐式全局变量。
12     
13     function f1(){
14         var a= b =c =9;
15         console.log(a);
16         console.log(b);
17         console.log(c);
18     }
19     </script>
20 
21 </head>
22 <body></body>
23 
24 </html>

技术图片

查资料：

MDN

例如：

技术图片

对象：

下面的内容概括：

技术图片

js 不是面向对象的语言，但是它是一门基于对象的语言。

技术图片

js 没有继承和多态的概念，它没有面向对象的三大特性，只能说有封装。

但是，它可以模拟出三大特性。

创建对象的三种方式：

第一种：调用系统的构造函数来创建对象。

 1 <!DOCTYPE=html>
 2 
 3 <html lang="en">
 4 <meta charset=‘UTF-8‘>
　 <title>这是网页标题</title>
 5 
 6 <head>
 7     <script>
 8          var person = new Object();
 9          person.name  = "tom";
10          person.age = 18;
11 
12     </script>
13     
14 </head>
15 <body>
16 </body>
17 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>这是网页标题</title>
 6 
 7     <script>
 8         var person = new Object();
 9         //添加属性
10         person.name = "tom";
11         person.age = 18;
12 
13         //添加方法
14         person.sleep = function () {
15             console.log("我要睡觉了")
16         }
17         person.eat = function () {
18             console.log("我要吃饭了")
19         }
20 
21         console.log(person.name);
22         console.log(person.age);
23 
24         person.sleep();
25         person.eat();
26 
27     </script>
28 </head>
29 <body>
30 
31 </body>
32 </html>

给对象添加属性和方法

第二种：自定义构造函数创建对象（结合第一种，通过工厂模式创建对象）。

技术图片

现在有两个问题：

技术图片

第一个问题：如何一次性创建多个对象。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <meta charset = "UTF-8">
 4     <title>这是网页</title>
 5     <head>
 6         <script>
 7             function createObject(name,age) {
 8                 var obj = new Object();
 9                 obj.name = name;
10                 obj.age = age;
11                 obj.sayHi = function () {
12                     console.log("Hello My Name is : "+ obj.name+" 我今年： "+this.age+" 岁");
13                 };
14                 return obj;
15             }
16             var person = createObject("tom",18);
17             person.sayHi();
18 
19             var dog = createObject("wangcai",10);
20             dog.sayHi();
21 
22 
23 
24         </script>
25     </head>
26     <body>
27 
28     </body>
29 </html>

利用函数封装，达到快速创建多个对象

其实这就是工厂模式创建对象。

下面是第二个问题：

如何分辨出对象到底是什么类型。

主要是通过自定义构造函数，

首先知道Object() 是系统的构造函数，所以，对于如何创建自定义的构造函数，可以参考系统的。

Object()函数的定义方式，我们可以查到：

技术图片

它的构造函数和函数很类似

函数和构造函数的区别：

看首字母是否是大写，大写的是构造函数，小写的是正常的函数。

注：构造函数也可以当普通函数使用。但是尽量要用大写表示类。

完整的类（自定义的构造函数）如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <meta charset = "UTF-8">
 4     <title>这是网页</title>
 5     <head>
 6         <script>
 7             function Person(name, age) {  //Person是个自定义的类 。类似于系统的  Object
 8                 this.name = name;
 9                 this.age = age;
10                 this.sayHi = function () {
11                     console.log("Hello World, My Name : "+this.name + "! My Age: "+this.age);
12                 }
13             }
14             var person = new Person("egon",18);
15             person.sayHi();
16         </script>
17     </head>
18     <body>
19 
20     </body>
21 </html>

View Code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <meta charset = "UTF-8">
 4     <title>这是网页</title>
 5     <head>
 6         <script>
 7             function Person(name, age) {  //Person是个自定义的类 。类似于系统的  Object
 8                 this.name = name;
 9                 this.age = age;
10                 this.sayHi = function () {
11                     console.log("Hello World, My Name : "+this.name + "! My Age: "+this.age);
12                 }
13             }
14             var person = new Person("egon",18);
15             person.sayHi();
16 
17             console.log(person instanceof Person);  //true
18             console.log(person instanceof Object);  //true
19             function Dog() {}
20             console.log(person instanceof Dog); //false
21         </script>
22     </head>
23     <body>
24     </body>
25 </html>

instanceof 的使用

========================================================

自定义对象做了四件事（即var obj = new Person() 系统一共做了四件事）：

技术图片

第三种：字面量的方式创建对象：

技术图片

它等同于：

技术图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <meta charset = "UTF-8">
 4     <title>这是网页标题</title>
 5     <head>
 6         <script>
 7             var person = {
 8                 name :"egon",
 9                 age :18,
10                 sayHi:function () {
11                     console.log("Hello World, "+this.name+" I am  My age is : "+this.age);  //都是不能直接用 name ,age
12                 }
13             };
14             person.sayHi();
15         </script>
16     </head>
17     <body>
18     </body>
19 </html>

View Code

#############################################

字面量创建对象的缺陷：

技术图片

最后一个

js是一门动态类型的语言：

1，代码（变量）只有执行到相应位置才知道具体是什么类型。

2，对象，只要是通过.点了什么就增加了相应的对象或方法。

==============================================

除了点之外，使用另一种访问属性的方式（中扩号的方式）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <meta charset = "UTF-8">
 4     <title>这是网页标题</title>
 5     <head>
 6         <script>
 7             function Person(name, age) {
 8                 this.name = name ;
 9                 this.age = age;
10             }
11             var person =new Person("egon",18);
12             person.sex = "男";
13             person.sayHi = function () {
14                 console.log(this.name + this.age+this.sex);
15             };
16             // console.log(person.name);
17             // console.log(person.age);
18             // person.sayHi();
19 
20             // 不仅仅可以 用点点方式来访问属性
21             //也可以用下面的中括号的方式来访问属性
22             console.log(person["name"]);
23             console.log(person["age"]);
24             person["sayHi"]();
25         </script>
26     </head>
27     <body>
28     </body>
29 </html>

JSON 格式的数据及遍历：

JavaScript Object Notation（标记）

技术图片

json也是个对象，

技术图片

但是，没有赋值，所以是underfined .

遍历json格式的数据：

主要是通过for in 循环：

for in 循环可以用于，不知道Json 种具体的索引的时候遍历数据。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <meta charset = "UTF-8">
 4     <title>这是网页标题</title>
 5     <head>
 6         <script>
 7             var json={
 8                 "name":"egon",
 9                 "age":18,
10                 "sex":true
11             };
12             //遍历json 的数据
13             for (var key in json){
14                 console.log(key);  //注意，key此时是个变量，不是json 对象的属性，
15                 // console.log(json.key); //如果直接 console.log(json.key)  的话，相当于新增属性(新增变量key)，但是没有赋值，会输underfined
16                 //应该如下方式：
17                 // console.log(json[key]); //这样才是输出相应的数据。
18             }
19             //补充：
20             //上面的新增属性
21             // console.log(json.key);
22             //因为json.key = "aaaa"  就相当于新增到对象种 “name” = "aaaa" 这个 所以，如果直接 json.key 会输出underfined.
23         </script>
24     </head>
25     <body>
26     </body>
27 </html>