前端JavaScript学习笔记二

前端JavaScript学习笔记二

1、操作符

1.1算数运算符

运算符	描述	例子	结果
+	加法	var num = 1 + 2;	3
-	减法	var num = 4 - 3;	1
*	乘法	var num = 4 * 3;	12
/	除法	var num = 6 / 3;	2
%	取余	var num = 7 % 3;	1

• 正常的数据运算

var num1 = 8;
var num2 = 4;

console.log(num1 + num2); //12
console.log(num1 - num2); //4
console.log(num1 / num2); //2
console.log(num1 * num2); //32
console.log(num1 % num2); //0

• 进行数据运算时，除’+‘外，其他运算符可以自动将字符串数字隐形转成数字

var num1 = '8';
var num2 = '4';

console.log(num1 - num2); //4
console.log(num1 / num2); //2
console.log(num1 * num2); //32
console.log(num1 % num2); //0

1.2一元运算符

JavaScript中有8种常用的一元运算符

运算符	描述
+	将操作数转换成数字，字符串的拼接
-	将操作数转换成数字，同时变为负数
!	逻辑取反运算符
++	递增
–	递减
delete	删除数组或对象中特定索引的值
typeof	操作数放到typeof的后面，会返回当前操作数的类型，对于数值类型可以准确返回，对于引用类型，Function会返回’function’，其他都只会返回’object’
void	void 运算符对任何值返回 undefined。

+（正数）

1、’+‘的第一种用法：进行数据相加

2、’+‘放在数据前面，就是取正数

3、’+‘与字符运算时，就是字符的连接符

4、’+‘可以将数字字符串或布尔类型等隐式转换成number类型

var a = '123';
var b = true;
console.log(+a, +b); // 123  1

-（负号）

1、负号可以对数字进行取负，其他运算符不能转换

2、负号可以将字符串数字隐式转换成数字

！（取反）

经常被用作条件判断时的取反操作，类型判断等，还可以用“ ！”将变量转换为Boolean类型

var a;
if (!a) {}
console.log(!null);  //true
console.log(!undefined);  //true
console.log(!''); //true
console.log(!100);  //false
console.log(!'abc');  //false

++（递增）

通常用于循环语句，动画操作等。

++放在前面，并进行赋值：先累加，后赋值

var num = 0;
var a = ++num;
console.log(a); // 1
console.log(num); // 1
//num先自加1，再赋值给a

++放在后面，并进行赋值：先赋值，后累加

var num = 0;
var a = num++;
console.log(a); // 0
console.log(num); // 1
//先把num的值赋值给a，num再自加1

–（递减）

用途和使用方法与++类似

delete

删除数组或对象中特定索引的值

var obj = {
  name:'zhangsan',
  age: 17
};
delete obj.name;
console.log(obj); // {age: 17}

var arr = [1,2,3,4,5];
delete arr[2];
console.log(arr); //[ 1, 2, <1 empty item>, 4, 5 ]

typeof

操作数放到typeof的后面，会返回当前操作数的类型，对于数值类型可以准确返回，对于引用类型，Function会返回’function‘，其他都只会会返回’object‘

var obj = {
  name:'zhangsan',
  age: 17
};
var arr = [1,2,3,4,5];
console.log(typeof obj, typeof arr); //object object

void

丢弃表达式的返回值，而返回undefined

使用方式有：void表达式、void（表达式） 两种

1.3赋值表达式

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

=：向变量赋值

+=：向变量添加值

-=：从变量中减去一个值

*=：相乘变量

/=：对变量相除

%=：把余数赋值给变量

1.4比较运算符

比较运算符在逻辑语句中使用，以判定变量或值是否相等。通常用于条件判断语句中。

比较运算符的优先级低于算数运算符，高于赋值运算符运算结果一般都为Boolean

运算符	描述	比较	返回
==	等于	x == 8	false
		x == 5	true
		x == “5”	true
===	值相等并且类型相等	x === 5	true
		x === “5”	false
!=	不相等	x != 8	true
!==	值不相等或类型不相等	x !== 5	false
		x !== “5”	true
		x !== 8	true
>	大于	x > 8	false
<	小于	x < 8	true
>=	大于或等于	x >= 8	false
<=	小于或等于	x <= 8	true

==

等同的意思，两边值类型不同的时候，要先进行类型转换为同一类型后，再比较值是否相等

// 常用于相同类型的值的比较
console.log(123 == 345);  //false
console.log('123' == '345');  //false
// 如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较
// 如果一个是null，一个是undefined，那么相等
console.log(null == undefined); //true
// 如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
console.log(123 == '123');  //true
//如果是整数类型和boolean类型的数值进行比较，1和true使用==比较结果为true，0和false使用==比较结果也为true，其它都为false；可以理解记忆为使用==比较整数时将1等同true，将0等同false。
console.log(1 == true); //true
console.log(0 == false);  //true

===

恒等的意思，不做类型转换，类型不同的结果一定不等。

// 如果类型不同，就一定不相等
console.log(123 === '123'); //false
// 如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN() 来判断）
console.log(123 === 123); //true
console.log(123 === 10 / 'a');  //false
// 如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
console.log('hello' === 'hello'); //true
// 如果两个值都是true，或是false，那么相等
console.log(true === true); //true
console.log(1 === true);  //false
// 如果两个值都是null，或是undefined，那么相等
console.log(null === null); //true
console.log(null === undefined);  //false

== 和 ===的区别

双等表示只要值相等即可为真，而三等则要求不仅值相等，而且也要求类型相同。

建议：尽量使用严格运算符三等。因为双等不严谨，可能会带来一些违反直觉的后果。

注意：

1、对于string，number等基本数据类型，双等和三等是有区别的

1、不同类型间比较，双等之间比较“转化为同一类型后的值”，看“值”是否相等，===如果类型不同，其结果就是不等

2、同类型比较，直接进行“值”比较，两者结果一样

2、对于Array,Object等高级类型，双等和三等是没有区别的

进行“指针地址”比较

3、基础类型与高级类型，双等和三等是有区别的

1、对于==，将高级转化为基础类型，进行“值”比较

2、因为类型不同，===结果为false

!=

!=和==用法类似 比较若类型不同，先尝试转换类型，再作值比较，最后返回值比较结果。

!==

!== 和=== 用法类似，只有在相同类型下，才会比较其值。

’>‘和’<‘大于和小于

var a = 10;
var b = 20;
console.log(a > b); //false
console.log(a < b); //true

'>='和’<=‘大于等于和小于等于

var a = 10;
var b = 20;
console.log(a >= b); //false
console.log(a <= b); //true

1.5逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	````(x==5
!	not	!(x==y) 为 true

&& 与 （同真为真，有假则假）

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

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

console.log(null && 'world'); //null

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

console.log('hello' && 'world'); //world

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

console.log(false && 'world'); //false

null,NaN,undefined,false,0,"",直接返回该操作数

console.log(''&&123);  //''  空字符串
console.log(0&&null);  //0
console.log(123&&345); //345
console.log(123&&undefined); //undefined

|| 或 （有真才真，同假为假）

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

console.log(null || false); //false

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

console.log(null || 'hello'); //'hello'

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

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

如果第一个操作数为假，整个表达式的结果取决于第二个表达式，返回第二个表达式

有一个为true结果就为true，同时为false结果才为false

!(NOT)

经常被用作条件判断时的取反操作，类型判断等，还可以用’!'将变量转换Boolean类型

var a;
if (!a) {}
console.log(!null);  //true
console.log(!undefined);  //true
console.log(!''); //true
console.log(!100);  //false
console.log(!'abc');  //false

2、类型转换

2.1 *=>字符串类型

其他类型转换String

toString()函数

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

var a = true;
var b = 123;
console.log(a.toString(), b.toString());// 'true'  '123'
console.log(typeof a.toString(), typeof b.toString());//string string

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

var num = 10;
console.log(num.toString());  //"10"
console.log(num.toString(2))	//"1010"
console.log(num.toString(8))	//"12"
console.log(num.toString(16))	//"a"

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

console.log(typeof (true + ''));  //string

2.2 *=>布尔类型

其他数据类型转换为Boolean

Boolean()包装器

Boolean('hello') //true

使用!!转换任意其他数据类型都可以转换为Boolean

!!'hello' //true

2.3 *=>数字类型

其他数据类型转换为Number

Number()包装器

如果转换的值是null，undefined，Boolean，number

Number(true); //1
Number(false); //0
Number(null); //0
Number(undefined); //NaN
Number(10); //10 如果是数字值,原样输出

如果转换的值是string

Number("123"); //123  如果仅包含数值，转换为对应的数值
Number("234.1"); //234.1 解析为对应的小数 
Number("+12.1"); //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;

+

+"23"                    //23
+null                    //0
+undefined               //NaN

3、流程控制语句

3.1 if…else语句

条件语句

​ 条件语句用于基于不同的条件来执行不同的做动作

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码

if (condition)
{
    当条件为 true 时执行的代码
}

if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

if (condition1)
{
		statement1
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
		statement2
    当条件 2 为 true 时执行的代码
}
else
{
		statement3
  	当条件 1 和 条件 2 都不为 true 时执行的代码
}

3.2 switch语句

switch 语句 - 使用该语句来选择多个代码块之一来执行

switch(n){    
    case 1:        
        执行代码块 1        
        break;    
    case 2:        
        执行代码块 2        
        break;    
    default:        
        与 case 1 和 case 2 不同时执行的代码
}

注意：

​ 1、case代码块中break不能省略

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

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

3.3 循环语句

循环可以将代码块执行指定的次数

for - 循环代码块一定的次数

for (*语句 1*; *语句 2*; *语句 3*)
{
  *被执行的代码块*
}
for (var i=0; i<5; i++)
{
    console.log(i);
}

for/in - 循环遍历对象的属性

for(自定义变量名 in 数组/对象){
    
	执行代码
}

while - 当指定的条件为 true 时循环指定的代码块

while (*条件*)
{
  *需要执行的代码*
}
while (i<5)
{
    console.log(i);
    i++;
}

do/while - 同样当指定的条件为 true 时循环指定的代码块

do
{
    需要执行的代码
}
while (条件);

注意：

​ 1、case代码块中break不能省略

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

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

3.3 循环语句

循环可以将代码块执行指定的次数

for - 循环代码块一定的次数

for (*语句 1*; *语句 2*; *语句 3*)
{
  *被执行的代码块*
}
for (var i=0; i<5; i++)
{
    console.log(i);
}

for/in - 循环遍历对象的属性

for(自定义变量名 in 数组/对象){
    
	执行代码
}

while - 当指定的条件为 true 时循环指定的代码块

while (*条件*)
{
  *需要执行的代码*
}
while (i<5)
{
    console.log(i);
    i++;
}

do/while - 同样当指定的条件为 true 时循环指定的代码块

do
{
    需要执行的代码
}
while (条件);