JS数据类型基本知识

1、 数据类型包括：

​ 字符串值、数值、布尔值、数组、对象

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {
    
    firstName:"Bill", lastName:"Gates"};    // 对象 

2、 数值与字符串相加情况

var x = 911 + 7 + "Porsche"; //结果是：918Porsche
var x = "Porsche" + 911 + 7; //结果是：Porsche9117

3、 数值表示

科学计数法

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

4、 字符串值

4-1基本理解

1. 声明字符串变量时，单双引号均可

2. 特殊字符的使用

   字符串中的表示会出现误解的情况，这是需要使用特殊字符来表达[\为转义字符]
   代码->结果
   \'--->'
   \"--->"
   \\--->\
   
   转义序列[这六个最初用于控制打字机、电传打字机和传真机。在 HTML 中无意义]
   \b	退格键
   \f	换页
   \n	新行
   \r	回车
   \t	水平制表符
   \v	垂直制表符
   

3. 长代码换行—使用+符号来换行

   document.getElementById("demo").innerHTML = "Hello" + 
   "Kitty!";
   

4. 字符串可通过new关键字来声明成对象[但是不用new，将字符串创建为对象时，会拖慢执行的速度，且会引发运算方面的问题]

   var firstName = new String("Bill")
   

4-2 字符串方法（查找、替换、连接、删除、提取、大小写转换、字符串转换为数组）

1. 字符串长度：字符串.length

2. 查找字符串中的字符串：

   1. indexOf( )-----查找字符串中首次出现的字符串：indexOf( ) ----- 返回字符串在文本中第一次出现的位置-----返回的是数字 ----- 未找到文本时返回值为-1

      var str = "The full name of China is the People's Republic of China.";
      var pos = str.indexOf("China");//此时pos代表的是17，China第一次出现的首字母的位置
      

   2. lastIndexOf( ) -----查找字符串中最后一次出现的字符串：lastIndexOf( ) ----- 返回字符串在文本中最后一次出现的首字母的位置 ----- 未找到文本时返回值为-1

   3. 两种方式可采用第二个参数-----第二个参数为数值，表示检索开始的位置

      var str = "The full name of China is the People's Republic of China.";
      var pos = str.indexOf("China", 18);//位置在18处开始查找对应的China
      

   4. search( )-----收缩特定值的字符串并返回匹配位置

      var str = "The full name of China is the People's Republic of China.";
      var pos = str.search("locate");
      

   5. 比较：indexOf( )和search( )的值相等

      1. 区别为：search( )无法设置开始参数
      2. indexOf( ) 无法设置更强大的搜索值-----正则表达式

3. 提取部分字符串(正数—从头开始，负数—从尾部开始)

   1. slice(start , end)

      1. 两个参数均为正数时-----在start开始截取，[ start（包括）-- end（不包括）]

      2. 两个参数均为负数时-----从后向前开始计数-----[ end(不包括) – start（包括）]

      3. 当为一个参数时，正数—裁剪字符串的剩余部分，负数—尾部开始数，截取数过的字符串

         //正数：
         var str = "Apple, Banana, Mango";
         var res = str.slice(7);//运行结果：Banana, Mango
         //负数：
         var str = "Apple, Banana, Mango1111";
         var res = str.slice(-13) //运行结果：na, Mango1111
         

   2. substring(start , end)

      1. 与slice用法相同
      2. 但是没有负索引

   3. substr(start , length)

      1. 两个参数时，第一个为起始位置，第二个为截取的长度—从起始位置开始算起
      2. 一个参数时，截切字符串剩余部分
      3. 首字母为负参数时，尾部开始剪切数过的字符串

   4. 提取字符串总结：两个参数为正时，从start位置开始截取（包括start），end位置截止（不包括end）。两个参数为负数时，尾部的start包括，end位置截止（不包括）。一个参数时，正数参数位置包括参数之后的所有字符串进行截取，负数参数位置包括

4. 替换字符串内容-----replace( )

   1. 默认情况下，替换即将文本中选中的第一个文本进行相应的替换

   2. replace( )区分大小，若想将大小写改成不敏感情况下，则使用正则表达式/i(大小写不敏感)

      str = "Please visit Microsoft!";
      var n = str.replace(/MICROSOFT/i, "W3School");//此时，对于大小写不敏感，可以正常的替换
      

   3. 正则表达式中g进行全局替换

      str = "Please visit Microsoft and Microsoft!";
      var n = str.replace(/Microsoft/g, "W3School");//全局i进行了替换
      

5. 大小写转换

   1. toUpperCase( )-----将字符串转换为大写
   2. toLowerCase( )-----将字符串转为为小写

6. 连接字符串—concat( )

   ​ 连接两个、多个字符串

   var text = "Hello" + " " + "World!";
   var text = "Hello".concat(" ","World!");
   //这两行的效果相同、可用于代替加运算符
   

7. 删除字符串两端的空白符—trim( )

   var str = "     Hello World!     ";
   alert(str.trim());
   //两端空白符清除，也可以用正则结合replace进行，相同的效果
   

8. 提取字符串字符

   1. charAt(position)—返回指定位置字符串
   2. charCodeAt(position)—返回指定位置字符串的字符unicode编码
   3. 注意点：position跟数组下标相同，从0计数

9. 将字符串转换为数组—split( )

   var txt = "a,b,c,d,e";   // 字符串
   txt.split(",");          // 用逗号分隔
   txt.split(" ");          // 用空格分隔
   txt.split("|");          // 用竖线分隔
   

   • 注意点：字符串转变为数组时，忘记添加分隔符则返回的数组将为index[0]中整个字符串
   • 如果分隔符是"",返回的数组为间隔单个字符的数组

4-3 字符串搜索(字符串包含、指定字符串开头、结尾)

​ 注意点：字符串从零开始计算位置。

1. String.indexOf( )—返回指定文本在字符串中第一次出现（的位置）的索引

2. String.lastIndexOf( )—返回指定文本在字符串中最后一次出现的索引

3. String.startWith( )—查看是否以指定的字符串开头，正确的话返回值是true反之返回的为false

   1. 单参数：String.startWith(searchvalue)代表查的字符
   2. 双参数：String.startWith(searchvalue, length )第一个要查的字符，第二个是第几位查找
   3. 注意：区分大小写

4. String.endsWith( )—查看是否以指定的字符串结尾，正确的话返回值是true反之返回的为false

   1. 单参数：String.endsWith(searchvalue )
   2. 双参数：String.endsWith(searchvalue, length )—length是字符串从头开始数length长度，在其中查看是否以searchvalue结尾

5. String.match( )—根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。

   string.match(regexp)
   regexp	必需。需要搜索的值，为正则表达式。
   返回：	数组，包含匹配项，每个匹配项对应一个项目，若未找到匹配项，则为 null。
   

6. String.includes( )—查看字符中是否包含指定值，有则返回true

   let text = "Hello world, welcome to the universe.";text.includes("world")    // 返回 true
   

   • 单参数情况下：String.includes(searchvalue)单参数表示的是在字符中查找的值
   • 双参数情况下：String.includes(searchvalue, length )第一个参数代表的是需要查找的值，第二个数值代表的是从第几位开始查找

4-4 字符串模板

1. 模糊字面量

   1. 含义：模板字面量是创建新字符串的新字面量语法，与字符串字面量一样，它采用了反引号来分界，支持新的特性和功能，模板字面量也可以作为字符串进行计算
   2. 支持特性—插值、多行、标记 ES6系列 (三）模板字面量 - 简书 (jianshu.com)

2. 模糊字面量使用反引号``来定义字符串

   1. 使用模糊字面量的作用：可以在字符串中同时使用单双引号

   2. 模糊字面量允许多行字符串—结果呈现为一行

   3. 插值：

      1. 语法：${…}

      2. 变量替换—运训字符串中的变量

         let firstName = "John";
         let lastName = "Doe";
         let text = `Welcome ${
                     
                     firstName}, ${
                     
                     lastName}!`;
         

   4. 允许字符串中含有表达式—最后呈现出的是计算好的结果

      let price = 10;
      let VAT = 0.25;
      let total = `Total: ${
                
                (price * (1 + VAT)).toFixed(2)}`;
      

   5. 可包含HTML中的标签

5、 布尔值

1. 常用于条件测试中
2. 只有两个值：true和false

6、 数组（创建、访问、数组属性、关联数组、识别数组）

6-1 数组基本

1. 创建数组

   1. 使用数组文本创建（常用）

      var cars = ["Saab", "Volvo", "BMW"];
      

   2. new关键字创建数组[避免使用]

      var cars = new Array("Saab", "Volvo", "BMW");
      

2. 访问数组

   var name = cars[0];//访问cars中第一个元素
   cars[0] = "Opel";//修改第一个元素值
   

3. 数组与对象的联系—数组是特殊的对象—可以在同一数组中存放不同的数据类型的变量

4. 数组的属性

   1. length—数组长度

   2. for循环—遍历数组

   3. 添加数组元素

      1. push

      2. length方式进行添加数组元素：

         var fruits = ["Banana", "Orange", "Apple", "Mango"];
         fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)
         //此时length要为不是数组中已有的下标
         //反之，要是已有的下标则为修改元素
         

   4. 关联数组

      1. 含义：数组只能使用数字索引，若使用命名索引时，JS会把数组重新定义为标准对象

         var person = [];
         person[0] = "Bill";
         person[1] = "Gates";
         person[2] = 62;
         var x = person.length;          // person.length 返回 3
         var y = person[0];              // person[0] 返回 "Bill"
         

      2. 数组和对象索引方式：数组使用数字索引，对象使用命名索引

      3. 元素名为字符串（文本）则应该使用对象。元素名为数字则应该使用数组。

   5. 识别数组

      1. Array.isArray( )—此为ES5定义的方法，不适合老的浏览器

         Array.isArray(fruits);     // 返回 true,此时为数组
         

      2. 创建isArray( )函数—自己进行定义

         function isArray(x) {
                   
                   
             return x.constructor.toString().indexOf("Array") > -1;
         }
         

         例子：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0VjMlr6-1635667461254)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211029215635768.png)]

      3. instanceof 运算符返回 true—对象有给定的构造器创建

6-2 数组方法

1. 将数组转换为字符串

   1. toString—将数组转换为数组值（逗号分隔的字符串）

   2. join( )— 可以指定分隔符来进行转换

      数组.join(" * ")
      

2. 更改数组元素

   1. pop( )—删除数组最后一个元素—数组.pop( )

   2. push( )—在数组最后添加一个元素—数组.push( )

   3. shift( )—删除数组第一个元素—数组.shift( )

   4. unshift( )

      1. 在数组开头添加元素—数组.unshift( );

      2. 返回新数组的长度

         document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
         //此时表示在数组第一个位置添加了Lemon元素，返回的是添加过元素之后的数组长度
         

   5. 更改元素

      1. 使用索引值—数组[下标]

      2. 使用length添加数组元素

         var fruits = ["Banana", "Orange", "Apple", "Mango"];
         fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"
         

   6. 删除元素delete—delete 数组[下标 ]—影响不好回在数组留下空白位置，可使用pop和shift来进行删除

   7. 拼接元素splice( )

      1. 拼接

         //数组.splice(number-添加元素位置下标，number-删除多少个元素，后面的参数为添加的新元素)
         fruits.splice(2, 0, "Lemon", "Kiwi");
         

      2. 删除—不留下空白位置

         数组.splice(0，1)
         //第一个参数（0）定义新元素应该被添加（接入）的位置。
         //第二个参数（1）定义应该删除多个元素。
         

7、 对象

1. 对象是被命名值的容器

2. 对象中的this关键字

   var person = {
         
         
     firstName: "Bill",
     lastName : "Gates",
     id       : 678,
     fullName : function() {
         
         
       return this.firstName + " " + this.lastName;
     }
   };
   //此对象中的this指的是此person对象，this.firstName指的是此对象的firstName的属性
   

3. 访问对象属性的方式

   1. 对象名.属性名

   2. 对象名[“属性名”][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uv0DroMy-1635667461257)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211025222901832.png)]

   3. 访问对象方法（与调用函数相似）

      对象.对象方法（）—访问到的是对象—不带（）则访问到的是函数定义源码

4. 声明对象时，数据类型不要声明称对象—增加了代码的复杂性并降低了执行的速度

8、 运算符

1. typeof运算符返回变量或表达式的类型

2. 数值–number、字符串–string、数组–object（JS中数组属于对象）、对象–object

3. undefined–返回值是undefined的情况

   1. 没有值的变量–var person
   2. 变量的值为undefined–person = undefined

4. 空值情况

   1. 空值返回类型string–var car = " ";

5. NULL

   1. NULL的数据类型为–对象
   2. 运用–设置NULL来清空对象

6. undefined和NULL的区别

   typeof undefined              // undefined
   typeof null                   // object
   null === undefined            // false
   null == undefined             // true