js中六大数据类型及常用方法

js有六种数据类型,其中
    5种基本数据类型(Number, String, Boolean, Undefined, Null),
    1种复杂数据类型(Object)

typeof 操作符

由于js 变量是松散类型的,所以它提供了一种检测当前变量数据类型的方法--typeof关键字

typeof 123              //Number
typeof 'abc'            // String
typeof true             //Boolean
typeof undefined        //Undefined
typeod null             //Object   (因为null类型当作一个空对象引用)
typeof {}               //Object
typeof []               //Object
typeof console.log()    //Function

1 Number类型

Number类型包括 整数 和 浮点数 2种
NaN 非数字类型
    特点: 1) 涉及到的任何关于NaN的操作,都会返回NaN;
          2) NaN不等于自身   
isNaN() 函数用于检查其参数是否是非数字值

1.1 构造函数

new Number(value)   //返回一个新创建的 Number 对象
Number(value)    //把 Number() 作为一个函数来调用,把 value 转换成原始数值并返回 ( 转换失败 返回 NaN)

特别地: 
    var a = "+100";
    alert( a+100 ); // "100100"
    alert(Number(a)); // 100 

    var a1="000100";
    alert(Number(a1));//100

    var a2 = "";   // "  "  null   []  [""] 
    alert( Number(a1) );  // 0  0  0  0  0

    var a4 =[123]; // ["123"] [1,2,3]
    alert( Number(a4) ); // 123  123  NaN

    var a6;
    alert( Number(a6) ); // NaN

    var a7=function(){alert(0)}; // {abc:123}
    alert( Number(a7) );     // NaN  NaN

1.2 Number属性

constructor         返回对创建此对象的 Number 函数的引用。
prototype           使您有能力向对象添加属性和方法。
MAX_VALUE         返回能表示的最大数字。
MIN_VALUE         能表示的最小数字。
NaN            非数字值。
NEGATIVE_INFINITY  负无穷,当溢出时返回。
POSITIVE_INFINITY  正无穷,当溢出时返回。

1.3 常用方法

.toString()   将 Number 转换为字符串。
.toPrecision(num)  在 Number 超出指定位数时,将其转换为指数计数法。
.toFixed(num)    把 Number 四舍五入为指定小数位数的数字
.valueOf()       返回一个Number对象的原始值。
.toExponential(num)  将 Number 转换为字符串,使用指定数目的有效数字。

  

2 String类型

字符串转换:
    String()    适用于任何数据类型(null,undefined 转换后为null和undefined);
    toString() (null,defined没有toString()方法)

2.1 构造函数

new String(s);  //返回一个新创建的 String 对象,存放的是字符串 s 
String(s);      //只把 s 转换成原始的字符串,并返回转换后的值

2.2 String属性

length        字符串的长度
constructor   对创建该对象的函数的引用
prototype     允许您向对象添加属性和方法

2.3 String常用方法

charAt()
charCodeAt()
concat() 
fromCharCode() 
indexOf()和lastIndexOf()
match()
replace()
search()
slice()
split() 
substr()
substring()
toLocaleUpperCase() / toLocaleLowerCase() /toUpperCase() / toLowerCase()

1、 charAt(index) 返回指定位置的字符

注意:index 在 0 ~ str.length-1 ,若index在范围之外,则返回 ""
    str.charAt()即不带参数 和 str.charAt(NaN) 均返回字符串的第一个字符

2、 charCodeAt(index) 返回在指定的位置的字符的 Unicode 编码

注意:index 在 0 ~ str.length-1 ,若index在范围之外,则返回 NaN

3、 .concat() 用于连接两个或多个字符串

4、 fromCharCode() 接受一个指定的 Unicode 值,然后返回一个字符串。

String.fromCharCode(unicode1,unicode2,...,nuicodeX) 
该法是 String 的静态方法,语法应该是 String.fromCharCode()

5、 indexOf(searchStr,startIndex) 返回 searchStr 在字符串中首次出现的位置。匹配不到则返回-1

lastIndexOf(searchStr,startIndex) 返回 searchStr 最后出现的位置 从后向前搜索

6、 match(regExp) 在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 匹配不到返回Null

match()方法返回值为Array类型,
若参数regExp中 没有全局标志"g": 只查找第一个匹配 
    数组中包括 索引0, 属性index, 属性input
若参数regExp中 有全局标志"g": 查找所有地匹配 
    其中数组元素就是所有匹配到的子字符串,数组中包括 索引0,索引1,....索引N-1

7、 replace(regexp/substrOld,replaceStrNew) 在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串

8、 search(regexp/substr) 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

返回值:str中第一个与正则或字符串相匹配的子串的起始位置。无匹配返回-1    
说明: search()  不执行全局匹配,它将忽略标志 g。
        总是从字符串的开始进行检索,并返回 stringObject 的第一个匹配的位置
             

9、 slice(startIndex,endIndex) 提取字符串的某个部分,并以新的字符串返回被提取的部分

返回值 [startIndex,endIndex)  前面包括,后面不包括

10、split() 用于把一个字符串分割成字符串数组

11、substr(startIndex,length) 抽取从 startIndex 下标开始的指定数目的子串

无参数length,则返回从startIndex到字符串尾字符

12、substring(startIndex,endIndex) 提取字符串中介于两个指定下标之间的子串

无参数endIndex,则返回从startIndex到字符串尾字符

13、toLocaleUpperCase() / toLocaleLowerCase() 用于字符串转换大小写(与下面的方法方法仅在某些外国小语种有差别)

toUpperCase() / toLowerCase() 用于字符串转换大小写

3 Boolean类型

该类型只有两个值,true和false

3.1 构造函数

new Boolean(value);     
Boolean(value);     

3.2 Boolean属性

constructor   对创建该对象的函数的引用
prototype     允许您向对象添加属性和方法

3.3 Boolean常用方法

.toSource()    返回该对象的源代码 
.toString()    把逻辑值转换为字符串,并返回结果 
.valueOf()    返回 Boolean 对象的原始值 

4 Undefined类型

只有一个值,即undefined值。使用var声明了变量,但未给变量初始化值,那么这个变量的值就是undefined

5 Null类型

null类型被看做空对象指针,前文说到null类型也是空的对象引用

6 Object类型

js中对象是一组属性与方法的集合。
这里就要说到引用类型了,引用类型是一种数据结构,用于将数据和功能组织在一起。
引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法

三大引用类型

1 Object类型

我们看到的大多数类型值都是Object类型的实例,创建Object实例的方式有两种。
    1> 使用new操作符后跟Object构造函数,如下 
        var person = new Object();
        person.name = "Micheal";
        person.age = 24;
    2> 使用对象字面量表示法,如下 
        var person = {
          name : "Micheal",
          age : 24
        };

2 Array类型

数组的每一项可以保存任何类型的数据,比如:字符串,数值,对象....另外,数组的大小是可以动态调整的

2.1 构造函数

创建数组的基本方式有两种:
1> 使用 Array 构造函数:
    var arr1 = new Array(); //创建一个空数组
    var arr2 = new Array(20); // 创建一个包含20项的数组
    var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组
2> 使用数组字面量表示法:
    var arr4 = [];  
    var arr5 = [20]; // 创建一个包含1项的数组
    var arr6 = ["lily","lucy","Tom"];  

2.2 Array属性

length        设置或返回数组中元素的数目
constructor   对创建该对象的函数的引用
prototype     允许您向对象添加属性和方法

2.3 Array常用方法

join()  
push()和pop() 
shift() 和 unshift() 
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf()
forEach()
map()
filter()
every()
some()
reduce()和 reduceRight()

1 join()

1> join(separator): 以separator为分隔符构成一个字符串,无separator默认用逗号为分隔符,且原数组不变
    var arr = [1,2,3];
    console.log(arr.join()); // 1,2,3
    console.log(arr.join("-")); // 1-2-3
    console.log(arr); // [1, 2, 3](原数组不变)
2> 重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串,函数如下:
    function repeatString(str, n) {
        return new Array(n + 1).join(str);
    }
    console.log(repeatString("abc", 3)); // abcabcabc
    console.log(repeatString("Hi", 5)); // HiHiHiHiHi

2 push()和pop() 添加 和 移除

push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。 
pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

3 shift() 和 unshift() 删除 和 添加

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined  
unshift():将参数添加到原数组开头,并返回数组的长度 

这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾 

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

4 sort() 升序排列

在排序时,sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序。
即使数组中的每一项都是数值, sort()方法比较的也是字符串,因此会出现以下的这种情况:
var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)

为了解决上述问题,sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。
比较函数接收两个参数,
 如果第一个参数应该位于第二个之前则返回一个负数;
 如果两个参数相等则返回 0;
 如果第一个参数应该位于第二个之后则返回一个正数。
以下就是一个简单的比较函数:
function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]

如果需要通过比较函数产生降序排序的结果,只要交换比较函数返回的值即可:
function compare(value1, value2) {
    if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]

5 reverse() 反转数组项顺序

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

6 concat() 将参数添加到原数组

这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。
在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。
var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

由上可知:
    传入的不是数组,则直接把参数添加到数组后面;
    传入的是数组,则将数组中的各个项添加到数组中。
但是如果传入的是一个二维数组呢?
var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]
上述arrCopy2数组的第五项是一个包含两项的数组,会把这一数组项当作一项添加到arrCopy2中。

7 slice() 截取数据项 构成新数组

slice(startIndex,endIndex):
    返回从原数组中startIndex下标 ~ 结束下标endIndex之间的项组成的新数组 (前闭后开---不包括结束位置的项)

slice(startIndex,)返回从该参数指定位置开始到当前数组末尾的所有项 
    var arr = [1,3,5,7,9,11];
    var arrCopy = arr.slice(1);
    var arrCopy2 = arr.slice(1,4);
    var arrCopy3 = arr.slice(1,-2);
    var arrCopy4 = arr.slice(-4,-1);
    console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
    console.log(arrCopy); //[3, 5, 7, 9, 11]
    console.log(arrCopy2); //[3, 5, 7]
    console.log(arrCopy3); //[3, 5, 7]
    console.log(arrCopy4); //[5, 7, 9]

8 splice() 删除、插入和替换

有很多种用法,可以实现删除、插入和替换。

删除:指定 2 个参数:要删除的第一项的位置和要删除的项数。
        例如, splice(0,2)会删除数组中的前两项。
插入:提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。
        例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
替换:指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
        例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

9 indexOf()和 lastIndexOf() 查找并返回索引

indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。 从前向后查找 
lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。从后向前查找

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回1。
在比较第一个参数与数组中的每一项时,会使用全等操作符。
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

10 forEach() 遍历

对数组进行遍历循环,对数组中的每一项运行给定函数。
这个方法没有返回值。
参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。
    var arr = [1, 2, 3, 4, 5];
    arr.forEach(function(x, index, a){
        console.log(x + '|' + index + '|' + (a === arr));
    });
    // 输出为:
    // 1|0|true
    // 2|1|true
    // 3|2|true
    // 4|3|true
    // 5|4|true

11 map() 映射

对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

下面代码利用map方法实现数组中每个数求平方。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

12 filter() 过滤

filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

13 every()

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

14 some()

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

15 reduce()和 reduceRight() 迭代遍历

这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。
都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

reduce()方法从数组的第一项开始,逐个遍历到最后。reduceRight()则从数组的最后一项开始,向前遍历到第一项。

传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。
这个函数返回的任何值都会作为第一个参数自动传给下一项。
第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

用reduce()实现数组求和,数组一开始加了一个初始值10 
    var values = [1,2,3,4,5];
    var sum = values.reduceRight(function(prev, cur, index, array){
    return prev + cur;
    },10);
    console.log(sum); //25

3 Function类型

每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。
    函数通常是 使用函数声明语法定义:
    function sum(num1,num2){
      return num1 + num2;
    };
    也可以使用函数表达式定义函数:
    var sun = function (){
        return sum1 + sum2;
    };

js按照存储方式分为值类型和引用类型。那么他们的计算有什么区别呢?

题目1: var a = 100;
    var b = a;
      a = 200;
    console.log (b);   //100
题目2: var a = {age : 20};
    var b = a;
    b.age = 21;
    console.log (a.age); //21
解析:题目1是简单的值类型,在从一个变量向另一个变量赋值基本类型时,会在该变量上创建一个新值,然后再把该值复制到为新变量分配的位置上。
此时,a中保存的值为 100 ,用 a 初始化 b ,b保存的值100,但b中的100与a中的是完全独立的,该值只是a中的值的一个副本,
此后,这两个变量可以参加任何操作而相互不受影响。

也就是说基本类型在赋值操作后,两个变量是相互不受影响的。

题目2是引用类型,当从一个变量向另一个变量赋值引用类型的值时,同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。
这时保存在变量中的是对象在堆内存中的地址,所以与简单赋值不同,这个值的副本实际上是一个指针,而这个指针指向存储在堆内存的一个对象。
那么赋值操作后,两个变量都保存了同一个对象地址,则这两个变量指向了同一个对象。
因此,改变其中任何一个变量,都会相互影响。

因此,引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响。

3.1 顶层函数(全局函数)

全局属性和函数可用于所有内建的 JavaScript 对象

1、 decodeURI() 解码某个编码的 URI

encodeURI() 把字符串编码为 URI

var test1="http://www.w3school.com.cn/My first/"
document.write(encodeURI(test1)+ "<br />")  //  http://www.w3school.com.cn/My%20first/
document.write(decodeURI(test1))   //   http://www.w3school.com.cn/My first/

2、 decodeURIComponent() 解码一个编码的 URI 组件

encodeURIComponent() 把字符串编码为 URI 组件

3、 escape() 对字符串进行编码

unescape() 对由 escape() 编码的字符串进行解码。

document.write(escape("Visit W3School!") + "<br />")  //  Visit%20W3School%21

4、 eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行

eval("x=10;y=20;document.write(x*y)")  //200
document.write(eval("2+2"))   //4
var x=10
document.write(eval(x+17))   //27

5、 getClass() 返回一个 JavaObject 的 JavaClass

6、 isFinite() 检查某个值是否为有穷大的数

7、 isNaN() 检查某个值是否是数字

8、 Number() 把对象的值转换为数字

var test1= new Boolean(true);
var test2= new Boolean(false);
var test3= new Date();
var test4= new String("999");
var test5= new String("999 888");
document.write(Number(test1)+ "<br />");  //1
document.write(Number(test2)+ "<br />");  //0
document.write(Number(test3)+ "<br />");  //1256657776588
document.write(Number(test4)+ "<br />");  //999
document.write(Number(test5)+ "<br />");  //NaN

9、 parseFloat() 解析一个字符串并返回一个浮点数

document.write(parseFloat("10"))     // 10
document.write(parseFloat("10.00"))  // 10
document.write(parseFloat("10.33"))   // 10.33
document.write(parseFloat("34 45 66"))   // 34
document.write(parseFloat(" 60 "))    // 60
document.write(parseFloat("40 years"))  // 40
document.write(parseFloat("He was 40"))  // NaN

10、 parseInt() 解析一个字符串并返回一个整数

parseInt("10");            //返回 10
parseInt("19",10);        //返回 19 (10+9)
parseInt("11",2);        //返回 3 (2+1)
parseInt("17",8);        //返回 15 (8+7)
parseInt("1f",16);        //返回 31 (16+15)
parseInt("010");        //未定:返回 10 或 8

11、 String() 把对象的值转换为字符串

var test1= new Boolean(1);
var test2= new Boolean(0);
var test3= new Boolean(true);
var test4= new Boolean(false);
var test5= new Date();
var test6= new String("999 888");
var test7=12345;
document.write(String(test1)+ "<br />");  // true
document.write(String(test2)+ "<br />");  //  false
document.write(String(test3)+ "<br />");  // true
document.write(String(test4)+ "<br />");  // false
document.write(String(test5)+ "<br />");  //  Wed Oct 28 00:17:40 UTC+0800 2009
document.write(String(test6)+ "<br />");  // 999 888
document.write(String(test7)+ "<br />");  //  12345