微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > JS 变量简介

博主信息

博文 7

粉丝 0

访问量 6807

专题推荐

更多>

JS 变量简介

1. 原始类型

数值型
字符串型
布尔型
定义时，无须声名类型，赋值时变量自动转换成相应的类型

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js数据类型测试</title>
  </head>
  <body></body>
</html>
<script>
  //数值类型、字符串型、布尔型举例及相互转换
  var a = 1;
  var b = 1.1;
  var c = a + b;
  var d = "1";
  var e = a + d;
  var f = b + d;
  var g = true;
  var g1 = a + g;
  var g2 = d + g;
  console.log("a的类型是：", typeof a, "; a=", a); //数值型
  console.log("b的类型是：", typeof b, "; b=", b); //数值型
  console.log("c的类型是：", typeof c, "; c=", c); //数值型
  console.log("d的类型是：", typeof d, "; d=", d); //字符串型
  console.log("e的类型是：", typeof e, "; e=", e); ////数值直接成string，与后边的string连接
  console.log("f的类型是：", typeof f, "; f=", f); //数值直接成string，与后边的string连接
  console.log("g的类型是：", typeof g, "; g=", g); //布尔值
  console.log("g1的类型是：", typeof g1, "; g1=", g1); //布尔值转为整数1参与计算
  console.log("g2的类型是：", typeof g2, "; g2=", g2); //整数1转为字符串，布尔值转为字符串，两者连接在一起
  if (a == g) console.log("数值型1与布尔值true相等。");
  else console.log("数值型1与布尔值true不相等。"); //整数1与布尔值true相等，即1可以做true使用
</script>

实验效果：

2. 特殊类型

undefined：一般变量的（非对象类型）空；在与数值计算时，转成 NaN，不能参与计算,也不能转为对象；
null：表示空对象，null 是对象类型；在不同类型中自动转成 false 或“0”；
undefined 与 null 相等

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js数据类型隐式转换测试</title>
  </head>
  <body></body>
</html>
<script>
  //数值类型、布尔型、undefined、null、对象、举例及相互关系
  var a;
  var b = {};
  var c = 0;
  var d = null;
  var e = false;
  var f = 10;
  var g = a + f;
  var g1 = d + f;
  var g2 = e + f;
  console.log("a的类型是：", typeof a, "; a=", a); //未赋值，是undefined类型
  console.log("b的类型是：", typeof b, "; b=", b); //空对象
  console.log("c的类型是：", typeof c, "; c=", c); //数值型
  console.log("d的类型是：", typeof d, "; d=", d); //null类型对象
  console.log("e的类型是：", typeof e, "; e=", e); //布尔类型，false
  console.log("f的类型是：", typeof f, "; f=", f); //数值型
  console.log("g的类型是：", typeof g, "; g=", g); //undefine不参与计算，输出NaN
  console.log("g1的类型是：", typeof g1, "; g1=", g1); //null转为整数0参与计算
  console.log("g2的类型是：", typeof g2, "; g2=", g2); //布尔值false转为整数0参与计算
  if (a == e) console.log(a, "与", e, "相等。");
  else console.log(a, "与", e, "不相等。"); //undefined不能转为整数0，与布尔值false不相等
  if (a == d) console.log(a, "与", d, "相等。");
  else console.log(a, "与", d, "不相等。"); //undefined与null相等
  if (b == d) console.log(b, "与", d, "相等。");
  else console.log(b, "与", d, "不相等。"); //对象无成员，但不表示是空，所以与null不相等
  if (c == d) console.log(d, "与", d, "相等。");
  else console.log(c, "与", d, "不相等。"); //整数0与null不相等
  if (c == e) console.log(c, "与", e, "相等。");
  else console.log(c, "与", e, "不相等。"); //整数0与布尔值false相等
  if (d == e) console.log(d, "与", e, "相等。");
  else console.log(d, "与", e, "不相等。"); //undefine不能转为整数0，与布尔值false不相等
</script>

实验效果：

3. 对象类型

数组、对象、函数，在 JS 中都是对象。

3.1 数组

语法与 PHP 语法类似

//数组定义
var a = ["赵四", "男", "20", "zhaosi@email.com", "学生"];
console.table(a);

判断类型

console.log(typeof a); //查看类型
console.log(Array.isArray(a)); //判断是否是数组，true

数组遍历

for 循环

//for 遍历
for (var i = 0; i < a.length; i++) console.log(a[i]);

forEach 语法：数组.forEach(function(数组元素变量，index,array))


 //forEach 遍历
 var strings = "";
 a.forEach(function (abc) {
 console.log(abc);
 strings += "<li>" + abc + "</li>";
 });
 strings = '<ul style="color:blue">' + strings + "<ul>";
 document.body.innerHTML = strings;
 </script>

获取数组部分元素：数组名.slice(起始索引，结束索引)，可以使用负数（负数从尾部算起）,产生一个新数组;

var part;
part = a.slice(1, 3);
console.table(part);
part = a.slice(0, -1);
console.table(part);
part = a.slice(-2);
console.table(part);

替换、添加、删除数组部分元素：数组名.splice(起始索引，结束索引,元素)，可以使用负数（负数从尾部算起），在现有数组上变更;

//数组部分替换、删除、添加
a.splice(0, 2, "李一一", "女"); //变更前个元素
console.table(a);
a.splice(4, 1); //从第5个元素起，删除一个元素
console.table(a);
a.splice(4, 0, "小队长"); //在最后添加一个元素
console.table(a);

实验效果：

3.2 对象

对象定义，允许嵌套

//对象定义
var a = {
  id: 1,
  name: "赵四",
  sex: "男",
  age: 20,
  email: "zhaosi@email.com",
  position: "学生",
  "test score": {
    php: 90,
    js: 92,
    css: 95,
    html: 82,
  },
};

对象访问

console.table(a); //查看全部成员
console.table(a["id"]); //查看部分成员
console.table(a["test score"]["php"]); //查看嵌套对象中的成员

对象遍历: for (对象成员名变量 in 对象名){对象名[成员名变量] 操作}

//for in 遍历
console.log("=====================");
for (key in a) console.table(a[key]);

forEach:借助数组的 forEach 遍历。先取得对象成员名，然后使用 forEach 遍历成员值。

//forEach遍历
console.log("--------------------");
var keys = Object.keys(a); //取得成员名，存入数组中
//   console.table(keys);//显示对象成员名
keys.forEach(function (k) {
  console.table(this[k]);
}, a);

实验效果：

3.3 函数

函数定义
函数调用

//函数定义
function fun(a) {
  console.log(a);
}
fun("调用一个函数");
var fun1 = function (a) {
  console.log(a); //函数变量，匿名函数
};
fun1("这是一函数变量调用");
//立即调用函数
(function fun(a) {
  console.log(a);
})("这是一个立即调用函数");

实验效果：

4. 总结

与一般认知不同的布尔判断的情况：

| 类型 1 | 类型 2 | 是否相等 |
| :—————: | :——: | :———: |
| undefined | false | 不相等 |
| undefined | null | 相等 |
| 无成员的对象 | null | 不相等 |
| 0 | null | 不相等 |
| 0 | false | 相等 |
| null | false | 不相等 |
JS 对特殊类型的使用方法，还是比较混乱，不知道在什么地方用什么类型值判断？（就是殊殊类型的应用场合不清楚）

批改老师：