JavaScript中的运算符与类型转换

从明天开始好好学习前端

已于 2023-11-07 17:31:57 修改

阅读量395

点赞数 13

文章标签： javascript 开发语言 ecmascript

于 2023-11-07 17:29:28 首次发布

本文链接：https://blog.youkuaiyun.com/l12345666777/article/details/134271243

版权

一、算术运算符

+ - * / %
隐式将其他数据类型转为number类型做运算字符串除外进行拼接

var num1 = 8;
var num2 = 4;
// 算数运算符 + - * / %
console.log(num1 - num2);
console.log(num1 + num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);

// 如果是字符串类型数字做运算 除了+运算之外 其他运算符都会隐式将字符串转为数字
var a = '4';
var b = '8'
console.log(typeof (a + b));//字符串拼接  变量+字符串 
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

输出结果为：

二、一元运算符

        + - ++ -- delete typeof !
+作用：
        1.取正
        2.进行字符串拼接 10 + 'hello'
        3.隐式转换
        4.运算
    delete
        删除对象中的属性数组元素
  !取反

/**
 * 1.运算 
 * 2.字符串拼接 
 * 3.取正
 * 4.将其他数据类型转为number类型
 */
console.log(1 + 2);
// // 2.字符串拼接 
console.log('hello' + 'world');
// // 3.取正 
var num = 6;
console.log(+num);
// // 4.将其他数据类型转为number类型 隐式转换 
console.log(+null,typeof (+null));
console.log(+undefined,typeof (+undefined));
console.log(+true,typeof (+true));
console.log(+'10',typeof (+'10'));
console.log(+{},typeof (+{}));
console.log(+[],typeof (+[]));


/**
 * - 取负
 */
var num = -4;
var num1 = '8';
console.log(-num);
console.log(-num1,typeof (-num1));
console.log(-[],typeof (-[]));


// 取反 将其他数据类型转为布尔型并进行取反 
// null undefined 0 "" 假值 进行取反true  
console.log(!null);
console.log(!0);
console.log(!undefined);
console.log(!"");
console.log(!10);
console.log(!'hello'/10);//0 对"hello"进行取反 false/10 隐式将false转为number0进行运算
console.log(!{});
console.log(![]);

/**
 * 前++ 先自增 再赋值 
 * 后++ 先赋值 再自增
 */
var num = 10;
var res = ++num;
console.log(res,num);//11 11

var res = num++;
console.log(res,num);//10 11

/**
 * delete 删除对象或者数组中某一个属性或者某一个元素
 */
var obj = {
  name:'zhangsan',
  age:12
};
console.log(obj);
// 删除对象中属性 
delete obj.age;
console.log(obj);

var arr = [1,2,3,4,5];
delete arr[3];
console.log(arr);

输出结果为：

三、赋值运算符

= += -= *= /= %=
a+=b 等同于 a = a+b

// = 赋值 
var a = 10;
var b = a;
console.log(a,b);

// += -= *= /= %=
var num = 10,c=5;
c+=num;//c = c+num
console.log(c,num);

输出结果为：

四、比较运算符

        > <   >= <= == === != !==
==和===区别?
        1.==会进行隐式转换，将其他数据类型转为同一类型在进行比较
        undefined == null 派生自null
        2.===首先会比较数据类型，数据类型不一致，直接返回false
        3.相同点：
        == 和 ===在对引用数据类型比较得时候比较得是引用地址

/**
 * 1.== 隐式转换 null和undefined是相等关系 
 */
// 基本数据类型比较
console.log(1 == true);
console.log('1' == true);
console.log('1' == 1);
// 比较引用数据类型 比较的是引用地址 
var obj = {
  name:'zhangsan'
};//b1001
var obj1 = {
  name:'zhangsan'
};//b1002
console.log(obj === obj1);//false

var obj1 = obj;
console.log(obj == obj1);
console.log(obj === obj1);

// !=  不相等
// !== 不全等 值不相等或者类型不相等
console.log('8' != 9);
console.log('9' !== 9);


// > < >= <=
console.log(5>3);
console.log(2>=3);
console.log(2<=3);
console.log(2<3);

console.log('154698' > '5');
console.log('be' < 'b');

输出结果为：

五、逻辑运算符

        &&
        与同真才真有假就假
两个操作数进行相与：
        如果第一个操作数为真，输出第二个操作数
        如果第一个操作数为假，直接返回第一个
      ||
        或有真就真同假才假
      两个操作数进行或：
        如果第一个操作数为真，直接返回第一个操作数
        如果第一个操作数为假，直接返回第二个
      !取反
        NaN undefined null 0 "" 假值

/**
 * && 与 并且(同真才真 有假则假)
 * 条件1 && 条件2 
 * 两个操作数进行相与：
 *  如果第一个操作数为真，返回第二个操作数
 *  如果第一个操作数为假，直接返回第一个操作数
 *
 */

console.log('hello' && 'world');
console.log(null && 'world');
var a =11,b=7;
if(a>10&&b<6){
  console.log('满足条件')
}else{
  console.log('不满足条件')
}

/**
 * || (有真就真 同假才假)或者 满足其中一个操作数或者表达式 
 * 两个操作数进行或操作:
 *  如果第一个操作数为真 直接返回第一个操作数
 * 如果第一个操作数为假 返回第二个操作数
 */
var a = 11,b=7;
if(a>=10||b<6){
  console.log('满足条件')
}else{
  console.log('不满足条件')
}
console.log('hello' || 'world');
console.log(null || 'world');

// !取反 null undefiend NaN 0 "" 都是假的值 转为boolean都是false
console.log(!null);//true
console.log(!0);//true
console.log(!"");//true
console.log(!('hello'/10));//true
console.log(!'hello'/10);//0
console.log(!{});//false

输出结果为：

六、三目运算符

表达式?"符合表达式":"不符合表达式"

/**
 * 三目运算符
 * 表达式?"符合表达式结果":"不符合表达式结果"
 */
var age = 17;
if(age>=18){
  console.log('成年人')
}else{
  console.log('未成年人');
};
var res = age>=18?"成年人":"未成年人";
console.log(res);

输出结果为：

七、隐式转换

      基本数据类型隐式转换：
        + - * / %
        == 隐式转换
如果是字符串和数字相等比较，把字符串转为number
如果是字符串和布尔值相等比较把两者转为number
如果是number和布尔值相等比较把布尔值转为number
先转换数据类型为同一类型再进行值的比较
      引用数据类型隐式转换：
        1.默认调用toString和valueOf方法
[].toString() ""
{}.toString() [object Object]
             [] + [] ""
             {} + {} [object Object][object Object]
             [] + {} [object Object]
        2.可以在对象中重写toString和valueOf
1.如果重写了toString,调用toString
2.如果重写了valueOf,调用valueOf
3.如果都进行重写,调用valueOf

/**
 * 1.字符串和数字相加  隐式将数字转为字符串进行拼接
 */
console.log(10 + '10');
/**
 * 2.字符串和数字进行- / * % 将字符串隐式转为数字
 */
console.log(10 - '5');
console.log(10 / '5');
console.log(10 * '5');
console.log(10 % '5');

/**
 * == 和 === undefined派生自null 
 * ==相等  将数据类型全部转为number类型再进行值得比较
 * ===全等 如果数据类型不一致 直接返回false 
 * ==隐式转换
 *  1.数字和字符串进行比较,将字符串转为数字进行比较 
 * 2.布尔值和数字进行比较，将布尔值隐式转为数字进行比较
 * 3.布尔值和字符串进行比较 将两者转为数字进行比较
 *  
 */
console.log(null == undefined);//true
console.log(null === undefined);//false

console.log(null == 0);//==null 和 undefined不进行类型转换
console.log('10' == 10);
console.log('1' == true);
console.log(0 == false);



/**
 * 引用数据类型隐式转换
 * 1.将引用数据类型转为基本数据类型调用toString和valueOf 哪一个方法可以转为基本数据类型调用哪一个
 */
console.log([] + [],typeof ([] + []));//"" 
console.log([].valueOf().toString());//[] 转为 "" 默认调用toString方法
console.log({} + [],typeof ({} + []));//[object Object]
console.log({}.valueOf().toString());//[object Object]
console.log({} + {});//[object Object][object Object]



/**
 * 可以重写toString和valueOf方法
 * 默认引用数据类型调用toString [object,Object] js自动隐式转换
 * 如果重写了valueOf方法 引用数据类型调用valueOf方法
 * 如果重写了toString 引用数据类型调用toString
 * 如果两者都进行重写 调用valueOf方法 
 */
var obj = {
  name:'zhangsan',
  valueOf(){
    return 10
  },
  toString(){
    return 20
  }
}
console.log({} + 10);//{}.toString()转为基本数据类型 '[object Object]10'
console.log(obj + 10);// valueOf 20 
console.log(obj + 10);// toString 30 
console.log(obj + 10);

输出结果为：

八、类型转换

1.将其他数据类型转为String类型
1.使用+''进行拼接
2.调用toString()方法注意:null和undefined不能调用toString,没有实现包装器函数
3.使用String包装器函数
     2.将其他数据类型转为Number类型
1.其他数据类型前面加+号
        +true 1
                +null 0
                +undefined NaN
                +{} NaN
                +[] 0
                +'10' 10
2.使用Number包装器函数
                Number(null/undefined/{}/[])
3.使用parseInt函数取整函数
                parseInt(null/true);//NaN
4.使用parseFloat函数保留小数
     3.将其他类型转为布尔类型
1.使用Boolean包装器函数
2.使用!!数据类型

/**
 * 将其他数据类型转为string类型 **********************************
 * 1.使用字符串拼接 
 * 2.使用toString方法
 * 3.使用String包装器函数
 */
console.log(10 + "",typeof (10 + ""));
console.log(null + "",typeof (null + ""));
console.log(undefined + "",typeof (undefined + ""));
console.log(true + "",typeof (true + ""));
console.log({} + "",typeof ({} + ""));
console.log([] + "",typeof ([] + ""));


// 2.调用toString方法  null 和 undefined没有包装器函数 
var a = 10,b=true;
console.log(a.toString(),typeof (a.toString()));
console.log(b.toString(),typeof (b.toString()));
// console.log(null.toString(),typeof (null.toString()));//报错
// console.log(undefined.toString(),typeof (undefined.toString()));//报错 

// 3.String包装函数 
console.log(String(10),typeof String(10));
console.log(String(true),typeof String(true));
console.log(String(null),typeof String(null));
console.log(String(undefined),typeof String(undefined));
console.log(String({}),typeof String({}));
console.log(String([]),typeof String([]));

// number调用toString(进制数)
var a = 10;
console.log(a.toString());
console.log(a.toString(8));//12 
console.log(a.toString(16));//a
console.log(a.toString(2));//1010


/**
 * 将其他数据类型转为布尔类型
 * 1.Boolean包装器函数
 * 2.!!数据类型
 */
console.log(Boolean(10),typeof (Boolean(10)));
console.log(Boolean('hello'),typeof (Boolean('hello')));
console.log(Boolean(null),typeof Boolean(null));
console.log(Boolean(undefined),typeof Boolean(undefined));
console.log(Boolean({}),typeof Boolean({}));
console.log(Boolean([]),typeof Boolean([]));


// !!数据类型
console.log(!!null);
console.log(!!undefined);
console.log(!!10);
console.log(!!"");
console.log(!!{});
console.log(!![]);
console.log(!!('hello'/10));



/**
 * 将其他类型转为number类型
 * 1.在其他数据类型前面+ 
 * 2.Number包装器函数
 * 3.parseInt()
 * 4.parseFloat()
 */

// 1.+ 将其他数据类型转为number
console.log(+null,typeof +null);
console.log(+undefined,typeof +undefined);
console.log(+'hello',typeof +'hello');
console.log(+true,typeof +true);
console.log(+{},typeof +{});
console.log(+[],typeof +[]);
console.log(+[1,2,3],typeof +[1,2,3]);

// 2.使用Number包装函数
console.log(Number(null),typeof Number(null));
console.log(Number(undefined),typeof Number(undefined));
console.log(Number('10'),typeof Number('10'));
console.log(Number(false),typeof Number(false));
console.log(Number(function(){}),typeof Number(function(){}));


// 3.使用parseInt函数  取整函数
console.log(parseInt(null),typeof parseInt(null));
console.log(parseInt(undefined),typeof parseInt(undefined));
console.log(parseInt('10.1'),typeof parseInt('10.1'));
console.log(parseInt(true),typeof parseInt(true));
console.log(parseInt(12.535));


console.log(parseInt('1+2.7'));//1
console.log(parseInt(0xa));
console.log(parseInt('010'));//解析为10
console.log(parseInt(1+2.3));


// 4.使用parseFloat函数 保留小数位
console.log(parseFloat(null),typeof parseFloat(null));
console.log(parseFloat(undefined),typeof parseFloat(undefined));
console.log(parseFloat(true),typeof parseFloat(true));
console.log(parseFloat(10.23));
console.log(parseFloat(10.0));
console.log(parseFloat(10));
console.log(parseFloat(0xa));
console.log(parseFloat(0o10));

输出结果为：