JS 数据类型
|
62
|
0
|
JavaWeb

2004 字
|
19 分钟

1. # JS 简介

JS 特点

  • 可以直接嵌入 HTML 页面运行
  • 解释型语言：浏览器逐行解释执行，无需提前编译
  • 弱类型语言：变量声明不限制类型，赋值后自动确定类型

JS 与 Java 核心区别

  • Java：编译型、强类型语言（声明必须指定类型 int num）
  • JS：解释型、弱类型语言（统一 let 声明）

JS 变量名命名规范

变量名、函数名、自定义属性名，统一遵循以下 JS 命名规则，考试、开发通用：

  • 可由：字母、数字、下划线_、美元符号$ 组成

  • 严格区分大小写：num 和 Num 是两个完全不同的变量

  • 不能以数字开头（例：123name 非法，name123 合法）

  • 不能包含空格、汉字、特殊符号（@ # ! - 等）

  • 不能使用 JS 关键字、保留字（let、var、const、function、if、for 等）

  • 见名知意：杜绝随意命名（a、b、c），使用语义化名称（name、age、userList）

  • 统一使用 小驼峰命名法：第一个单词首字母小写，后续单词首字母大写（例：userName、userAge、maxNum）

  • 常量推荐全大写+下划线（例：PI、MAX_SIZE）

字符串规则

JS 中单引号、双引号完全等价，都可以包裹字符串。

字符串 + 数字 运算特点

  • 数字 + 字符串 → 字符串拼接
  • 想要数学运算 → parseInt() 转数字
   <script type="text/javascript">
       let num1 = 3;
       let num2 = 5;
       let result = num1 + num2;
       console.log(result); // 8

       let str = '10';
       console.log(num1 + str); // 310 （拼接）

       let result2 = num1 + parseInt(str);
       console.log(result2); // 13 （数学相加）
       alert(result2);
   </script>

变量特点

  • let 声明变量，声明无类型，赋值才有类型
  • 变量可以任意切换数据类型（弱类型特征）

五大基本数据类型

image-20260731194236584

  • undefined：变量声明未赋值
  • number：数字（整数、小数）
  • string：字符串
  • boolean：布尔（true/false）
  • null：空对象

null 和 undefined 区别

  • undefined：声明变量，未赋值
  • null：变量已赋值，值为空
  • typeof(null) → object 是 JS 历史 bug
   <script type="text/javascript">
       let v;
       console.log(v); // undefined
       console.log(typeof(v)); // undefined

       v = 3.14;
       console.log(typeof(v)); // number

       v = 'js';
       console.log(typeof(v)); // string

       v = true;
       console.log(typeof(v)); // boolean

       v = null;
       console.log(typeof(v)); // object
   </script>

关系运算符

== 与 === 核心区别

  • ==：只判断值相等，会自动类型转换
  • ===：值 & 类型全部相等（全等，推荐）
  • !==：不全等
   <script type="text/javascript">
       let m = '3';
       let n = 3;

       if (m == n) {
           console.log('m==n'); // 成立
       }

       if (m === n) {
           console.log('m===n'); // 不成立
       }
   </script>

String 字符串

两种创建方式

  • 字面量：let str = 'hello'（常用）
  • 对象方式：let str = new String('hello')

常用属性与方法

  • str.length：字符串长度
  • toUpperCase()：转大写
  • toLowerCase()：转小写
  • charAt(index)：获取指定下标字符
  • indexOf(字符)：从前往后找索引，找不到返回 -1
  • lastIndexOf(字符)：从后往前找索引
  • split(分隔符)：字符串切割为数组
   <script type="text/javascript">
       let str1 = 'Hello JS and Java';
       console.log(str1.indexOf('J')); // 6
       console.log(str1.indexOf('JS')); // 6
       console.log(str1.indexOf('JS', 9)); // -1

       let str2 = 'how are you doing today';
       let array = str2.split(' ');
       console.log(array);
       console.log('1:2:3:4'.split(':'));
   </script>

Boolean 布尔类型

JS 真假规则

一切空、零、NaN 都是 false；非空非零都是 true

image-20260731194254288

false：0、''空字符串、null、undefined、NaN

   <script type="text/javascript">
       console.log('-----------------')
       if (true) {
           console.log('true');
       }
       if (0) {
           console.log('0');
       }
       if (!0) {
           console.log('!0'); // true
       }
       if ('') {
           console.log('空字符串');
       }
       if ('abc') {
           console.log('abc'); // true
       }
   </script>

Array 数组

数组创建方式

   let array1 = new Array();      // 空数组
   let array2 = new Array(7);     // 长度为7的空数组
   let array3 = new Array(1,2,3); // 带数据数组
   let array4 = [100,200,300];    // 字面量（推荐）

常用操作

  • 数组.length：获取长度
  • push()：尾部添加
  • pop()：尾部删除并返回元素
   <script type="text/javascript">
       let arr = new Array();
       arr.push('zhangsan');
       arr.push(false);
       arr.push(45);
       console.log(arr);

       console.log(arr.pop()); //45
       console.log(arr.pop()); //false
       console.log(arr.pop()); //zhangsan
   </script>

Math 数学对象

  • parseInt()：字符串转整数
  • Math.PI：圆周率
  • Math.round()：四舍五入
  • image-20260731194327256

eval 函数

作用：将字符串当做 JS 代码执行

风险：不安全、不优化、容易代码注入，工作中尽量不用

   eval('2+3') // 5
   eval('let x=10;let y=20;console.log(x*y);');

JS 自定义对象

对象可以包含：属性 + 方法

   <script>
       let student = {
           name: 'zhansgan',
           age: 23,
           study: function() {
               console.log(this.name + '的年龄是' + this.age + '岁');
           }
       };
       console.log(student.name);
       student.study();
   </script>

DOM 文档对象模型

DOM 作用

JS 和 HTML 的桥梁，实现对标签的增、删、改、查

五大节点

  • 文档节点：document
  • 元素节点：html 标签
  • 文本节点：标签内部文字
  • 属性节点：id、type、value
  • 注释节点

常用获取元素方式

  • document.getElementById("id")：根据id获取单个
  • document.getElementsByTagName("标签名")：根据标签获取数组

image-20260731194410375

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
   <table>
       <tr>
           <td><img src=""/></td>
           <td colSpan="3">购物简易计算器</td>
       </tr>
       <tr>
           <td>第一个数</td>
           <td colSpan="3">
               <input type="text" id="num1Id"/>
           </td>
       </tr>
       <tr>
           <td>第二个数</td>
           <td colSpan="3">
               <input type="text" id="num2Id"/>
           </td>
       </tr>
       <tr>
           <td><input type="button" value=" + " onclick="cal('+')"/></td>
           <td><input type="button" value=" - " onclick="cal('-')"/></td>
           <td><input type="button" value=" * " onclick="cal('*')"/></td>
           <td><input type="button" value=" / " onclick="cal('/')"/></td>
       </tr>
       <tr>
           <td>计算结果</td>
           <td colSpan="3">
               <input type="text" id="resultId"/>
           </td>
       </tr>
   </table>

   <script type="text/javascript">
       // eval 版（简洁但不安全）
       function cal(type) {
           let num1 = document.getElementById('num1Id').value;
           let num2 = document.getElementById('num2Id').value;
           let result = eval(parseInt(num1) + type + parseInt(num2));
           document.getElementById('resultId').value = result;
       }

       // switch 标准版（推荐考试/项目）
       function cal1(type) {
           let num1 = parseInt(document.getElementById('num1Id').value);
           let num2 = parseInt(document.getElementById('num2Id').value);
           let result = 0;
           switch (type) {
               case '+': result = num1 + num2; break;
               case '-': result = num1 - num2; break;
               case '*': result = num1 * num2; break;
               case '/': result = num1 / num2; break;
           }
           document.getElementById('resultId').value = result;
       }
   </script>
   </body>
   </html>

innerText 与 innerHTML 区别

  • innerText：纯文本，不解析 HTML 标签
  • innerHTML：解析 HTML 标签，渲染样式
   <body>
   <span id="spanId">Hello Span</span> <br/>
   <button onclick="clickMe()">点击</button>

   <script type="text/javascript">
       function clickMe() {
           let spanObj = document.getElementById('spanId');
           // spanObj.innerText = '<h1>文字</h1>'; // 原样显示文本
           spanObj.innerHTML = '<h1 style="color: red;">innerHTML</h1>';
       }
   </script>
   </body>

onload 页面加载事件

作用

让 HTML 先加载完毕，再执行 JS 代码，防止获取不到 DOM 元素

   window.onload = function() {
       // 页面加载完成后执行
   }

节点创建、追加、替换

创建节点

  • document.createElement("标签名")：创建元素
  • document.createTextNode("内容")：创建文本
  • setAttribute("属性名","值")：设置属性

节点操作

  • 父.appendChild(子)：末尾追加
  • 父.insertBefore(new,old)：插入到某个节点前面
  • 父.replaceChild(new,old)：替换节点
   window.onload = function() {
       let colors = ['red', 'green', 'blue'];
       let colorMeans = ['热情', '冷静', '生机'];
       let ul = document.createElement('ul');

       for (let i = 0; i < colors.length; i++) {
           let li = document.createElement('li');
           li.setAttribute('mean', colorMeans[i]);
           let textNode = document.createTextNode(colors[i]);
           li.appendChild(textNode);
           ul.appendChild(li);
       }
       document.body.appendChild(ul);
   }

JS 常用事件

事件：用户对页面的操作行为，事件函数：事件触发后的代码

  • onclick：点击
  • onmouseover：鼠标移入
  • onmouseout：鼠标移出
  • onkeyup/keydown：键盘抬起/按下
  • onfocus：获得焦点
  • onblur：失去焦点
  • onsubmit：表单提交

事件两种绑定方式

  1. 行内绑定：<button onclick="fn()">
  2. JS 动态绑定：btn.onclick = function(){}
let btn = document.getElementById('btnId');
btn.onclick = function () {
    alert('thanks');
}
对比维度 Java JavaScript
语言类型 编译型、强类型语言 解释型、弱类型语言
运行环境 JVM 虚拟机（需安装 JRE） 浏览器 / Node.js
编译方式 先编译为字节码（.class），再运行 逐行解释执行，无需预编译
变量声明 必须指定数据类型 int num = 10; let / var / const，无需写类型
变量类型 类型固定，声明后不可更改 类型可变，可随时赋值不同类型
字符串引号 双引号 "" 表示字符串；单引号 '' 只能存单个字符 单引号 ''、双引号 "" 都可表示字符串
相等比较 == 比较值（基本类型）/ 引用（对象） == 自动转换比较值；=== 值 + 类型全等比较
类型转换 类型不匹配直接编译报错 支持隐式自动类型转换 运行报错
面向对象 纯面向对象，一切依托 class，有严格继承、封装、多态 基于对象，ES6 class 是语法糖，支持对象字面量直接创建
数值类型 区分 int、long、float、double 等多种 统一为 number 类型，不区分整数和小数
空值 null null 和 undefined 两种
数组 长度固定，类型统一 长度动态，可存放任意类型混合数据
区分大小写 ✅ 区分 ✅ 区分

json

定义：是一种轻量级的数据交换格式

JSON是JavaScript Object Notation缩写

特点：

  1. 易于程序员阅读和编写。
  2. 易于计算机解析和生成。
  3. 其实是javascript的子集：原生javascript支持JSON

image-20260801084825861

JSON是一种与语言无关的数据交换的格式，作用：

1、使用ajax进行前后台数据交换

2、移动端与服务端的数据交换

JSON数据格式

JSON的语法规则十分简单，可称得上“优雅完美”，总结起来有：

JSON有两种结构：

1、对象格式：{“key1″：obj1, “key2”:obj2, “key3”:obj3…}

2、数组/集合格式: [obj1,obj2,obj3…]

注意：JSON的key是字符串，JSON的value是任意类型

元素值可具有的类型：string, number, object, array, true, false, null

1、对象(Object)用大括号({})表示

{
    "id" : 12,
    "name" : "java1711",
    "age" : 20,
    "gender" : "男"
}

2、数组（Array）用方括号([][][{} {}])表示:

[
    {
       "id" : 12,
        "name" : "java1711",
        "age" : 20,
        "gender" : "男"
    }
    ,
    {
       "id" : 13,
        "name" : "java1712",
        "age" : 21,
        "gender" : "女"
    }
]
上一篇
下一篇