• 笔记
  • 好文
  • 工具
  • 关于
    • |
    主题设置

    卡片式面板通常用于非白色背景色的主体内

    JS 变量

    变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。

    变量类型

    变量 类型 说明 分类 存储位置
    number 数字
    • 小数
    • 整数
    		 值类型，即基本类型（简单类型） 栈：传递的是值
    string 字符串 一般用单引号或者双引号括起来
    boolean 布尔
    • true
    • false

    注：JS 中布尔类型不能写成 bool
    null 空类型

    一个对象的指向为空，此时可以赋值为 null 。

    让一个变量的值为 null，只能直接赋值为 null，没有其他方法可以让变量的值变为 null 。

    		 引用类型，即复杂类型
    • 引用类型的对象：存储在堆中
    • 地址(引用)：存储在栈中

    作为函数参数时，传递的是地址。
    undefined 未赋值

    变量为 undefined 的 2 种情况：

    • 只声明而未赋值的变量如果输出，内容就是 undefined 。
    • 函数没有明确返回值，结果也是 undefined 。

    注：undefined 和数字计算，结果是 NaN 。
    object 对象
    Symbol ECMAScript6 新定义

    命名规则和规范

    规则：

    • 由字母、数字、下划线、$ 符号组成，不能以数字开头。
    • 不能是关键字和保留字，例如：for、while 。
    • 区分大小写。

    规范：

    • 变量名必须有意义。
    • 遵守驼峰命名法，首字母小写，后面单词的首字母需要大写，例如：userName、userPassword 。
    • JS 中的字符串可以使用单引号，也可以使用双引号。

    声明和赋值

    // 声明一个叫 num 的变量，此时是没有赋值的
var num;
// 后赋值
num = 0;

// 也可以一次性声明多个变量，然后赋值
var num1,num2,num3;
// 用逗号间隔赋值（逗号后换行也可以）
num1 = 100,num2 = 200,num3 = 300;
// 用分号间隔赋值
num1 = 100;
num2 = 200;
num3 = 300;

// 还可以一次性声明多个变量，并同时赋值
var num4 = 400,num5 = 400,num6 = 400;	

// 相当于var a = 9;b = 9;c = 9，其中 b 和 c 是隐式全局变量
var a = b = c = 9;

    变量的交换

    // 方法一：使用第三方变量进行交换
var num1 = 100;
var num2 = 200;
var temp = num1;
num1 = num2;
num2 = temp;
console.log(num1);
console.log(num2);

// 方法二：一般适用于数字的交换
var num1 = 100;
var num2 = 200;
num1 = num1 + num2;	// 将 num1 与 num2 的和赋给 num1，然后要得到哪一个，就减去另一个
num2 = num1 - num2;
num1 = num1 - num2;
console.log(num1,num2);

// 方法三：通过位运算交换(不理解就算，看到这样的写法知道用处就行)
var num1 = 100;
var num2 = 200;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
console.log(num1,num2);

    获取数据类型

    // 声明变量
var num = 10;
var str = '小白';
var flag = true;
var nul = null;
var undef;
var obj = new Object();

//输出变量类型
console.log(typeof num);	// 输出 number，一般浏览器的控制台中显示为蓝色
console.log(typeof str);	// 输出 string，一般浏览器的控制台中显示为黑色
console.log(typeof flag);	// 输出 boolean
console.log(typeof nul);	// 输出 object，不输出 null
console.log(typeof undef);	// 输出 undefined
console.log(typeof obj);	// 输出 object

    number 类型

    // 无论整数还是小数，都是 number 类型
var num1 = 20;		// 整数
var num2 = 98.86;	// 小数
var num3 = 5e-324;	// 科学计数法，5 乘以 10 的 -324 次方

// 多进制声明
// 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值
// 如果字面值中的数值超出了数字序列的范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
var num4 = 10;		// 十进制，遇到 10 进 1
var num5 = 012;		// 八进制，以 0 开头，数字序列范围：0~7，遇到 8 进 1
var num6 = 0x123;	// 十六进制，以 0x 开头，数字序列范围：0~9 以及 A~F，遇到 f 进 1
console.log(num4,num5,num6);

// 数字类型的范围
console.log(Number.MAX_VALUE);	// 最大值：1.79769313486223157e+308
console.log(Number.MIN_VALUE);	// 最小值：5e-324
Infinity	// 无穷大
-Infinity	// 无穷小

// 小数相加有问题
// 结论：不要用小数去验证小数
var x = 0.1;
var y = 0.2;
var sum = x + y;
console.log(sum);		// 输出 0.300000000000004
console.log(sum = 0.3);	// 输出 false

// NaN 不能比较
// 结论：不要用 NaN 验证 NaN，应该使用 isNaN()
var num;
var sum = num + 10;
console.log(sum == NaN);		// 输出 false
console.log(isNaN(num));	// 输出 true（不是数字输出 true，是数字输出 false）
    JS 中的数字类型不区分双精度、单精度，也不区分 int/long/……

    string 类型

    // JS字符串中的转义字符
/b	退格
/f	走纸换页
/n	换行
/r	回车
/t	制表符
/'	单引号
/"	双引号
//	反斜杠

// 获取字符串中字符的个数/长度(包含空格)
var str1 = '床前明月光，';
console.log(str1.length);
// 字符串的拼接，加号(+)
var str2 = '疑似地上霜。';
// 只要有一个是字符串，就算拼接的是数字，最终输出的也是字符串，不是相加的和
console.log(str1 + str2);

// 字符串和数字相减
var str3 = '10';
var str4 = 5;
// 输出 5，是由于浏览器的隐式转换，会将字符串 10，隐式转换为数字 10
console.log(str3 - str4);

// 遍历字符串
var str5 = "Hello World";
for(var i=0; i<str5.length; i++){
    console.log(str5[i]);
}

// 字符串的方法
console.log(str);			// 输出字符串
console.log(str1+str2);		// 字符串拼接
console.log(str.length);	// 获取字符串的长度
console.log(str.charAt(2));	// 获取 str 中索引 2 处的字符；若超出索引，返回空字符；如果没有给参数索引，则返回 0 。
console.log(str.concat("拼接1","拼接2","拼接3","拼接..."));	// 拼接字符串
console.log(str.trim());				// 去除字符串两端的空格
console.log(str.trimLeft());			// 去除字符串左边的空格
console.log(str.trimRight());			// 去除字符串右边的空格
console.log(str.toLowerCase());			// 将字符串转换为小写
console.log(str.toLocaleLowerCase());	// 将字符串转换为小写
console.log(str.toUpperCase());			// 将字符串转换为大写
console.log(str.toLocaleUpperCase());	// 将字符串转换为大写
console.log(str.split("-"));		// 根据“-”，分割字符串，转成数组（可遍历取出每个元素）
console.log(str.split("-",3));		// 根据“-”，分割字符串，转成数组（可遍历取出每个元素），分割后只留下前 3 个，其余不要。
console.log(str.substr(5));			// 从索引 5 的位置开始，一直截取到最后。
console.log(str.substr(5,3));		// 从索引 5 的位置开始，向后截取 3 位。
console.log(str.substring(5,9));	// 从索引 5 的位置开始，截取到索引 9 的前一位（不包括索引 9 位置所在的字符）
console.log(str.slice(2,5));		// 从索引 2 的位置开始，截取到索引 5 的前一位（不包括索引 5 位置所在的字符）
console.log(str.indexOf("a"));		// 从左往右找字符，输出字符串 str 中，a 字符所在的索引，不存在返回 -1 。
console.log(str.indexOf("a",2));	// 从左边第二个字符开始往右找，输出字符串 str 中，a 字符所在的索引，不存在则输出 -1 。
console.log(str.lastIndexOf("a"));	// 从右往左找字符，输出字符串 str 中，a 字符所在的索引(索引永远都是从左往右数的)，不存在返回 -1 。

// String 的静态方法
// 返回 SOS，即 ASCLL 码所对应的字符。（参数可以是多个，不一定 3 个）
var str = String.fromCharCode(83,79,83);

// 在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()
// search() 方法：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
var str = "Visit Bjbcode!"; 
var n = str.search(/Bjbcode/i);	// /Bjbcode/i 是一个正则表达式，Bjbcode 是一个正则表达式主体 (用于检索)，i 是一个修饰符，表示搜索不区分大小写。
var n = str.search("Bjbcode");	// 还可以直接搜索字符串

// replace() 方法：用于在字符串中用一些字符替换为另一些字符，或替换一个与正则表达式匹配的子串。
// 以正则表达式替换字符串
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Bjbcode");	// 通过正则表达式替换
var txt = str.replace("Microsoft","Bjbcode");	// 直接替换字符串

// 字符串说明
// 1、字符串可以看成是字符组成的数组，但实际上 JS 中没有字符类型。
// 2、字符串可以通过索引访问其中的某个字符，但不能通过索引改变其中的某个字符， 比如：var str = "hello"; str[1] = "w"; 这样不能将 e 改成 w 。
// 3、字符串是不可变的，虽然从代码上看可以为其重新赋值，但实际上是从内存中重新开辟了一个空间，比如：var str = "hello"; str = "world"; 改成 world 后，str 所代表的内存空间也变了。
// 4、JS 中可以用双引号，也可以用单引号将字符串括起来。

    boolean 类型

    var flag1 = true;
var flag2 = false;
console.log(flag1);	// 输出 true
console.log(flag2);	// 输出 false

console.log(Boolean("哈哈"));	// 返回 true
console.log(Boolean(""));		// 返回 false

    null 类型

    // 因为 body 里没有 id 为 abcd 的 元素，所以这里就会返回空类型
var nul = document.getElementById("abcd");
// 输出 null
console.log(nul);

// 将空类型转为字符串，必须用 String()，不能用 toString()，最终输出 null
console.log(String(nul));

    undefined 类型

    // 只声明不赋值，该对象就是 Undefined 类型
var undef;
// 输出 undefined
console.log(undef);
// 输出 NaN，因为 und 没有赋值，所以是 Undefined 类型，Undefined 加上任何类型都会输出 NaN 。
console.log(undef+10);
// 验证结果是不是 NaN，如果是，则返回 true 。
console.log(isNaN(undef+10));

// 变量的预解析
// 将变量使用，放在变量声明前面，仍能执行，就叫变量的预解析。
// 输出的是 undefined，不是下面的变量内容。可如果下面没有声明变量，就会报错了。
console.log(preVar);
var preVar = "我是预解析变量！"

    基本包装类型

    // string 类型
var str = "hello";
// 因为调用了方法，所以变成基本包装类型对象了
var arr = str.replace("l","m");

// 注意的地方
// 这里的 flag 是基本包装类型对象，是对象。
var flag = new Boolean(false);
// 所以这里是对象逻辑与上 true，不是 false 逻辑与上 true 。
var result = flag && true;
// 这里输出 true
console.log(result);
    基本包装类型：本身是基本类型，但是在执行代码的过程中，如果这种类型的变量调用了属性或者方法，那么这种类型就不再是基本类型了，而是基本包装类型；这个变量也不是普通的变量了，而是基本包装类型对象

    类型转换

    // 其他类型转数字类型：三种方式
// 总结：想要转整数用 parseInt()，想要转小数用 parseFloat()，想要转数字用 Number()(要比前面的两种方式严格)
// 1. 转成整数用：parseInt()
console.log(parseInt("10"));			// 10
console.log(parseInt("10afrswfdsf"));	// 10
console.log(parseInt("g10"));			// NaN（不能转换，则返回 NaN）
console.log(parseInt("1fds0"));			// 1
console.log(parseInt("10.98"));			// 10
console.log(parseInt("10.98fdsfd"));	// 10
// 2. 转成小数用：parseFloat()
console.log(parseFloat("10"));			// 10
console.log(parseFloat("10afrswfdsf"));	// 10
console.log(parseFloat("g10"));			// NaN（不能转换，则返回 NaN）
console.log(parseFloat("1fds0"));		// 1
console.log(parseFloat("10.98"));		// 10.98
console.log(parseFloat("10.98fdsfd"));	// 10.98
// 3. 转成数字用：Number()（要比前面的两种方式严格，N 必须大写，小写不行）
console.log(Number("10"));				// 10
console.log(Number("10afrswfdsf"));		// NaN（不能转换，则返回 NaN）
console.log(Number("g10"));				// NaN（不能转换，则返回 NaN）
console.log(Number("1fds0"));			// NaN（不能转换，则返回 NaN）
console.log(Number("10.98"));			// 10.98
console.log(Number("10.98fdsfd"));		// NaN（不能转换，则返回 NaN）

// 其他类型转字符串
// 1. toString()：如果变量有意义用这个
var num1 = 10;
console.log(num1.toString());	// 输出 10
// 2. String()：如果变量没有意义用这个（比如变量值为 undefined、null）
var num2;
console.log(String(num2));		// undefined
var num3 = null;
console.log(String(num3));		// null

// 其他类型转布尔类型
// 1.Boolean(值)
console.log(Boolean(1));		// true
console.log(Boolean(0));		// false
console.log(Boolean(11));		// true
console.log(Boolean(-10));		// true
console.log(Boolean("哈哈"));	// true
console.log(Boolean(""));		// false
console.log(Boolean(null));		// false
console.log(Boolean(undefined));// false

    Copyright © 2023 Bjbcode All Rights Reserved.

    关于我们 联系我们 捐赠我们 免责声明

    沪ICP备2020027631号