JavaScript 值类型使用

Posted 2021-07-19 火腿肠烧烤大赛冠军

typeof

typeof无论后面跟对象还是数组
其结果均为object
识别方法：

1. construtor
2. instanceof（原型链方法）
3. toString+call
   截图如下：
   
   
   

字符串

1. 转译符号
   let sam = ‘ni hao’ shanghai’;
   let sam = ‘ni hao \\ shanghai’;
   let sam = ‘ni hao\\t shanghai’;
2. 字符串的连接
   let a = a;
   let b = b;
   let c = ${a}+${b};

模板字面量嵌套使用技巧

1. 模板字面量中可以调用函数
2. 模板字面量中可以写dom
3. 模板字面量中可以嵌套字面量

      let lessons = [
        { title: "媒体查询响应式布局" },
        { title: "FLEX 弹性盒模型" },
        { title: "GRID 栅格系统" }
      ];

      function template() {
        return `
        <ul>${lessons.map(item => `<li>${item.title}</li>`).join("")}</ul>
        `;
      }
      document.body.innerhtml = template();

神奇的标签模板实例操作

1. 字符串数量大于变量（没有就用’'来表示）
2. string为字符串、value为参数
3. 可以用标签函数return来实现堆变量模板的处理

      let name = "abc";
      let web = "def";
      console.log(tag`你好${name}123`);
      function tag(strings, ...vars) {
        console.log(vars);
        console.log(strings);
      }

字符串基本函数使用

  - 长度：console.log(name.length);
  - 大写：console.log(name.toUpperCase());
  - 小写：console.log(name.toLowerCase());
  -去前后空格：name.trim()；
  - 迭代器：name[0]; 

字符串的截取

前往后VS后往前

      let ss = "abcdefg";
      console.log(ss.slice(1, 3));
      console.log(ss.substring(1, 3));
      console.log(ss.substr(1, 3));

      console.log(ss.slice(-3, -1));
      console.log(ss.substring(-3, -1));
      console.log(ss.substr(-3, 2));

字符串的检索

查询：

      const hd = "asgafheqyroaefafsfa";
      console.log(hd.lastIndexOf("o", 9));
      console.log(hd.includes("o", 12));

正反两种
参数：（’找谁‘，’从谁开始‘）

检测开头结尾：

• endsWith
• startWith

替换

• replace：
  只替换一个用str.replace(‘A’,‘B’);
  全部替换用reg对象即可；

重复

• ‘*’.repeat(3);

字符串的类型转换

详见：值类型之间的转换

• =>数字

1. 隐式转换：*1，-0 …
2. Number();
3. parseInt(String);
4. parseFloat(String);

• =>字符串

5. 隐式转换：+’’;
6. String(Number);
7. array.split(’’);
8. array.toString();
9. Number.toString();

• =>数组

10. str.split(’’);

小tips：
new String出来的typeof为Object
普通声明出来的为String
之所以都能调用字符串方法，是因为解析器可以将普通字符串视为字符串对象来解释

boolean类型

• Number=>boolean
  0 = >false;
  1= > true;
  number == true 比较时会转化成数值类型
• string = >boolean
  同数字
• array = > boolean
  []=>false
  [1]=>true
  也是转换成数字；
  但是[1,2,3,4]比较时会被转化为NAN ！=true；

比较与转换不同

• 比较是先转换成数字
• 转换是Boolean（）转换
• 引用类型例如[],{}，都会被转换成true
• 数值类型除了0都是真
• 字符串类型除了’'也都是真

显示转换boolean

1. ！number ：第一步转化为boolean 然后取反（两个！！直接转换 哈哈）
2. Boolean（）

Number

    console.log(Number("aaa"));
    console.log(2 / "aaa");//NaN
    console.log(NaN == NaN); //false
    console.log(Number.isNaN(2 / "aaa"));//true
    console.log(Object.is(2 / "aaa", NaN));//true

值类型转换见：值类型之间的转换
数组：有一个值为1 没有值为0 很多值为NaN
对象：NaN

Math数学计算

      console.log(Math.min(1, 2, 3, 4, 5));
      let grade = [12, 3, 2, 124];
      console.log(Math.max(grade));
      console.log(Math.max.apply(null, grade)); //apply call
      Math.max(12, 3, 2, 124)
      console.log(Math.ceil(5.01)); //上
      console.log(Math.floor(5.001));//下
      console.log((5.556).toFixed(2));
      console.log((5.556).toFixed(2));
      console.log(Math.round(5.56));//四舍五入

日期类型

      // new String new Number new Boolean
      const date = new Date();
      console.log(date);
      console.log(typeof date); //data
      console.log(date * 1);//这么声明是一个对象转化为数字后为时间戳

      const hd = Date();
      console.log(hd);
      console.log(typeof hd);
      console.log(hd * 1);//这样会变成字符串导致是一个nan

      const date = Date.now();//直接获取时间戳
      console.log(date);

获取脚本执行时间

      console.time("for");
      for (let i = 0; i < 2000000000; i++) {}
      console.timeEnd("for");

ISO与TIMESTAMP格式相互转换

      const date = new Date("1996-7-12 08:22:12");
      // 转化为时间戳
      console.log(date * 1);
      console.log(Number(date));
      console.log(date.valueOf());
      console.log(date.getTime());
      //时间戳转化为日期
      const timestamp = date.valueOf();
      // console.log(timestamp);
      console.log(new Date(timestamp));