• 02_函数_预解析_对象


    函数练习:

    判断一个数是否是质数

     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         // 判断 2-100 以内的素数
    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>
    //输出: 我去! (2) 此时,函数只是声明,程序执行的时候先看声明,之后再执行。

    另外一种情况:

     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>

    简单类型和复杂类型:

    值类型和引用类型传递:

     

    内置对象:

    常见的内置对象:

    作业:MDN 查

  • 相关阅读:
    访问oss压缩文件失败
    uniapp项目再使用vue-cli启动压缩失败
    航天丰益面试题
    axios上传图片遇见问题
    formateDate
    mongoose中Documents的save方法
    腾讯云nginx配置https
    filter逻辑bug
    vue-infinite-loading 过滤器tab正确使用
    使用pem连接服务器
  • 原文地址:https://www.cnblogs.com/zach0812/p/11518003.html
Copyright © 2020-2023  润新知