当前位置：首页 > news >正文

Javascript:数组和函数

news 来源：原创 2025/5/13 11:13:17

数组

创建数组

使用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>

演示结果