第二章
Posted CafeMing
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二章相关的知识,希望对你有一定的参考价值。
一、JS数据类型<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();以上是关于第二章的主要内容,如果未能解决你的问题,请参考以下文章