飞道的博客

JavaScript 值类型使用

341人阅读  评论(0)

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);
  • =>字符串
  1. 隐式转换:+’’;
  2. String(Number);
  3. array.split(’’);
  4. array.toString();
  5. Number.toString();
  • =>数组
  1. 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));

转载:https://blog.csdn.net/s2422617864/article/details/117306040
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场