首页 > 代码库 > 第二章
第二章
一、JS数据类型
* 三元操作符：操作的数据有三个
* a?b:c
*
* a作为一个条件
* continue
console.log(‘这是第二个函数声明‘);
}(); 这里的小括号是不能换行的
<script>
/*
* js中的数据类型
* 一、基本（简单）数据类型(有五种)
* 1、字符串 String
* 放在一对单引号或者双引号里，由0个或者多个字符组成的串
* 注意：
* 引号是成对出现的
* 如果说字符串里面有引号，外在的引号一定要与里面的引号相反
* 如果说想要在字符串里输入的引号与外在的引号相同，那就用转义字符（\‘）
*/
var s1=‘a‘;
var s2="kaivon";
var s3=‘‘;
var s4=‘ ‘;
var s5="It ‘s me";
var s6=‘It \‘s me‘;
//var s5=‘学辉"; //报错
console.log(s1); //a
console.log(s2); //kaivon
console.log(s3); //什么都没有的字符串
console.log(s4); //空格字符串
console.log(s5); //It ‘s me
console.log(s6); //It ‘s me
/*
* 2、数字 Number
* 1.由0-9之间的任意数字组合而成，可是整数也可以是小数。数字的范围在正无穷（+Infinity）与负无穷（-Infinity）之间
* 数字最大值：Number.MAX_VALUE
* 数字最小值：Number.MIN_VALUE
* 2.NaN
* not a number
* 当运算失败的时候会出现
* 自己与自己都不相等
*/
var n1=12;
var n2=23.56;
var n3=Number.MAX_VALUE;
var n4=Number.MIN_VALUE;
console.log(n1); //12
console.log(n2); //23.56
console.log(n3); //1.7976931348623157e+308
console.log(n4); //5e-324
console.log(n3*2); //Infinity
console.log(‘a‘-1); //NaN
console.log(NaN==NaN); //false
/* 3、布尔值 Boolean
* true 真
* false 假
*/
var b1=true;
var b2=false;
console.log(b1); //true
console.log(b2); //false
/* 4、未定义 Undefined
* 有且只有一个值undefined
*/
var u1=undefined;
var u2;
console.log(u1); //undefined
console.log(u2); //undefined 声明一个变量，但没给它赋值，那它就是undefined,
//undefinded是有存在，只是没有给值，而Null代表是不存在的意思、
/* 5、空 Null
* 有且只有一个值null
*/
var nul=null;
var btn=document.getElementById(‘btn‘);
console.log(nul); //null
console.log(btn); //null 因为还没有有写HTML
/* 二、复合（复杂）数据类型
* 对象 Object
* 格式：由简单数据类型与复合数据类型任意组合而成的。它的数据是放在一对大括号当中，每个数据由一个键值对组成的，数据可以是0个也可以是多个，每个数据之间用逗号隔开，最后一个数据不能加逗号（如果加了逗号，那就会报错）
* 键值对：key:value
* key 数据名称，它可以加引号也可以不加引号，当这个名字不符合变量命名规则的时候需要加上引号（数字除外），引号是成对出现的、
* value 数据对应的值，这个值可以是简单数据类型也可以是复杂数据类型
*
* 操作对象用的方法就是属性的方法
*
* 函数、对象、数组都属于复合数据类型。
*/
//这个就是复合对象数据，可以自己定义这个对象里面的许多东西
语法： 大括号{}，里面的元素最后一个不需要加逗号,
调用的时候和数组不一样，数组是写对应的下标数，对象写的是对应的key
var person={
name:‘老王‘,//结束语不是；而是，
age:30,
height:‘180cm‘,
weight:‘90kg‘,
drive:true,
‘girl-firend‘:null,
language:[‘汉语‘,‘日语‘,‘英语‘]
};//其实写法是数组一样，最后一个是不需要逗号的
console.log(person.name); //老王
console.log(person[‘girl-firend‘]); //null
person.age=25;
console.dir(person);
</script>二、检车数据类型的方法---typeof
/*
* typeof
* 检测一个数据的类型，返回这个类型对应的字符串（全小写）
* 返回的结果与系统当中定义的类型是有区别
* 它是一个运算符
*
* 语法
* 第一种 typeof 数据 typeof u
* 第二种 typeof(数据) typeof（u）
*
* 系统定义的数据类型 typeof返回的数据类型
* String string
* Number number
* Boolean boolean
* Undefine undefined
* Null object
* Object object
*
*
*/
var s=‘kaivon‘;
console.log(typeof s); //string
var n=12;
console.log(typeof n); //number
var b=true;
console.log(typeof b); //boolean
var u=undefined;
console.log(typeof u); //undefined
var nul=null;
console.log(typeof nul); //object
//null的typeof的结果是object，
var o={left:10};
console.log(typeof o); //object
var fn=function(){alert(1)}
console.log(typeof fn); //function 函数的typeof结果为function，但是js当中没有给函数定义一个类型
三、数据类型转换
* 把一种数据类型转换成另外一种数据类型
*
* js支持把任意一种数据类型只能转换成以下三种类型
* 数字
* 字符串
* 布尔值
* 不能转成Undefined 和Null
* 对象转成这三种数据是没有意义，因为对象里面可以放任意一种数据类型。 1.各种类型转成数字
/*
* 任意类型转数字
* Number(要转换的值) 把任意类型都转为数字
* 1、Undefined
* 转数字的结果为NaN
*/
var u=undefined;
console.log(Number(u)); //NaN
/* 2、Null
* 转数字的结果为0
*/
var nul=null;
console.log(Number(nul)); //0
/* 3、Boolean
* true 转数字的结果为1
* falae 转数字的结果为0
*/
var b1=true;
var b2=false;
console.log(Number(b1),Number(b2)); //1 0
/* 4、String
* 空字符串，空格字符串转数字的结果为0
* 字符串里的内容是不是一个纯数字，如果是个纯数字的话，就转成对应的数字
* 如果说不是一个纯数字，那结果就是NaN
*/
var s1=‘‘;
var s2=‘ ‘;
var s3=‘kaivon‘;
var s4=‘012‘;
var s5=‘12a‘;
var s6=‘12*12‘;
console.log(Number(s1)); //0
console.log(Number(s2)); //0
console.log(Number(s3)); //NaN
console.log(Number(s4)); //12
console.log(Number(s5)); //NaN
console.log(Number(s6)); //NaN
/*
* 5、Number
* 数字转数字的结果还为原来的数字
* 6、Object
*
*/
var o1=[];
var o2={};
console.log(Number(o1)); //0 数组为0
console.log(Number(o2)); //NaN 对象为NaN 2.字符串转数字
/*
* 把字符串转成数字
* parseInt() 把字符串转成整数型数字
* parseFloat() 把字符串转成浮点型（小数）数字
*
* 传进来的字符串必需是数字或者空格加数字开头，它会从数字开始，一位一位往后找，直到找到的字符不是数字就会停止，会把找到的数字字符转成真正的数字。如果没找到那就返回一个NaN
*/
var s1=‘100px‘;
var s2=‘ 100px‘;
var s3=‘px100‘;
var s4=‘100.256rem247‘;
var s5=‘0123‘;
console.log(parseInt(s1)); //100
console.log(parseInt(s2)); //100
console.log(parseInt(s3)); //NaN
console.log(parseFloat(s4)); //100.256
console.log(parseInt(s5)); //123 3.把类型转为字符串--就是在外面加多一个引号
/*
* 任意类型转字符串------结果就是给对象加上引号
* String(要转换的值)
* 1、Undefined转字符串
* ‘undefined‘
* 2、Null转字符串
* null
* 3、Number转字符串
* 把数字加上引号
* 4、Boolean转字符串
* true 转字符串的结果为‘true‘
* false转字符串的结果为‘false‘
* 5、String转字符串
* 结果就是本身
* 6、Object转字符串
* 结果也是给对象加上引号
*
*/
var u=undefined;
console.log(String(u)); //undefined
var nul=null;
console.log(String(nul)); //null
var num=12;
console.log(String(num)); //12
var b1=true;
var b2=false;
console.log(String(b1)); //true
console.log(String(b2)); //false 4.把各类型转为布尔值
/*
* 任意类型转布尔值
* Boolean(要转换的值)
* 1、Undefined转布尔值
* false
* 2、Null
* false
* 3、Number
* 0、NaN转布尔值的结果为false，其它的转布尔值的结果为true
* 4、Boolean转布尔值
* 转为对应的值
* 5、String转布尔值
* 空字符串转布尔值的结果为false，其它（包括空格字符串）的都转成true
*/
var u=undefined;
console.log(Boolean(u)); //false
var nul=null;
console.log(Boolean(nul)); //false
var n1=0;
var n2=NaN;
var n3=Infinity;
var n4=12;
console.log(Boolean(n1)); //false
console.log(Boolean(n2)); //false
console.log(Boolean(n3)); //true
console.log(Boolean(n4)); //true
var s1=‘kaivon‘;
var s2=‘‘;
var s3=‘ ‘;
console.log(Boolean(s1)); //true
console.log(Boolean(s2)); //false
console.log(Boolean(s3)); //true四、类型转换分类、
/*
* 类型转换分为两种
* 1、显式类型转换 -----我们自己认为操作的。
* 通过一些方法，很明确的将某种数据类型转换为另一种数据类型
* Number()、parseInt()、parseFloat() 明确将数据转数字类型
* String() 明确将数据转成字符串
* Boolean() 明确将数据转成布尔值
* 2、隐式类型转换
* 在进行一些操作的时候，根本目的不是做类型转换。但是如果要进行操作的话，那数据必需符合某种类型。js会在内部对数据进行一些转换
* + - * /
*/
console.log(1+2); //3
console.log(1+‘a‘); //1a
console.log(true+1); //2 加号两边没有字符中，那就是数学中的加法运算，会把true转成数字
console.log(true+‘1‘); //true1 加号右边是字符串，那就是字符串连接的意思，会把true转成字符串true
console.log(false-true); //-1 减号的作用就是数学上的减法运算，会把两边都转成数字
console.log(‘‘-1); //-1
五、检查数据是否是NaN ----isNaN
/*
* isNaN()
* 判断一个值是不是NaN，它会先把参数用Number()方法转一下
* 它具有一个功能是用来检测数字的，但是它的本意并不是用来检测数字的
*
* 如果参数的结果为NaN，那它返回一个true
* 如果参数的结果不为NaN,那它返回一个false
*
* isNaN()传进来的值，如果是一个数字的话，那它就返回一个false
*/
var n=NaN;
var s=‘kaivon‘;
var n1=12;
console.log(isNaN(n)); //true
console.log(isNaN(s)); //true
console.log(isNaN(n1)); //false六、运算符
* 运算符优先级
* 中括号、小括号、点属于同一级别，它们有最高的优先及
* 如果不确定先算谁，那就给要算的内容加上小括号，提高它的优先级. //1+2*3=7 (1+2)*3=9 类似于数学运算
1 * 算术运算符
* + 加、- 减、* 乘、/ 除、c 取模（求余数）、++、--
*
* 取模的时候，如果前面的数字比后在的数字小，那得到的结果就是前面的数字
* 取模的时候，后面的数字不能为0，如果为0的话得到的结果就是NaN console.log(3%4); //3 0%5 0
console.log(7%12); //7 1%5 1
console.log(28%36); //28 5%5 0
console.log(5%0); //NaN 7%5 2 2递增递减
* ++ 递增
* -- 递减
* 它俩可以放在操作数的前面，也可以放在操作数的后面
*
* 如果只操作自己
* ++放在操作符的前面与后在都是一样的，让自己加1
* --放在操作符的前面与后在都是一样的，让自己减1
*/
var a=1;
a++;//这个意思就是操作符在前面 //2
a--; //1
++a; //这个意思就是操作符在后面
--a;
/*
* 如果操作别人（有赋值给其它变量）
* ++放在后面，先把自己赋给另一个变量，自己再加1
* --放在后面，先把自己赋给另一个变量，自己再减1
*/
var c=1;
var d=c++; //这里就是有赋值给别人
/*
* var c=1;
* d=c;
* c=c+1;
*/
console.log(c); //2
console.log(d); //1
/* ++放在前面，先把自己加个1然后赋给另一个变量，然后自己再加个1
* --放在前面，先把自己加个1然后赋给另一个变量，然后自己再减个1
*/
var e=1;
var f=++e;
/*
* var e=1;
* f=e+1;
* e=e+1;
*/
console.log(e); //2
console.log(f); //2 3. 赋值运算符（在前面的值的基础上与后面的值进行运算，并把得到的值重新赋给前面的值）
* =、+=、-=、*=、/=、%=
*
* +=的意思是在原有的基础上再加
* x+=y
* x=x+y var a=1;
var b=2;
b+=a;
/* b=b+a*/
console.log(b); //3 4.关系运算符（对比）
* <、>、<=、>=、==、!=、===、!==
* 关系运算符会把结果转成布尔值
* == 比较的是两个值是否相同
* === 首先先比较两个值的类型，如果说类型不同，那直接返回false
* 如果类型相同，如果值相等的话，返回true
* != 比较的是两个值是不相同，如果两个值不相同的话返回true，相同的话返回false
* !== 只有当两个数据类型不同，值不同才会返回true
*
* !的意思是反 var a=10;
var b=‘10‘;
var c=‘10‘;
var d=20;
var e=‘20‘;
console.log(a==b); //true
console.log(b===c); //true
console.log(a===c); //false
console.log(d!=e); //false
console.log(d!==c); //true 5.逻辑运算符 （一般用作条件运算里面做判断）
* && 并且的意思
* 如果当左边与右边的条件同时成立的时候，整个条件才成立 var n1=10;
var n2=3;
if(n1<5&&n2<6){
alert(‘成立‘); }
* || 或者的意思
* 如果有一个条件成立的话，整个条件就成立 var a=1;
var b=10;
if(a<12||b>20){
console.log(‘成立‘);
}* a?b:c
*
* a作为一个条件
* 如果a的值为真，返回b，否则返回c
var e=1;
var f=e>0?10:20;
console.log(f); //10 类似与
if(e>0){
f=10;
}else{
f=20;
};
七、switch
* 用来做判断的,根据一个变量的值，做不同的事情
* case是可以累加的，有多个情况的话就可以放多个case 语法：
* switch(变量){
* case 值:
* 当这个值与变量的值相同的时候，才会走这里的代码
* break; 停止以下代码继续执行
* case 值:
* 当这个值与变量的值相同的时候，才会走这里的代码
* break; 停止以下代码继续执行
* case 值:
* 当这个值与变量的值相同的时候，才会走这里的代码
* break; 停止以下代码继续执行
* default:
* 当以上变量都不满足的时候，会执行这里的代码 }
var n=3;
switch(n){
case 1:
console.log(‘今天是星期一‘);
break;
case 2:
console.log(‘今天是星期二‘);
break; case 3:
console.log(‘今天是星期三’)；
break;
default:
console.log(‘今天星期四‘)；
}
八、for in
作用： 和for的功能一样，循环。要取到一个对象里的所有数据，只能用for in方法
语法： (attr)变量名 对象里所有的属性名（key）
* for(var 变量名 in 对象){
* 对象[属性名] 属性名对应的值 }
以对象为例：
var person={
name:‘老王‘,
age:30,
height:‘180cm‘,
weight:‘90kg‘,
}
for(var attr in person){
console.log(attr,person[attr]);
} 这里attr会显示出所有属性名 name,age,height,weight 这里的person[attr] 会显示所有属性名所对应的值。
以数组为例：
var color=[‘red‘,‘green‘,‘blue‘,‘yellow‘,‘pink‘];
for(var attr in color){
console.log(attr,color[attr]);
} 这里的attr 所显示的是对应的下标数 0,1,2,3，4 color[attr]显示的就是下标数对应的值。
想取所有的值，数组可以用for也可以用for in ,但是对象只能用for in
九、while
* while
* 循环，条件循环。只有当条件满足的情况下才会去循环
*
* 语法
* while(条件语句){
* 当条件满足的时候，会循环执行这里的代码
* }
*
* 注意：当while的条件不具备停止条件的时候，一定要在循环体内给一个条件变化，否则就是一个死循环
*
* for 次数循环
* while 条件循环，它一般用在嵌套的元素，或者有嵌套的数据
*
* 要做循环的时候，首先考虑for，如果for做不出来，那就选择用while var i=0;
while(i<5){
console.log(i);
i++;
}十、break与continue
* break
* 停止循环，剩下的循环就不会走了（break后的代码是不会执行的） for(var i=0;i<5;i++){
if(i==3){
break; //从3开始以后的循环就不走了，breadk后面的代码也不会执行
//找到自己想要的东西就不走了。
}
console.log(i); // 0.1.2
} * 停止循环，只不过它停止的是当次的循环，后面的循环还是会走
for(var i=0;i<5;i++){
if(i==3){
continue; //当循环到第3次的时候，这次的循环不会走，会跳到下一次的循环
//类似与排除的意思
}
console.log(i); //0.1.2.4.
}十一、进一步理解函数---函数类型
* 1、函数声明
* 语法
* function 函数名(参数){
* 要执行的代码
* }
* 调用
* 1、函数名(参数)
* 2、把函数声明变成函数表达式，在后加个一对小括号
* 把函数声明变成函数表达式的方法，在函数声明的前面加上+ - ! ~ () 1. function fn(name){
console.log(name);
}
fn(‘这是一个函数声明‘); 2.
!function fn5(){
console.log(‘这是第二个函数声明‘);
}(); 这里的小括号是不能换行的
2.1
(function fn5(){
console.log(‘这是第二个函数声明‘);
})(); * 2、函数表达式
* 语法
* var 变量=function(参数){
* 要执行的代码
* }
* 调用
* 1、变量(参数)
* 2、直接在后面加上一对小括号（不能换行到下一行写）
*
* 注意：函数表达式里的function后面如果有名字的话，在调用的时候是不能拿这个名字去调用 1. var fn2=function fn3(name){//这里的fn3是可以不写的。
console.log(name);
}
//fn3(‘这是一个函数表达式‘); //报错 注意：函数表达式里的function后面如果有名字的话，在调用的时候是不能拿这个名字去调用
fn2(‘这是一个函数表达式‘);
2. document.onclick=function(){
console.log(‘documnet点击了‘);
};
document.onclick(); 3. //函数表达式的另一种调用方式
var fn4=function(){
console.log(‘这是第二个函数表达式‘);
}(); //函数表达式可以直接在后面加上一个小括号就能调用十二、函数进一步理解---函数参数
* 函数参数
* 从函数外面向里面传数据，在函数里可以接收到这些数据，并且能够使用它它。这些数据就叫参数
* 参数是放在小括号里，可以放0个或者多个，每个参数用逗号隔开
*
* 1、形参
* 形式上的参数，在函数声明的小括号里
* 形参的值是由实参决定的
* 2、实参 (也具备数组的特性，arguments)
* 实际上的参数，放在了函数调用的小括号里
* 实参必需与形参一一对应，在调用函数的时候，要把实参传够数量。如果有一个实参没有传，那它的值就是undefined
*/
function person(name,age){
/*var name=undefined;
var age=undefined;*/
//形参实际上是在函数里声明的变量，变量的初始值是undefined。在函数调用的时候，传实参的时候会把初始值给改了真实的值
var name=‘kaivon‘;
var age=2;
console.log(name,age);
} person(‘kaivon‘,20);
十三、arguments
* arguments对象
* 代表了所有的实参集合（类数组）
* 这个集合中的每个数据都有一个自己对应的下标
* 这个集合还有一个length，代表了实参的个数
* 它只能在函数内使用,是局部作用域
*/
//形参不写，也不会影响实参 function add(){
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
console.log(result);
}
add(12,37); 最终的结果是49，但是这个运算结果不会输出，因为没有return
十四、函数运算结果--return
* return
* 1、返回函数的运算结果
* return 值（值要和return在同一行）
* 如果说函数里有return,那这个函数的返回结果就是return后的值（运算后的结果）
* 如果函数里没有return，那这个函数的返回结果就是undefined
* 2、阻止函数继续运行
* return 后面的代码是不会执行的 var btns=document.querySelectorAll("input[type=button]");
var texts=document.querySelectorAll("input[type=text]");
function add(){
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i];
}
return result; //需要的值要和return在同一行
alert(1); //这里是弹不出，因为放在了return后面。
}
btns.onclick=function(){
texts.value=add(123,25,7) ; //如果上面没有return，那么点击出现的是undefined
}; <input type="button" id="" value="按钮一" />
<input type="text" id="" value="" />
十五、函数内修改css
getComputedStyle 获取计算后的样式集合
function css(){
if(arguments.length==2){
//说明现在传了两个参数，获取元素的属性值
//arguments[0] box
//width arguments[1]
return getComputedStyle(arguments[0])[arguments[1]];
} //获取box属性下height的值
if(arguments.length==3){
//说明现在传了三个参数，设置元素的属性值
arguments[0].style[arguments[1]]=arguments[2];
}
}
console.log(css(box,‘height‘));
css(box,‘height‘,‘300px‘);十六、作用域
变量戓者函数可访问的一个范围，以函数来划分，一个函数块就是一个作用域
一、全局作用域
* 全局：整个文档
* 变量或者函数在函数外面声明，那它们就是全局变量和全局函数
* 全局的作用范围是整个文档，在这个页面任何地方都可以访问到它们
* 声明全局作用域的方法
* 1、所变量或者函数放在函数外面声明
* 2、变量不用var声明，直接给变量赋值
* 不管它在函数内声明，还是在函数外声明
*
* 之所以全局变量在任何地方都可以访问到，是因为全局变量它是window下的属性
* window是一个全局对象，它本身在页面中任何位置都可以用，所以说全局变量可以在任何地方用
*
* 注意：尽量避免使用全局变量，声明变量的时候一定要加var 二、局部作用域
* 局部作用域
* 局部：函数范围
* 变量或者函数是在函数内部声明的，它们的作用仅存在于声明的这个函数里
* 函数（函数声明，不是函数调用）可以嵌套的，嵌套的函数（局部函数）可以访问父函数里的内容
* 声明局部作用域的方法
* var 变量
* function 函数名(){}
*
* 注意：局部变量与局部函数只能在声明它们的地方用，在其它的地方是用不到的十七、作用域链
* 变量与函数的查找规则
*
* 查找规则
* 如果一个函数需要用到一个变量，那它会先在自己的作用域里去找这个变量。如果自己有那它就直接使用自己的，如果自己没有，那它就会一层一层往外找，直到找到外面的变量，找到后就用外面的变量
*
* 注意：作用域链会一层一层往外找，不会往里面找(儿子能找到爸爸的，但是爸爸不会找儿子的) var b=15;
function fn3(){
function fn4(){
function fn5(){
//console.log(c); //报错，因为只会往上面找
function fn6(){
var c=28;
console.log(b); //15
}
fn6();
}
fn5();
}
fn4();
}
fn3();第二章
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。