前端 js中短路算法、运算符优先级、显示转换

逻辑运算的短路算法

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

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

let num = 10;
num >20 || num++;
console.log(num); //输出为11

let num1 = 10;
num1 >2 && num1++;
console.log(num1);//输出为11

let n = 10;
console.log(n<2 || n++);//输出为10
//下面为面试题
var num = 10;
var res= 0 && null;
console.log(res); //false
console.log(num); //10
var resl = 1 && null;
console.log(resl); //null

var a = 4 && 5;
console.log(a); //5

var b = 0 && 5;
console.log(b); //0

var aa = 10 || 20;
console.log(aa);  //10

var aa = false || 20;
console.log(aa);  //20

var aa = null || 20;
console.log(aa);  //20

var c = undefined || 1 || 100 || null;
console.log(c);  //1

运算符的优先级

1. ! 的优先级比算术运算符的优先级高
2. boolean 数据和 number类型的数据运算的时候， 布尔类型会隐式转化为number类型，
3. 其中 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

//字符串的拼接
let str1 = '日啖荔枝三百颗';
str1 +='每天一碗胡辣汤';
str1 +='每天一碗胡辣汤';
console.log(str1);
输出为 日啖荔枝三百颗每天一碗胡辣汤每天一碗胡辣汤

显式转换

把数据转化为字符串,使用String()
把数据转化为number,使用Number()
把数据转化为boolean,使用Boolean()
注意：首字母大写
另外，非0即为真
0, ’ ’ , null ,undefined 都会被转化为 false

//字符串 转 数字
let num =Number('唐伯虎');
console.log(typeof num);
//数字 转 字符串
let str =String(1000);
console.log(typeof str);
// 把数据转为布尔值
let bol1 = Boolean('唐伯虎');
console.log(typeof bol1, bol1);

let bol2 = Boolean('');
//有空格就为true，没空格为false
console.log(typeof bol2,bol2);

let bol3 = Boolean(-1);
console.log(typeof bol3,bol3);

用js获取html的方法

1.通过id获取元素

<div id="list"><div/>
let ul = document.getElementById('list');
ul.style.border='1px #f00 solid';

2.通过标签名获取id

let li = document.getElementsByTagName('标签名');

特点：
1.调用对象可以是 document之外的对象
如果通过 document 对象获取的标签，则是获取页面上所有的标签对象
如果通过 其他对象获取的标签，则是获取该对象下所有的标签对象
2.获取的元素对象不仅仅是一个，可以有多个
3.获取的标签对象存放在数组中，也就是该方法的返回值是一个数组

数组，在数组中可以存放任意类型的数据

let arr = ['电影','作业',1234,true,'游戏','美食']

数组的下标从0开始计算，因此如果需要从数组中获取内容则：
arr[内容对应的下标]

let li = document.getElementsByTagName('li'); 
//通过 document获取整个页面的li
console.log(li);
li [7].style.border = '2px #00f solid'; 
//给第八个加border

let li1 =ul.getElementsByTagName('li'); 
 //通过 其他对象 获取变量ul的li标签
console.log(li1);
li [9].style.background = '#f00';
 //给第十个改变背景色

let arr = ['电影','作业',1234,true,'游戏','美食'];
console.log(arr[2]);
//数组从0开始 所以输出值为1234

3.通过class类名获得元素

let liBox = document.getElementsByClassName('class名');

返回值是一个数组，一个数组中包含了所有具有该class名的元素对象
特点和 document.getElementsByTagName 一致

let liBox = document.getElementsByClassName('wp');
console.log(liBox);
liBox [3].style.background = '#f00';

获取body的方法
1.document.getElementsByTagName(‘body’)[0];
2.document.body

let body1 = document.getElementsByTagName('body')[0];
body1.style.background = '#ccc';

document.body.style.background = '#000';