JavaScript_4表达式和运算符

Posted on
Words count in article: 2.8k | Reading time ≈ 11

写在前面

  • 我是个Javascript的初学者。有很多地方写的不完善的，多多指教。
  • 内容主要来自老师的ppt，但是存在增删改
  • 我觉得只是听网课的话，走马观花的看一遍其实并不会留下多少印象，但是自己写点东西就会不一样
  • 所以在自己写的时候，可以做到一个信息过滤，将已经懂的，或者艰涩难懂的略去

js的表达式和运算符

4.2 对象和数组的初始化表达式

  • 对象和数组初始化表达式实际上是一个新创建的对象和数组
  • 数组初始化
1
2
[] 			//一个空数组
[1+2,3+4]	//拥有两个元素的数组

数组初始化表达式中的元素是可以嵌套的，（数组中的数组）

1
var matrix =[[1,2,3],[4,5,6]]//二维数组

数组初始化

  • JavaScript对数组初始化表达式进行求值的时候，数组初始化表达式中的元素表达式也都会各自计算一次
  • 数组直接两种的列表都好之间的元素可以省略，这是省略的空位会填充值undefined。但结尾处的单个逗号不会创建undefined元素
1
2
3
4
5
var myarray1 = [1,2,,,5];
myarray1[3];//显示为undefined
var myarray2 = [1,2,,,5,];
myarray2;
(5)[1,2,empty*2,5]//最后一个逗号后面不会从创立undefined元素
  • 对象初始化
1
2
3
var p = {x:2,y:1};	//一个拥有两个属性成员的对象
var q = {};			//一个空对象
q.x = 2 q.y = 1;	//q的属性成员和p的一样
  • 对象直接量也可以嵌套
1
var rectangle = { unpperleft :{x:2,y:2},lowerleft:{x:2,y:2}};
  • JavaScript对数组初始化表达式进行求值的时候，数组初始化表达式中的元素表达式也都会各自计算一次
1
2
3
var p = {x:2,y:1};
var side =1;
var square = {"upperLeft":{x:p.x,y:p.y},"lowerleft":{x:p.x+side,y:p.y+side}};

Map(补充)

1
2
3
4
5
//Map 是一组键值对的结构，具有极快的查找速度
//用map实现查找，只需要名字-成绩的对照表，直接根据名字查找成绩
//无论这个表多大查找速度都不会慢 o(1)
var m = new Map([['Michael',95],['Bob',75],['Tracy',85]]);
m.get('Micheal');//95
  • 初始化Map
    • 初始化Map需要一个二维数组，向上面一样，或者直接初始化一个空的Map
1
2
3
4
5
6
7
8
var m = new Map();
m.set('Adam',28);
m.set('Bob',21);
m.has('Adam');//是否存在Adam，返回true
m.get('Adam');//28
m.delete('Adam');
m.get('Adam')//undefined
//注意，多次对一个key放入value值，会覆盖！

++++

Set

  • 创建一个set
  • 通过数组作为输入创建，或者直接创建一个空的set
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var s2 = new Set([1,2,3]);
var s1 = new Set();
//注意：重复元素在Set中会自动被过滤，也就是说不会重复

//添加元素 add()
s.add(4);
s;//Set(1,2,3,4)
s.add(4)
s;//Set(1,2,3,4)

//删除元素delete（）
var s = new Set([1,2,3]);
s;//set{1,2,3};
s.delete(3);
s;//Set{1,2}

4.3 函数定义表达式

  • 函数定义表达式 定义一个JS函数，表达属的值就是这个新定义的函数
1
2
3
var square = function(x){
	return x*x;
}

4.4 属性访问表达式：得到一个对象属性或者一个数组元素的值

  • 可以通过方括号或者点的方法来访问
1
2
3
4
5
6
7
8
9
10
11
12
13
14
expression.indentifier
expression[expression]
//例子
var o = {x:1,y:{z:3}};
var a = {o,4,[5,6]};
o.x;		//表达式o.x的属性
o.y.z;		//表达式o.y 的z属性
o["x"];		//对象o 的x属性
a[1];		//表达式a中索引为1 的元素
a[2]["1"];	//表达式a[2]中索引为1 的元素
a[0].x;		//表达式a[0]的x属性
o.z			//z不是o的属性，所以为undefined

// . 的写法只适用于要访问的属性名称是合法的标识符，且要周到要访问的属性的名字

4.5 调用表达式

  • 执行过程：首先计算函数表达式，然后计算参数表达式，得到一组参数值

4.6 对象创建表达式

1
2
3
new Object();
new Point(2,3);
var date = new Date();

4.7 运算符概述

示例

示例

4.8 算术表达式

4.8.3位运算符

1
2
3
4
5
6
7
//按位与&
//按位或|
//按位异或^
//按位非~
//左移<<
//右移>>
//无符号右移>>>

4.9关系表达式

  • 关系运算符用于测试两个值之间的关系，返回true或false

4.9.1相等和不等运算符

1
2
3
4
== 相等
=== 严格相等
!= 不相等
!==不严格相等
严格相等运算符===
  • 值类型不同，则不相等
  • 两个值都是NULL或者都是undefined，则他们不相等
  • NaN和任何值都是不相等的，包括他的本身
    • 通过x!==x来判断x是否为NaN,只有在x是NaN的时候，这个表达式的值才是true
  • 一个值为0，另一个值为-0，则它们同样相等
  • 如果两个值为字符串，且所含的对应位上的16位数相等，则它们相等
  • 如果两个引用直指向不同的对象 ，这两个引用是不相等的
相等运算符==
  • 开两个操作数的类型相同，和上文所述的===比较规则一样
  • 两个操作数类型不同，那么将这样转换
    • 一个是NULL，一个是undefined，则它们相等
    • 数字与字符串相等比较，将字符串转换为数字，然后比较
    • true ，转换为1，false转换为0
    • 对象与数字或者字符串比较，使用转换规则将对象转换为原始值，然后再进行比较
    • 其他不同类型之间的比较均不相等
1
2
3
4
5
6
true == 1; //true;
true === 1; //false;
NaN === NaN; //false
isNaN(NaN);	//true;
1=="1";//true
1==="1"//false

4.9.2 比较运算符

  • 小于<

  • 大于>

  • 小于等于<=

  • 大于等于>=

比较运算符的操作数可能是任意类型。然而只有数字和字符串才能真正执行比较操作，因此那些不是数字和字符串的操作数都将进行类型转换

  • 非数字和字符串的操作数的类型转换规则：
    • 如果操作数为对象，那么这个对象先转换为原始值
    • 两个字符串，将依照字母表的顺序比较
      • 这里提到的“字母表顺序”指的是这个字符串的16位unicode字符的索引顺序
    • 如果至少有一个操作数不是字符串，那么这两个操作数都将转换为数字进行比较
      • 0于-0相等
      • Infinity 大于任何数字（除其本身）
      • -infinity小鱼人和数字（除其本身）
    • 若一种一个是（或者转换后）位NaN，返回false
1
2
3
4
5
6
7
8
9
10
//注意，数字和字符串比较是，更偏爱转换为数字
//只有在两个都是字符串时，才进行字符串的比较

1+2			//加法，结果是3
"1"+"2"		//字符串连接，结果是”12“
"1"+2		//字符串连接，2转换为“2”，结果是“12”
11<3		//数字比较false
"11"<3		//字符串比较true
"11"<3		//字符串比较，结果为 true
"one"<3		//数字的比较，“one”转换为NaN,return false

4.9.3 in运算符

1
2
3
4
5
6
7
8
9
10
var point = {x:1,y:1};	//定义一个对象
"x" in point 			//true 有一个x属性
"z" in poing			//false对象中不存在名为x的属性
"toString" in point		//true对象继承了toString()

//数组里的属性名其实就是他的index下标
var data =[7,8,9];		//一个数组
"0" in data				//true: 数组包含元素“0”
1 in data				//true: 数字转换为字符串
3 in data				//false：没有索引为3的
  • 至此，我们知道in运算符其实是判断一个对象（右值）中是否一个属性（左值）

4.9.4 instanceof 运算符

  • instanceof 运算符 左边是对象，右边是表示对象的 类
  • 如果左侧的对象是右侧类的实例，则表达式返回true，否则为false
1
2
3
4
5
6
7
8
9
var d  = new date();
d instanceof Date;		//true d 是date()创建的
d instanceof Object;	//true 所有对象都是Object实例
d instanceof Number;	//false d不是一个Number对象

var a =[1,2,3];
a instanceof Array;		//true
a instanceof Object;	//true
a instanceof RegExp;	//false 不是正则表达式

4.10 逻辑表达式

4.10.1 &&

  • 三层理解
    • 当操作数都是布尔值的时候，&&对两个值执行布尔操作
    • && 可以对真值和假值进行布尔操作，都是真值返回一个真值，否则返回假值
    • 先计算左操作数的值，如果是假值，那么整个表达式的结果一定是假值，这时简单的返回佐操作是的值，不会去计算右操作数，繁殖，则运行右操作数

4.10.2 ||

  • 不讲了

4.10.3 !

  • 不讲了

4.11 赋值表达式

  • 不讲了

4.12 表达式计算

  • eval()
  • 动态运行源代码中的字符串是一种强大的语言特性
  • 在爬虫项目中会用到、
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
eval ("console.log('Hello world!')")// 就是Hello world!  


var seedURL_format = "$('a')";
var keywords_format = " $('meta[name=\"keywords\"]').eq(0).attr(\"content\")";
var title_format = "$('title').text()";
var date_format = "$('#pubtime_baidu').text()";
var author_format = "$('#editor_baidu').text()";
var content_format = "$('.left_zw').text()";
var desc_format = " $('meta[name=\"description\"]').eq(0).attr(\"content\")";
var source_format = "$('#source_baidu').text()";

if (author_format == "") fetch.author = source_name; //eval(author_format);  //作者
else fetch.author = eval(author_format);

if (content_format == "") fetch.content = "";
else fetch.content = eval(content_format).replace("\r\n" + fetch.author, ""); //内容,是否要去掉作者信息自行决定

if (source_format == "") fetch.source = fetch.source_name;
else fetch.source = eval(source_format).replace("\r\n", ""); //来源

if (desc_format == "") fetch.desc = fetch.title;
else fetch.desc = eval(desc_format).replace("\r\n", ""); //摘要

4.13其他运算符

条件运算符，不讲

typeof 运算符，不讲

delete运算符

+ 一元操作符
+ 用来删除对象属性或者数组元素

void 运算符

  • 一元运算符，出现在操作数前，操作数可以是任意类型
  • 作用：操作数会照常计算，但虎落计算结果并返回undefined
  • 用处
    • 在操作数具有副作用的时候使用void 来让程序更具有语义
    • 这个运算符最常用在客户端的URL — javascript:URL中，在URL中可以写带有副作用的表达式，但是void则让浏览器不必显示这个表达式的计算结果
1
<a href = "javascript:void window.open();" >打开一个新窗口</a>

await 运算符，看不懂，暂时不讲

逗号运算符 ，

  • 二元运算符，他的操作数可以实任意类型
  • 首先计算左操作数，然后计算右操作数，最后返回右操作数的值
  • 最常用在for循环中
1
2
3
4
5
6
7
//for循环中的第一个逗号是var语句的一部分
//第二个逗号是逗号运算符
//他将两个表达式（i++,j--）放在一条（for循环中的）语句中
for(var i =0,j = 10;i<j;i++,j--)
{
	console.log(i+j);//返回10
}
-------------本文结束，感谢您的阅读-------------