JavaScript学习（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62313265/article/details/122649080

本文全面介绍了JavaScript的基础知识，包括与HTML的结合方式、数据类型、变量、运算符、数组及函数等核心概念，并深入探讨了JS的特性如交互性和跨平台性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

1.介绍

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。（以下简称JS）
特点：

1.交互性（信息的动态交叉）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

2.与HTML结合方式

1.在head或body标签中，用script标签书写JS代码

<head>
    <meta charset=" UTF - 8 ">
    <title>标题</title>
    <script type="text/javascript">
        alert("hello");
    </script>
</head>

2.在原页面的script标签中使用src属性引入单独的JS文件

新文件

alert("hello");      /* 文件名“1.js” */

原页面

<head>
    <meta charset=" UTF - 8 ">
    <title>标题</title>
    <script type="text/javascript" src="1.js">
    </script>
</head>

3.数据类型和变量的介绍

数据类型：
数值类型 number
字符串类型 string
对象类型 object
布尔类型 boolean
函数类型 function

定义变量格式：
var 变量名;
var 变量名=值;

特殊的值：
undefined 未赋值的JS变量初始值均为undefined
null 空值
NAN 全称：Not A Number 非数字，非数值

var i;
alert(i);
//结果为undefined

var i;
i=12;
alert(i);
//结果为12

var i;
i=12;
alert(typeof(i));        typeof()可以返回变量的数据类型
//结果为number

var i;
i="abc";
alert(typeof(i));
//结果为string

var a,b;
a=12;
b="abc";
alert( a * b );          不同类型的数据相乘不报错但没有结果
//结果为NAN

4.关系运算

== 等于（仅做数值的比较，不同数据类型之间也可比较）
=== 全等于（比较数值和数据类型）

var a="1";
var b=1;
alert(a==b);//返回true
alert(a===b);//返回false

5.逻辑运算

且：&&
或：||
取反：！

在JS中所有变量都可以作为一个布尔类型的变量去使用

0，null，undefined，“ ”(空)都被认为是false

&&(且)：
1.表达式全为真时返回最后一个表达式的值
2.表达式有假时返回第一个假的值

var a=1;        //真
var b=true;     //真
var c=false;    //假
var d=0;        //假
alert( a && b );//结果为true
alert( b && a );//结果为1
alert( a && c );//结果为false
alert( a && d );//结果为0
alert( b && c );//结果为false
alert( b && d );//结果为0
alert( c && d );//结果为false
alert( d && c );//结果为0

||(或)：
1.表达式全为假时返回最后一个表达式的值
2.表达式有真时返回第一个真的值

var a=1;        //真
var b=true;     //真
var c=false;    //假
var d=0;        //假
alert( a || b );//结果为1
alert( b || a );//结果为true
alert( a || c );//结果为1
alert( a || d );//结果为1
alert( b || c );//结果为true
alert( b || d );//结果为true
alert( c || d );//结果为0
alert( d || c );//结果为false

&&和||在得到结果后，后面的表达式不再执行

6.数组

格式：
var 数组名=[ ]; //空数组

var 数组名=[ 1,"abc",true ]; //数组元素类型可以不同

数组名.length //可以得到数组长度

var arr=[];             //定义一个空数组
alert( arr.length );    //结果为0

在JS中，数组的长度为零，依然可以赋值

var arr=[];             //定义一个空数组
//alert( arr.length );    //结果为0
arr[0]=12;
alert( arr[0] );        //结果为12
alert( arr.length );    //结果为1

JS语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作，因此对未赋值的数组元素同样计算数组长度

var arr=[];             //定义一个空数组
arr[0]=12;
alert( arr[0] );        //结果为12
arr[2]="abc";
alert( arr[2] );        //此时arr[1]未赋值
alert( arr.length );    //结果为3 （arr[0],arr[1],arr[2]）

此时我们用警告框查询arr[1]的结果

alert( arr[1] );
//得出结果为undefined

我们可以对数组遍历

for(var i=0;i<arr.length;i++){
    alert( arr[i] );
}
//结果依次为12、undefined、abc

7.函数的定义方式

用function定义函数

1.格式:function函数名(形参列表){
                 函数体
                }
无参：(定义后函数需要调用使用)
function fun(){
alert("!!!");
        }
        fun();
有参：
function sum(n1,n2){
var result=n1+n2;
return result;
}
2.格式:var 函数名=function(形参列表){
函数体
}
无参：(定义后函数需要调用使用)
var fun=function(){
alert("!!!");
        }
        fun();
有参：
var fun=function (n1,n2){
result=n1+n2;
}
alert( fun(100,200) );

8.JS函数不允许重载

在JS函数中一旦重载就会覆盖掉上一次定义

function fun(){
    alert("无参");
    }
function fun(a,b){
    alert("有参");
    }
fun();
//此时无论调用时有无参数，结果均为有参

9.arguments隐形函数

在function函数中不需要定义，却可以直接用来获取所有参数的变量

function fun(){
        //alert(arguments.length);参数个数
        alert(arguments[0]);
        alert(arguments[1]);
        alert(arguments[2]);
for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
        }
    }
fun(1,"ab",ture);

编写函数，用于计算所有参数的和

function sum(n1,n2){
    var result=0;
    for(var i=0;i<arguments.length;i++){
            result +=arguments[i];
    }
    return reslut；
}
alert(sum(1,2,3,4,"abc",5,6,7,8,9));
//结果为10abc56789

在数组中有多种参数类型的内容，为防止在计算中因参数类型不同导致计算结果出现问题，要添加判断条件来进行计算

function sum(n1,n2){
    var result=0;
    for(var i=0;i<arguments.length;i++){
        if(typeof(arguments.length[1])=="number"){    //判断参数类型
            result +=arguments[i];
        }
    }
    return reslut；
}
alert(sum(1,2,3,4,"abc",5,6,7,8,9));
//结果为45