js基础教程之逻辑运算符的使用方法

一、逻辑运算符 || 和 &&

1、 || 表示或者，两者中有一个为 true，就返回 true

if (0||1) { console.log('true')}if (0||false) { console.log('false')}if (true||0) { console.log(true);}

2 && 是并且，两个值中必须两个都是 true，才返回 true

if (0&&1) { console.log(1, '0 && 1')}if (0&&false) { console.log(2, '0 && false')}if (true&&0) { console.log(3, 'true && 0');}

3. || 和 && 也是有返回值的，

|| 如果第一个为 true 就返回第一个，如果第一个不为 true 就返回第二个

varr1=1||0;console.log(r1);varr2=0||false;

&& 如果第一个为 true 返回第二个，如果第一个为 false 返回第一个

varr3=1&&0;varr4=false&&0;console.log(r3);console.log(r4);

二、==和===的区别

== 在比较时等号左右两侧数据类型不同时会先转成相同数据类型，再比较

== 是相对比较; === 是绝对比较

1.1 字符串 == 数字 ;字符串转换成数字

console.log(1=='1'); // true

1.2 布尔值 == 数字; 布尔值转成数字

console.log(1==true); // true;

1.3 布尔值 == 字符串; 布尔值转数字，字符串也转成数字，然后进行比较;

console.log(false=='0'); // true

1.4 null == undefined // true, null 和 undefined 和其他数据类型比较都是false1.5 对象 == 对象; 比较的是空间地址，地址相同返回true

console.log({} == {}); // false

1.6 对象 == 字符串; 对象转成字符串，然后和字符串比较

console.log({} =='[object Object]'); // true

1.7 对象 == 布尔值;对象先转成字符串，再转数字，布尔值也转成数字，在比较这两个数字

console.log({} ==true); // falseconsole.log([] ==false); // true

1.8 对象 == 数字;对象先转成字符串，然后再转成数字

console.log({} ==1); // falseconsole.log([] ==0); // true

特殊：NaN 和 NaN 永远不相等

console.log(NaN==NaN); // NaN 和 NaN 永远不相等

三、for循环

for 循环 (for loop) 语句：按照一定的规律，重复去做某一件事情，此时就需要使用循环语句.

varary= [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];/* [ 0: 1, 1: 2, 2: 3, ... 11: 12 length: 12 // length属性的值表示数组有多少项 ]*/// 把数组里面的每一项都输出出来：console.log(ary[0]);console.log(ary[1]);console.log(ary[2]);console.log(ary[3]);console.log(ary[4]);console.log(ary[5]);console.log(ary[6]);console.log(ary[7]);console.log(ary[8]);console.log(ary[9]);console.log(ary[10]);console.log(ary[11]);

? 思考：我们发现上面的代码中除了方括号中索引不同，其他的代码都是相同的。这个时候要是有一个变量i，然后让:第一次时i=0，第二次i=1，第三次i=2，...依次类推，每一次帮我们给i加上1，那么到什么就不加了呢，因为i的最大索引是length-1，所以当i大于length-1之后就不再加了。然后我们把代码中的索引换成i就可以了 console.log(ary[i]);

for (vari=0; i false 不再执行循环体，循环结束，console.log(ary[i]);}console.log(i); // 在for的小括号里声明的变量可以在外面使用

for 循环语法

定义初始值 var i = 0设定循环成立的条件 i < ary.length(如果条件成立执行循环，不成立则结束循环)条件成立会执行循环体中的内容(循环体就是花括号中的代码)执行累加 i++

var i = 0; 和i++ 可以不放到括号里，但是你写在括号里的这个变量和写在外面是一样的，在循环里i++更改的就是外面声明的这个i;

vark=0;for (;k<5;) { console.log(k); k++;}console.log(k); // 在外面的k也被更改了，已经变成了5

倒着输出一个数组

把i的初始值设置为ary.length - 1，然后条件是 i >=0 ; i--;

varary= [12, 23, 34];for (vari=ary.length-1; i>=0; i--) { console.log(ary[i]);}

输入数组中的奇偶项

// 输出数组中的奇数项// 偶数：能够被2整除的数字叫做偶数(整除：被除数除以余数商是整数且余数为0)// 奇数：不能被2整除的数字for (varj=0; j

理解 break和 continue

continue 跳出某一轮的循环，继续后面的循环

for (vari=0; i<10; i++) { if (i===5) { continue; // 跳出i=5的那一次循环。结束本轮循环(循环体中的continue后面的代码将不再执行，继续执行下一轮循环) } console.log(i)}

break 结束整个循环

for (vari=0; i<10; i++) { if (i===5) { break; // 结束i=5及以后所有的循环。break是强制结束整个循环，不做任何处理，同时循环体中的break后面的代码也不会执行了 } console.log(i)}

四、for in 循环

for in循环for in 循环是专门用来遍历对象的，可以把对象里面的属性一个一个的遍历出来。注意：for in只能遍历对象的可枚举属性。一般浏览器默认添加的都是不可枚举的属性。例如__proto__

varobj= { name: '珠峰', age: 10};for (varkinobj) { // k 代表每次遍历时的属性名console.log('k ', k); console.log('obj[k]', obj[k]);}

五、获取DOM对象

DOM对象：我们通过 js 的相关和 html 方法获取到的 html 文档中的元素

document.getElementById()

通过 ID 获取页面中的元素对象 getElementById()方法

语法：document.getElementById('idbox');参数：元素id， 'box'就是参数返回值(函数执行过后的结果)：如果获取到，就是获取到的 DOM 元素对象，如果获取不到就是 null;

解析：document 是根据 ID 查找的上下文，document 代表的是整个 HTML 文档(就是 html 标签自身及包裹的所有内容)，getElementById 的上下文只能是 document通过getElementById获取的元素是一个对象数据类型的值(里面包含了很多的内置属性，这些属性都是描述这个对象的)DOM对象的属性：className: 存储的是字符串类型(string)，代表的是当前元素的样式类名id: 存储的是一个字符串类型(string)，当前元素的ID名innerHTML：字符串存储的当前元素中所有的内容(包含标签，并且标签以字符串形式存在)innerText: 存储当前元素中所有的文本内容(没有元素标签)onclick: 鼠标点击事件元素的点击事件属性，基于这个属性，我们可以给元素绑定点击事件onmouseover: 鼠标划过事件onmouseout: 鼠标划出事件style 存储当前元素的所有的【行内样式】值(获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法通过这个属性获取到);

varbox=document.getElementById('box');console.log(box);

getElementsByTagName()

通过标签名获取【元素对象集合】

解析：语法：context.getElementsByTagName('标签名')参数：标签名字符串返回值：从 context 下面查到的指定标签名 DOM 元素对象组成的集合;这个集合中的每一项都是 DOM 元素对象;context 不是写死的，是我们指定的上下文。你想获取那个元素下面的指定标签元素集合，哪个元素就是上下文

varlistContainer=document.getElementById('container');varliList=listContainer.getElementsByTagName('li'); // 此时 listContainer 就是上下文console.log(liList);console.log(liList[0]);console.log(liList[1]);console.log(liList[2]);liList[0].style.backgroundColor='red';

解析：获取的是一个元素结合(HTMLCollection)，元素集合也是一个对象数据类型的，结合和数组非常类似(数字作为索引，length代表长度)，但它不是数组，而是叫做类数组。和数组操作一样，通过[索引]的方式可以取出类数组的每一项。liList[0]获取的是第一项。liList.length 表示集合中li的数量集合中的每一项都是元素对象，我们可以获取或者修改它的元素属性，如style、innerHTML、innerText结合索引、length可以通过for循环把集合中的每一项获取出来。

? 思考 ? DOM对象也是对象，那么我们可以向操作普通对象那样操作它吗?比如说添加一个属性，或者修改某个属性?DOM对象也是对象，我们也可以向操作对象的方式一样操作DOM对象

for (vari=0; i

六、隔行变色