JavaScript学习-运算符

简介: 运算符



补充内容

undefined

①获取一个对象的某个不存在的属性时,会返回undefined

var obj={
     name:'king'
};
console.log(obj.address);//undefined
image.gif

②函数没有明确的返回值时,却在其他地方使用了返回值,会返回undefined。

function firstName(){}
console.log(firstName());//undefined
image.gif

③函数定义时使用了多个形参,而在调用时传递的参数的数量少于形参数量,则未匹配的参数就为undefined。

function firstName(param1,param2,param3){
   console.log(param3)
}
firstName(1,2);//undefined
image.gif

Null

①表示一个空指针对象,用typeof运算符检测null值时会返回object。

②声明的变量是为了以后保存某个值。

var returnObj=null;
image.gif

③在获取DOM元素时,如果没有获取到指定的元素对象,则返回null。

document.querySelector('#id');//null
image.gif

④在使用正则表达式进行捕获时,如果没有捕获结果,则返回null。

'test'.match(/a/);//null
image.gif

数据类型转换

(1)转换成Boolean类型

    • String类型转换成Boolean类型
      1. 空字符串''''或者''转换成false。
      2. 任何非空字符串都会转换成true,包括只有空格的字符串"  "。
        • Number类型转换成Boolean类型
        1. 0和NaN都会转换成false。
        2. 除了上述之外都会转换为true,包括无穷大(Infinity)和无穷小(-Infinity)
        • Object类型转换成Boolean类型
        1. object为null时,转换为false。
        2. 不为null时转换为true,包括空对象{ }
        • Function类型转换为Boolean类型
        1. 任何值都会转换为true。
        • Null类型转换为Boolean型
        1. 转换为false。
        • Undefined类型转换为Boolean类型
          1. 转换为false。
          console.log(Boolean(''));//false
              console.log(Boolean(' '));//true
              console.log(Boolean(0));//false
              console.log(Boolean(NaN));//false
              console.log(Boolean(null));//false
              console.log(Boolean(undefined));//false


          (2)转换为Number类型

            • Boolean类型转换为Number类型
            1. true转换为1
            2. false转换为0
            • Null类型转换为Number类型
            1. 转换为0
            • Undefined类型转换为Number类型
            1. 转换为NaN
            • String类型转换为Number类型
            1. 字符串中只包含数字,会转换成十进制;若前面有0,会直接省略。
            2. 字符串中包含有效的浮点数,按照十进制转换。
            3. 字符串中包含有效十六进制格式,按照十进制转换。
            4. 空字符,转换为0。
            5. 若字符串中包含了除以上四种外的字符串,则转换为NaN
            console.log(Number(true));//1
               console.log(Number(false));//0
               console.log(Number(null));//0
               console.log(Number(undefined));//0
               console.log(Number('0123'));//123
               console.log(Number('0x3f'));//63

            image.gif

            • parseInt(  ):字符型转换为数值型,得到的是整数。
            console.log(parseInt('3.14'));//3
               console.log(parseInt('3.94'));//3
               console.log(parseInt('120px'));//120
               console.log(parseInt('em120px'));//NaN


            • parseFloat( ):字符型转换为数字型,得到浮点数。
            console.log(parseFloat('3.14'));
               console.log(parseFloat('3.94'));
               console.log(parseFloat('120px'));
               console.log(parseFloat('em120px'));


              • 利用算数运算+-*/隐式转换(这里重点)
              console.log('12'-0);
                 console.log('123'-100);
                 console.log('123'*5);
                 console.log('12'/2);


              (3)转换为String类型

                • toString()把数值型转换为字符串型。
                var num=10;
                var str=num.toString();
                console.log(str);//10
                console.log(typeof(str));//string
                  • 利用string()
                  var num=10;
                  console.log(String(num));
                  console.log(typeof(String(num)));


                  • 利用+拼接字符串的方法实现转换效果。(隐式转换)
                  var num=10;
                  console.log(num+'');
                  console.log(typeof(num+''));


                  简单案例

                  (1)计算年龄

                  算法:用当前年份-出生年份

                  这里存在一个隐式转换

                  var year=prompt('请输入出生年份');
                     var age=2022-year;//隐式转换
                     alert('您今年已经'+age+'岁了');

                  image.gif

                  (2)简单加法器

                  prompt中获取到的值为字符型,所要的结果为数值型,要注意进行数值转换。

                  var num1=prompt('请输入第一个值');
                   var num2=prompt('请输入第二个值');
                   var result=parseFloat(num1)+parseFloat(num2);
                   alert('您的结果为'+result);



                  运算符

                  (1)算术运算符(+-/*%)

                  console.log(1+1);
                   console.log(1-1);
                   console.log(1*1);
                   console.log(1/1);

                  image.gif

                  1、取余%(用来判断是否能整处)

                  返回值为余数

                  console.log(4%2);//0
                   console.log(5%3);//2
                   console.log(3%5);//3

                  image.gif

                  2、浮点数在算术运算里会有问题存在,精度问题

                  浮点数的最高精度是17位小数

                  console.log(0.1+0.2);
                   console.log(0.07*100);

                  image.gif

                  3、不能直接拿浮点数进行比较。

                  不要直接判断两个浮点数是否相等。

                  var num=0.1+0.2;
                  console.log(num==0.3);//false

                  image.gif

                  (2)递增、递减

                  1、前置递增运算符

                  ++n前置递增,相当于n=n+1.

                  运用是先加一,后返回值

                  var p=10;
                  console.log(++p+10);//21
                  //p先+1=11 再加上10

                  image.gif

                  2、后置递增运算符

                  n++后置地址,相当于n=n+1.

                  运用时先返回原值,再自加一

                  var p=10;
                  console.log((p++)+10);//20
                  //先返回原值10+10=20 然后p+1 这是p=11 但返回的值是20



                  (3)比较运算符(返回的是一个布尔值)

                  < 小于号
                  > 大于号
                  >= 大于等于
                  <= 小于等于
                  ==

                  判等号(默认转换数据类型

                  会把字符串型转换为数值型)

                  != 不等于
                  === 全等(要求数据类型一致)
                  !== 不全等(要求数据类型一致)
                  console.log(18===18);//true
                  console.log(18!=='18);//false

                  image.gif

                  (4)逻辑运算符(用于多个条件的判断)

                  && 逻辑与(and)
                  || 逻辑或(or)
                  逻辑非(not)
                  console.log(3>5 && 3>2);//false
                  console.log(3>5 || 3>2);//true

                  image.gif

                    • 短路运算(逻辑中断)口诀:与找假,或找真

                    (1)逻辑与短路

                    表达式1 && 表达式2

                    表达式1真返回2,表达式1假返回1

                    (2)逻辑或短路

                    表达式1 || 表达式2

                    表达式1真返回1,表达式1假返回2

                    (5)赋值运算符

                    = 直接赋值
                    += 、-= 加、减一个数后再赋值
                    *=、/=、%= 乘、除、取余后再赋值

                    (6)运算符的优先级

                    f7e945fc849940ed840d266259bcd5d0.png

                    目录
                    相关文章
                    |
                    19天前
                    |
                    存储 JavaScript 前端开发
                    JavaScript学习第一章
                    本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
                    45 1
                    |
                    2月前
                    |
                    JavaScript
                    js学习--制作猜数字
                    js学习--制作猜数字
                    38 4
                    js学习--制作猜数字
                    |
                    2月前
                    |
                    JavaScript
                    webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
                    这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
                    51 1
                    webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
                    |
                    2月前
                    |
                    JavaScript
                    js学习--制作选项卡
                    js学习--制作选项卡
                    38 4
                    |
                    2月前
                    |
                    JavaScript
                    js学习--商品列表商品详情
                    js学习--商品列表商品详情
                    20 2
                    |
                    2月前
                    |
                    JavaScript
                    js学习--九宫格抽奖
                    js学习--九宫格抽奖
                    19 2
                    |
                    2月前
                    |
                    JavaScript
                    js学习--开屏弹窗
                    js学习--开屏弹窗
                    37 1
                    |
                    2月前
                    |
                    JavaScript
                    js学习--抽奖
                    js学习--抽奖
                    17 1
                    |
                    2月前
                    |
                    JavaScript
                    js学习--隔行换色
                    js学习--隔行换色
                    32 1
                    |
                    2月前
                    |
                    JavaScript 前端开发
                    JavaScript 运算符全知道
                    JavaScript 运算符全知道
                    54 0