JS基础教程（3）

好好先生在掘金73467
222 阅读6分钟

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

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就返回第二个

var r1 = 1 || 0;
console.log(r1);
var r2 = 0 || false;

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

var r3 = 1 && 0;
var r4 = 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和其他数据类型比较都是false 1.5 对象 == 对象; 比较的是空间地址，地址相同返回true

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

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

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

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

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

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

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

特殊：NaN和NaN 永远不相等

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

三、for循环

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

var ary = [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]);

for 循环语法

定义初始值 var i = 0

设定循环成立的条件 i < ary.length（如果条件成立执行循环，不成立则结束循环）

条件成立会执行循环体中的内容（循环体就是花括号中的代码）

执行累加 i++

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

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

倒着输出一个数组

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

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

输入数组中的奇偶项

// 输出数组中的奇数项
// 偶数：能够被2整除的数字叫做偶数（整除：被除数除以余数商是整数且余数为0）
// 奇数：不能被2整除的数字

for (var j = 0; j < ary.length; j++) {
  if (j % 2 === 0) {
    // % 是取模运算符 ，就是取余数
    // 0 % 2 余数是0
    // 1 % 2 余数是1
    // 3 % 2 余数是1
    // 4 % 2 余数是0
    console.log(ary[j]);
  }
}

理解break和continue

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

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

break 结束整个循环

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

四、for in 循环

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

var obj = {
  name: '你好',
  age: 10
};

for (var k in obj) {
  // k 代表每次遍历时的属性名
  console.log('k ', k);
  console.log('obj[k]', obj[k]);
}

五、获取DOM对象

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

1.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 存储当前元素的所有的【行内样式】值（获取和操作的都只能是写在标签上的行内样式，写在样式表中的样式，无法通过这个属性获取到）；

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

2.getElementsByTagName()

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

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

var listContainer = document.getElementById('container');
var  liList = 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循环把集合中的每一项获取出来。

avatar
文章
阅读
粉丝