Javascript:数组和函数

news2025/5/12 14:35:00

数组

创建数组

使用new创建

let arr=new array(数组大小);

直接赋值创建

    let Arr2=[];
    let Arr3=[1,'A',"HELLLO"];

这里JS的数组里面的元素属性可以各不相同

演示代码

<script>
    let Arr1=new Array(5);
    let Arr2=[];
    let Arr3=[1,'A',"HELLLO"];
    console.log(Arr1);
    console.log(Arr2);
    console.log(Arr3);
</script>

演示结果

此时我们创建了一个数组，但是

获取数组元素

获取数组元素大致就像C++

演示代码

<script>
    let Arr1=["苹果","香蕉","榴莲"];
    console.log(Arr1[1]);
    console.log(Arr1[-1]);
    console.log(Arr1[3]);
    console.log(typeof(Arr1));
    Arr1="Hello,World";
    console.log(Arr1);
    console.log(typeof(Arr1));
</script>

演示结果

<script>
    let arr=[];
    arr.length=10;
    console.log(arr);
</script>

这里可以看出如果数组越界访问，那么访问的元素就是未定义属性undefined

如果直接给数组赋值，那么会改变数组的属性

增加数组的元素

改变数组的length的值

演示代码

<script>
    let arr=[];
    arr.length=10;
    console.log(arr);
</script>

演示结果

通过下标新增

赋值那个下表的元素，那么数组空间就扩大到哪里

<script>
    let arr=[];
    arr[10]=1;
    console.log(arr);
</script>

演示结果

通过push增加元素

演示代码

<script>
    let array=[];
    let arr=[2,6,7,9,10,5];
    for(let i=0;i<arr.length;i++)
    {
        if(arr[i]%2==0)
        {
            array.push(arr[i]);
        }
    }
    console.log(array);
</script>

演示结果

删除数组的元素

splice

使用格式

    arr.splice(2,3);

演示代码

<script>
    let arr=[1,5,9,3,10,4,2,8,2];
    arr.splice(2,3);
    console.log(arr);
</script>

演示结果

函数

创建函数的格式

function 函数名(参数名)//参数名不需要指明类型直接加名字
{
    内容
}

演示代码

<script>
    function func()
    {
        alert("Hello,World");
        return 100;
    }
    let a=func();
    alert(a);
</script>

演示结果

关于参数个数

如果实参多，那么多出来的实参没有用，如果形参多，多出来的形参是undefined

演示代码

<script>
    function func(num1,num2,num3)
    {
        console.log(typeof(num1));
        console.log(typeof(num2));
        console.log(typeof(num3));
    }
    func(1,2);
</script>

演示结果

这里num3是多出来的形参，被设置成了undefined

函数表达式

函数的另一种表达形式，定义一个匿名函数，然后设立一个参数去替代它

使用格式

<script>
    let func=function (num1,num2,num3)
    {
        return num1+num2;
    }
    console.log(func(1,5));
    console.log(typeof(func));
</script>

演示结果

我们可以看到整个func能承接函数的返回值，并且它的类型是function类型

作用域

作用域分别为全局作用域和局部作用域

在函数内定义的变量只在函数内生效称为局部作用域

在<script>内定义的变量在整个<script>都生效

演示代码

<script>
    let num1=20;
    function func(){
        let num1=30;
    }
    func();
    console.log(num1);
</script>

演示结果

这里虽然运行了func()但是num1的值并没有得到更改

如果函数内的变量不加let，那么变量就为全局变量

演示代码

<script>
    let num1=20;
    function func(){
        num1=30;
    }
    func();
    console.log(num1);
</script>

演示结果

这里的这个num1的值改变成了30

作用域链

当函数使用一个变量时，如果在函数内找不到变量，那么就会去函数外面的函数找，如果找不到就会一直找，知道找完<script>中的全局变量为止

演示代码

<script>
    let num1=20;//第三次去掉
    function func1()
    {
        let num1=30;//第二次去掉
        function func2()
        {
            let num1=40;//第一次去掉
            console.log(num1);
        }
        func2();
    }
    func1();
</script>

这里我们分别去掉三次

每次的结果为

40 30 20

对象

常规对象创建

对象创建的格式

let 对象名={
    参数:内容,
    参数:内容
};

演示代码

<script>
    let OB={
        height:100,width:500,
        YES:function()
        {
            console.log("Hello,World");
        }
    }
    OB.YES();
</script>

演示结果

new Object

new Object可以直接为我们创建一个对象，但对象里面的元素需要我们自己添加

使用格式

    let OJ=new Object;

演示代码

<script>
    let OJ=new Object;
    OJ.NUM1=15;
    OJ.NUM2="ABC";
    OJ.NUM3=function(){console.log(OJ.NUM2)};
    OJ.NUM3();
</script>

演示结果

使用构造函数创建对象

当我需要定义很多个对象，但这些对象的很多元素都相同时，我们需要用构造函数来提升我们的效率

使用格式

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
var obj = new 构造函数名(实参);

代码演示

<script>
    function name(params1,params2,params3) {
        this.num1=params1;
        this.num2=params2;
        this.num3=function(){alert("Hello,World")};
    }
    let obj1=new name("HHHH","GGGG");
    let obj2=new name("OOOO","AAAA");
    let obj3=new name("LLLL","QQQQ");
    console.log(obj1.num1);
    console.log(obj1.num2);
    console.log(obj2.num1);
    console.log(obj2.num2);
    console.log(obj3.num1);
    console.log(obj3.num2);
    obj1.num3=function(){alert("Hello,GCH")};
    obj1.num3();
    obj2.num3=function(){alert("Hello,GCJ")};
    obj2.num3();
    obj3.num3=function(){alert("Hello,GSM")};
    obj3.num3();
</script>

演示结果

class构造方法

使用class，我们需要用到关键字constructor,类名首字符必须大写

使用格式

    class head
    {
        constructor(num1,num2)
        {
            this.head1=num1;
            this.head2=num2;
        }
    }

其中constructor就是class的构造函数，而head1和head2就是定义的内置类型

使用class构造对象

使用格式

我们需要new来构造对象

let 对象名=new 类名(实参,实参);

演示代码

<script>
    class head
    {
        constructor(num1,num2)
        {
            this.head1=num1;
            this.head2=num2;
        }
    }
    let obj=new head(1,2);
    console.log(obj.head1);
    console.log(obj.head2);
</script>

演示结果

static

static在我们C++中用于类中那么定义的变量就是静态变量，class里定义的话，那么这个变量不属于任何一个定义出来的对象

演示代码

<script>
    class head
    {
        constructor(num1,num2)
        {
            this.head1=num1;
            this.head2=num2;
        }
        static head3=50;
    }
    let obj=new head(1,2);
    console.log(obj.head1);
    console.log(obj.head2);
    console.log(head.head3);
</script>

演示结果