Web基础 ( 七 ) 变量

4.3.变量实例及内置对象

4.3.1.string 字符串

// string
var a = "abc"
console.log( typeof(a) )  //string

var b = 'efg'
console.log( typeof b )  //string

var c = a>b
console.log( c )   //  字符串比较按字母顺序

console.log("abc\nefg") // \n 转义字符

// String 包装类
var str=new String("zhe sHi yi ge zi fu chuan");
console.log( "str: ", str)
console.log( "length: ", str.length )  // 长度
console.log( "charAt(0): ", str.charAt(0) ) // 对应索引的字符
console.log( "charCodeAt(0): ", str.charCodeAt(0))  //对应索引的 字符编码
console.log( "concat(' lian shang yi duan'): ", str.concat(" lian shang yi duan") ) //拼接字符串 原字符串不变  ，使用时更多的是用+

console.log( "slice(2,5): ", str.slice(2,5) )  // 截取 , 前闭后开
console.log( "substring(2,5): ", str.substring(2,5) ) // 截取 , 前闭后开
console.log( "substr(2,5): ", str.substr(2,5) )   // 截取 , 从哪位开始 截取几个, 第二个参数是位数

console.log( "slice(-2): ", str.slice(-2));       // - 负数 表示从后面取 
console.log( "substring(-2): ", str.substring(-2))   //  负数当0
console.log( "substr(-2): ", str.substr(-2))     //   IE中有问题，返回字符串  表示从后面取 

console.log( "slice(2,-4): ", str.slice(2,-4));    //  正数 从前面数   负数 从后面数
console.log( "substring(2,-4): ", str.substring(2,-4));//负数当0 变成从0到2

console.log( "indexOf('h'): ", str.indexOf("h"));   //返回第一个匹配的位置，没有返回-1   ，可以通过通过第二个参数指定从第几个字符开始查找
console.log( "indexOf('h', 3): ", str.indexOf("h", 3))   // 返回指定位置之后, 第一个匹配的位置
console.log( "lastIndexOf('h'): ", str.lastIndexOf("h"))  //返回 最后一个匹配的位置

console.log( "toLowerCase(): ", str.toLowerCase())  // 转小写
console.log( "toUpperCase(): ", str.toUpperCase())  // 转大写

console.log( "match(/h/): ", str.match(/h/))	//要传入正则进行查找 ,返回要查询的
console.log( "search(/h/): ", str.search(/h/))	//返回位置

console.log( "replace(/h/g,'$'): ", str.replace(/h/g,'$'))//替换
console.log( "replace('h','$'): ", str.replace("h",'$')) //替换,只改第一个

console.log( "split(' '): ", str.split(" ")); //根据参数分组，返回数组

console.log( "localeCompare('yes'): ", str.localeCompare("yes")); //比较排序

4.3.2.number 数值

// number 
var d1 = 123    // 	十进制
console.log( typeof(d1) ) // number 整数    

var d2 = 0123   //	八进制 0开头
var d3 = 0x123  //  十六进制 0x开头

var e1 = 123.456
console.log( typeof(e) ) // number 浮点数
var e2 = 0.6
var e3 = .6

// Number 包装类
console.log( " Number.MAX_VALUE: ", Number.MAX_VALUE )	// 最大值  Number.MAX_VALUE    1.7976931348623157e+308 
														// 大于它Infinity      Number.NEGATIVE_INFINITY
console.log( " Number.MIN_VALUE: ", Number.MIN_VALUE )	// 最小值  Number.MIN_VALUE     5e-324   
														// 小于它-Infinity     Number.POSITIVE_INFINITY

var f1 = new Number(12.5678);
var f2 = new Number("12.5678");   // 这两种方式不常用

var g1 = "123.456"
var g2 = 123.456
console.log( g1 + g2 )	
console.log( "parseInt: ", parseInt(g1) + g2 )   // 将字符串 转 数字
console.log( "parseFloat: ", parseFloat(g1) + g2 ) // 将字符串 转 浮点数

console.log( "toFixed(2): ", g2.toFixed(2));  //四舍五入截取指定的位数

var nan = "not a number"
console.log( "nan: ", parseInt(nan) )  // 将不是数值型字符串转成数字, 返回 NaN
console.log( "NaN==NaN: ", parseInt(nan) == parseInt(nan) ) // NaN 不等于 NaN

console.log(" isNaN(nan): " ,  isNaN(nan) )  // true , 判断 是否不是数字

4.3.3.boolean 布尔(逻辑)

var h1 = true
console.log( typeof h1)   // boolean 
var h2 = false
console.log( typeof h2)   // boolean

4.3.4.undefined 未赋值

声明但没有初始化的,

相当于 Java语言中的null, 但 js中有null, 所以有的浏览器两者是混用的

var i;
console.log( typeof i) 	// undefined

4.3.5.转型

JavaScript 可以在没有明确声明的情况下将值从一种类型自动转换为另一种类型，这被称为“隐式类型转换”或“自动类型转换”。

以下是一些常见的自动类型转换示例：

4.3.5.1.数字和字符串的自动类型转换

当数字和字符串进行运算时，JavaScript 会自动将字符串转换为数字，或将数字转换为字符串。例如：

console.log(1 + "2"); // "12"
console.log("3" * 4); // 12
console.log("23"-3);  // 20

在这个例子中，第一个 console.log 语句会将数字 1 转换为字符串 “1”，然后连接字符串 “2”，得到字符串 “12”。

第二个 console.log 语句会将字符串 “3” 转换为数字 3，然后与数字 4 相乘。

第三个 console.log 语句会将字符串 “23” 转换为数字 23，然后与数字 3 相减。

4.3.5.2.布尔值的自动类型转换

当布尔值用于条件语句时，JavaScript 会自动将其他类型的值转换为布尔值。例如：

if ("hello") {
  console.log("字符串在条件语句中被转换为布尔值 true");
}
if (0) {
  console.log("数字 0 在条件语句中被转换为布尔值 false");
}
if (null) {
  console.log("null 在条件语句中被转换为布尔值 false");
}

在这个例子中，第一个 if 语句会将字符串 “hello” 自动转换为布尔值 true。

第二个 if 语句会将数字 0 自动转换为布尔值 false。

第三个 if 语句会将 null 自动转换为布尔值 false。

4.3.5.3.对象和数字/字符串的自动类型转换

当对象用于与数字或字符串进行运算时，JavaScript 会尝试将对象转换为数字或字符串。例如：

console.log({} + 1); // 1 (空对象被转换为数字 0)
console.log({} + "2"); // "[object Object]2" (空对象被转换为字符串 "[object Object]")

在这个例子中，第一个 console.log 语句会将空对象 {} 转换为数字 0，然后加上数字 1，得到数字 1。

第二个 console.log 语句会将空对象 {} 转换为字符串 “[object Object]”，然后连接字符串 “2”，得到字符串 “[object Object]2”。

4.3.5.4.转型的优先级

在 JavaScript 的自动转型中，一些数据类型之间的转换是有优先级顺序的。具体来说，在自动转型时，JavaScript 优先将数据类型转换为数值类型，其次是字符串类型。尤其是在计算中，JavaScript 会尽可能将数据类型转换为数值类型，然后再进行计算。以下是类型转换的优先级顺序：

操作符优先级最高，操作符两侧的值会优先被转换为数值类型。例如，在加、减、乘、除和取模运算时，JavaScript 会优先将字符串转换为数值。
当一个对象需要被转换时，先调用它的 valueOf() 方法，如果结果不是原始数据类型，则再调用该对象的 toString() 方法。如果操作符两侧的值都是对象，则不会进行类型转换。
如果需要将一个非字符串数据类型转换为字符串类型，JavaScript 会调用该数据类型的 toString() 方法。如果结果是一个原始数据类型，则直接返回该结果；否则，再调用该数据类型的 valueOf() 方法。如果最终结果还是不是原始数据类型，则抛出一个类型错误。

以下是一个类型转换的例子，演示了 JavaScript 在自动转换时的优先级顺序：

console.log(5 - "3"); // 2 (先把字符串 "3" 转换为数值 3，再与数字 5 相减)
console.log("5" * 3); // 15 (先把字符串 "5" 转换为数值 5，再与数字 3 相乘)
console.log("abc" - 1); // NaN (先把字符串 "abc" 转换为 NaN，再与数字 1 相减)
console.log("1" + 2); // "12" (先把数字 2 转换为字符串 "2"，然后连接字符串 "1" 和字符串 "2"，得到字符串 "12")
console.log(!"hello"); // false (先把字符串 "hello" 转换为布尔值 true，然后取反得到 false)

根据上面这些规则，我们可以更好地理解 JavaScript 中的自动类型转换。

4.3.5.5.== 与 ===

在进行 == 比较时, 如果两边的类型不同将进行自动转型

k 类型为 undefined 与 l 类型为 object 比较时 , 转数字, 转字符串, 都不可以

最终转成 boolean 都是 false , 所以 == 返回 true

var k;    // undefined
var l = null; // object
console.log( k == l )  // true
console.log( k === l )  // false

而 === 是先判断类型是否相同 , 不同直接返回 false

在下面的k 与 l 比较中 , 两都都是 object类型, 但一个是数组一个是对象, 这时将它们转换成字符串

即 [object Array] 和 [object Object] 所以返回 false

var k = [];
var l = {};
console.log(k == l) // false

4.3.6.object 对象

JS中很多都是object, 如: document 元素, new 得到的, 内置的对象等

var j1 = new String("hello")
console.log( typeof j1)  //object
var j2 = new Date();
console.log( typeof j2)  //object

var j3 = [1,2,3]
console.log( typeof j3)  //object
var j4 = {"name":"王小二", "age":12}
console.log( typeof j4)  //object

var j5 = document
console.log( typeof j5)  //object
var j6 = document.getElementById("inp")
console.log( typeof j6)  //object

4.3.7.function 函数

4.3.7.0.两种定义方式

函数类型有两种定义方式

function fn1(){
    console.log("fn1")
}
console.log( typeof fn1) // function

var fn2 = function(){
    console.log("fn2")
}
console.log( typeof fn2) // function

4.3.7.1.函数调用

function fn1(){
    console.log("fn1")
}
fn1();

fn2();
function fn2(){
    console.log("fn2")
}

使用 function 定义函数是页面加载后, 优先解析

所以在页面的任何位置都可以调用

var fn1 = function() {
    console.log("fn1")
}
fn1();

fn2();
var fn2 = function() {
    console.log("fn2")
}

但使用 var 定义的函数是页面顺序解析

所以 fn1 可以正常调用 , 但 fn2 在调用时, 函数还没有定义,所以报 Uncaught TypeError: fn2 is not a function

4.3.7.2.函数同名

function fn(){
    console.log("fn1")
}
fn();
function fn(){
    console.log("fn2")
}

JS中如果出现同名函数, 后面的会覆盖前面的, 所以在控制台打印 fn2

这里可以这样理解 , function 是一种变量类型, 而 fn是变量名, 为 fn 变量赋值了两次, 后面的就会覆盖前面的

4.3.7.3.向函数传参

function fn(){
    console.log( arguments.length)
    for(var i=0; i<arguments.length; i++){
        console.log( arguments[i])
    }
}
fn(1,2,3,4)

JS 的函数中有 arguments 对象代表参数数组

所以可以通过 arguments 接收调用时传递来的实参