js25-50

已于 2023-01-10 17:50:05 修改
阅读量63 收藏
点赞数
文章标签： 前端 学习 javascript
于 2023-01-08 14:10:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_72343101/article/details/128243814
版权

目录

一.对象（Object）

1.1对象简介

在这里插入图片描述
六种数据类型，前五种是基本数据类型。
只要值不是属于上面五种基本数据类型，就一定是对象（Object）类型。
在这里插入图片描述
如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体
在这里插入图片描述
就像这三个变量，不能确定他们表示同一个人，没有什么练习。
在这里插入图片描述
就像一个袋子，可以装进许多不同的变量类型。
对象的分类：

  • 1.内建对象
    在这里插入图片描述
    在任何js的条件下都能直接使用。
    1. 宿主对象
      在这里插入图片描述
      BOM：浏览器对象模型
      DOM：文档对象模型
      像console.log() document.write()都是浏览器提供的，为宿主对象。
  • 3.自定义对象
    在这里插入图片描述

1.2对象的基本操作

  • 创建对象
    在这里插入图片描述
    例如；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        document.write(a); 
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
这就是一个新创建的空对象。

  • 向对象中添加值
    在这里插入图片描述
    例如：
    a.name="孙悟空";
    这条语句的意思就是：向空对象a里添加了一个名为name的属性，name的值是孙悟空。
    当然，一个空的对象可以添加多个值。
    例如
    再添加一个gander属性和age属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        a.name="孙悟空";
        a.gander="男";
        a.age=18;
        console.log(a); 
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

  • 读取对象中的属性
    在这里插入图片描述
    例如
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        a.name="孙悟空";
        a.gander="男";
        a.age=18;
        console.log(a.name); 
        document.write(a.gander);
        console.log(a.age);
    </script>
</head>
<body>
</body>
</html>

显示为：
请添加图片描述

注：在这里插入图片描述

  • 修改对象的属性值
    在这里插入图片描述
    就是直接在后面加上一条修改语句。
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        a.name="孙悟空";
        a.gander="男";
        a.age=18;
        a.name="tom"
        console.log(a.name); 
        document.write(a.gander);
        console.log(a.age);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，孙悟空被修改成了tom

  • 删除对象的属性
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        a.name="孙悟空";
        a.gander="男";
        a.age=18;
        a.name="tom"
        delete a.name;
        console.log(a.name); 
        document.write(a.gander);
        console.log(a.age);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，name属性被删除，进而转化为了undefined。

1.3属性名和属性值

  • 属性名
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        a.var="tom";
    </script>
</head>
<body>
</body>
</html>

其中的 a.var="tom";是合法的，但是尽量还是按照标识符的规范去做。
在这里插入图片描述
这里存储特殊属性值和取出特殊属性值时，都要用上面的语法形式。
例如
a["123"]=789;
console.log(a["123"]);
显示为：
在这里插入图片描述

注：.和[]和new这三个运算符是优先级最高的运算符。

在这里插入图片描述
用[]传递变量时，若变量值与某一个属性值相等，那么就会读取那个相等属性的值。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        var b="123";
        a["123"]=789;
        console.log(a["123"]);
        console.log(a[b]);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，console.log(a["123"]);和console.log(a[b]);效果是一样的。

  • 属性值
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        var b=new Object();
        b.name="这是一段文字"
        a.test=b;
        console.log(a);
        console.log(a.test);
        console.log(a.test.name);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述

  • in 运算符
    在这里插入图片描述

注：上面语法中的属性名是一个字符串，需要双引号。

例如；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a= new Object();
        var b=new Object();
        b.name="这是一段文字"
        a.test=b;
        console.log("test2"in a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
证明a对象中没有名为tset2的属性值。

二.基本和引用数据类型

在这里插入图片描述
引例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=100,b;
        b=a;
        a++;
        document.write(a);
        document.write("<br/>")
        document.write(b);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，在将a的值赋给b变量后，对a自增，b的值没有发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var b=new Object();
        b.name="111"
        var a=b;
        b.name="222"
        console.log(b.name)
        console.log(a.name)
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，a与b的值都发生了变化，这就是基本和引用数据类型的区别。

  • 详细解释
    在这里插入图片描述
  • 基本数据类型
    在这里插入图片描述
    在这里插入图片描述
  • 引用数据类型
    在这里插入图片描述
    在这里插入图片描述
    假如把obj2的值设为null
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj=new Object();
        obj.name="swk";
        var obj2=obj;
        obj.name="zbj";
        obj2=null;
        console.log(obj);
        console.log(obj2);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
就是这样的。
在这里插入图片描述

  • 对象的比较
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj=new Object();
        obj.name="swk";
        var obj2=new Object();
        obj2.name="swk";
        console.log(obj==obj2);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
证明对象都是独一无二的。
在这里插入图片描述

三.对象自面量(对象的创建方式)

使用对象字面量可以更简单的来创建一个对象。
语法：
var 变量名={};
例如：
var obj={};
这样就创建了一个名为obj的对象。
例子
在这里插入图片描述
同时，使用对象字面量还可以方便的添加属性
在这里插入图片描述
在这里插入图片描述

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj={
        name:"孙悟空",
        age:18
        };
        console.log(obj);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

注：如果要使用一些特殊的属性名，则必须加上引号，例如："#%@#"这种。

也可以这样使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var obj={
            name:"孙悟空",
            age:18,
            test:{name:"666"}
        };
        console.log(obj);
        console.log(obj.test);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

注：这里的test不是一个独立的对象，不能独立使用，只能当作obj的一个属性使用。

四.函数的简介

函数也是对象，像document、console等也都是对象，普通的对象只能添加一些属性，一些值，而函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）。

在这里插入图片描述

  • 创建函数对象
  • 语法1：（构造函数）
    var 函数名=new Function();
    在这里插入图片描述
    例如
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var fun=new Function();
        console.log(typeof fun);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
证明fun是一个函数

  • 语法二：（函数声明）
    function 函数名（形参（可以没有））
    {
    具体的语句。。。。
    }
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var fun=new Function("document.write('hello world');");
        console.log(typeof fun);
        fun();
        document.write("<br/>")
        function fun1(){
            document.write("这是一个新的函数");
        }
        fun1();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
新的函数起作用了。

  • 语法3：（函数表达式）
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var fun=new Function("document.write('hello world');");
        console.log(typeof fun);
        fun();
        document.write("<br/>")
        function fun1(){
            document.write("这是一个新的函数");
        }
        fun1();
        document.write("<br/>")
        var fun2=function(){
            document.write("怎么又多出来一个新函数？")
        }
        fun2();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

注：function（）
{

}
这种是匿名函数，而函数表达式的实质就是创建一个匿名函数把他的对象赋值给一个变量。

  • 要封装的代码以字符串的形式传递给函数
    在这里插入图片描述
    例如：
    var fun=new Function("document.write('hello world');");这种
    在这里插入图片描述

  • 调用函数
    在这里插入图片描述
    语法：
    函数对象();
    例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var fun=new Function("document.write('hello world');");
        console.log(typeof fun);
        fun();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
fun函数被调用。

注：函数对象具有普通对象的所有功能，且函数对象的功能更加强大。
例如var fun=new Function() fun.name="qwe" document.write(fun.name)显示为：qwe

五.函数的参数

  • 形参与实参
    在这里插入图片描述
    像function sum(a,b){}就相当于function sum(){var a;var b}
    在这里插入图片描述
    例如
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sum(a,b){
            console.log(a+b);
        }
        sum(3,4);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
将3赋值给了a，4赋值给了b。

  • 调用函数时，浏览器不会检查实参的类型
    在这里插入图片描述

所以，函数的实参可以是任意的数据类型

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sum(a,b){
            console.log(a+b);
        }
        sum(3,"hello");
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
进行了拼串操作。

  • 调用函数时，浏览器也不会检查实参的数量。
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sum(a,b){
            console.log(a+b);
        }
        sum(3,"hello",111,null,true);
    </script>
</head>
<body>
</body>
</html>

显示为：
请添加图片描述
没有变化

六. 函数的返回值

引例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sum(a,b,c){
            var d=a+b+c;
            return d;
        }
        var e=sum(3,4,5);
        alert("e="+e);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

注：在函数中return后的语句都不会执行，且return后可以返回任意类型的值

在这里插入图片描述

七.实参可以是任何值

引例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function iso(sum){
            return sum%2==0;
        }
        var result=iso(3);
        alert("result="+result);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

在这里插入图片描述
例如
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function shib(obj){
            document.write("name="+obj.name,"age="+obj.age,"address="+obj.address);
        }
        var obj={
        name:"孙悟空",
        age:18,
        address:"花果山"
        };
        shib(obj);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function shib(obj){
            document.write("name="+obj.name,"age="+obj.age,"address="+obj.address);
            document.write("<br/>")
        }
        var obj={
        name:"孙悟空",
        age:18,
        address:"花果山"
        };
        shib(obj);
        function b(a){
            a(obj);
        }
        b(shib);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
函数shib又执行了一遍，通过函数b。
函数也能作为一个实参，因为函数也是一个对象，对象能干的事情，函数都能干。

  • 调用函数与函数的区别
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function sum(a,b,c){
            return a+b+c;
        }
        function b(a){
            console.log("a="+a)
        }
        b(sum);
    </script>
</head>
<body>
</body>
</html>

当 b(sum);,即b函数中只是sum的函数名时，这种就是函数，显示为：
在这里插入图片描述
而当b(sum(1,2,3))时，即b函数中有sum()，这种就是调用函数，显示为：
在这里插入图片描述
调用函数与函数对象的区别就是（这里的mianji是视频中的函数）
请添加图片描述
简单的举例：如果把mianji比作一个机器，那么调用函数就是在使用机器的功能，而函数对象就是直接把整个机器给你。
简单的说，不加（）就是传递函数对象，加上（）就是传递返回值。

八.返回值的类型

在这里插入图片描述
在这里插入图片描述
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function a(){
            return {name:"sss"}
        }
        var b=a();
        document.write(b.name);
    </script>
</head>
<body>
</body>
</html>

显示为：
sss
特别注意：这里的var b=a();b不是等于a，要加上（）才是函数。
在这里插入图片描述

注意p55集，有忘的地方再去看看。

  • 立即执行函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        (function a(){
            alert("我是一个匿名函数");
        })();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
直接写匿名函数是会报错的，但是，通过（）来表示匿名函数是一个整体，就可以看作一个定义了的函数，然后在后面加上一个（），就可以直接调用。
实例
在这里插入图片描述

注在这里插入图片描述

九.对象的属性值（方法）

函数也可以作为对象的属性值，当对象的的某一属性值为函数，并且调用此函数时，就称为调用此对象的方法，方法与函数只是有名字上的区别，其他无区别，本质上是为了更好的区分。
在这里插入图片描述
语法：
对象名.属性名=function(){
语法
}
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var obj={
            name:"2222",
            sayname:function(){
                alert("1111")
            }
        }
        obj.sayname();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

  • 枚举对象中的属性
    在这里插入图片描述
    在这里插入图片描述

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a={
            name:"wer",
            age:18,
            address:"sss"
        }
        for(var n in a){
            document.write("属性名"+n);
            document.write("属性值"+a[n]);
            document.write("<br/>")
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
即对象中的属性值。

十.作用域

在这里插入图片描述

引例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function hanshu(){
            var a=1;
        }
        console.log(a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
产生了报错，因为a变量的作用域就在函数hanshu内，在外部无法看到。

10.1全局作用域

在这里插入图片描述

  • 变量的声明提前
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("a="+a);
        var a=123;
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
如果把var a=123改成a=123，则显示为：
在这里插入图片描述
产生报错。
因为使用var关键词声明的变量，会在所有的代码执行前被声明。
就比如：

    <script>
        console.log("a="+a);
        var a=123;
    </script>

实际上就相当于

<script>
	  var a;
      console.log("a="+a);
      var a=123;
</script>

即var a会在所有代码执行之前执行。

  • 函数的声明提前
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        fun1();
        fun2();
        function fun1(){
            document.write("111111")
        }
        var fun2=function(){
            document.write("222222")
        }
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，只有fun1显示，fun2并未显示，因为fun1是使用函数声明所创建的函数，有这声明提前的性质，与变量的声明提前一样，所以可以显示，而fun2则是用函数表达式来创建的函数，没有声明提前。

10.2函数作用域

如果说全局作用域是一个校园，那么函数作用域就像校园里一间一间的教室，是校园的一部分。
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=10;
        function b(){
            var a=20;
            document.write(window.a);
        }
        b();
    </script>
</head>
<body>
</body>
</html>

显示为：
10
如果想要在函数中访问全局变量，就使用window对象。

  • 在这里插入图片描述
  • 在函数中，不使用var声明的变量都会变为全局变量
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=20;
        function fun(){
            console.log("a="+a);
            a=10;   
        }
        fun()
        console.log("a="+a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，在全局作用域中，a变成了10.

  • 定义形参就相当于在函数作用域中声明了变量。
    在这里插入图片描述
    例如：
    <script>
        function fun(e){
            console.log("e="+e);
        }
        fun();
    </script>

就相当于

    <script>
        function fun(e){
        	var e；
            console.log("e="+e);
        }
        fun();
    </script>

十.函数重名问题

  • 当变量与变量重名或函数与函数重名时，后面的会替代前面的，
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=1;
    var a=2;
    function abc(){
        console.log("aaa")
    }
    function abc(){
        console.log("bbb")
    }
    abc()
    console.log(a);
</script>
</html>

显示为：
在这里插入图片描述

  • 若变量与函数重名，则会显示变量的值，而不会显示函数的效果。
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=1;
    function a(){
        console.log("aaa")
    }
    console.log(a);
    a();
</script>
</html>

显示为：
在这里插入图片描述
可以看到变量的值和函数的报错。

  • 原理
    因为定义变量和函数时会有一个预解析，即声明提前，比如
<script>
    var a=1;
    function a(){
        console.log("aaa")
    }
    console.log(a);
    a();
</script>

实际上浏览器运行时是

<script>
	var a;
	function a(){
	}
    var a=1;
    function a(){
        console.log("aaa")
    }
    console.log(a);
    a();
</script>

因为有了这个，且变量a的值在函数之前定义，所以显示的为a的值
再比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    console.log(a);
    a();
    var a=1;
    function a(){
        console.log("aaa")
    }
    console.log(a);
</script>
</html>

显示为：
在这里插入图片描述

十一.debug

可以检查代码的运行情况
在chrome浏览器中的在这里插入图片描述
里的在这里插入图片描述
里的在这里插入图片描述
可以看到源代码，并且可以进行代码的调试。具体有不理解的地方，看60集。

十二.this

在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun(){

            console.log(this);
        };
        var name="qqqq";
        var obj={
            name:"eee",
            sayname:fun
        };
        var obj2={
            name:"ccc",
            sayname:fun
        };
        obj2.sayname();
        obj.sayname();
        fun();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以看到，用函数的形式调用时，this指向的是window，而以方法的形式调用时，this指向的是所调用的那个对象。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fun(){

            console.log(name);
        };
        var name="qqqq";
        var obj={
            name:"eee",
            sayname:fun
        };
        var obj2={
            name:"ccc",
            sayname:fun
        };
        obj2.sayname();
        obj.sayname();
        fun();
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，

obj2.sayname();
obj.sayname();
fun();

这三条语句都展示了var name="qqqq";的结果，而不是相对应的结果，这时候就可以使用this了。把fun函数中console.log(name);语句改成console.log(this.name);显示为：
在这里插入图片描述
可以看到，三条语句分别对应了三个name属性，即他们找到相对应的对象了。

十三.使用工厂方法创建对象

可以快速方便的创建多个对象
在这里插入图片描述
语法：
需要用到createPerson函数

function createPerson(形参1，形参2...){
var obj=new Object;
obj.属性名=...
return obj;
}
var 属性名=createPerson(实参1，实参2...)

在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
            function createPerson(name,age,gender){
                var obj=new Object();
                obj.name=name;
                obj.age=age;
                obj.gender=gender;
                obj.sayname=function(){
                    alert(this.name);
                };  
                return obj;
            }
            var obj2=createPerson("孙悟空",18,"男");
            obj2.sayname();
            console.log(obj2);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
在这里插入图片描述

十四.用构造函数的方法来创建对象

在这里插入图片描述
构造函数与普通函数区别不大，并且，构造函数可以当作普通函数来使用。
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son=Person();
        console.log(son);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以看到，构造函数Person被当作普通函数来使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son= new Person();
        console.log(son);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
构造函数的执行流程
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){
            this.name="孙悟空";
        }
        var son= new Person();
        console.log(son);
    </script>
</head>
<body>
</body>
</html>

这样就是使用this来向新建的对象Person中添加一个name属性
显示为：
在这里插入图片描述
以后创建对象时尽量使用参数的模式
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        var son= new Person("孙悟空",18,"男");
        console.log(son);
    </script>
</head>
<body>
</body>
</html>

显示为；

在这里插入图片描述
——————————————————————————————————
在这里插入图片描述

例如：

        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        var son= new Person("孙悟空",18,"男");
        var son1=new Person();
        var son2=new Person();

这里的son，son1，son2就是一类对象，son，son1，son2也是Person的实例。

  • instanceof函数
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        var son= new Person("孙悟空",18,"男");
        var son1=new Person();
        var son2=new Person();
        console.log(son instanceof Person);
    </script>
</head>
<body>
</body>
</html>

显示为；
在这里插入图片描述
证明son是Person的实例

注：在这里插入图片描述

十五.构造函数修改

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
            //向对象中添加一个方法
            sayname=function(){
                alert("你好，我叫"+this.name);
            }
        }
        var son=new Person("孙悟空",18,"男");
        var son2= new Person("白骨精",20,"女");
    </script>
</head>
<body>
</body>
</html>
  • 使所有对象共享同一个方法的方案。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
            //向对象中添加一个方法
            sayname=fun;
        }
        function fun(){
                alert("你好，我叫"+this.name);
            }
        var son=new Person("孙悟空",18,"男");
        var son2= new Person("白骨精",20,"女");
    </script>
</head>
<body>
</body>
</html>

这样就可以使所有对象共享同一个方案

十六.对象的遍历（快速获取对象中的所有属性）

语法：

var 对象名={
	属性1：。。。，
	属性2：。。。，
}
for(var i in 对象名){
	console.log(对象名[i])
}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var obj={
    name:"111",
    age:11,
    scd:"saaa"
    };
    for(var i in obj){
        console.log(obj[i])
    }
</script>
</html>

显示为：
在这里插入图片描述

十七.原型对象

  • 引例
    在这里插入图片描述这里的污染指函数名不能重复，如果把在这里插入图片描述
    即使所有对象共享同一个方法，就会占据一个函数名，然后不能再去取同样的函数名。
    不安全指多人开发时，别人很有可能就会取同样的函数名，然后把你的函数覆盖掉。
  • 原型（prototype）
    在这里插入图片描述
    即prototype就是原型对象。
    在这里插入图片描述
    每一个新建的函数浏览器都会向函数中添加一个属性prototype，这个属性存放着原型对象的内存地址，且每个函数所对应的原型对象不同。

注：Myclass是网课中的函数

在这里插入图片描述
在这里插入图片描述
且这个隐含的属性（对象）与构造函数中prototype是同一个对象
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son= new Person();
        console.log(son.__proto__==Person.prototype); 
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

  • 原型对象的作用
    在这里插入图片描述
    因而，我们可以将对象中共有的内容，统一设置到原型对象中去。
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son= new Person();
        var son1=new Person();
        son.a="我是son中的a";
        Person.prototype.a=123;
        console.log(son.a);
        console.log(son1.a);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
对象会首先访问自身的属性，如果自身没有这个属性，才会去访问原型对象中的属性
总而言之，原型对象像是一个公共的区域，由构造函数产生的对象都可以访问这个公共区域。
可以利用原型对象来解决开头引例提到的问题。
在这里插入图片描述
在这里插入图片描述
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son= new Person();
        var son1=new Person();
        son.a="我是son中的a";
        Person.prototype.a=123;
        console.log("a" in son);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

  • hasOwnProperty()
    请添加图片描述

如果想要检查对象中（不是原型对象）是否含有这种属性，可以使用对象的hasOwnProperty()来检查对象自身是否含有该属性。
也是返回true和false。
语法：
对象名.hasOwnProperty("属性名")

特别注意属性名的双引号

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son= new Person();
        var son1=new Person();
        son.a="我是son中的a";
        Person.prototype.a=123;
        console.log(son.hasOwnProperty("a"));
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

  • 原型对象的原型对象
    因为原型对象也是对象，所以原型对象也有原型对象，但是没有原型对象的原型对象的原型对象（？？？？），且Object的原型对象没有原型。
    在这里插入图片描述
    最多两次原型的叠加，没有第三次
    在这里插入图片描述

十八.toString()

当我们直接在页面中打印一个对象时，实际上输出的是对象的toString（）方法的返回值
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(){

        }
        var son= new Person();
        document.write(son);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
即上述语句中document.write(son);与document.write(son.toString());是一样的。
在这里插入图片描述
例如;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        var son=new Person("孙悟空",18,"男");
        son.toString=function(){
            return "我直接返回这个值";
        }
        var result=son.toString();
        console.log("result="+result);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
如果修改toString的返回值的话，修改原型对象的就可以了
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        Person.prototype.toString=function(){
            return "我直接返回这个值";
        }
        var son=new Person("孙悟空",18,"男");
        var son2=new Person("猪八戒",18,"男");
        document.write(son);
        document.write(son2);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

十九.垃圾回收

垃圾回收（GC）
在这里插入图片描述

二十.数组

20.1引例

已知，对象分为三种在这里插入图片描述
前面所学的基本上都是自定义对象，而内建对象和宿主对象都是由浏览器定义的。

  • 内建对象
    像Object，function都是内建对象。
    而数组（Array）也是内建对象。
    在这里插入图片描述

20.2数组简介

在这里插入图片描述

注：属性在数组中被称为元素，从0开始的整数就是索引

在这里插入图片描述

  • 创建数组对象
  • 第一种
    使用数组字面量来创建数组
    语法：var 数组名=[]
    例如：var arr=[]
    请添加图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=[10]
    console.log(a);
</script>
</html>

显示为：
在这里插入图片描述

  • 第二种
    语法：var 数组名=new Array()
    例如：
    var arr=new Array()
    使用typeof检查一个数组时，会返回object
    有两种方式给第二种数组赋值
  • 1.先确定数组长度，再给数组赋值
    例如
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a= new Array(10);
    a[0]=10;
    a[1]=12;
    console.log(a);
</script>
</html>
  • 2.直接给数组赋值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a= new Array(10,12);
    console.log(a);
</script>
</html>
  • 向数组中添加元素
    语法：数组名[索引]=值
    例如;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=new Array();
        arr[0]=10;
        arr[1]=33;
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

  • 读取数组中的元素
    语法：数组名[索引]
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=new Array();
        arr[0]=10;
        arr[1]=33;
        console.log(arr[0]);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述

在这里插入图片描述

  • 获取数组的长度
    可以使用length属性来获取数组的长度（元素的个数）。
    语法：数组名.length
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=new Array();
        arr[0]=10;
        arr[1]=33;
        arr[2]=43;
        arr[3]=12;
        console.log(arr.length);
    </script>
</head>
<body>
</body>
</html>

显示为：
4

注：length只能获得连续数组的长度，对于非连续的数组，length的值会返回最大索引+1
例如;``arr[0],arr[3],arr[10];这样的数组，length的值就是11

  • 修改数组长度
    语法：数组名.length=值
    例如
    arr.length=10
    这个数组的长度被修改到了10

在这里插入图片描述

  • 向数组最后一个位置添加元素
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var arr=new Array();
        arr[0]=10;
        arr[1]=33;
        arr[2]=43;
        arr[3]=12;
        arr[arr.length]=100;
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

显示为：
在这里插入图片描述
可以利用这个方式来清空数组
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=[10]
    a.length=0;
    console.log(a);
</script>
</html>

显示为：
在这里插入图片描述

  • 遍历
    例如：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=[10,11,12,13,14,15]
    for(var i=0; i<a.length;i++){
        console.log(a[i])
    }
</script>
</html>

显示为：
在这里插入图片描述

  • 数组的复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=[10,11,12,13,14,15]
    for(var i=0; i<a.length;i++){
        console.log(a[i])
    }
    var arr4=[]
    for(var i=0; i<a.length;i++){
        arr4[i]=a[i]
    }
    console.log(arr4)
</script>
</html>

显示为：
在这里插入图片描述

20.3冒泡排序法

是一种数组的算法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=[9,2,4,1,3,5,7,6,8]
    for(var m=0;m<a.length-1;m++){
        for(var i=0;i<a.length-1-m;i++){
            if(a[i]>a[i+1]){
                var n=a[i];
                a[i]=a[i+1];
                a[i+1]=n;
            }
        }
    }
    console.log(a)
</script>
</html>

显示为：
在这里插入图片描述

20.4选择排序法

是一种数组的算法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var a=[9,2,3,8,4,6,1];
    for(var m=0;m<a.length-1;m++){
        var minindex=m
        for(var i=m+1;i<a.length;i++){
            if(a[i]<a[minindex]){
                minindex=i
            }
        }
        var n=a[m]
        a[m]=a[minindex]
        a[minindex]=n
    }
    console.log(a)
</script>
</html>

显示为：
在这里插入图片描述

三池丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-native-apis
05-16
这部分以图标开头：如果检测到电池，则该图标表示电池电量接近（0％| 25％| 50％| 75％| 100％）的电池。 另外，如果设备已插入电源，则会显示电源插头图标。 它会打印出电池电量，是否已插入设备，是否正在充电...
october-25-nextjs1
02-12
Next.js +敏捷CMS 这是使用Agility CMS的示例Next.js入门站点，旨在成为... 有超过50种使用TailwindCSS轻松定制的现代React UI模板和组件，它们也很轻巧且易于设置。 开始使用 注册实例。 克隆此存储库 运行npm inst
详解transform:translate(-50%,-50%)
qq_48254349的博客
12-13 8265
首先要理解元素居中的原理 transform:translate(-50%,-50%)也是同理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
js生成10个20-50之间的随机数（包含20和50）
徐同保的专栏
04-08 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生成10个20-50之间的随机数</title> <style type="text/css"> </style> </head> ...
JavaScript--Swiper自定义分页器
weixin_45406850的博客
03-01 2090
图片是以背景显示的，图片上有一层遮罩，最上面是文字。分页器激活状态下是自定义的图片。代码比较容易进行删改，比如不想要遮罩或者文字可以直接删掉。 分页器的效果： html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--这里引入swiper的css文件--> <link rel="stylesheet" href="https://unpkg.
JS-Grid插件使用中文解读
热门推荐
blurooo的博客
09-12 1万+
1. 传送门：js-grid官网2. 引入css：<link type='text/css' rel='stylesheet' href='jsgrid.min.css' /> <link type='text/css' rel='stylesheet' href='jsgrid-theme.min.css' /> 3. 引入Js：<script type="text/javasc
js基础编程-题目25 水平垂直居中
喜大普奔
11-18 954
整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦 css实现元素水平垂直居中 css水平、垂直居中的写法，请至少写出4种？ - 定位 -- 使用 margin-top：- 盒子的高度一半 - Flex - Transform - 定位 -- 使用 上下左右都为 0 ，margin：auto 首先我得有两个嵌套的元素 html部分 //结构 <div class="wrap"> <div class="inner"></di
JavaScript小案例------js实现分页插件效果篇
前端叶荨，随手记
04-04 3621
原生js实现分页插件效果
前端之JS起步 -- 猜数小游戏
weixin_46372074的博客
03-16 4957
前端之JS起步 程序运行的目的， 为达目的应选定的代码类型， 以及如何使这些代码协同运行。 let 和 var 之间的区别 常量用于存储不希望更改的数据，用关键字 const 创建，本例中用常量来保存对界面元素的引用。界面元素的文字可能会改变，但引用是不变的。 函数是可复用的代码块，可以一次编写，反复运行，从而节省了大量的重复代码。 ...
node-red教程 4 JS基础
geekYatao
06-20 8420
　　由于函数控件中总归是需要写一些代码的，这些代码都基于JS，所以在这里补充一点JS的基础知识。如果有JS基础，可以跳过。如果没有JS基础，并且看不懂，也可以跳过——等到确实需要的时候，再回来翻看一下。 篇幅限制，此处不能把JS的基础全部覆盖，我挑选了一些我认为有用的知识写在这里。由于我并不是前端工程师，所以这篇文章东拼西凑的，见谅。 4.1 变量和变量赋值 　　变量声明如下: 1. v...
程序员必做50题-JavaScript篇（1-15）
阿坤的博客
09-14 6341
程序员必做50题 js版
2022-07-25 工作记录--React/JS-input输入框 / textarea文本框输入字数限制以及字数显示
weixin_48850734的博客
07-25 3894
React/JS-textarea文本框输入字数限制以及字数显示
js-prime:计算素数
05-10
简单计算版提速版（约3倍）→改善分店爆速版（约10次）→爆闪支Eratosthenes版筛（约50次）→algo分支结论算法是最快的跑步在航站楼$ node prime.js [inputNumber]ex) 120万以下の数字の素数の数を数える$ node ...
js-vida:关于WebGL和JavaScript的思考
05-17
Vida是受Conway的生活启发而产生的一些JavaScript乐趣。 “零玩家”游戏 有一个小的世界 有些细胞可以繁殖 当前存在一个由一个小平面组成的三维宇宙。 到目前为止，有一种生物栖息在宇宙中，即原生物（PRoof Of ...
js-api-service:Elixir Web API执行JavaScript代码
04-28
JsApi服务 要启动新的Phoenix应用程序： 使用mix deps.get安装依赖mix deps.get 使用mix phoenix.server启动Phoenix端点 ..." { \" status \" : \" ok \" , \" result \" :[25,50,75,125,150,175,200,225,250]}
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 162
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 673
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 618
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1111
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
[60岁以上','20-25岁','45-50岁','40-45岁','20岁以下','30-35岁','25-30岁'] 使用js对年龄段从小到大进行排序
05-25
可以使用JavaScript的sort()方法对年龄段进行排序，代码如下： ```javascript let ages = ['60岁以上', '20-25岁', '45-50岁', '40-45岁', '20岁以下', '30-35岁', '25-30岁']; ages.sort(function(a, b){ let aMin = parseInt(a); let bMin = parseInt(b); if (isNaN(aMin)) { aMin = a.substring(0,2); } if (isNaN(bMin)) { bMin = b.substring(0,2); } return aMin - bMin; }); console.log(ages); ``` 输出结果为： ``` ['20岁以下', '20-25岁', '25-30岁', '30-35岁', '40-45岁', '45-50岁', '60岁以上'] ``` 在这个示例中，我们首先使用sort()方法对ages数组进行排序。sort()方法接受一个比较函数作为参数，该函数定义了排序规则。在这个比较函数中，我们首先将年龄段字符串中的最小值提取出来，并将其转换为数字进行比较。如果无法提取数字，则将其作为字符串进行比较。最后，返回比较结果，告诉sort()方法如何排序数组。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值