javascript运算符语法概述

于继海      2022-02-13     586

关键词:

前面的话

  javascript中的运算符大多由标点符号表示,少数由关键字表示,它们的语法言简意赅,它们的数量却着实不少。运算符始终都遵循着一些固定语法,只有了解并掌握这些内容,才能正确使用运算符。本文将主要介绍javascript运算符语法概述

 

操作数个数

  javascript的运算符总共有46个,如果根据其操作数的个数进行分类,则大多数是二元运算符(binary operator),它们的操作数都是两个,它们将两个表达式合并成复杂表达式

1 + 2;
true || false;

  javascript中的一元运算符(unary operator)将一个表达式转换为另一个稍复杂的表达式,主要包括以下9个:

++ -- - + ~ ! delete typeof void
a++;
typeof true;

  javascript只有一个三元运算符(ternary operator),是条件判断运算符?:,它将三个表达式合并成一个表达式

2>1 ? 2 : 1;

 

优先级

  运算符优先级控制着运算符的执行顺序,优先级高的运算符的执行总是先于优先级运算符低的运算符

  46个运算符总共分为14级的优先级,从高到低依次是:

技术分享
1  ++ -- - + ~ ! delete typeof void
2  * / %
3  + -
4  << >> >>>
5  < <= > >= instanceof in
6  == != === !==
7  &
8  ^
9  |
10 &&
11 ||
12 ?:
13 = *= /= %= += -= &= ^= |= <<= >>= >>>=
14 ,
技术分享

  由这14级的运算符优先级等级可以看出:

一元运算符  > 算术运算符 > 比较运算符 > 逻辑运算符 > 三元运算符 > 赋值运算符 > 逗号运算符

  [注意]逻辑取反运算符属于一元运算符,其优先级最高

例子

!2<1&&4*3+1;

  像上面这种情况就比较复杂,逐步来分解其运算顺序

  先计算一元运算符!,!2;//false

//于是表达式变为
false < 1 && 4*3 + 1;

  计算算术运算符4*3+1;//13

//于是表达式变为
false < 1 && 13;

  计算比较运算符<,false<1;//true

//于是表达式变为:
true && 13;//13

  可以使用圆括号来强行指定运算次序

2+3*5;//17
(2+3)*5;//25;

 

结合性

  运算符具有两种结合性,一种是从左向右结合,记号为L,一种是从右向左结合,记号为R。结合性指定了在多个具有同样优先级的运算符表达式中的运算顺序

  多数运算符都具有从左向右的结合性,只有一元运算符、条件运算符和赋值运算符具有从右向左的结合性

w = x + y + z;
//等价于:
w = ((x + y)+ z);
w = x = y = z;
//等价于:
w = (x = (y = z));
q = a ? b : c ? d : e ? f : g;
//等价于:
q = a ? b : (c ? d : (e ? f : g));    

  运算符的优先级和结合性决定了它们在复杂表达式中的运算顺序,但子表达式相互有影响时,顺序会发生变化

例子

a = 1;
b = a++ + a-- * a++;

  先分析该表达式中,根据优先级的顺序,分别运算递增运算符、乘法运算符、加法运算符和赋值运算符

  先计算第一个a++;//结果为1,a为2

//表达式变成
b = 1 + a-- * a++;

  计算a--;//结果为2,a为1

//表达式变成
b = 1 + 2 * a++;

  计算第二个a++;//结果为1,a为2

//表达式变成
b = 1 + 2 * 1;

  所以,最终a = 2; b = 3;

a = 1;
b = a++ + a-- * a++;
console.log(a,b);//2 3
//类似地
a = 1;
b = a-- * a++ + a++;
console.log(a,b);//2,1

 

类型

  一些运算符可以作用于任何数据类型,但仍然希望它们的操作数是指定类型的数据,并且大多数运算符返回一个特定类型的值,在下面的运算符规则表中,箭头前为运算符操作数的类型,箭头后为运算结果的类型

【左值】

  左值(lvalue)是一个古老的术语,指表达式只能出现在运算符的左侧

  在javascript中,变量、对象属性和数组元素都是左值

  递增运算符++、递减运算符--和赋值运算符的操作数类型是左值

var a = 3;
a++;//3
3--;//报错
({}).a += ‘1‘;//‘undefined1‘
‘test‘ -= ‘test‘;//报错

 

运算符规则表

技术分享
运算符             操作                 类型
++ 增量 lval->num -- 减量 lval->num - 求反 num->num + 转换为数字 num->num ~ 按位求反 int->int ! 逻辑非 bool->bool delete 删除属性 lval->bool typeof 检测类型 any->str void 返回undefined any->undef ****************************************************** * % 乘、除、求余 num,num->num ****************************************************** + - 加、减 num,num->num + 字符串连接 str,str->str ****************************************************** << 左移位 int,int->int >> 有符号右移位 int,int->int >>> 无符号右移位 int,int->int ****************************************************** < <= > >= 比较数字顺序 num,num->bool < <= > >= 比较字母表顺序 str,str->bool instanceof 测试对象类 obj,func->bool in 测试属性 str,obj->bool ****************************************************** == 判断相等 any,any->bool != 判断不等 any,any->bool === 判断恒等 any,any->bool !== 判断非恒等 any,any->bool ****************************************************** & 按位与 int,int->int ****************************************************** ^ 按位异或 int,int->int ****************************************************** | 按位或 int,int->int ****************************************************** && 逻辑与 any,any->any ****************************************************** || 逻辑或 any,any->any ****************************************************** ?: 条件运算符 bool,any,any->any ****************************************************** = 赋值 lval,any->any *= /= %= += -= &= 运算且赋值 lval,any->any ^= |= <<= >>= >>>= ****************************************************** , 忽略第一个操作数, any,any->any 返回第二个操作数
技术分享

 

参考资料

【1】 阮一峰Javascript标准参考教程——运算符 http://javascript.ruanyifeng.com/grammar/operator.html#toc29
【2】《javascript权威指南(第6版)》第4章 表达式和运算符



初识js基本语法.基本运算符

JavaScript概述JavaScript的历史1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)Netscape(网景)接收Nombas的理念,(BrendanEich)在其NetscapeNavigator2.0产品中开发出一套livescript的脚... 查看详情

typescript的初认识(代码片段)

TypeScript概述JavaScript概述TypeScript概述TypeScript特点语言特性安装解析TS的工具包原因安装第一个TS文件注释概念:两种形式:单行注释和多行注释输出语句作用代码变量概念使用类型注解变量的命名规则规范数据类型概述基本数据类... 查看详情

javascript递增和递减运算符

JavaScript前文回顾: 认识JavaScript到初体验JavaScript注释以及输入输出语句JavaScript变量的使用、语法扩展、命名规范JavaScript数据类型简介以及简单的数据类型JavaScript获取变量数据类型JavaScript运算符&算数运算符一、递增和... 查看详情

typescript的初认识(代码片段)

TypeScript概述JavaScript概述TypeScript概述TypeScript特点语言特性安装解析TS的工具包原因安装第一个TS文件注释概念:两种形式:单行注释和多行注释输出语句作用代码变量概念使用类型注解变量的命名规则规范数据类型概述基本数据类... 查看详情

unit04:javascript概述javascript基础语法流程控制

    Unit04:JavaScript概述、JavaScript基础语法、流程控制    my.jsfunctionf3(){alert("唐胜伟");}demo1.html 演示点击按钮,弹出提示框<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttit 查看详情

javascript之基础-1javascript(概述基础语法)

一、JavaScript概述JavaScript概念 -JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言 - JavaScript解释器作为JS脚本的运行环境,有如下两种呈现方式   -独立安装的JavaScript解释器;   -嵌入在... 查看详情

javascript之------基本运用语法(变量运算符语句)(代码片段)

JS(JavaScript)一、JavaScript的历史故事1、JavaScript语言与名称的由来(Netscape,Sun Java)2、微软的Explorer和JScript二、JavaScript概述JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,... 查看详情

javascript基础语法(代码片段)

目录运算符条件判断循环JS断点调试传送门——> JavaScript基础语法(一)、JavaScript之数组与函数(三)、JavaScript之对象(四)、JavaScript阶段二之WebAPIs运算符运算符(operator)也被称为操作符,是用于... 查看详情

javascript概述及基础知识点(变量,常量,运算符,数据类型)

JavaScript概述1.1什么是JavaScript:  javaScript(简称js),是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各... 查看详情

Javascript三元运算符语法不理解[重复]

】Javascript三元运算符语法不理解[重复]【英文标题】:Javascriptternaryoperatorsyntaxnotunderstood[duplicate]【发布时间】:2016-09-0523:47:24【问题描述】:我想明白这一点,有人可以写成(if/else/elseif)语句???lists[list===\'todo\'?\'done\':\'tod... 查看详情

javascript之ajax-3xml语法(xml概述基本语法)

一、XML概述XML概述 -XML是可扩展标记语言(eXtensibleMarkupLanguage) -XML是一种标记语言,类似于HTML -XML的设计宗旨是传输数据,尔非现实数据 -XML的标签没有被预定义,需要自行定义 -XML是W3C的推荐标准XML用途 -XML... 查看详情

10月30日--javascript语法

1、基本数据类型:字符串、小数、整数、日期时间、布尔型等。2、变量:【var】定义变量:vara;所有变量定义都用var定义,var是通用的可变类型。3、类型转换:转为整数:parseInt();  转为小数:parseFloat();4、运算符:数学运... 查看详情

前端——javascript基础语法

目录 引入JS的方式内部方式——直接写在页面中外部方式 基本语法注释输入输出语句变量和常量原始数据局类型typeof算数运算符&赋值运算符&比较&逻辑运算符数组  函数是增强用户体验,可以交互的语言 引入JS... 查看详情

1.js基础语法

1.Js基础语法1.数据类型JavaScript不区分整数和浮点数,统一用Number表示NaN;//NaN表示NotaNumber,当无法计算结果时用NaN表示Infinity;//Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity 2.比较运算... 查看详情

js概述

?????从Asp.NET跨越到JavaScript。这既是一个新的领域也是一个非常熟悉的地方,新是由于不知道什么是JavaScript,首先来了解一下什么是JavaScript。????JavaScript是一种具有面向对象能力的、解释型的程序设计语言,看了这句话还是不太... 查看详情

javascript基础语法(代码片段)

文章目录JavaScript与C++的相同点输出数据类型用var、let、const声明变量字符串运算数组数组操作函数函数语句对象JavaScript与C++的相同点注释方式、语句以分号结尾、变量赋值、自增自减、逻辑运算符,if语句、switch... 查看详情

javascript的基本语法数据结构

本篇学习资料主要讲解javascript的基本语法、数据结构   无论是传统的编程语言,还是脚本语言,都具有数据类型、常量和变量、运算符、表达式、注释语句、流程控制语句等基本元素构成,这些基本元素构成了变成... 查看详情

javascript的基本语法数据结构

本篇学习资料主要讲解javascript的基本语法、数据结构   无论是传统的编程语言,还是脚本语言,都具有数据类型、常量和变量、运算符、表达式、注释语句、流程控制语句等基本元素构成,这些基本元素构成了变成... 查看详情