JS 数据类型有四种：数字、字符串、布尔值、数组，
其中：数字、字符串和布尔值，是不可以修改的，叫做原始类型，数组是可以通过链表进行修改的，
数据类型判断：typeof，返回结果永远是一个字符串，其中包含数据类型信息， “string”、"number"等，
一、数字
（一）创建数字：有两种方式，直接创建数值、创建类对象
（二）转换成数字：有两种方式，parseInt转换后只保留整数位，parseFloat转换后保留全部小数位，
转换成功，返回相应数字；转换不成功，返回特殊数值NaN，可使用 isNaN（）返回的布尔值进行后续判断，
（三）特殊数值：无穷大，Infinity表示正无穷大，-Infinity表示负无穷大，
可使用 isFinite（） 返回的布尔值进行判断：如果是正常数值，返回true；如果是无穷大数值，返回False；
（四）常用的计算模块Math，提供了一些基本的数据计算方法，可直接调用，
（五）数值类，定义了一些常用的数值处理方法，如：
数值转换成字符串：toString；四舍五入：toFixed；科学计数法：toExponential;
//可直接定义数值 num1 = 123; //可通过类创建数值对象 num = new Number(123); //可以将其他类型转换为数字类型 //如果转换成功，即为相应数字； s1 = '123'; s1p = parseInt(s1); //如果转换不成功，结果为NaN, s2 = 'uu123'; s2p = parseInt(s2); //判断是否转换成功，可以使用isNaN（），返回布尔值 if(isNaN(s2p)){ alert(s2p) }else{alert(s2)} //parseInt 和 parseFloat的区分在于转换后，是否保留原小数点后面的数 t1 = 12.123 tint = parseInt(t1) // tint=12 tf = parseFloat(t1) // tf=12.123 //特殊的数字：无穷大 Infinity -Infinity， //可以使用isFinite（）判断是否为正常数字，如果是正常数字返回true，如果是无穷大，返回false， w = Infinity; if(isFinite(w)){ alert('hhh') }else{alert('ooo')} //判断数据类型typeof 返回结果永远是一个字符串，字符串内包含的内容，表示了数据类型 t = 123; ret = typeof t; // ret = 'number' t = '1232'; ret = typeof t; // ret = 'string' //数值对应的一些常用方法 //将数值转换成字符串toString d = 3434; ret = d.toString() // “3434” //四射五入小数点后几位toFixed d = 34.35353587878798; ret = d.toFixed(2); //"34.35"，返回结果是字符串 // 科学计数法，toExponential（） ret = d.toExponential(2) //"3.44E+1",返回结果是字符串 // 数值计算模块Math,提供了许多常用的计算方法，可直接调用 a = 12; b = 23; ret = Math.max(a,b) //23
二、字符串
（一）去除左\右空格： trim（）、trimLeft（）、trimiRight（）
（二）索引【】、切片 .slice（）、拼接 + 、长度 .length
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> .runword{ background-color:red; color:white; font-size:44px; text-align:center; } </style> </head> <body> <div>JS基础学习：跑马灯</div> <div>一、字符串：索引、切片、拼接，</div> <div class="runword" id="rw">欢迎莅临指导工作</div> <script> d1 = document.getElementById('rw'); //通过DOM读取文本元素 d1_text = d1.innerText; //获取文本元素里的内容 console.log(d1_text,typeof d1_text); //屏幕输出 first_char = d1_text[0]; //字符串索引 sub_char = d1_text.slice(1,d1_text.length); //字符串切片 new_char = sub_char + first_char; //字符串拼接 d1.innerText = new_char; //重新赋值 console.log(d1.innerText); </script> </body> </html>
1、取字符串中固定位置的元素，string.charAt（n） == string【n】，如果n超出字符串范围，返回空串，
2、字符串的拼接，string1.concat（string2） = string1 + string2；string1与string2保持不变，形成一个新字符串，
3、子串在字符串中首次出现的位置，string.indexOf（searchValue,fromIndex），字符串中不包含查找的子串，返回-1，
子串在字符串中最后出现的位置，string.lastIndexOf（searchValue,fromIndex），字符串中不包含查找的子串，返回-1，
4、字符串切片，string.substring（from，to） = string.slice（start，end），end可以是负数，从字符串尾部开始倒数，
string.substr（from，length），返回字符串的子串，指定其实位置和长度，
5、字符串的字母大小写：string.toLowerCase（） \ string.toUpperCase（）,
6、字符串分隔，string.spilt（separator，howmany），字符串或者正则表达式将原字符串进行分割，返回指定长度的分割后元素组成的数组，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> .runword{ background-color:red; color:white; font-size:44px; text-align:center; } </style> </head> <body> <div>JS基础学习:字符串分割</div> <div>split</div> <script> /* s1 = "hello world! ooo lolo!"; console.log(s1); //hello world! ooo lolo! //使用字符串进行分割 ret = s1.split('o'); console.log(ret); //["hell", " w", "rld! ", "", "", " l", "l", "!"] ret = s1.split('o',3); console.log(ret); // ["hell", " w", "rld! "] ret = s1.split('lo'); console.log(ret); // ["hel", " world! ooo ", "", "!"] ret = s1.split('lo',3); console.log(ret); // ["hel", " world! ooo ", ""] */ //使用正则表达式进行分割 //正则表达式在JS中，使用反斜杠标注 s1 = "hello7world!9ooo7wo7o!"; console.log(s1); //hello7world!9ooo7wo7o! ret = s1.split(/\d+/); console.log(ret); // ["hello", "world!", "ooo", "wo", "o!"] ret = s1.split(/\d+/,3); console.log(ret); //["hello", "world!", "ooo"] ret = s1.split(/(\d+)/); console.log(ret); //["hello", "7", "world!", "9", "ooo", "7", "wo", "7", "o!"] ret = s1.split(/(\d+)/,3); console.log(ret); //["hello", "7", "world!"] </script> </body> </html>
（三）string.search（），指定字符串或正则表达式，从前向后查找，返回第一次查找到的索引，
（四）string.match（），指定规则，找出符合的第一个子串及索引信息，加g返回符合规则的全部，无匹配的返回null，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> </style> </head> <body> <div>JS基础学习:字符串</div> <script> var s = "hello world! hello world!"; console.log(s); //hello world! hello world! //search查找子串或正则的索引 ret = s.search("o w"); console.log(ret); //4 ret = s.search(/o\w+/); console.log(ret); //7 //match查找符合规则的第一个子串，加g可返回符合规则的全部， ret = s.match("lo"); console.log(ret); //["lo", index: 3, input: "hello world! hello world!"] ret = s.match(/lo/); console.log(ret); //["lo", index: 3, input: "hello world! hello world!"] ret = s.match(/lo/g); console.log(ret); //["lo", "lo"] ret = s.match(/\d+/g); console.log(ret); //null </script> </body> </html>
（五）string.replace（）， 将字符串中的一部分进行替换，可使用正则表达式
1、直接查找符合规则的字符串，并按指定规则替换
2、"$&"指代匹配成功的子串整体
3、$1、$2、、、指代不同的匹配项内的组
4、$'位于匹配子串右侧的文本
5、$`位于匹配子串左侧的文本
6、$$符号本身
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> </style> </head> <body> <div>JS基础学习:字符串替换replace</div> <script> var s = "hello world! hello world!"; console.log(s); //hello world! hello world! //查找符合规则的字符串，并按指定规则替换 ret = s.replace(/llo/,"778"); console.log(ret); //he778 world! hello world! ret = s.replace(/llo/g,"778"); console.log(ret); //he778 world! he778 world! ret = s.replace(/llo/g,123); console.log(ret); //he123 world! he123 world! ret = s.replace(/llo/g,"&"); console.log(ret); //he& world! he& world! //"$&"指代匹配成功的子串整体，可对其进行加工 ret = s.replace(/llo/g,"$&"); console.log(ret); //hello world! hello world! ret = s.replace(/llo/g,"x"); console.log(ret); //hex world! hex world! ret = s.replace(/llo/g,"$&"+"x"); console.log(ret); //hellox world! hellox world! ret = s.replace(/llo/,"$&"+"x"); console.log(ret); //hellox world! hello world! s = "jfiowf3jffwe2fewiopfj"; console.log(s); //jfiowf3jffwe2fewiopfj ret = s.replace(/(\w)\d(\w)/,"Q"); console.log(ret); //jfiowQffwe2fewiopfj ret = s.replace(/(\w)\d(\w)/g,"Q"); console.log(ret); //jfiowQffwQewiopfj ret = s.replace(/(\w)\d(\w)/g,"$&"+"Q"); console.log(ret); //jfiowf3jQffwe2fQewiopfj //$1、$2、、、指代不同的匹配项内的组，进行加工、替换 ret = s.replace(/(\w)\d(\w)/g,"...$1...$2..."); console.log(ret); //jfiow...f...j...ffw...e...f...ewiopfj ret = s.replace(/(\w)\d(\w)/g,"...$2...$1..."); console.log(ret); //jfiow...j...f...ffw...f...e...ewiopfj //$'位于匹配子串右侧的文本 var s = "hello world! hello world!"; console.log(s); //hello world! hello world! ret = s.replace(/llo/,"$'"); console.log(ret); //he world! hello world! world! hello world! //$`位于匹配子串左侧的文本 var s = "hello world! hello world!"; console.log(s); //hello world! hello world! ret = s.replace(/llo/,"$`"); console.log(ret); //hehe world! hello world! //$$符号本身 ret = s.replace(/llo/,"$$"); console.log(ret); //he$ world! hello world! </script> </body> </html>
三、布尔类型
布尔类型基本值：true、false，与python不同在于全部小写，其他数值可使用Boolean进行转换，
判断取值（不含类型）是否相同：== 、！=
判断取值（包含类型）是否相同：=== 、 ！==
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> </style> </head> <body> <div>JS基础学习:布尔值</div> <script> //布尔值的转换 a = -12; console.log(Boolean(a)); //true b = 0; console.log(Boolean(b)); //false //值和类型的判断 var a = 123; var b = "123"; console.log(a == b); //true console.log(a != b); //false console.log(a === b); //false console.log(a !== b); //true </script> </body> </html>
四、数组
length：数组长度；
push：从后面添加一个元素；pop：从后面删除一个元素；原数组变化；
unshift：从前面添加一个元素；shift::从前面删除一个元素；原数组变化；
splice：在指定位置添加或删除元素，原数组变化；
slice：数组切片，原数组不变；
reverse：数组翻转，原数组直接变化；
join：数组连接成字符串，原数组不变，
concat：数组合并成新数组，原数组不变，
sort：数组排序，原数组直接变化，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> </style> </head> <body> <div>JS基础学习:数组</div> <div>在python中叫列表，其他语言中叫数组，js的数组是动态的，</div> <script> //1、创建数组 a = [11,22,33,'lucy','hi',33]; console.log(a); //[11, 22, 33, "lucy", "hi", 33] //2、数组长度length console.log(a.length); //6 //3、在数组的后面添加元素,返回值为数组长度，原数组变化， a_push = a.push("wang"); console.log(a_push); //7 console.log(a); //[11, 22, 33, "lucy", "hi", 33, "wang"] //在数组的后面删除元素,返回值为被删除元素，原数组变化， a_pop = a.pop() console.log(a_pop); //wang console.log(a); //[11, 22, 33, "lucy", "hi", 33] //4、在数组的前面添加元素,返回值为数组长度，原数组变化， a_unshift = a.unshift("wang"); console.log(a_unshift); //7 console.log(a); //["wang", 11, 22, 33, "lucy", "hi", 33] //在数组的前面删除元素,返回值为被删除元素，原数组变化， a_shift = a.shift() console.log(a_shift); //wang console.log(a); //[11, 22, 33, "lucy", "hi", 33] a_shift = a.shift(3) //参数3，完全无意义 console.log(a_shift); //11 console.log(a); //[22, 33, "lucy", "hi", 33] //5、在指定位置增加、或删除元素: obj.splice(index,deleteNum,string),index指定位置， //deleteNum：为0时添加元素，可同时添加多个， a_splice1 = a.splice(2,0,'wo','shi','xin','jia'); console.log(a_splice1); //[] console.log(a); //[11, 22, "wo", "shi", "xin", "jia", 33, "lucy", "hi", 33] //deleteNum：为整数时删除元素，并指定删除多少个元素，返回值为被删除元素组成的数组，原数组变化， a_splice2 = a.splice(2,2,); console.log(a_splice2); //["wo", "shi"] console.log(a); // [11, 22, "xin", "jia", 33, "lucy", "hi", 33] //deleteNum：为负数时不变化 a_splice2 = a.splice(2,-2,); console.log(a_splice2); //[] console.log(a); //[11, 22, "xin", "jia", 33, "lucy", "hi", 33] //6、数组切片slice,原数组不动，返回切片的新数组， //仅指定开始位置，默认切片值结束 a_slice = a.slice(3); console.log(a_slice); //["lucy", "hi", 33] console.log(a); //[11, 22, 33, "lucy", "hi", 33] //指定开始和结束的位置， a_slice = a.slice(3,5); console.log(a_slice); //["lucy", "hi"] console.log(a); //[11, 22, 33, "lucy", "hi", 33] //7、数组翻转，原数组直接翻转， a_reverse = a.reverse() console.log(a_reverse); //[33, "hi", "lucy", 33, 22, 11] console.log(a); //[33, "hi", "lucy", 33, 22, 11] a_reverse = a.reverse(3,6) //参数无意义， console.log(a_reverse); //[11, 22, 33, "lucy", "hi", 33] console.log(a); //[11, 22, 33, "lucy", "hi", 33] //8、使用指定的符号，将数组元素组合成新的string，原数组不变， a_join = a.join("-"); console.log(a_join,typeof a_join); //11-22-33-lucy-hi-33 string console.log(a); //[11, 22, 33, "lucy", "hi", 33] //9、将两个数组合并,直接生成新组合的数组，原数组不变， a = [1,2,3,"lucy","hello"]; b = [0,5,3,"dognxuew","hello"]; console.log(a); //[1, 2, 3, "lucy", "hello"] ret = a.concat(b); console.log(ret); //[1, 2, 3, "lucy", "hello", 0, 5, 3, "dognxuew", "hello"] console.log(a); //[1, 2, 3, "lucy", "hello"] ret = a.concat(a); console.log(ret); //[1, 2, 3, "lucy", "hello", 1, 2, 3, "lucy", "hello"] console.log(a); //[1, 2, 3, "lucy", "hello"] //10、对数组进行排序:数字在前、字母在后，按从大到小的顺序排列，直接在原数组上进行修改， console.log(a); //[11, 22, 33, "lucy", "hi", 33] ret = a.sort() console.log(ret); //[11, 22, 33, 33, "hi", "lucy"] console.log(a); //[11, 22, 33, 33, "hi", "lucy"] </script> </body> </html>
五、字典
JS中本身不含字典数据类型，但是可以通过对象，伪造字典，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <style> </style> </head> <body> <div>JS基础学习:字典</div> <div>JS中不含有字典，但是可以通过对象伪造字典</div> <script> a = {k1:123,k2:"hello",} console.log(a); //{k1: 123, k2: "hello"} console.log(a['k1']); //123 console.log(a['k2']); //hello </script> </body> </html>
浙公网安备 33010602011771号