基本数据类型

基础数据类型

  • 基本数据类型(值类型)
    • number 数字
    • string 字符串
    • boolean 布尔
    • null
    • undefined

Number

  • number有整数 、浮点数值和NaN之分;
  • NaN:not a number 不是一个数,但是属于number类型的;
  • isNaN:这个方法是用来检测当前的值是否不是一个有效数字的,如果检测的值不是有效数字返回true,是有效数字返回false;
console.log(isNaN(NaN));//=>true
console.log(isNaN(1));//=>false
console.log(isNaN('1'));//=>false 它是有效数字:当浏览器发现我们检测的值不是number类型的时候,首先会默认的把值转换为number类型,然后再验证是否是有效的数字  '1'->1  isNaN(1)->false
console.log(isNaN('12px'));//=>true  '12px'转换为数字不是有效数字,是NaN
console.log(isNaN(true));//=>首先把布尔类型转换为数字 true ->1 false ->0  最后的结果是isNaN(1)->false
console.log(isNaN(false));//=>false
console.log(isNaN(null));//=>null转换为数字0 =>false
console.log(isNaN(undefined));//=>undefined转换为数字的NaN =>true

1.Number()

  • 把其它数据类型的值转换为number类型;
  • Number属于强制类型转换,结果要么是纯数字,否则就是NaN
Number(true) //=>1
Number(false) //=>0
Number(null) //=>0
Number(undefined) //=>NaN

//=>使用Number把字符串转换为数字的时候,空字符串是零,其它字符串中如果出现的字符代表纯数字可以转为正常的数字,如果出现了任何一个非有效数字的字符,最后的结果都是NaN
Number('') //=>0
Number('12') //=>12
Number('12.5') //=>12.5
Number('true') //=>NaN
Number('12px') //=>NaN

//=>使用Number把引用数据类型转为数字类型的时候,先把引用类型转换为字符串(toString),然后再把字符串转为数字
Number({name:'zxt'}) //=> ({name:'zxt'}).toString() =>"[object Object]"  
Number({})  //({}).toString() =>"[object Object]" => NaN
Number([12,23]) //[12,23].toString() => "12,23" =>NaN
Number([12]) //[12].toString() => "12" =>12
Number(['aa']) // =>NaN
Number([]) // =>0
Number(/^$/) //(/^$/).toString() => "/^$/" =>NaN
Number(function(){}) //=>NaN

2.parseInt() 转换为整数

  • 也是把其它数据类型转换为数字,整体情况和Number用法一样,
  • 区别在于:在转换字符串的时候,Number是只要出现一个非有效数字字符结果就是NaN;
  • parseInt没有这么霸道,它能把有效的部分识别出来转为数字,非有效的部分直接忽略掉;
  • 查找机制:在查找转换的时候,按照从左到右的顺序依次查找,一直到遇到一个非有效数字字符结束(不管后面是否还有有效数字字符,都不再继续查找),把找到的转换为数字
Number('12px')  //=>NaN
parseInt('12px') //=>12
parseInt('12px13') //=>12  
parseInt('px13') //=>NaN
parseInt([12,13]) //=>12

3.parseFloat()

  • 也是把其它数据类型转换为数字;
  • 用法和parseInt一样,区别在于,parseFloat可以识别小数点;
parseInt('12.5px') //=>12
parseFloat('12.5px') //=>12.5
parseFloat('12.5.8px') //=>12.5
parseFloat('px12.5') //=>NaN

4.toFixed()

控制数字保留小数点后面几位

12.5.toFixed() //=>不写参数,相当于不留小数点,会把数字四舍五入到整数上 =>'13'
12.4.toFixed(0) //=>'12'
12.4.toFixed(2) //=>'12.40'
Math.PI.toFixed(2) //=>'3.14'
Math.PI.toFixed(-2) //=>Uncaught RangeError: toFixed() digits argument must be between 0 and 20

思考题:parseInt / parseFloat 都支持第二个参数parseInt('12px',10) 获取后自己查找第二个参数的作用!

String

  • 在JS中用单(双)引号包裹起来的都是字符串;
  • 字符串就是由零到多个字符组成的,以数字作为索引,从零开始的;
  • 有一个叫做length的属性,存储的是当前字符串中字符的个数(字符串的长度);
    双包单,单包双。
    不能单包单,双包双,如果这样必须用转义符
    转义字符:
    \->
    '->'
    "->"
    \r(回车)\n(换行)
12  //->number
'12' //->string
'[12,23]' //->string
  • 常用方法
    charAt charCodeAt fromCharCode
    substr substring slice
    toUpperCase toLowerCase
    indexOf lastIndexOf
    split
    replace
    match
    trim trimleft trimright

字符串及常用的方法

var str = 'welcome to zhufeng,good good study,day day up!';
str[0] //->'w' 第一个字符
str.length //-> 字符串的长度:46
str[str.length-1] //->'!' 最后一个字符
str[100] //->undefined 如果指定的索引不存在获取的结果是undefined

真实项目中,我们经常操作字符串,此时我们需要掌握常用的一些字符串操作方法
console.dir(String.prototype)

1.charAt && charCodeAt && fromCharCode

  • str.charAt(索引):返回指定索引位置的字符,和str[索引]的区别在于,当指定的索引不存在的时候,中括号的方式获取的是undefined,而charAt获取的是空字符串;

  • str.charCodeAt(索引):在charAt基础上,把获取的字符变为unicode编码值(对应ASCII码表);
    48~57:0-9
    65~90:A-Z
    97~122:a-z
    ...

  • String.fromCharCode(十进制的unicode值):把值按照ASCII码表中的信息,转换为原有的字符,和charCodeAt正好对应;
    [图片上传失败...(image-6b886b-1570780888409)]

2.substr && substring && slice

  • 实现字符串截取的三个办法:
    str.substr(n,m):从索引n开始,截取m个字符;
    str.substring(n,m):从索引n开始,截取到索引为m处(不包含m),把找到的部分截取;
    str.slice(n,m):和substring语法一样,区别在于slice支持以负数做索引;
  • 索引是负数的时候,浏览器在处理的时候,是用字符串的总长度加上负数索引,然后按照正数处理操作;

  • 如果只传递了n(str.substr(n)/str.substring(n)),相当于从索引n开始一直截取到字符串的末尾

  • 如果传递的索引超出最大限制,也是把能截取的部分截取掉即可;

  • 如果一个参数都不传递:相当于把整个字符串都截取(字符串的克隆);
    [图片上传失败...(image-4b6076-1570780888409)]
    [图片上传失败...(image-ff7605-1570780888409)]

3.toUpperCase && toLowerCase

str.toUpperCase :把字母全部大写
str.toLowerCase:把字母全局的小写
[图片上传失败...(image-118bab-1570780888409)]

4.indexOf && lastIndexOf

  • str.indexOf:获取当前字符在字符串中第一次出现位置的索引;
  • str.lastIndexOf:获取的是最后一次出现位置的索引;
  • 如果当前字符在字符串中没有出现过,结果是-1;我们根据这个规律可以验证一下当前字符串中是否包含某个字符;
if(str.indexOf('?')===-1){
    //=>没有出现过
}
if(str.indexOf('?')>=0){
    //=>出现过
}

[图片上传失败...(image-7de485-1570780888409)]

5.split

str.split:按照某一个字符把字符串拆分成数组中的某一项,和数组中的join方法是对应的;

var hobbyList = 'music|movie|code';
hobbyList.split('|');
//=> ['music','movie','code']

var str = 'name=zhufeng&age=9';
str.split('=');
//=> ["name", "zhufeng&age", "9"]

var str = 'name=zhufeng&age=9';
str.split(/=|&/g);
//=> ["name", "zhufeng", "age", "9"]

6.replace

  • str.replace:实现字符的替换;
  • 执行一次replace只能替换一次,如果有好几个都需要替换,在不使用正则的情况下我们需要执行很多次replace;
  • 有些需求即使执行很多次replace也实现不了,此时需要使用正则处理,真实项目中replace一般都是和正则搭配使用的
var str = 'zhufeng2017zhufeng2018';
str = str.replace('zhufeng','珠峰')
//=>'珠峰2017zhufeng2018';
str = str.replace('zhufeng','珠峰')
//=>'珠峰2017珠峰2018'

var str = 'zhufeng2017zhufeng2018';
str.replace(/zhufeng/g,'zhufengpeixun')
//=>'zhufengpeixun2017zhufengpeixun2018'

7.trim && trimLeft && trimRight

str.trimLeft:去除字符串开始的空格
str.trimRight:去除字符串结尾的空格
str.trim:去除字符串首尾的空格

var str='  zhu feng  ';
str.trimLeft(); //=> 'zhu feng  '
str.trimRight(); //=> '  zhu feng'
str.trim(); //=> 'zhu feng'

2.实战应用 - 字符串之queryURLParameter

获取地址栏中URL地址问号传递的参数值
https://www.baidu.com/s?wd=node&rsv_spt=1&issp=1
https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1

目标:把问号传递的参数值分别的解析出来
obj = {wd:'javascript',rsv_spt:1,issp:1}

//=>方案一:
var questionIndex = str.indexOf('?');
str = str.substring(questionIndex + 1);
// console.log(str);//->'wd=javascript&rsv_spt=1&issp=1'
var ary = str.split('&');
// console.log(ary);//->["wd=javascript", "rsv_spt=1", "issp=1"]
var obj = {};
for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];
    var curAry = cur.split('='),//->['wd','javascript']
        key = curAry[0],
        value = curAry[1];
    obj[key] = value;
}
console.log(obj);


//=>方案二:
function queryURLParameter(url) {
    //=>url:传递的参数(我们当前要解析的URL地址)
    var questionIndex = url.indexOf('?'),
        obj = {};
    if (questionIndex === -1) {//->url中没有问号传参:直接返回空对象
        return obj;
    }
    url = url.substr(questionIndex + 1);
    var ary = url.split('&');
    for (var i = 0; i < ary.length; i++) {
        var curAry = ary[i].split('=');
        obj[curAry[0]] = curAry[1];
    }
    return obj;
}
console.log(queryURLParameter('https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1'));

//=>方案三:
String.prototype.myQueryURLParameter = function myQueryURLParameter() {
    var obj = {},
        reg = /([^=?&]+)=([^=?&]+)/g;
    this.replace(reg, function () {
        var arg = arguments;
        obj[arg[1]] = arg[2];
    });
    return obj;
};
var str = 'https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1';
console.log(str.myQueryURLParameter());

3.实战应用 - 验证码效果实现原理

真实项目中验证码一般都是后台处理的,后台返回给客户端展示的是一个图片(图片中包含了验证码)

  • 1、字母+数字
  • 2、问答
  • 3、12306 选择图片
  • 4、成语填空
  • 5、图片拼图
  • 6、滑动拖拽
  • ....

1.验证码 - 基本功能实现

var codeBox = document.getElementById('codeBox');
//=>生成四位随机验证码
var areaStr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';//->62位(0~61)
var result = '';
for (var i = 0; i < 4; i++) {
    //=>随机获取一个0~61之间的整数:作为接下来获取字符的索引
    var ran = Math.round(Math.random() * 61);

    //=>根据索引获取一个随机字符
    var char = areaStr.charAt(ran);

    //=>把每一次循环获取的字符存放在最后结果中
    result += char;
}
codeBox.innerHTML = result;

2.验证码 - 点击重新生成验证码

var codeBox = document.getElementById('codeBox');
function queryCode() {
    var result = '',
        areaStr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = 0; i < 4; i++) {
        var ran = Math.round(Math.random() * 61);
        result += areaStr[ran];
    }
    codeBox.innerHTML = result;
}
//=>加载页面需要执行一次这个方法:生成四位验证码
queryCode();
//=>点击盒子重新生成验证码(此处不加小括号:这块只是再把函数绑定给元素的点击事件,方法还没有执行,点击的时候才执行)
codeBox.onclick = queryCode;

3.验证码 - 四位不重复的验证码

var codeBox = document.getElementById('codeBox');
function queryCode() {
    var result = '',
        areaStr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = 0; i < 4; i++) {
        var ran = Math.round(Math.random() * 61),
            char = areaStr[ran];
        //=>验证一下新获取的CHAR字符是否已经在result中存在了,如果存在了我们不存储,重新在获取一遍,反之才累加到result中
        if (result.indexOf(char) > -1) {
            i--;
            continue;
        }
        result += char;
    }
    codeBox.innerHTML = result;
}
queryCode();
codeBox.onclick = queryCode;

4.验证码 - 大小写也算重复的问题

var codeBox = document.getElementById('codeBox');
function queryCode() {
    var result = '',
        areaStr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    for (var i = 0; i < 4; i++) {
        var ran = Math.round(Math.random() * 61),
            char = areaStr[ran];
        //=>a和A也算重复,该如何处理?
        //result='Ab' 'ab'
        //char='a'    'a'
        //result.toLowerCase().indexOf(char.toLowerCase())===-1
        if (result.toLowerCase().indexOf(char.toLowerCase()) > -1) {
            i--;
            continue;
        }
        result += char;
    }
    codeBox.innerHTML = result;
}
queryCode();
codeBox.onclick = queryCode;

Boolean

  • 只有两个值:true真/false假
  • Boolean() 把其它数据类型转化为布尔类型,返回的结果为true或者false;
  • 只有0、NaN、空字符串、null、undefined五个会转换为false,其余的都会转换为true
Boolean(1) //=>true
Boolean(0) //=>false
Boolean(-1) //=>true
Boolean('') //=>false
Boolean('xxx') //=>true
Boolean(null) //=>false
Boolean(undefined) //=>false
Boolean({}) //=>true
Boolean([]) //=>true 
  • 取反,把其它数据类型先转换为布尔类型,然后再取反
    !:取一次反
    !!:取两次反(相当于没有取反,只剩把其它类型的值转换为布尔类型,和Boolean是相同的效果)
!null //=> true
!!undefined //=>false
![] //=>false
!![] //=>true

null和undefined

  • null:空对象指针,但它不是对象类型的,而是基本类型的,表示为空或者没有
  • undefined:未定义,也代表没有;变量只声明未定义返回的结果为undefined;

0或者空字符串null或者undefined 的区别

0或者空字符串:挖了坑没种树
null或者undefined:连坑都没有挖

在JS中null属于没有开辟内存,而空字符串是开辟了内存,里面没有存内容而已,null消耗的性能更低

nullundefined 的区别

null:意料之中的没有,一般都是当前暂时没有,后期基本上会有
undefined:意料之外的没有,一般都是当前没有,以后可能有可能没有,但是规划中是不计后面有没有的

dali(男)
他的女朋友是null
他的男朋友是undefined

你可能感兴趣的:(基本数据类型)