javaScript：js的运算符和简单的对象操作

小姚学前端

已于 2023-08-09 20:20:18 修改

阅读量377

点赞数 1

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2023-08-09 19:51:42 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/132188826

版权

javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

一.js的运算符

1.算数运算符

算数运算符

+ - * / % ++ --

+ 运算符
let num1 = 10
let num2 = 20
let num3 = num1 + num2 
console.log(num3)
如果 + 的两边有一个是字符串，则表示的是字符串的拼接。

原理：如果两个不同类型的数据相加，有一个是字符串，则另一个数据会被隐式转化为字符串，然后通过+ 和另一个数据拼接在一起

- 运算符

-运算符可以把他两边的字符串类型隐式转化为数字类型，如果被转化的字符串是一个数字，则参与减法运算，如果被转化的字符串是一个普通字符，则得出的结果是 NaN

除了 + 运算的时候，把数字转化为字符串，其他的算术运算符都是把字符串转化为数字

% 取余

% 取余又称模运算，运算的结果是相除之后的余数，被除数%除数返回结果是余数

被除数和除数不一定都是整数

/除运算

自增/自减

自增：++ 作用：让变量的值+1 使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了

前置自增：每执行一次，当前变量值加1，其作用相当于 num += 1

后置自增：每执行一次，当前变量数值加1 ，其作用相当于num += 1

区别：前置自增：先自加再使用（记忆口诀：++在前先加）后置自增：先使用再自加（记忆口诀：++在后后加）

++ 和 -- 的运算优先级要高于加减乘除 + - * / %

2.比较（关系）运算符

关系运算符

> 大于， < 小于， >=大于等于， <=小于等于， ==等于， != 不等于 === 全等， !== 不全等

关系表达式的返回值是 true 或者false

== 和 === 的区别

== 只比较数值，不比较类型

=== 不但比较数值还比较类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系运算符</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    关系运算符
    > 大于，< 小于， >=大于等于 ，<=小于等于 ， ==等于， != 不等于
    === 全等  ， !== 不全等
    关系表达式 的 返回值是 true 或者false

    == 只比较数值，不比较类型
    === 不但比较数值还比较类型
    */

   console.log( 3>=5 );
   console.log( 5>=5 );
   let num1 = 30;
   let num2 = '30';
   console.log('num1和num2是否相等', num1 === num2);
   if (num1 == num2) {
         console.log('相等');
   } else {
        console.log('不相等');
   }

   let str1 = '阿巴阿布';
   let str2 = '阿西吧';
   console.log( str1 != str2);

   console.log('李白'=='青莲居士');
</script>

3.逻辑运算符

逻辑运算符

或 ||

与(并且) &&

非 !

判断规则

$$ 逻辑与   并且    特点：符号两边都为ture结果才为ture   口诀:一假则假

| | 逻辑或    或者特点：符号两边有一个ture就为ture 口诀：一真则真

！   逻辑非取反   特点：ture变false    false变ture   口诀：真变假，假变真

逻辑运算的短路算法

逻辑运算的短路算法

表达式1 || 表达式2 表达式1为真的时候，表达式2不会被解析

表达式1 && 表达式2 表达式1为真的时候，表达式2才会被解析

4.三元运算符

三元运算符？：

判断条件？判断条件为真，则执行当前代码：判断条件为假，则执行当前代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    parseInt(num) 把数字 num 直接转化为整数，他会去掉 num的小数部分
    */
    let num = 325;
    let s = num / 100;
    console.log( parseInt(s) );

    /*
    逻辑运算符
    或 ||
    与(并且) &&
    非 !

    判断规则 
    或 || ；两边的判断条件，只要有一个为真（true），则返回结果为真

    与 &&；两边的判断条件都为真（true），则返回结果为真（true）

    非 ! ：取当前结果返回布尔值的 反向值，就是取反的意思
    */
   console.log(3>4 || 2>3);
   console.log(3>4 || 2<3);
   console.log('===========================================');
//    只要一个为true返回结果是false
   console.log(3>4 && 2<3);
//    两个同时为true，返回结果是true
   console.log(3<4 && 2<3);

   if(!(3<4)){
    console.log('做个屁');
   }else{
    console.log('不写');
   }
//0为false，非0数字为true
   if(0){
    console.log('不吃饭');
   }else{
    console.log('减肥');
   }
</script>

5.赋值运算符

目标：能够使用赋值运算符简化代码
赋值运算符：对变量进行赋值运算
已经学过的赋值运算符： = 将等号右边的值赋予给左边，要求左边必须是一个容器
其他赋值运算符： +=    -=   *=     /=    %=    使用这些运算符可以在对变量赋值时进行快速操作

运算符的优先级

1. ！的优先级比算术运运算符的优先级高

2.boolean 数据和number类型的数据运算的时候，布尔类型会隐式转化为number类型，其中 false=>0 true=>1

优先级

1.小括号（）

2.！

3.算术运算符

4.比较运算符

5.逻辑运算符

6.赋值运算符

赋值的简写

= += -= /=

简写形式含义

n += 1; => n = n + 1;

n -= 1； => n = n - 1;

n *= 1; => n = n * 1;

n /= 1; => n = n / 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符优先级</title>
</head>
<body>
    
</body>
</html>
<script>
    let bol1 = true;
    let bol2 = false;
     console.log(bol1 + 1);  //2
     console.log(!bol2 + 1);// 2
     console.log(10 + !bol2); //11
     console.log(!10);// false //非0为true
     console.log(!0);//true
     console.log('============');
     /*
     1. ！的优先级比 算术运运算符的优先级高
     2.boolean 数据和number类型的数据运算的时候，布尔类型会隐式转化为
     number类型，其中 false=>0 true=>1
     */
    
    console.log(10<5+6 || '不吃');
    let str = 10>5+6 || '不吃';
    console.log(str);
    /*
    优先级
    1.小括号（）
    2.！
    3.算术运算符
    4.比较运算符
    5.逻辑运算符
    6.赋值运算符

    赋值的简写
    = += -= /=
    
    简写形式           含义
    n += 1;    =>     n = n + 1; 
    n -= 1；   =>     n = n - 1;
    n *= 1;    =>     n = n * 1; 
    n /= 1;    =>     n = n / 1; 
    */

   let n = 10;
   n += 5; //含义 n = n + 5;
   console.log(n);

   // 字符串拼接
   let str1 = '篮球和鸡';
   str1 += 'ikun';
   str1 += 'ikun';
   console.log(str1);
</script>

二.相关扩充

1.语句和表达式的区别

表达式和语句：表达式是可以求值的代码，javascript引擎会将其计算出一个结果。语句：语句是一段可以执行的代码。

区别：表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。表达式 num = 3+4

语句：而语句不一定有值，所以比如 alret（）弹出对话框 consols.log（）控制台打印输出

2.一/二元运算

一元运算符：+- 众多的javascript的运算可以根据表达式的个数，分为一元运算符，二元运算符，三元运算符

二元运算符 let num = 10+10

3.parseInt(num)

把数字 num 直接转化为整数，他会去掉 num的小数部分

4.数据类型的显示转换

显示转换

把数据转化为字符串，使用 String（）

把数据转化为number，使用 Number（）

把数据转化为boolean，使用 Boolean（）

另外，非0即为真

0，'' ,null ,undefined 都会转化为 false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型的显示转换</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    显示转换
    把数据转化为字符串，使用 String（）
    把数据转化为number，使用 Number（）
    把数据转化为boolean，使用 Boolean（）

    另外，非0即为真
    0，'' ,null ,undefined 都会转化为 false
    */

    // 字符串转数字
   let num = Number('斯巴达');
   console.log(typeof num);
    // 数字 转 字符串
   let str = String(123);
   console.log(typeof str);
   
   //把数据 转 为布尔值
   let bol1 = Boolean('斯巴达');
   console.log(typeof bol1 , bol1);

   let bol2 = Boolean(' '); // ' '引号之间有空格不是空字符串
   console.log(typeof bol2,bol2);

   let bol3 = Boolean(-1);
   console.log(typeof bol3 , bol3);
   
</script>

三.简单的对象操作

通过 document.getElementById('id') 获取html中的dom元素

每一个html标签都是一个对象，称为dom对象，每一个标签的属性也是一个对象的属性

设置对象属性的值 obj.属性值 = 'aa';

获取对象属性的值 obj.属性名

每一个html标签都有style标签，因此可以使用js 操作style，’

如果设置stylr属性，则给标签行间添加一个style属性

let abc = document.getElementById('bb');

    abc.style.color = '#f00';

如果属性是组合形式的，需要把-去掉，使用驼峰命名法

 abc.style.fontSize = '50px';

    console.log(abc.title)  //获取title的值0



    let txt = document.getElementById('txt')

    let bth = document.getElementById('bth')

给bth添加点击事件

   bth.onclick = function(){

       alert(txt.value);

       console.log(txt.value);

       txt.style.border = '2px #f00 solid';

    };

通过原生js设置对象

使用{}创建对象，它里面设置属性的方式是 key：value

key是属性名 value是属性值

获取属性的值 obj.key

设置属性的值 obj.key = value

如果访问一个对象中不存在的属性那么他的结果是undefined

  let obj = {

        name:'黑山羊',

        age:213123320,

        sex:'女'

    };

    let obj2 = {

        name:'混沌',

        age:202131321,

        sex:'男'

    };

    console.log(obj.name);

    console.log(obj.age);



    console.log(obj2.name);

    console.log(obj2.age);

// obj2中没有属性 run，因此结果是unedefined