从零开始学 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

目录
相关文章
|
18天前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
28 0
JavaScript基础知识-变量的声明提前
|
21天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
65 0
|
21天前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
23天前
|
前端开发 JavaScript API
构建高效Web应用:React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域,构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈,打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理,我们将一步步分析这两种技术如何协同工作,提升应用性能,并确保用户体验的流畅性。通过实际代码示例和架构设计的解析,本篇文章旨在为读者提供一套清晰的指南,帮助他们在项目开发中做出更明智的技术选择。
|
24天前
|
缓存 前端开发 JavaScript
超时空加速秘籍:揭秘JavaScript前端开发中的性能魔法,让您的Web应用瞬间穿越到未来!
【8月更文挑战第27天】本文介绍了一系列实用的JavaScript性能优化方法并提供了示例代码,包括减少DOM操作、使用事件委托、避免阻塞主线程、异步加载资源、利用浏览器缓存、代码分割以及使用Service Worker等技术,帮助开发者有效提升Web应用性能和用户体验。
33 2
|
28天前
|
前端开发 JavaScript
Web 前端大揭秘!JS 数据类型检测竟如此震撼,一场惊心动魄的代码探秘之旅等你来!
【8月更文挑战第23天】在Web前端开发中,合理检测数据类型至关重要。JavaScript作为动态类型语言,变量类型可在运行时变化,因此掌握检测技巧十分必要。
22 1
|
28天前
|
存储 前端开发 JavaScript
Web前端的奇幻之旅:探索JS数据类型的奥秘与差异
【8月更文挑战第23天】JavaScript是一种动态类型语言,提供多种内置数据类型支持信息的存储与操作。这些类型对Web前端开发者至关重要,直接影响代码性能与可读性。JavaScript数据类型主要分为两大类:原始数据类型(如Undefined、Null、Boolean等)与引用数据类型(如Object、Array等)。原始类型直接存储值,而引用类型存储指向数据的引用。原始类型不可变且存储在栈中,访问更快;引用类型则存储在堆中,可通过其引用进行修改。理解这些差异有助于编写高效、可维护的代码。
29 0
|
28天前
|
JavaScript 前端开发 开发者
JS 继承之谜:究竟有哪些神秘方法?Web 前端开发者必知的关键技巧待你揭开谜底!
【8月更文挑战第23天】JavaScript (JS) 是 Web 前端开发的关键语言,其中继承是面向对象编程的重要概念。本文探讨了 JS 中几种继承机制:原型链继承、构造函数继承及组合继承。原型链继承利用原型对象实现属性和方法的共享;构造函数继承通过在子类构造器内调用父类构造器实现私有属性的复制;组合继承结合两者优点,既支持属性共享又避免了属性被意外覆盖的风险。理解这些模式有助于开发者更高效地组织代码结构,提升程序质量。
27 1
|
28天前
|
前端开发 JavaScript 开发者
【Web 前端】彻底告别“this”指向困扰:从零开始掌握 JavaScript 中“this”的奥秘
【8月更文挑战第23天】在 JavaScript 中,`this` 关键字的指向是根据其调用上下文动态确定的,这对于 Web 前端开发者而言是一项核心技能。本文通过多个示例解释了 `this` 的指向规则:在对象方法中指向该对象,在独立函数中指向全局对象或 `undefined`,在事件处理器中指向触发事件的 DOM 元素,在构造函数中指向新创建的对象。此外,还介绍了一些技巧,如使用箭头函数、`bind` 方法以及在事件处理器中显式保存 `this` 的引用,以帮助开发者更好地理解和控制 `this` 的指向。
29 1