JS不同类型之间的转化处理
一.js类型：基本类型和复合类型
基本类型常用的就是：
数字类型（整数和浮点数）
字符串类型
布尔类型
null和未被定义
复合类型就是：
数组
对象
二.最常用类型转化方法
1.转为字符串
var dt=123456789; dt=dt.toString(2); alert(typeof dt); alert(dt)
后面直接使用tostring就实现了转化，这个方法支持进制转化，我们是数字类型到字符串的转化，正好可以使用参数，参数可选2 8 10 16对应进制。
我们对布尔类型处理，发现设置进制参数是无效的：
var dt=true; dt=dt.toString(2); alert(typeof dt); alert(dt)
我们针对复合类型数组测试转化：
var dt=[123,456,789]; dt=dt.toString(2); alert(typeof dt); alert(dt)
对object转化：
var dt={a:123,b:456};
dt=dt.toString(2);
alert(typeof dt);
alert(dt)
2.转为数字
我们知道“123”和123是不同类型的数据，要转为数字类型更多的就是对字符串转化的处理：
var dt="123"; dt=Number(dt); alert(typeof dt); alert(dt)
转为整数：
var dt=456.4564; dt=parseInt(dt); alert(typeof dt); alert(dt)
转为浮点数：
var dt="456.1"; dt=parseFloat(dt); alert(typeof dt); alert(dt)
三.特殊类型了解
var dt=null; var dtt; alert(typeof dt); alert(typeof dtt);
空和被定义在js是特殊的存在，在if判断和逻辑或处理会转为布尔类型false值
var dt=null;
var dtt;
if(dt){}else{alert(1)};
if(dtt){}else{alert(2)};
都弹出了else的内容，
同样在逻辑或自带为真处理：
var dt=null; var dtt; var gg=dt||dtt||123; alert(gg)
dt和dtt都是转为false，最后gg被赋值为转为真的123.
四.字符串和数组的的转化处理
var str="123,456,789";
alert(str.split(",")[0]);
把数组拼接为字符串用join：
var str=[123,456,789];
alert(str.join(",").length);
五.不同类型间方法的继承和使用
1.强制转化处理
我们定义了数字类型数据，使用字符串的方法是无效的：
var dt=123456789; alert(dt.substr(1,2));
我们现在数字类型利用上面的强制转化转为字符串在调用处理：
var dt=123456789; dt=dt.toString(); alert(dt.substr(1,2));
2.call关键字的使用
这是可以的，我们同样可以使用call关键字的处理方式：
var dt=123456789; alert(String.prototype.substr.call(dt,1,2));
使用apply同理，参数写成数组形式：
var dt=123456789; alert(String.prototype.substr.apply(dt,[1,2]));
借用原型链显得规范，我们也同样使用call配合实例的对象处理：
var dt=123456789; var str="9999999" alert(str.substr.call(dt,1,2));
dt也会变为字符串类型，并且指向的对象指向了我们的dt，所以执行substr输出了23。
3.针对dom的配合使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<!-- Demo styles -->
<style>
*{ margin:0; padding:0;}
html{height:100%;}
body{height:100%;}
.guodu{ width:500px; height:500px; background:#990; margin:100px;transition:margin .5s ease-in .1s;}
.guodu:hover{ margin:50px;}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
<script>
var list=document.getElementsByTagName("div");
alert(list.length);
alert(list[0].innerHTML);
</script>
</html>
通过dom操作，获取所有div，我们方法返回猜测是数组，因为有length属性同样可以下标获取，我们看是否具有数组的所有处理方法：
var list=document.getElementsByTagName("div");
var ss=list.slice(2,4);
alert(ss[0].innerHTML)
无效，说明获取子数组方法是不可用的，我们同样通过call继承上这个方法测试：
var list=document.getElementsByTagName("div");
var ss=Array.prototype.slice.call(list,2,4);
alert(ss[0].innerHTML)
我们就可以返回截取的内容了，list可以使用数组的slice方法，发现list获取的具有数组部分属性和方法，我们可以叫他类数组或者伪数组。
4.call可以实现继承
我们发现利用call可以不同类型的继承处理，我们针对自定义类型进行测试：
function Aa(arg){
this.a=arg;
this.b=function(){
alert(this.a)
};
};
var aa=new Aa("demo");
aa.b();
写一个非常简单的类，然后弹出一个值，我们在创建一个类，这个类去继承操作：
function Aa(arg){
this.a=arg;
this.b=function(){
alert(this.a)
};
};
function Bb(arg){
this.a=arg;
};
var aa=new Aa("456");
var bb=new Bb("123");
aa.b.call(bb);
5.prototype原型链继承
function Aa(arg){
this.a=arg;
};
Aa.prototype.b=function(){
alert(this.a)
};
Aa.prototype.c=function(){
alert(this.a*2)
};
Aa.prototype.d=function(){
alert(this.a-100)
};
function Bb(arg){
this.a=arg;
};
Bb.prototype=Aa.prototype;
var bb=new Bb("123");
bb.b();
bb.c();
bb.d();
我们针对类Aa在原型定义了多个方法，我们让类Bb原型赋值为Aa原型，这样就实现了方法的继承。
6.利用prototype对原生类型扩展
我们可能在某个项目针对数组有大量的获取2 3项然后反转2 3项的操作：
Array.prototype.slicereverse=function(){
return this.slice(1,3).reverse();
};
var ar=[1,2,3,4,5,6];
alert(ar.slicereverse());
var arr=[6,5,4,3,2,1];
alert(arr.slicereverse());
针对原生类型我们同样利用原型可以添加自定义的处理方法。
7.函数的特殊性
我们发现，js定义类使用的是函数，为了区别普通函数，最好首字母大写，我们看下面的测试：
function aa(){
};
alert(typeof aa);
判断发现定义函数都是函数类型，不过js的函数非常特殊，除了上面prototype属性，函数可以向object一样，后面自定义方法和属性：
function aa(){
};
aa.fun=function(){
alert(1)
};
aa.pro="123";
aa.fun();
完全可用。
我们在利用构造函数new对象，可以调用prototype定义的属性和方法，同理如上，我们直接函数名+prototype+自定义定义也可以直接访问到：
function Aa(){
this.a="123";
};
Aa.prototype.fun=function(arg){
alert(arg)
};
Aa.prototype.fun("456");
var aa=new Aa();
aa.fun("789");
我们如此使用就相当于下面结构：
Aa={
prototype:{fun:function(){}},
aa:function(){}
};
7.构造函数的this
function Aa(arg){
this.a=arg;
};
Aa.prototype.fun=function(arg){
alert(this.a+arg)
};
Aa.prototype.fun2=function(arg){
alert(this.a+arg)
};
var aa=new Aa("demo");
aa.fun("789");
在我们new的时候，this就会指向我们新建的对象，如上，我们使用fun方法拼接内容，这是非常简单的处理方式，我们下面同时调用fun和fun2：
function Aa(arg){
this.a=arg;
};
Aa.prototype.fun=function(arg){
alert(this.a+arg)
};
Aa.prototype.fun2=function(arg){
alert(this.a+arg)
};
var aa=new Aa("demo");
aa.fun("789");
aa.fun2("dddd");
我们经常使用jq，知道jq有个链式操作：
aa.fun1（）.fun2（），这是如何实现的呢？很简单，我们知道this就是当前的对象，不管是调用fun1还是fun2都基于对象（this）去调用，我们在fun1和fun2返回this：
function Aa(arg){
this.a=arg;
};
Aa.prototype.fun=function(arg){
alert(this.a+arg);
return this;
};
Aa.prototype.fun2=function(arg){
alert(this.a+arg);
return this;
};
var aa=new Aa("demo");
aa.fun("789").fun2("dddd");
是不是实现了这种链式操作调用形式。
8.针对dom的链式处理
我们操作元素就是利用dom获取，然后通过style属性进行设置，现在做一个很简单的处理，就是模仿jq的处理方式去操作dom元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<!-- Demo styles -->
<style>
*{ margin:0; padding:0;}
html{height:100%;}
body{height:100%;}
#aa{ background:#9C0;}
</style>
</head>
<body>
<div id="aa">测试</div>
</body>
<script>
function Duquery(id){//定义类
this.ele=document.getElementById(id);//id查找
return this;//返回对象
};
Duquery.prototype.html=function(val){//利用原型添加设置html的方法
this.ele.innerHTML=val;
return this;//返回对象，执行后可链式操作
};
Duquery.prototype.attr=function(key,val){//添加设置属性的方法
this.ele.setAttribute(key,val);
return this;
};
Duquery.prototype.css=function(key,val){//添加设置样式的方法
this.ele.style[key]=val;
return this;
};
var aa=new Duquery("aa");
aa.attr("bb","456").css("height","200px");
</script>
</html>
我们利用js将高度设为200，属性我们审查元素查看。
9.构造函数去new处理
我们使用jq是不需要new的，其实去掉非常简单，我们把new操作和构造函数放在一个普通函数里面即可，把new的对象进行返回：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<!-- Demo styles -->
<style>
*{ margin:0; padding:0;}
html{height:100%;}
body{height:100%;}
#aa{ background:#9C0;}
</style>
</head>
<body>
<div id="aa">测试</div>
</body>
<script>
function $$(id){
function Duquery(id){//定义类
this.ele=document.getElementById(id);//id查找
return this;//返回对象
};
Duquery.prototype.html=function(val){//利用原型添加设置html的方法
this.ele.innerHTML=val;
return this;//返回对象，执行后可链式操作
};
Duquery.prototype.attr=function(key,val){//添加设置属性的方法
this.ele.setAttribute(key,val);
return this;
};
Duquery.prototype.css=function(key,val){//添加设置样式的方法
this.ele.style[key]=val;
return this;
};
return new Duquery(id);
};
$$("aa").attr("bb","456").css("height","200px");
</script>
</html>