js基础内容2

1. 操作符

1. 算术运算符

一元运算符

 递增递减操作符

++表示每次递增1，--表示每次递减1。常用于遍历操作，比如要遍历某个数组，求所有值的和，需要将数组中的每个值逐个取出叠加，每次取值的时候都需要将索引递增1。

var a = 3;

a++;  //加完后a=4      

a--;  //减完后a=3

++a;

--a;

后置++，--，先使用a，后++，--

前置++，--，先++，--，再使用a

赋值运算符

单个=表示赋值，将右侧的值赋给左侧的变量。

可以和其他算术运算符连用，常用的有*=，/=，%=，+=，-=  

var a = 4;

a+=3;  //a = a + 3;

一元运算符

加 +

相当于调用Number()，将其他数据类型转换为number类型

减 -

将一元减应用于数值时，数值会变成负数。

将一元减应用于非数值时，遵循与一元加操作符相同的规则，最后将得到的数值转化为负数

vi opera.js

允许非number类型的操作数进行运算，在运算之前，一般需要先将其他数据类型转换为数字类型再进行运算，当操作数中出现了字符串，则变成了字符串拼接操作。

当算术运算时有一个为对象，如果该对象既重写toString,又重写了valueOf方法，先调用valueOf方法获取返回值，将该返回值和另外一个操作数进行运算。如果该对象没有重写valueOf方法，将调用toString方法获取返回值，将该返回值和另外一个操作数进行运算。

算术运算符 ->数值->数值

->Boolean(true:1,false:0),null(0)->数值

->字符串/引用类型/undefined(拼接字符串)->字符串

• • +、+=

• • -、-=

• • *、*=

• • /、/=

• • %、%=

var a = 3 + 2;     //5

var b = 4 + true;  //5

var c = 1;

c+= a;             // c = c + a

var r1=100/3;

console.log(r1);//不是整除

console.log(parseInt(r1));

var a = 5/2 ;     //2.5

var a = 5%2;      //1

var a = 12;

var result = 1+ --a;

//var result = 1+ a--;

console.log(result);

console.log(a);

//笔试题：请预测结果

var a = 10;

var b = a++;  //b10  a11

var c = ++a;  //c12  a12

var d = --a;  //d11  a11

var e = a--;  //e11  a10

console.log(a,b,c,d,e);  //10 10 12 1

var a = "123";

// console.log(+a); //Number()

console.log(-a);

var b = 123;

// console.log(+b);

console.log(-b);

console.log(+'123');  //123

console.log(+'hello');  //NaN

console.log(+'123a');  //NaN

console.log(+'12.3');   //12.3

console.log(+'12.3.4'); //NaN

console.log(+'016');  //16  不识别8进制，识别成10进制

console.log(+'0xaa'); //170  //识别16进制

console.log(+' 123');  //123

console.log(+'12 3');  //NaN

console.log(+' 123 ');  //123

console.log(+'');   //0

console.log(+' ');  //0

//将boolean使用+转换成number

console.log(+true); //1

console.log(+false);  //0

console.log(+undefined);  //NaN

console.log(+null);   //0

var obj = {

  name:"briup",

  valueOf:function(){

  return "1";

  }

}

console.log(obj+1);//"11"

1. 比较运算符

优先级低于算术运算符，高于赋值运算符

运算结果一般都为boolean

• • >

• • >=

• • <

• • <=

• • ==、!=

当比较基本数据类型的时候比较值，当值的类型不一致时候，先将其转换为一致再进行比较

当比较引用数据类型的时候比较引用地址

var a = 3;

var b = "3";

a == b;     //true

var c = {};

var d = {};

c == d;    //false

• • ===、!==

当比较基本数据类型的时候比较值，值的类型不一致时候返回false，值的类型相同再对比值

var a = 3;

var b = "3";

a === b;  //false

问：如何比较两个对象的属性是否一致?

   1. 先将对象序列化为json字符串

   2. 对json字符串进行对比

1. 逻辑运算符（短路运算符）

逻辑运算符

 逻辑与&&(同真才真，有假则假)

可应用于任意数值。如果有一个操作数不是布尔类型，逻辑与就不一定返回boolean类型

如果第一个操作数是null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值

如果第一个数为真，返回第二个数  

var s1 = 8;   

var s2 = "briup";   

var s3 = "";   

var result = s1 && s2; //briup   

var result2 = s3 && s2; //空字符串

逻辑或 ||(有真则真，同假才假)

如果两个操作数都是null,NaN,undefined,false,0,""可被转换为false的值的时候返回该值

如果第一个操作数是null,NaN,undefined,false,0,"" 则返回第二个操作数

如果第一个操作数是真，直接返回第一个操作数。

非（NOT）

该操作符应用任何类型数值都返回一个【布尔值】。先将任意类型的数值转换为Boolean，然后取反

!a ==> !Boolean(a)

!0  //true

!""  //true

!NaN //true

!false //true

连用两次逻辑非 ，就可以将任意数据类型转化为Boolean类型

!!a ==> Boolean(a)

!!"" //false

操作数不仅可以为boolean，也可以为其他数据类型，返回值不一定是boolean类型

• • &&

当第一个表达式为真，整个表达式的结果取决于第二个表达式，返回第二个表达式

当第一个表达式为假，整个表达式的结果就可以确定，返回第一个表达式

同时为true结果才为true

短路操作：  false && 表达式 = false

第一个操作数不是Boolean类型，直接返回第二个操作数

第一个操作数是[null,NaN,undefined,false,0,""]直接返回该操作数

var a = "hello" && "world"    // "world"

var a = null && "world"        // null

console.log(''&&123);  //''  空字符串

console.log(0&&null);  //0

console.log(123&&345); //345

console.log(123&&undefined); //undefined

console.log(!!(123&&undefined));  //false

console.log(!!123&&undefined);  //undefined

• • ||

当第一个表达式为真，整个表达式的结果就可以确定，返回第一个表达式

当第一个表达式为假，整个表达式的结果取决于第二个表达式，返回第二个表达式

有一个为true结果就为true

同时为false结果才为false

短路操作： true ||  表达式 = true

第一个操作数是[null,NaN,undefined,false,0,""]->false,然后和第二个操作数进行运算获得结果

第一个操作数不是Boolean类型不是上面特殊的，直接返回第一个操作数

var a = "hello" || "world"    // "hello"

var a = null || "world"        // "world"

console.log(0||123);  //123

console.log(NaN||undefined); //undefined

console.log(123||345);   //123

console.log(123||undefined); //123

console.log(''||123);  //123

• • !

非，常用语将其他数据类型转换为boolean

[null,NaN,undefined,false,0,""]->false   !false=true

true,’aaa’,100,obj  ->true !true=false

var a = true;

!a;            // false

!!true;        //true

!!"hello"      //true

1. 三目运算符

三目运算符

variable = boolean_expression ? true_value : false_value;  

如果boolean_expression为true,将true_value赋给variable，否则将false_value赋给variable

例如：求任意两个数之间最大值     

function max(m,n){    

return m>n?m:n; //如果m>n为true返回m,如果m>n为false,返回n       

 }

exp1 ? exp2 : exp3

当exp1为真的时候，返回exp1，否则返回exp3

var age = 19;

var result = age > 16 ? "成年人":"未成年人";

if(age>16) var result="成年人";

else var result="未成年人";

console.log(result);

var a = 5;

10<20?a++:a--;

console.log(a);  //6

//求任意两个数之间最大值

function max(m,n){

  return m>n?m:n; //如果m>n为true返回m,如果m>n为false,返回n

}

注意：由于JS是弱类型，在进行运算的时候非常灵活。比如算术运算符不限于数字的运算、逻辑运算符不限于布尔类型的运算。

1. 逗号操作符

可以在一条语句中执行多个操作

       var num1=1,num2 = 2, num3 = 3;

1. 位运算（拓展）

原码、反码、补码

针对于数字类型的值进行运算，在运算之前先转换为二进制

按位与 &

按位或 |

按位异或 ^

问题：&& 与 &区别，|| 与|区别？

位运算常在机试中出现：1.软考；2.大厂：华为、阿里（校招）、字节跳动

笔试前需掌握100+道算法

1. 类型转换

	Number	Boolean	String	引用类型（数组、对象、函数）	null	undefined
èString	a.toString() a.toString(2) a.toString(8) a.toString(16) String(a) +“”	a.toString() String(a)		a.toString() String(a)	String(a)	String(a)
àBoolean	Boolean(a) !!a 0/NaN:false 其他：true		Boolean(a) !!a ‘’:false 其他：true	Boolean(a) !!a true	Boolean(a) !!a false	Boolean(a) !!a false
àNumber		Number(true);//1 Number(false);//0	Number("123");  //如果仅包含数值，转换为对应的数值 Number("234.1");//解析为对应的小数 Number("+12.1");//首位为符号位，其余为为数值，转换为对应的数值 Number("1+2.3");//NaN 符号位出现在其他位置，解析为NaN Number("0xa");  //如果仅包含十六进制格式，转为为对应的十进制的值 Number("010");//【注意！】不会当做八进制被解析，结果为10 Number(""); //空字符串被转换为0 Number("123ac");//包含其他字符： NaN parseInt() parseFloat()		Number(null); //0	Number(undefined); //NaN

1. * => 字符串类型

其他数据类型转换为String

toString()函数

除了null，undefined，其他三种基本数据类型的变量均有一个toString()函数，该函数可以获取该变量指定值的字符串表示。

var a= true;

a.toString(); //"true"

如果变量为number类型，默认情况下toString()是以十进制格式返回数值的字符串表示，通过传递参数，可以输入以二进制，八进制，十六进制乃至任意有效进制格式的字符串值

var num = 10;

num.toString();  //"10"

num.toString(2); //"1010"

num.toString(8); //"12"

num.toString(16); //"a"

String()函数  包装器，转换器

可以将其他任意基本数据类型的值转换为字符串，包括null，undefined

使用拼接空字符串进行转换    +""

任意其他数据与字符串相加都会转化为字符串

• • String(a)

• • a+""

String(true)      //'true'

true + ""          //'true'

1. * => 布尔类型

其他数据类型转换为Boolean

Boolean()包装器  或者使用!!转换

任意其他数据类型都可以转换为布尔类型。

Boolean	true	false
String	非空字符串	""
Number	任何非0	0/NaN
Object	任何对象	null
Undefined	不适用	undefined

任意其他数据类型都可以被转换为boolean类型

• • Boolean(a)

• • !!a

Boolean("hello")     //true

!!"hello"            //true

1. * => 数字类型

其他数据类型转换为Number

Number()包装器

如果转换的值是null,undefined,boolean,number

Number(true);  //1

Number(false);  //0

Number(null);  //0

Number(undefined);  //NaN

Number(10);  //10 如果是数字值,原样输出

如果转换的值是string

Number("123");   //如果仅包含数值，转换为对应的数值

Number("234.1"); //解析为对应的小数  

Number("+12.1"); //首位为符号位，其余为为数值，转换为对应的数值

Number("1+2.3"); // NaN 符号位出现在其他位置，解析为NaN

Number("0xa");   //10 如果仅包含十六进制格式，转为为对应的十进制的值

Number("010"); //10【注意】不会当做八进制被解析，结果为10。

Number(""); // 0  空字符串被转换为0

Number("123ac"); // NaN 包含其他字符： NaN    

Number(“ 12 "); //12

parseInt()函数

如果转换的值是null,undefined,boolean，均转换为NaN

如果转换的值是Number

parseInt(10);  //10 如果是整数值，原样输出    parseInt(10.3);  //10 如果是小数，舍去小数点一级后面的内容

如果转换的值是string

parseInt("123");   //123；如果仅包含数值，转换为对应的数值

parseInt("234.1"); //234；小数点后面的数值省略

parseInt("+12.1"); //12； 首位为符号位，其余为为数值，转换为整数

parseInt("1+2.7"); //1； 符号位出现在其他位置，保留符号位前面的数值

parseInt("0xa");   //10； 如果仅包含十六进制格式，转为为对应的十进制的值

parseInt("010"); //10； 【注意】不会当做八进制被解析，结果为10

parseInt(""); //NaN；空字符串被转换为NaN

parseInt("1+2.3"); //1;如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获取的数值转换为Number返回    parseInt("123ac"); //123;

parseFloat()函数

如果转换的值是null,undefined,boolean，均转换为NaN

如果转换的值是Number

parseFloat(10); //10 如果是整数值，原样输出 parseFloat(10.1); //10.1 如果是小数，保留小数点，但是如果是10.0结果为10

如果转换的值是string

parseFloat("123"); //123；如果仅包含数值，转换为对应的数值

parseFloat("234.1"); //234.1；保留小数点后面的数值

parseFloat("+12.1"); //12.1； 首位为符号位，其余为为数值，转换为整数

parseFloat("1+2.6"); //1；符号位出现在其他位置，保留符号位前的数值

parseFloat("0xa"); //0； 【注意】不会当做十六进制来解析。

parseFloat("010"); //10； 【注意】不会当做八进制被解析，结果为10

parseFloat(""); //NaN；空字符串被转换为NaN

parseFloat("1+2.3"); //1;如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获取的数值转换为Number返回 parseFloat("123.3ac");//123.3;

经常需要将其他将一个字符串类型的数字转换为number类型的数字

• • Number(a)  转换函数

• • +a

• • -(-a)

• • parseInt(a)     将a转换为字符串后解析出整数

• • parseFloat(a) 将a转换为字符串后解析为小数

Number("23")            //23

Number(null)           //0

Number(undefined)       //NaN

+"23"                    //23

+null                    //0

+undefined               //NaN

parseInt("23.4abc")    //23

parseFloat("23.4abc")  //23.4

1. 特别注意

加法 +（m + n）

当m,n不为String,Object类型的时候，先将m,n转换为Number类型，然后再进行计算

  true + false;   //1；Number(true)+Number(false);

  true + 1;    //2；Number(true) + 1

  null + undefined;  //NaN；Number(undefined) -> NaN

当m,n有一个为String,无论另一个操作数为何（但不为对象）都要转换为String，然后再进行拼接

  "1" + true;  // 1true

  "1" + undefined; // 1undefined

  "1" + 1;  // 11

当m,n 有一个为对象，如果该对象既重写toString,又重写了valueOf方法，先调用valueOf方法获取返回值，将该返回值和另外一个操作数进行运算。如果该对象没有重写valueOf方法，将调用toString方法获取返回值，将该返回值和另外一个操作数进行运算。

  var o = {name:"briup",valueOf:function(){return "1";}}

  o+1;  //"11"  

默认情况下，ECMAScript会将小数点后带有6个零以上的浮点数转化为科学计数法。

0.0000003 => 3e-7

在进行算术计算时，所有以八进制十六进制表示的数值都会被转换成十进制数值。

保存浮点数需要的内存是整数的两倍，因此ECMAScript会不失时机将浮点转换为整数       

例如：          

var a = 1.;          

var b = 1.0; //都将解析为1  

避免测试某个特定的浮点数值，是使用IEEE754数值的浮点计算的通病

例如：

0.1+0.2 //结果不是0.3，而是0.30000000000000004

自行搜索资料解决问题：0.1+0.2的结果能是0.3

3.流程控制语句

流程控制：分支（条件）、循环

1. 分支语句

分支语句

if语句

condition表示任意表达式，该表达式求值的结果不一定是布尔类型，如果不是布尔类型，ECMAScript会调用Boolean() 转换函数将这个表达式结果转换为一个布尔类型 ，当该值为true时，执行if代码块中的内容。

if(condition){

code to run if condition is true

}

run some other code

 if-else语句

当condition为true时，执行if代码块中的内容，否则，执行else代码块中的内容，一般情况下，如果代码块中代码只有一行，可以省略大括号。

if(condition)   code to run if condition is true

else    run some other code instead

if-else if-else

多条件分支，当condition1为true时，执行statement1,否则当condition2为true时执行statement2，当condition1,condition2都为false的时候执行statement3。

If(condition1){

statement1

} else if(condition2){

statement2

} else {

statement3

}

语法：

exp0;

if(condition1){

//condition1==ture执行的exp1

}

exp2;//必然会执行的，第二个代码块

if(condition1){

//condition1==ture执行的exp1

}else{

//condition1==false执行的exp2

}

if(condition1){

//condition1==ture执行的exp1

}else if(condition2){

//condition1==false&& condition2==true执行的exp2

} else if(condition3){

//condition1==false&& condition2==false&& condition3==true

执行的exp3

}else{

//以上condition都为false

}

课堂示例：if-else.js

// 1壹   2贰  3叁  4肆  5伍

// 6陆   7柒  8捌  9玖   10拾

// 0零

function exchange(num){

if(num){

            //typeof num=='number' && 0<num and num<=10

if(0<num&&num<=10){

if(num==1){

result = "壹";

}else if(num==2){

result = "贰";

}else if(num==3){

result = "叁";

}else if(num==4){

result = "肆";

}else if(num==5){

result = "伍";

}else if(num==6){

result = "陆";

}else if(num==7){

result = "柒";

}else if(num==8){

result = "捌";

}else if(num==9){

result = "玖";

}else{

result = "拾";

}

}else{

result = "请输入不大于10的数字";

}

}else if(num==0){

result = "零";

}else{

result = "请输入数字";

}

console.log(result);

}

exchange(0);

exchange(3);

exchange(100);

exchange('a');

分支语句

 switch

expression可以是变量也可以是表达式，当expression===choice，执行当前case代码块的代码。每个case代码块都必须包含break; 表示执行完当前代码块的内容跳出switch代码块。当所有case不满足情况下，执行default代码块的内容。default位置可以随意

switch(expression){

case choice1:

run this code

break;

case choice2:

run this code

break;

//include as many cases as you like

default:

actually,just run this code

}

var day=3;

switch(day){

case 常量1:

代码块1;

break;

case 常量2:

代码块2;

break;

…….

default:

代码块n;

[break;]

}

day===常量1  ==》true 执行代码块1

day===常量2  ==》true 执行代码块2

…

代码块n

注意：

1. case代码块中break不能省略

2. default可以放到代码任意位置，break不能省略，最后位置可以省略break;

3. 变量与常量对比使用”===“

建议：

做等值比较的分支控制建议使用switch，非等值的判断建议使用If

举例说明：switch.js

function foo(num){

  switch(num){

   case 0:

   console.log('周日');

   break;

   case 1:

   console.log('周一');

   break;

   case 2:

   console.log('周二');

   break;

   case 3:

   console.log('周三');

   break;

   case 4:

   console.log('周四');

   break;

   case 5:

   console.log('周五');

   break;

   case 6:

   console.log('周六');

   break; ...

   default:

   console.log('输入错误');

  }

}

foo(1);

function workDay(num){

switch(num){

     case 1:

     case 2:

     case 3:

     case 4:

     case 5:

     console.log('工作日');

     break;

     case 0:

     case 6:

     console.log('休息日');

     break; ...

     default:

     console.log('输入错误');

}

}

workDay(0);

workDay(3);

workDay(100);

workDay('a');

//使用恒等于

var a=10;

switch(a){

case '10':console.log('aaa');break;

case 10:console.log('bbb');break;

}

switch(a=='10'){

case 10:console.log('bbb');break;

case '10':console.log('aaa');break;

case false:console.log(false);break;

case true:console.log(true);break;

}

var a=10;

switch(a){

case 10:console.log('aaa');

case 'a':console.log('bbb');

}

1. 循环语句

循环语句

一个循环语句应该具备三要素：计数器，循环结束条件，迭代器。

三要素：计数器、循环条件、迭代

初始化条件、结束判定条件、迭代（步长）

循环语句

 for 循环

Initializer，初始化值，一般为数字，仅会执行一次。也可以写到循环体外

exit-condition，结束条件，通常使用逻辑运算符进行结束循环判断。每次执行循环体之前均会执行该代码。

final-expression，每次执行完循环体代码后执行，通常用于迭代使其更加靠近结束条件。

for(initializer; exit-condition; final-expression){

//code  to  run

}

for(初始化条件;结束判定条件；迭代){

循环体内部的代码块;

}

for(;;){

   //当for中的表达式省略的时候，会创建一个死循环

  }

vi loop-for.js:

var result = 0;

for(var i=1; i<=3;i++){

    result += i;

}

/*过程如下：

var result = 0;

var i = 1;

i<=3 //true

result+=i //result = 1;

i++ //i = 2

i<=3 //true

result+=i // result = 3;

i++ // i=3

i<=3 //true

result+=i // result = 6;

i++ // i=4

i<=3 //false 结束

*/

// 1-100偶数和

var result = 0;

for(var i=0;i<=100;i++){

  if(i%2==0){

   result += i;

  }

}

console.log(result);

var result = 0;

for(var i=0;i<=100;i+=2){

  result += i;

}

console.log(result);

//变量作用域举例：

function add(a,b){

  var c=10;

  var d=a+b;

  return d;

}

//console.log(c);//error!

for(var  i=0;i<10;i++){

  console.log(i);

  var aa=100;

}

console.log(aa);//没有块级作用域，可以显示结果

ECMAScript不存在块级作用域，在循环内部定义的变量也可以在外部访问到

关键字 break

如果想在所有迭代前退出，即可使用break。当执行break后，会立即跳出循环体，执行下面的代码。

关键字 continue

与break不同的是，continue不会跳出循环。而是立即结束当前循环，进入下一次循环。

Label语句

使用label语句可以在代码中添加标签，以便将来使用  

label : for(int i=0;i<10;i++){   

if(i == 5){    

     break label;   

}

}

注意！ECMAScript5不存在块级作用域，在循环内部定义的变量也可以在外部访问到

for(var i=0;;i++){

  console.log(i);

  if(i==5){

    break;

  }

}

//label举例:

for(var i=0;i<10;i++){

  for(var j=0;j<10;j++){

      if(j==1) break;

      console.log(i);

      console.log(j);

    }

}

labelxx:for(var i=0;i<10;i++){

  for(var j=0;j<10;j++){

      if(j==1) break labelxx;

      console.log(i);

      console.log(j);

  }

}

循环语句

 while 循环

前测试循环语句，即在循环体内的代码被执行之前，就会对出口条件求值。因此，循环体内的代码有可能永远不会被执行

Initializer，初始化值条件

exit-condition，结束条件，通常使用逻辑运算符进行结束循环判断。每次执行循环体之前均会执行该代码。

final-expression，每次执行完循环体代码后执行，通常用于迭代使其更加靠近结束条件。

initializer;

while(exit-condition){

//code to run

final-expression

}

前置循环：

初始化条件;

while(结束判定条件){

循环体内部的代码块;

迭代

}

举例说明：

loop-while.js:

// 求1-100的和

var result = 0;

var i = 1;

while(i<=100){

result += i;

i++;

}

console.log(result);

循环语句

 do-while 循环

后测试循环语句，即只有在循环体中的代码执行之后，才会测试出口条件。循环体内的代码最少被执行一次。

Initializer，初始化值，一般为数字，仅会执行一次。

exit-condition，结束条件，通常使用逻辑运算符进行结束循环判断。每次执行循环体之前均会执行该代码。

final-expression，每次执行完循环体代码后执行，通常用于迭代使其更加靠近结束条件。

initializer;

do{

//code to run

final-expression

}while(exit-condition);

后置循环：

初始化条件;

do{

循环体内部的代码块;

迭代

}while(结束判定条件);

举例说明：

loop-do-while.js:

// 求1-100的和

var result = 0;

var i = 1;

do{

result += i;

i++;

} while(i<=100);

console.log(result);

增强版for循环：

for..in用于遍历数组或者对象的属性

for(自定义变量名 in 数组/对象){

执行代码

}

“自定义变量名”用来指定是数组的元素索引，也可以是对象的属性

for-in.js

//循环数组

var arr=[10,'aa',20,30,40];

for(var i=0;i<arr.length;i++){

  console.log(i+"--"+arr[i]);

}

for(var key in arr){

  console.log(key+"--"+arr[key]);

}

//循环对象属性：

var obj = {

  name:"briup",

  age:12,

  salary:10000

};

/*

两种方式访问属性：

objectName.propertyName

或者

objectName["propertyName"]

*/

console.log(obj.name);

console.log(obj["age"]);

console.log(obj.salary);

for(var key in obj){

  console.log(key+"--"+obj[key]);

}