PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JS数组方法、流程控制、json字符串

JS数组方法、流程控制、json字符串

乐作人生
乐作人生 原创
2020年11月10日 15:12:51 643浏览

1. js数组的常用方法

  1. <script>
  2. console.log("-------------数组的添加push()--------------");
  3. let arr = [1, 2, 3];
  4. arr.push("a", "b");
  5. console.log(arr);
  6. console.log("------------slice()获取数组的一部分元素-----------");
  7. console.log(foods);
  8. console.log(foods.slice(0, 2)); // 0为数组的索引,2为获取数量
  9. console.log(foods.slice(-1)); // 倒叙的话,最后一个值索引为-1;倒数第2个值索引是-2...
  10. console.log(foods.slice(-2)); // 从索引为-2的值开始获取也就是从倒数第2个值开始获取所有元素
  11. console.log("-----------array.splice()获取被删除的元素---------");
  12. // 删除
  13. console.log(foods.splice(1, 2)); // 从索引为1的值(apple)开始删除2个元素并返回
  14. console.log(foods); // 被删除后只剩下3个元素
  15. // 新增:第2个参数为0
  16. console.log(foods.splice(1, 0, "音箱", "耳机")); // 新数组从索引为1的值(pear)开始添加元素"音箱", "耳机";也就是在banana和pear中间新增元素
  17. console.log(foods);
  18. // 更新:第2个参数有值
  19. console.log(foods.splice(3, 2, "手机", "平板")); // 新数组从索引为3的值(pear)开始删除2个元素,并将新元素添加到删除元素的位置上
  20. // 查询
  21. console.log(foods);
  22. </script>

2. js流程控制

  1. <script>
  2. // 判断结构 也叫分支结构
  3. // 1.单分支
  4. if (true) console.log("及格!");
  5. // 2.双分支
  6. if (false) console.log("及格!");
  7. else console.log("不及格!");
  8. //3.多分支
  9. let fraction = 96;
  10. if (fraction >= 60 && fraction < 80) console.log("及格");
  11. else if (fraction >= 80 && fraction < 90) console.log("良好");
  12. else if (fraction >= 90) console.log("优秀");
  13. else console.log("不及格"); // 默认分支,以上条件都不满足的情况下执行
  14. console.log("---------多分支switch方法------------");
  15. fraction = 38; // let禁止重复声明,但允许更新
  16. switch (true) {
  17. case fraction >= 60 && fraction < 80:
  18. console.log("及格");
  19. break;
  20. case fraction >= 80 && fraction < 90:
  21. console.log("良好");
  22. break;
  23. case fraction >= 90:
  24. console.log("优秀");
  25. break;
  26. default:
  27. console.log("不及格");
  28. }
  29. </script>

3. 循环遍历

  1. <script>
  2. // 循环:对页面中的元素进行操作
  3. // 获取第一个ul里面的所有li元素
  4. let lis = document.querySelectorAll("ul:first-of-type li");
  5. console.log(lis);
  6. // 1.for循环
  7. for (let i = 0; i < lis.length; i++) {
  8. lis[i].style.color = "red"; // 将其中的li元素字体设置成红色
  9. lis[i].style.backgroundColor = "#dbdbdb"; // JS中不允许出现连接线,在JS中写CSS复合属性时第2个单词首字母大写
  10. }
  11. // 2.while循环
  12. lis = document.querySelectorAll("ul:nth-of-type(2) li"); // 更新
  13. i = 0; // 设置循环变量
  14. while (i < lis.length) {
  15. // 设置循环条件
  16. lis[i].style.color = "blue";
  17. lis[i].style.fontSize = "20px";
  18. i++; // 更新循环条件
  19. }
  20. // 3.forEach循环:今后更多的使用forEach循环进行操作
  21. lis = document.querySelectorAll("ul:last-of-type li"); // 最后一个ul里面的所有li元素
  22. lis.forEach(function (value) {
  23. console.log(value);
  24. value.style.color = "green";
  25. });
  26. // 代码可简化如下
  27. // lis.forEach((value) => (value.style.color = "red"));
  28. </script>

4.商品的json格式字符串

  1. <script>
  2. // json语法
  3. // json三种类型:简单值(100、3.14)、对象、数组
  4. // 属性字符串必须加双引号,如"hello",属性值如果也是字符串也必须加双引号
  5. // json只有null, 没有undefined
  6. // json属性值允许是一个对象或数组
  7. // 实际开发场景下, 这些json字符串应该来自一个API接口的返回
  8. let sj = `
  9. {
  10. "id": "A001",
  11. "type": "电脑",
  12. "isStock": true,
  13. "brand": ["联想", "华为", "小米", "苹果"],
  14. "price": {
  15. "联想": 3900,
  16. "华为": 4500,
  17. "小米": 3500,
  18. "苹果": 6500
  19. }
  20. }
  21. `;
  22. // 对于json格式的字符串,只有转为js对象,才能在当前页面使用
  23. // JSON.parse(text[, reviver]);text:必选,一个有效的 JSON 字符串;reviver:可选,一个转换结果的函数,将为对象的每个成员调用此函数
  24. const goods = JSON.parse(sj);
  25. console.log(goods);
  26. console.log(goods.id, goods.type, goods.isStock);
  27. console.log(goods.brand, goods.price);
  28. console.log(goods.brand[1], goods.price.华为);
  29. const ul = document.createElement("ul"); // createElement()方法通过指定名称创建一个元素
  30. let goods1 = `<li>${goods.type}</li>`;
  31. goods1 += `<li>品牌:${goods.brand[0]},价格:${goods.price.联想}</li>`;
  32. ul.innerHTML = goods1;
  33. document.body.append(ul);
  34. const table = document.createElement("table");
  35. let goods2 = `<caption style="font-size:18px;font-weight:700;">${goods.type}`;
  36. goods2 += `<thead><tr><th width="80px;">品牌</th><th width="80px;">价格</th><th width="80px;">是否有货</th></tr></thead>`;
  37. goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[0]}</td><td style="text-align:center;">${goods.price.联想}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
  38. goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[1]}</td><td style="text-align:center;">${goods.price.华为}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
  39. goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[2]}</td><td style="text-align:center;">${goods.price.小米}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
  40. goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[3]}</td><td style="text-align:center;">${goods.price.苹果}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
  41. table.innerHTML = goods2;
  42. document.body.append(table);
  43. </script>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议