数组
创建数组
使用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>
演示结果
class的继承
class也可以像C++那样继承,不过这里需要用到两个关键字
extend
super