(1103)循环与函数

(1103)循环与函数

循环的所有形式必须全部熟悉并实例演示

1.while 循环 入口判断型

while (true) {
  console.log("每天进步一点点,步子不要迈的太大");
}

2.do-while 出口判断型

do {
  console.log("每天进步一点点,步子不要迈的太大");
} while (true);

3.计数型 遍历数组

for(let i ; i < arra.length ; i++>){
    console.log('每天进步一点点,步子不要迈的太大', item[i])
    if(i ==0 ) break; //跳出代码块，终止循环
    if(i == 2) continue; //跳过本次执行这一行下面的代码，执行下一轮循环
}

4.forEach 遍历数组(不能是类数组) ( 第几个数组 ， 数组下表从零开始，所有数组 ) 无返回值

array.forEach((item, key, arr) => {
  item += 1;
  console.log("每天进步一点点,步子不要迈的太大", item);
});

5.for-of 遍历数组

let obj = [1, 2];
for (let item of obj) {
  console.log(item); //   1 2
}

6.for-in 遍历对象（可枚举）

let obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key); //  key a b
  console.log(obj[key]); // value 1 2
}

函数的所有形式,特别是 rest/spread, 箭头函数,全部实例演示

1….rest 将所有参数打包到一个数组变量中

function test(...data) {
  console.log(data);
}
test([1, 2, 3, 4]);

2….spread 数组解包

let data = [2, 3, 4, 5, 6, 6];
function test(...data) {
  console.log(data);
}
test(...data);

实例演示获取 dom 元素的所有方法

let ul = document.getElementById("test"); //方法一
ul = document.getElementsByClassName("container"); //方法二
ul = document.getElementsByName("test"); //方法三
ul = document.getElementsByTagName("li"); //方法四 获取所有比配标签的集合
let select = "#test";
select = ".container";
select = "li"; //返回匹配的数组集合中的第一个元素 ，可以通过方法六解决这个问题
ul = document.querySelector(select); //方法五
ul = document.querySelectorAll(select); //方法六 注意这里的select可以像css选择器那样描述
扩展;
const $ = (select) => document.querySelectorAll(select);
console.log($("li:nth-of-type(1)"));

实例演示 dom 的遍历方法,熟悉所有属性

方法一;
for (let item of ul.children) {
  console.log(item);
}
方法二; 这里之所以不能直接使用 ul.children.forEach() 是因为此时它是一个类数组 需要通过array.from()函数转为数组
Array.from(ul.children).forEach((item) => {
  console.log(item);
});

• 这个就是类数组

• 而这个是通过 array.from()函数转化的数组

• 这个是我通过子面量简单生成的对象

let xx = { a: 1, b: 2 };
console.log(xx);

我们可以通过下图简单对比一下三者的异同点

关于元素的所有属性 级别分为兄弟元素 父子元素跟 CSS 选择器类似 关键字 children parent frist last ,需要特别注意的一点是他们是属性,所有千万不能在后面加括号当成函数执行他

ul.children.length == ul.childElementCount; //取元素数组长度
console.log(ul.childElementCount);
// 子元素
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
console.log(ul.children[0]);
// 兄弟元素
console.log(ul.children[1].previousElementSibling);
console.log(ul.children[1].nextElementSibling);
// 父元素
console.log(ul.children[1].parentElement);
console.log(ul.children[1].parentNode);

实例演示 dataset, classList 对象的使用

<div class="container">
  <ul>
    <li id="test" data-id="347" data-name="xiaoming">item1</li>
    <li name="test">item2</li>
    <li>item3</li>
  </ul>
</div>

.red {
  color: red;
}
.green {
  color: green;
}

• dataset

let ul = document.querySelector("ul");
// dataset
console.log(ul.firstElementChild.dataset.id);
ul.firstElementChild.dataset.name = "小米";
console.log(ul.firstElementChild.dataset.name);

• classList

ul.firstElementChild.classList.add("red");
ul.children[1].classList.add("red");
ul.lastElementChild.classList.add("red");
// 移除样式
ul.firstElementChild.classList.remove("red");
// 修改样式
ul.lastElementChild.classList.replace("red", "green");
ul.lastElementChild.classList.toggle("green"); //取反