JavaScript 基本数据类型

news2025/1/8 4:53:35

字符串


在JS中,数据类型有:字符串、数字、布尔、数组、对象、NullUndefined

用到最多的还是字符串和数组的转换。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        h1{
            text-align: center;
            text-decoration: overline;
            text-transform: capitalize;
        }

        #p1{
            text-indent: 20px;
        }

    </style>
    
</head>

<body>
        
    <script type="text/javascript">
        var s = "hello world"
        //字符串长度
        console.log("字符串长度"+ s.length)
        //根据索引获取值
        console.log("第五个字符串:" + s[4])
        //替换字符串
        console.log(s.replace('h','H'))
        //字符串转数组
        console.log(s.split(' '))
        
        var arr = s.split(' ')
        console.log(arr.join('-'))

        //找到返回匹配的字符,否则返回null
        var info = s.match('w')
        console.log(info)
        //字符串拼接
        console.log(s + "aaa")

    </script>

</body>

</html>

 

 

 

数组


数组是一个序列的数据结构,代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
        
    <script type="text/javascript">
        //数组定义
        var computer = new Array()
        //或者
        var computer1 = ["主机","显示器","键盘","鼠标"]
        console.log(computer,computer1)

        //数组添加元素
        computer[0] = "联想"
        computer[1] = "华为"
        computer.push("华硕")

        //通过索引查找元素
        console.log(computer[1])
       //数组长度
        console.log(computer.length)

        for(var i = 0; i < computer.length; i++){
            console.log(computer[i])
        }

        //数组删除
        console.log(computer.slice(0,computer.length-1))

    </script>

</body>

</html>

 

 

对象


对象是一个具有映射关系的数据结构。用于存储有一定关系的元素。

格式 d = {'key1':value1, 'key2':value2, 'key3':value3}   注意: 对象通过 key 来访问 value ,因此字典中的 key 不允许重复。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
        
    <script type="text/javascript">
        var user = {
            name: '张山',
            sex: '男',
            age: 30
        }

        console.log(user)
        //通过属性名查询值
        console.log(user.name)
        //或者
        console.log(user['name'])

       //增加
       user.height = "180cm"
       console.log(user.height)
    </script>

</body>

</html>

 

操作符


一个特定的符号,用它与其他数据 类型连接起来组成一个表达式。常用于条件 判断,根据表达式 返回True/False采取动作。

常用操作符  代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
        
    <script type="text/javascript">
    //比较操作符
    console.log(1 == 2)
    //算数操作符
    console.log(1 + 2)
    var num = 0 
    num++
    console.log(num)
    //逻辑操作符
    console.log(num > 0 && num > -1)
    //赋值操作符
    num += 1
    console.log(num)
    </script>

</body>

</html>

 

 

 

 条件判断


if (表达式) {
  <代码块>
} else if (表达式) {
  <代码块>
} else {
  <代码块>
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
     <img id="img" src="1.jpg" title="this is image" width="400px" height="400px">
     <br>
     <button onclick="changeImage('on')">开灯</button>
     <button onclick="changeImage('off')">关灯</button>  

    <script type="text/javascript">
         function changeImage(status){
            var x = document.getElementById('img')
             if (status == 'on'){
                x.src = "1.jpg"
             }else if (status = 'off'){
                x.src = '2.jpg'
             }
         }
    </script>

</body>

</html>

 

 

for循环


for 循环 : 一般用于遍历数据类型的元素进行处理,例如字符串、数组、对象。
语法 :
for (<变量> in <序列>) {
   <代码块>
}
代码示例 : 遍历数组和对象
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
        
    <script type="text/javascript">

        //遍历数组
        var array = ["主机","显示器","键盘"]
        //方式1
        for (i in array){
            console.log(array[i])
        }
       //方式2
        array.forEach(function(e){
            console.log(e)
        })


        //遍历对象
        var user = {name:"李四",sex:"男",age:"30"};
        //方式1
       for(let k in user) {
         console.log(k + ":" + user[k])
       }
        
       //遍历对象
       var user = {name:"李四",sex:"男",age:"30"};
       //方式1
       for(let k in user) {
          console.log(k + ":" + user[k])
      }
      //方式2

    </script>

</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1184756.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TSINGSEE智能分析网关V4车辆结构化数据检测算法及车辆布控

车辆结构化视频AI检测技术&#xff0c;可通过AI识别对视频图像中划定区域内的出现的车辆进行检测、抓拍和识别&#xff0c;系统通过视频采集设备获取车辆特征信息&#xff0c;经过预处理之后&#xff0c;接入AI识别算法并与车辆底库进行对比&#xff0c;快速识别车辆身份和属性…

cmake vs2022编译opencv4.5.2 x86 版本

cmake 编译opencv 452 x86 版本 where is the source code 选项放置你的源文件 where to build the binaries 放置你生成结果的文件夹 点击按钮Configure,弹出提示&#xff0c;选择Win32&#xff0c;finishi 等待生成 列表中出现红色的选项&#xff0c;根据你的需要取消或…

Java http请求工具连接超时时间

研究了一下三种java常用的http请求工具框架hutool、okhttp3、spring RestTemplate 对于连接超时和读超时的处理机制。 运行环境 jdk8 windows 连接超时 hutool、okhttp3、spring RestTemplate 三种请求&#xff0c;底层使用的都是jdk里的java.net.DualStackPlainSocketImpl#…

RS232通讯转485通讯接线心得

最近在接can 485 232的通讯线&#xff0c;无可避免的遇到了一系列问题&#xff0c;各个厂家之间的引脚定义不太一样&#xff0c;这就导致我们要经常的接线&#xff0c;现在也是有了一点心得所以记录下来。接下来进入标题&#xff1a; 目前我遇到的问题是&#xff1a;转接泰琪丰…

Android选项卡TabHost

选项卡主要由TabHost(标签&#xff0c;主人)&#xff0c;TabWidget(微件)和FrameLayout3个组件组成&#xff0c;用于实现一个多标签页的用户界面。 1. TabHost在XML文件中添加&#xff1a; XML布局文件中添加选项卡时必须使用系统id来为各组件指定id属性。 <TabHostandro…

交易中最佳的建仓时机,fpmarkets一个指标搞定

你是不是也是这样?经常因为自己的后知后觉错过了潜在的盈利机会&#xff0c;甚至在错误的时间点进行交易而产生亏损。其实很简单&#xff0c;fpmarkets一个指标搞定&#xff0c;解一下鳄鱼指标。 通过鳄鱼线选择最佳的建仓时机。绿线是大量合约进入市场并偏向一个方向的第一个…

Makefile(详细教程)

Makefile&#xff08;详细教程&#xff09; 1. Makefile的相关概念介绍 1.1 Makefile是什么 一个工程中的源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;Makefile定义了一系列的规则来指定哪些文件需要先编译&#xff0c;哪些文件需要后编…

阿里云99元服务器2核2G3M带宽_4年396元_新老用户同享

阿里云99元服务器新老用户同享活动 aliyunfuwuqi.com/go/aliyun 首先要在2023年11月1日去阿里云活动页下单新购这个套餐&#xff0c;享受99元包1年。同天再续费1年又享受了99元包1年&#xff1b;等到明年2024年11月1日之后&#xff0c;又可以以99元续1年&#xff1b;最后等到20…

【OpenCV实现图像:图像处理技巧之空间滤波】

文章目录 概要导入库空间过滤器模板展示效果分析与总结 概要 空间滤波器是数字图像处理中的基本工具之一。它通过在图像的每个像素位置上应用一个特定的滤波模板&#xff0c;根据该位置周围的相邻像素值进行加权操作&#xff0c;从而修改该像素的值。这种加权操作能够突出或模…

3.28每日一题(微分方程的计算)

注&#xff1a; 1、题目中的变上限x在 被积函数中&#xff0c;所以不能直接求导&#xff0c;需要先将等式拆分 2、拆完求导的时候&#xff0c;注意x的平方和定积分是乘法求导的法则&#xff0c;容易忽略 3、两边求导后还有变上限积分存在&#xff0c;此时用莱布尼兹公式&#x…

天青色等烟雨追风k9羞涩来袭

新一代追风k9服务器硬件技术的进步是推动追风k9服务器未来前景的重要因素。随着科技的不断进步&#xff0c;服务器的算力和效率都得到了显著提升。比特大陆科技作为领先的区块链服务器制造商&#xff0c;一直致力于研发和应用先进的芯片技术&#xff0c;不断提高服务器的算力和…

深度学习读取txt训练数据绘制参数曲线图的方法

有一些深度学习模型是并不像yolo系列那样最终输出相应的参数图,有很多训练形成了一个训练log文件,于是需要读取log文件中的内容并绘制成曲线图。 如下实例,有一个log文件的部分截图,需要将其读取出来并绘制曲线图 废话不多说,直接上代码 import os import re import p…

多VLAN之间的通信,静态路由

一、适用场景 1、多个C类网络&#xff08;不同网段&#xff09;之间需要通信&#xff0c;每个网段有1个网关ip。 2、当网络结构比较简单时&#xff0c;只需配置静态路由就可以使网络正常工作。本例采用简单网络结构 3、在复杂网络环境中&#xff0c;配置静态路由可以改进网络的…

阿里云99元服务器新老用户同享396元4年!

阿里云99元服务器优惠活动新老用户均可以购买&#xff0c;并且第二年续费不涨价&#xff0c;续费价格依旧是99元/年&#xff0c;如果现在买的话可以一直续费到2027年11月。活动&#xff1a;atengyun.com/go/aliyun 关于阿里云99元服务器原价续费套路和讨论&#xff1a; 阿里云…

在微信小程序中怎么做投票活动

在当今社交媒体时代&#xff0c;微信小程序已经成为一种广泛使用的互动营销工具。通过各种活动&#xff0c;企业可以吸引用户的关注&#xff0c;提升品牌影响力。其中&#xff0c;投票活动是一种特别受欢迎的形式。本文将为你详细介绍如何在微信小程序中创建投票活动。 一、微信…

CPU温度监控

设备的性能取决于其 CPU 的状况;没有 CPU&#xff0c;设备将无法正常运行&#xff0c;跟踪 CPU 运行状况指标至关重要&#xff0c;尤其是 CPU 温度&#xff0c;因为如果 CPU 变得过热&#xff0c;您的系统可能会滞后或崩溃。 CPU 温度的波动会导致大量网络停机&#xff0c;并导…

[unity]多脚本情况下update函数的执行顺序

序 有的时候&#xff0c;执行某些脚本时会有先后顺序的要求。unity是按什么顺序来执行脚本的&#xff1f;如何设置&#xff1f; 默认的执行顺序 官方文档里面有个很长的图&#xff1a; Unity - Manual: Order of execution for event functions (unity3d.com) 根据文档&…

【CocoaPods安装环境和流程以及各种情况】

CocoaPods 环境HomebrewRubyrbenvRubyGems 和 Bundler安装Ruby管理Ruby更新Ruby替换Ruby镜像方式1方式2 CocoaPods安装CocoaPodsCocoaPods使用如何插入一段漂亮的代码片安装的一些问题 参考的链接 环境 Homebrew Ruby 目前流行的Ruby环境管理工具有 RVM 和 rbenv。这里推荐使…

记录C# WinForm项目调用Rust生成的dll库

一、开发环境 1.RustRover (version&#xff1a;2023.3 EAP) 2.Visual Studio 2019 (version&#xff1a;16.11.30) 3.Windows 10 64位 OS 4.WinR&#xff1a;控制台程序&#xff0c;cmd.exe 二、使用RustRover编译Rust脚本为dll 1.下载安装Rust&#xff0c;https://www.…

蓝桥杯第3513题——岛屿个数

解答代码 解题思路全在代码注释中&#xff0c;本题作者使用bfs方式作答 import java.util.*; //1:无需package //2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);//T组数据&#xff0c;遍历T次…