从零开始学 Web 之 JavaScript(二)变量

简介: 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

img_25336e0b5504f9a5b326090f41d9dcd7.png

一、变量

1、变量的声明和初始化

var number;               // 变量的声明,没有赋值
var name = "Daotin"; // 变量的初始化

2、命名规则(驼峰命名)

  • 变量命名必须以字母或是**下标符号 "_" 或者 "$" 为开头。
  • 变量名长度不能超过 255 个字符。
  • 变量名中不允许使用空格,首个字不能为数字。
  • 不用使用脚本语言中保留的关键字及保留符号作为变量名。
  • 变量名区分大小写。
  • 汉语可以作为变量名。但是不建议使用!

3、数据类型

查看数据类型的方法:typeof name; 或 typeof(name);

PS:null 的数据类型是 Object。

基础数据类型:
String,Number,Boolean,unsigned、null

复杂数据类型:
Object,function,Array,Date,Error 等


4、Number

4.1、进制

var num = 10;          // 十进制
var num = 012;         // 八进制:0开头
var num = 0xA;         // 十六进制:0x开头

4.2、数值范围

最小值: Number.MIN_VALUE ,这个值为: 5e-324
最大值: Number.MAX_VALUE ,这个值为: 1.7976931348623157e+308

无穷大: Infinity
无穷小: -Infinity

4.3、不要用小数去验证小数

var num1 = 0.1;
var num2 = 0.2;
console.log(num1+num2); // 0.30000000000000004
console.log(0.07*100); // 7.000000000000001

4.4、NaN

NaN:(Not a Number)本来应该得到一个数值的,但是结果却并不是一个数值。

console.log("abc"/18); // 结果是NaN

1、undefined 和任何数值计算为 NaN;
2、NaN 与任何值都不相等,包括 NaN 本身。
3、isNaN(); 任何不能被转换为数值的值都会导致这个函数返回 true。


5、String

  1. 使用单引号或者双引号均可。
  2. 获取字符串的长度使用 变量名.length
  3. 无法输出的字符,记得使用转义字符(\t , \, ", \ 等)
  4. 字符串拼接可以使用 + ,像在 Java 一样。
  5. 当一个是字符串,另一个是数字,并且使用 乘,减,除 号的时候,字符串会转换成数字进行计算,转换失败返回NaN。
  6. js 没有字符类型只有字符串类型,字符串使用 "" 或者 '' 都是可以的。
  7. 字符串是常量不可变的。

示例:

var str = "hello";
str[0] = "w";
console.log(str); // 还是 hello

var str = "hello";
str = "world";
console.log(str); // 是 world,这个不是改变了当前str地址的字符串的值,而是str指向了新的字符串,旧的字符串的值仍然没有更改。

6、Boolean

Boolean类型只有两个字面量: true 和 false 。但是所有类型均有与这两个 Boolean 值等价的值。

下面类型为 true:true、除0数字、"something"、Object(任何对象)
下面类型为 false:false、0 、""(空字符串)、undefined 、null、NaN


7、undefined 与 null

虽然 undefined 和 null 都为 false,但是他们的区别是:

  1. 在进行数字运算的时候,null + 10 = 10;undefined + 10 = NaN.
  2. 任何数据类型和 undefined 运算都是 NaN;
  3. 任何值和 null 运算,null 可看做 0 运算。

8、数据类型转换

8.1、其他类型转换成String

  1. 变量+"" 或者 变量+"其他变量"
  2. String(变量)
  3. 变量.toString(); // 注意:undefined 和 null 不可以
var bool = true;
var num = 111;
var aaa;
var bbb = null;

console.log(typeof(bool+""));  // string
console.log(typeof(num+""));   // string
console.log(typeof(aaa+""));   // string
console.log((aaa+""));         // undefined
console.log(typeof(bbb+""));   // string

8.2、其他类型转换成 Number

此转换容易产生 NaN,一旦被转换的变量中含有非数字字符,都容易出现 NaN.

**1. 变量 -*/ 一个数字(有非数字字符会出现 NaN)**

var num1 = "11" - 0; 
var num2 = "11" * 1;
var num  = "11" / 1;

2. Number(变量);(有非数字字符会出现NaN)

Number("11");
Number(""); // 空字符串返回 0

3. parseInt() 和 parseFloat()(译为取整和取浮点数)

空字符串:parseInt("") 和 parseFloat("") 返回 NaN。

parseInt(变量):如果变量中首字符为字母则结果为 NaN。否则取出现首个非数字前的整数。 123 = parseInt(“123.123aaaa”);

parseFloat(变量):如果变量中首字符为字母则结果为 NaN。否则取出现首个非数字前的浮点数。(如果没有小数的话取整) 123.123 = parseFloat(“123.123aaaa”);

PS:

true 数值为 1;false 为0;
null 的数值类型为 0;
undefined 无数值类型或者为 NaN。

8.3、其他类型转换成 Boolean

任何数据类型都可以转换成 boolean 类型,所以和以上两个转换不同。将任意类型作为参数传入 Boolean(参数) 中,都可以转换成布尔值。

下面类型为 true:true、除0数字、"something"、Object(任何对象)
下面类型为 false:false、0 、""(空字符串)、undefined 、null、NaN

Boolean(参数); 

img_25336e0b5504f9a5b326090f41d9dcd7.png

img_964e5550b9dc423fcb4297d85f09ac10.png

目录
相关文章
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
311 2
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1427 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
1104 11
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
559 11