JavaScript基础—数据类型

樱满春希
169 阅读6分钟

预备知识

  1. 输出信息，在开发的过程中，我们需要调试代码，这就用到了console.log，比如从接口拿到的数据data，可以这样打印：

    console.log("data=>",data)
  2.   我们需要知道js代码具体写在哪里：
  • html中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
//js代码写在script中，script标签可以放在头部也可以放在底部，推荐放在底部
    console.log("hello world!")//输出hello world!
</script>
</body>
</html>

  • 单独创建js文件，写在js文件中，开发中一般使用这个


变量声明

var a="a";//es6之前的声明方式
let a1=1;//es6声明变量的方式
const a2=2;//es6声明常量的方式
console.log("a=>",a)//a=> a
console.log("a1=>",a1)//a1=> 1
console.log("a2=>",a2)//a2=> 2

数据类型

js的数据类型不同于c已经java，主要分为五大类：String、Number、Boolean、null、undefined。另外还有一种复杂的数据类型，Object。

字符串String

  • 声明方式

var a="a";
console.log("a=>",a)//a=> a
console.log("a typeof=>",typeof a)//a typeof=> string

其中typeof是显示类型

  • 其他类型转换成字符串
  1. toString()

var a=1;//number类型，先不用理解
console.log("a typeof=>",typeof a)//a typeof=> number
var a1=a.toString()//toString()是个方法，把其他类型转换成字符串,然后返回
console.log("a1=>",a1)//a1=> 1
console.log("a1 typeof=>",typeof a1)//a1 typeof=> string
  2.String()

  

var a=1;//number类型，先不用理解
console.log("a typeof=>",typeof a)//a typeof=> number
var a1=String(a)//String()是个方法，把其他类型转换成字符串,然后返回
console.log("a1=>",a1)//a1=> 1
console.log("a1 typeof=>",typeof a1)//a1 typeof=> string

  • 字符串拼接
字符串可以使用+号拼接

var a="hello";
var a1="world!";
var a2=a+" "+a1;
console.log("a2=>",a2)//a2=> hello world!
console.log("a2 typeof=>",typeof a2)//a2 typeof=> string

  • 字符串方法
字符串的方法是字符串中的重点，在开发的时候我们常常要用到，首先我们先来了解这些方法。
  1. charAt

var a="www.baidu.com";
var a1=a.charAt(4)//获取到指定下标的字符，从0开始计算，拿到的就是b
console.log("a1=>",a1)//a1=> b
  2.substring

var a="www.baidu.com";
var a1=a.substring(4,9)//截取字符串，包前不包后
console.log("a1=>",a1)//a1=> baidu

  3.slice

var a="www.baidu.com";
var a1=a.slice(4,9)//截取字符串，包前不包后
console.log("a1=>",a1)//a1=> baidu

  4.indexOf

var a="www.baidu.com";
var a1=a.indexOf("c")//c第一次出现的位置
console.log("a1=>",a1)//a1=> 10

  5.lastIndexOf

var a="www.baidu.com";
var a1=a.lastIndexOf("c")//c最后一次出现的位置
console.log("a1=>",a1)//a1=> 10

  6.split

var a="www.baidu.com";
var a1=a.split(".")//split的意思是分开,里面接分开的依据,这里是依据.分离a字符串,得到一个数组
console.log("a1=>",a1)//(3) ["www", "baidu", "com"]
console.log("a1 typeof=>",typeof a1)//a1 typeof=> object

  7.toUpperCase和toLowerCase

var a="www.baidu.com";
var a1=a.toUpperCase();//转成大写
console.log("a1=>",a1)//WWW.BAIDU.COM
var a2=a1.toLowerCase();//转成小写
console.log("a2=>",a2)//a2=> www.baidu.com

在开发中最常用到的是substring、slice和split，重点掌握这三个即可。

数值number

  • 包含：正数、负数、零、小数、以及特殊的NaN

var a=1;//正数
var a1=-1;//负数
var a2=1.0;//小数
var a3=0;//零
var a4=NaN;//全称Not a Number，不是一个数值,但是它的类型还是一个数值

console.log("a=>",typeof a)//a=> number
console.log("a1=>",typeof a1)//a1=> number
console.log("a2=>",typeof a2)//a2=> number
console.log("a3=>",typeof a3)//a3=> number
console.log("a4=>",typeof a4)//a4=> number

其中特别注意小数和NaN，对于小数，面试官特别喜欢问，我就被我的架构师组长问到小数的问题。

比如，他给我的面试题：

var a=0.1;//正数
var a1=0.2;
var a2=a+a1;
console.log("a2=>",a2)//a2=> 0.30000000000000004

问我为什么会这样。那是因为js对小数的处理不够准确，也可以说多小数的处理不够好。答成这样，可以拿个毕业生的工资了。

如果要拿个程序员的工资，要这样答：

JS在运算过程中是先把十进制的运算数转换成二进制，再做运算，运算完成后再转换成十进制，转换时有些小数部分十进制不能正确转换成二进制。

为什么要注意这点，我在用typescript开发node后台的时候做过金额处理，如果以元为单位，就会有0.5元，0.05元这样的金额。解决办法：

我们可以乘以100再做运算
  • Math对象

console.log(Math.pow(2,53));     //--> 2的53次方
console.log(Math.round(.6));     //--> 1.0 四舍五入，返回的还是浮点型
console.log(Math.ceil(.6));      //--> 1.0 向上取整
console.log(Math.floor(.6));     //--> 0.0 向下取整
console.log(Math.abs(-1));       //--> 1 取绝对值
console.log(Math.max(2, 5, 6));  //--> 6 取最大值
console.log(Math.min(-1, -2, 1));//--> -2 取最小值
console.log(Math.random());      //--> 取0-1的随机数
console.log(Math.PI)             //--> 圆周率π
console.log(Math.E  )            //--> e: 自然对数的底数
console.log(Math.sqrt(3));       //--> 3的平方根
console.log(Math.pow(3, 1/3));   //--> 3的立方根
console.log(Math.sin(0));        //--> 三角函数： 还有Math.cos(), Math.atan()等
console.log(Math.log(10));       //--> 10的自然对数
console.log(Math.log(100)/Math.LN10); //-->以10为底100的对数
console.log(Math.exp(3));        //--> e的三次幂

这里面，经常用到的是Math.round、Math.ceil、Math.floor、Math.random、Math.abs、Math.max和Math.min。

Math.ceil和Math.floor，我们在学动画的时候就会用到，原生的js动画，当然现在插件很多，也不需要自己封装动画。

Math.random，在开发中，比如手机验证，我们发的手机收到的4个数字或者6个数字的短信就是用这个生成的数。

  • 数值类型转换

var a="1";
console.log("a typeof=>",typeof a);//a typeof=> string
var a1=a-0;
console.log("a1=>",a1);
console.log("a1 typeof=>",typeof a1);//a1 typeof=> number
var a2=a*1;
console.log("a2=>",a2);//a2=> 1
console.log("a2 typeof=>",typeof a2);//a2 typeof=> number

以上都是隐式转换

var a="1";
console.log("a typeof=>",typeof a);//a typeof=> string
var a1=Number(a);
console.log("a1=>",a1);
console.log("a1 typeof=>",typeof a1);//a1 typeof=> number

以上都是显式转换

  • 数值方法
parseInt()：取整，小数部分直接去掉

var a=1.5;
var a1=parseInt(a);
console.log("a1=>",a1);//a1=> 1

parseFloat()：转成小数

布尔Boolean

开发中if的比较一般都需要用到它，可以说是非常常见的了。

console.log(Boolean(0));//false
console.log(Boolean(1));//true
console.log(Boolean(-0));//false
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false
console.log(Boolean(NaN));//false
console.log(Boolean(''));//false

console.log(NaN==NaN);//false

Null和undefined

var a;
console.log("a=>",a);//a=> undefined
var a1=null;
console.log("a1=>",a1);//a1=> null

null是很多语言都有的类型，意思是空，和go的nil一个意思。

undefined表示变量未定义的值，如果函数没有返回值，也会返回undefined。

这里要注意一个点，再比较的时候

null == undefined 返回true 

 null === undefined 返回false

对象Object

var a={};
console.log("a typeof=>",typeof a);//a typeof=> object
var a1=[];
console.log("a1 typeof=>",typeof a1);//a typeof=> object
var a2=null;
console.log("a2 typeof=>",typeof a2);//a typeof=> object
var a3=undefined;
console.log("a3 typeof=>",typeof a3);//a3 typeof=> undefined

可能会有人奇怪，null为什么是obj，undefined还是undefined。因为null是特殊的object对象。

var a={};
console.log("a=>",a);//a=> {}
a.b=0;
a.c="1"
console.log("a=>",a);//a=> {b: 0, c: "1"}

var a=[];
console.log("a=>",a);//a=> []
a[0]=0;
a[1]="1"
console.log("a=>",a);//a=> (2) [0, "1"]

开发中最常用到这样的写法，可以很方便的给对象添加内容。


avatar
文章
阅读
粉丝