【进阶】【JS逆向爬虫】【4.JavaScript 基础语法】数据类型

My.ICBM

已于 2024-01-03 14:58:26 修改

阅读量1.1k

点赞数 17

分类专栏：【高阶】JS逆向爬虫文章标签： javascript 爬虫开发语言

于 2024-01-02 12:59:45 首次发布

本文链接：https://blog.csdn.net/weixin_43612602/article/details/135338212

版权

【高阶】JS逆向爬虫专栏收录该内容

21 篇文章 14 订阅

订阅专栏

数据类型

1. 数据类型简介

为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

	var age = 10;        // 这是一个数字型
	var areYouOk = '是的';   // 这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

	var x = 6;           // x 为数字
	var x = "Bill";      // x 为字符串

2. 数据类型的分类

在这里插入图片描述

布尔型

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。主要用于逻辑判断。

<script >
		var flag1 = true;
		var flag2 = false;
		console.log(flag1,flag2);
</script>

数字型

数字型又分为整型和浮点型，在JavaScript中表示数字的形式是和C、Java中一致的。在数字的前面加上 ‘+’ 号或者不加代表这个数为正数，在数字的前面加上 ‘-’ 号则代表这个数为负数。

整型

使用整型时候，可以表示出八进制、十进制、十六进制:

十进制不用加任何符号
八进制前面加0(零)
十六进制前面加0x(零x)

<script >
		var num1=20;//十进制20
		var num2=016;//八进制16
		var num3=0x32;//十六进制32
		console.log(num1,num2,num3);
</script>

浮点型

浮点型也就是小数，我们可以正常定义小数也可以使用科学计数法的格式来表示:

<script >
		//正常定义
		var fnum1=3.14;
		var fnum2=-3.14;
		
		//科学计数法
		var fnum3=3.14E6;
		var fnum4=4.16E-4;
		console.log(fnum1,fnum2,fnum3,fnum4);  
		# 3.14 -3.14 3140000 0.000416
</script>

字符串型

字符串是计算机中用于表示一段文本的，在JavaScript中我们把字符串使用单引号和双引号括起来。

<script >
		//单引号
		var str1='ABC';
		var str2='我蛮帅';
		
		//双引号
		var str3="abc";
		var str4="你蛮美";
		console.log(str1,str2,str3,str4);
		# ABC  我蛮帅  abc  你蛮美
</script>


// 同时使用单双引号
<script >
		var str1="red is'color'";
		console.log(str1);  # red is 'color'
		var str2='green is"color"';
		console.log(str2);  # green is "color"
		// 使用转义字符
		var str3='I\'m boy';
		console.log(str3);  # I'm boy
		var str4="\"Tom\"";
		console.log(str4); # "Tom"
</script>

字符串基本操作

length 属性

表示字符串的长度，该字符串由多少字符组成

是一个只读属性

var str = 'Today is sun day';
console.log(str.length); // 16

索引属性

var str = 'Today is sun day';
console.log(str[2]); // 2
console.log(str[100]); // undefined

遍历

var str = 'Today is sun day';
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}

字符串常见方法

charAt()

charAt() 方法从一个字符串中返回指定的字符

参数：index一个介于 0 和字符串长度减 1 之间的整数。(0~length-1) 如果没有提供索引，charAt() 将使用 0。

描述：字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 stringName.length - 1。如果指定的 index 值超出了该范围，则返回一个空字符串。

# 语法
str.charAt(index)

# 示例
var str = 'hello';
console.log(str.charAt()); // h
console.log(str.charAt(4)); // o
console.log(str.charAt(10)); // 空字符串

charCodeAt()

charCodeAt() 方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元
参数：index一个大于等于 0，小于字符串长度的整数。如果不是一个数值，则默认为 0。

返回值：指定 index 处字符的 UTF-16 代码单元值的一个数字；如果 index 超出范围，charCodeAt() 返回NaN

# 语法
str.charCodeAt(index)

# 示例
var str = 'hello';
console.log(str.charCodeAt()); // 104
console.log(str.charCodeAt(4)); // 111
console.log(str.charCodeAt(10)); // NaN

toUpperCase()

toUpperCase() 方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）
返回值：一个新的字符串，表示转换为大写的调用字符串。

描述：toUpperCase() 返回转为大写形式的字符串。此方法不会影响原字符串本身的值，因为 JavaScript 中字符串的值是不可改变的

# 语法
str.toUpperCase()
# 示例
var str = 'hello';
console.log(str.toUpperCase()); // HELLO

toLowerCase()

toLowerCase() 会将调用该方法的字符串值转为小写形式，并返回

返回值：一个新的字符串，表示转换为小写的调用字符串。

描述：toLowerCase 会将调用该方法的字符串值转为小写形式，并返回。toLowerCase 不会影响字符串本身的值

# 语法
str.toLowerCase()

substr()

注：此方法官方没有严格被废弃，可以使用 substring() 替代它

返回值：截取后的字符串

# 语法
str.substr(start[, length])

# 示例
var str = "2022-12-28";
console.log(str.substr(0, 7)); // 2022-12

substring()

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集
特点：包括开始索引，不包括结束索引

var str = "abcdefg";
console.log(str.substring(0, 4));

slice()

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串

# 语法
str.slice(beginIndex[, endIndex])

# 示例
var str = 'hello';      
console.log(str.slice(2, 4)); // ll
console.log(str.slice(1, -1)); // ell

split()

split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置

# 语法
str.split([separator[, limit]])

# 示例
var str = "2022-12-28";
console.log(str.split("-"));
console.log(str.split("")); // 经典用法 把每一位拆开

concat()

concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回

# 语法
str.concat(str2, [, ...strN])

# 示例
var str = 'hello';
console.log(str.concat('world')); // helloworld

indexOf()

indexOf() 方法，给定一个参数：要搜索的子字符串，搜索整个调用字符串，并返回指定子字符串第一次出现的索引。给定第二个参数：一个数字，该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现

# 语法
indexOf(查找的字符)
indexOf(查找的字符, 开始的索引)

# 示例
var str = 'helloworld';
console.log(str.indexOf('ll')); // 2
console.log(str.indexOf('o')); // 4
console.log(str.indexOf('a')); // -1

includes()

includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，并根据情况返回 true 或 false

# 语法
includes(searchString)
includes(searchString, position)

# 示例
var str = 'helloworld';
console.log(str.includes('ll')); // true
console.log(str.includes('o')); // true
console.log(str.includes('a')); // false

trim()

trim() 方法从字符串的两端清除空格，返回一个新的字符串，而不修改原始字符串

var str = `  
                hao  de
        `
console.log(str); //   
//      hao  de
//
console.log(str.trim()); // hao  de

replace()

语法：字符串.replace(换下字符, 换上字符)

作用：替换字符串内容

注：一次只能换一个

返回值：一个部分或全部匹配由替代模式所取代的新的字符串

var str = '美好的生活，从写代码开始';
console.log(str.replace('写代码', '一日三餐')); // 美好的生活，从一日三餐开始

转义字符

转义字符	含义
\’	一个单引号
\"	一个双引号
\n	换行符
\t	制表符
\f	换页符
\b	退格符
\v	垂直制表符
\r	回车符
\\	反斜杠
\0	空字符

案例 - 反转字符串

# 方法1
var origin = "abcde";  
var str = "";
for (var i = 0; i < origin.length; i++) {
    str = origin[i] + str;
}
console.log(str); // edcba

# 方法2
var origin = "abcde";
var r1 = origin.split("");
var r2 = r1.reverse();
var r3 = r2.join("");
var res = origin.split("").reverse().join("");
console.log(res); // edcba

案例 - 连字符转驼峰

var str = "get-element-by-class-name";
var arr = str.split("-");
for (var i = 1; i < arr.length; i++) {
    arr[i] = arr[i].substr(0, 1).toUpperCase() + arr[i].slice(1);
}
str = arr.join("");
console.log(str); // getElementByClassName

案例 - 敏感词变为 *

# 方式1 - 改变一种敏感词
var str = "as小明bdd小明adf小明asdfa小明asdfasdf ";
var s = "小明";
str = str.split(s).join("**");
console.log(str); // as**bdd**adf**asdfa**asdfasdf

# 方式2 - 批量替换敏感词
var str = "as小明bdd小明adf小明asdfa小明asdfasdf ";
var s = ["小明", "a"];
s.forEach(function (item) {
    str = str.split(item).join("**");
});
console.log(str); // **s**bdd****df****sdf******sdf**sdf

案例 - 统计字符串中每一个字符出现的次数

var str = "aaaaabbbbcccdddabacdbdeeedfad";
var obj = {};
for (var i = 0; i < str.length; i++) {
    var item = str[i]; // 每一个字符
    obj[item] ? obj[item]++ : (obj[item] = 1);
}
console.log(obj); // {a: 8, b: 6, c: 4, d: 7, e: 3, f: 1}

空型

空型是一个特殊类型它为null，表示变量未有任何的值或对象：

		<script >
			var a = null;
			console.log(a); # null
		</script>

未定义型

未定义类型只有一个特殊的值那就是undefined，当你未初始化值时，此时的值就是undefined：

<script >
		var num;
		console.log(num); # undefined
</script>

3. 数据类型检测

在开发过程中，难免会要进行相应同类型的数据匹配。JavaScript中提供了typeof操作符，当不确定一些数据类型是否相同类型时可以使用该操作符。

<script >
		var num;
		console.log(typeof 2);  # number
		console.log(typeof 'A'); # string
		console.log(typeof true); # boolean
		console.log(typeof null);  # object
		console.log(typeof undefined);  # undefined
		console.log(typeof num); # undefined
</script>

4. 类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

转换为字符串

第三种加号拼接字符串转换方式使用更多，这一种方式也称之为隐式转换

方式	说明	案例
toString()	转成字符串	var num=1; alert(num.toString())
String() 强制转换	转成字符串	var num=1; alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num=1; alert(num+“我是字符串”);

// 方式1 ： toString()
var a = 10;
console.log(a.toString()); // 字符串10

// 方式2 ： String()
console.log(String(true));
console.log(String(false));
console.log(String(0));
console.log(String(100));

// 方式3 ：任意的数据类型 + ""
var a = true;
a = a + "";

// 字符串拼接
console.log(true + 1); // 2
console.log(2 + 1); // 3
console.log(null + null); // 0

// 特殊情况（面试题）
console.log(0.1 + 0.2); // 0.30000000000000004  
console.log(0.2 + 0.4); // 0.6000000000000001
console.log(0.2 + 0.3); // 0.5
// 因为IEEE754标准对于浮点数(小数float)产生的误差造成的
// 解决方式(转换成整数)
console.log((0.1 * 10 + 0.2 * 10) / 10); // 0.3

转换为数字型（重点）

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

方式	说明	案例
parseInt(string)	将 string 类型转成整数数值型	parseInt(“78”)
parseFloat(string)	将 string 类型转成浮点数数值型	parseFloat(78.21)
Number() 强制转换	将 string 类型转换为数值型	Number(“12”)
js 隐式转换（- * /）	利用算术运算隐式转换为数值型	“12” - 0

// 方式1 ：整数与浮点数转换
// parseInt()
var a = "123.456px";
a = parseInt(a); 
console.log(a); // 123
console.log('rem120px'); // NaN

// parseFloat()
var a = "123.456px";
a = parseFloat(a); 
console.log(a);// 123.456

// 方式2 ：Number()
var s = "123";
console.log(Number(s));// 123
console.log(Number(false)); // 布尔值false转换成0
console.log(Number('100')); // 100
console.log(Number('hello')); // NaN
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

// 方式3 ：算术运算符隐式转换 - / *
console.log('12' - 0);// 12
console.log('12' - '10');// 2
console.log('3' / '5'); // 0.6
console.log('3' * '5'); // 15
console.log('3' * 'abc'); // NaN

// 方式4 ：+号
console.log(+false); // 0
console.log(+'100'); // 100
console.log(+'hello'); // NaN
console.log(+null); // 0
console.log(+undefined); // NaN
console.log(+''); // 0

// 方式5 ：tofixed() 保留括号里面的数字的小数。结果为字符串格式。(银行家算法)
var num = 2.3445566;
var a = num.toFixed(2);
console.log(a);// 2.34

案例：简单加法器

<script>
      var a = prompt('请输入第一个数：');
      var b = prompt('请输入第二个数：');
      //注意类型转换
      var sum = parseFloat(a) + parseFloat(b);
      alert('结果是：' + sum);
</script>

转换为布尔型

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true

方式	说明	案例
Boolean()	其他类型转成布尔值	Boolean(‘true’)

// 方式1 ：Boolean() 规律：数字非0即真，字符串非空即真。
// 以下结果全为：false
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log(Boolean(false));

// 方式2 ：两次非运费 - 为任意的数据类型做两次非运算（隐式类型转换
var a = "hello";
a = !!a; // true