javascript 基本语法(二)

最新推荐文章于 2024-10-16 17:24:41 发布

SSS4362

最新推荐文章于 2024-10-16 17:24:41 发布

阅读量241

点赞数 2

分类专栏： javascript基础知识文章标签： javascript 前端开发语言 JS ES

本文链接：https://blog.csdn.net/SSS4362/article/details/126728782

版权

javascript基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript 基本语法(二)

1 数据类型

1.1 基本数据类型

基本数据类型	对应的解释
number	数值(含小数、整数)
string	字符串
boolean	布尔类型,只有true,false两种情况

其中变量声明却没有赋值的情况会赋值undefined

1.2 引用数据类型

1.2.1 基本情况

只需要知道一点所有引用数据类型都是直接或者间接继承于Object,类似于java中的Object类

1.2.2 声明并赋值的两种情况

方式一:字面量形式

a 语法

//若是生产普通对象,就用大括号,括号里面写属性和方法
var obj={};
//若是数组,则用中括号的,括号里面写数组的内容,其数组就类似java中的集合(任何类型皆可以放,且会自动扩容)
var arr=[];

b 示例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>测试引用数据类型</title>
</head>
<body>
</body>
<script>
   var obj={"name":"张三",
            "age":12,
            "sex":"男"
   };
   console.log("普通对象里面的内容如下所示:");
   console.log(obj.name+","+obj.age+","+obj.sex);
   let arr=[1,true,0];
   for (let index = 0; index < arr.length; index++) {
    const element = arr[index];
    console.log(element);
   }
</script>
</html>

c 示例html运行截图

在这里插入图片描述

方式二: 构造函数的形式

a 语法

//如果是普通对象
var obj=new Object();
obj.属性名="值";
//如果是数组
var arr=new Array(5);
arr[下标]="值";

b 示例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>测试引用数据类型之构造函数的方式</title>
</head>
<body>
</body>
<script>
   var obj=new Object();
   obj.name="张三";
   obj.age=20;
   obj.sex="男";
   console.log(obj);
   var arr=new Array(5);
   arr[0]=66;
   console.log(arr);
   console.log(arr[0]);
   console.log(arr[1]);
</script>
</html>

c 示例html运行截图

在这里插入图片描述

2 运算符

2.1 ++在前,先加后运算,++在后,先运算后加

2.1.1 示例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>测试++i和i++</title>
</head>
<body>
</body>
<script>
   var i=1;
//    ++在后,先运算后加上
   console.log("i++的值为:"+(i++));
// ++在前,先加后运算   
   console.log("++i的值为:"+(++i));
</script>
</html>

2.2.2 示例html运行截图

在这里插入图片描述

2.2 --在前,先减后运算,–在后,先运算后减

2.2.1 示例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>测试--i和i--</title>
</head>
<body>
</body>
<script>
   var i=1;
//    --在后,先运算后减
   console.log("i--的值为:"+(i--));
// --在前,先减后运算   
   console.log("--i的值为:"+(--i));
</script>
</html>

2.2.2 示例html运行截图

在这里插入图片描述

2.3 +号

2.3.1 加号左右两边都是数值型(number),那么就是执行加法操作

a.示例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>测试+号的几种情况</title>
</head>
<body>
</body>
<script>
   var a=1,b=2;
   console.log(a+b);
</script>
</html>

b 示例html代码运行截图

在这里插入图片描述

2.3.2 加号左右两边一边只要有字符串,那么就是拼接操作

a.示例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>测试+号的几种情况</title>
</head>
<body>
</body>
<script>
   var a=1,b=2;
   console.log("a+b的结果为:"+a+b);
</script>
</html>

b 示例html代码运行截图

在这里插入图片描述

2.3.3 加号左边、右边是数值型和undefined这两种情况(谁在前后都没有关系),那么得到的结果就是NAN

a.示例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>测试+号的几种情况</title>
</head>
<body>
</body>
<script>
   var a=1,b;
   console.log(a+b);
</script>
</html>