search

博客列表 >Js 运行机制与字符串，数组常用 API

Js 运行机制与字符串，数组常用 API

NY。
NY。原创
2022年01月10日 11:35:55383浏览

Js 运行机制与字符串，数组常用 API

事件冒泡与事件委托/代理

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件冒泡与事件委托/事件代理</title>
  8.   </head>
  9.   <body>
  10.     <ul class="list">
  11.       <li class="item">item1</li>
  12.       <li class="item">item2</li>
  13.       <li class="item">item3</li>
  14.       <li class="item">item4</li>
  15.       <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.       //   先给第一个li添加一个点击事件
  19.       document.querySelector(".list").firstElementChild.onclick = () =>
  20.         console.log(event.currentTarget, event.target); //输出内容：<li class="item"> <li class="item">
  21.       // 再给他的父级ul添加一个onclick事件
  22.       document.querySelector(".list").onclick = () =>
  23.         console.log(event.currentTarget, event.target); //输出内容：<ul class="list"> <li class="item">
  24.       // 以上我只点击了一次，触发了li上的onclick事件，但是，他的父级ul上添加的点击事件也被触发了，这就是事件冒泡，我们看到li的父级ul事件输出的内容currentTarget(事件绑定者/事件主题是他本身)，但是target(事件的触发者确实子集li)，这个现象也叫事件委托/代理
  25.     </script>
  26.   </body>
  27. </html>

表单事件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表单事件</title>
  8.   </head>
  9.   <body>
  10.     <form action="" method="post" id="login">
  11.       <label class="title">用户登录</label>
  12.       <label for="email">邮箱:</label>
  13.       <input type="email" id="email" name="email" value="" autofocus />
  14.       <label for="password">密码:</label>
  15.       <input type="password" id="password" name="password" />
  16.       <button name="submit" ">登录</button>
  17.     </form>
  18.     <script>
  20.       const login=document.forms.login
  21.       const email=document.forms.login.email
  22.       const password=document.forms.login.password
  23.       const button=document.querySelector('#login > button')
  24.       button.onclick=()=>event.preventDefault();
  25.       email.onfocus=()=>{
  26.         email.style.color='black';
  27.         email.placeholder='';
  28.       }
  29.       password.onfocus=()=>{
  30.         password.style.color='black';
  31.         password.placeholder='';
  32.       }
  33.       email.onblur=()=>{
  34.         if(email.value.length===0){
  35.           email.style.color='red';
  36.           email.placeholder='请填写邮箱';
  37.           setTimeout(()=>email.focus(),2000)
  38.         }
  39.         else{
  40.           password.focus()
  41.         }
  42.       }
  43.       password.onblur=()=>{
  44.         if(password.value.length===0){
  45.           password.style.color='red';
  46.           password.placeholder='请填写密码';
  47.           setTimeout(()=>password.focus(),2000)
  48.         }
  49.       }
  50.     </script>
  51.   </body>
  52. </html>

js 运行机制：单线程+事件循环

  • 单线程
    1.单线程：主线程
    同步：代码的书写顺序与执行顺序一致，写在前面先执行
    和 html 的文档流有点像
  1. <script>
  2.   console.log(1);
  3.   console.log(2);
  4.   console.log(3);
  5. </script>

就像这个代码一样，先输出 1，再输出 2，再输出 3

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <!-- <input type="text" placeholder="同步" onkeydown="console.log(this.value)" /> -->
  11.     <!-- 慢半拍 -->
  12.     <!-- 分析为什么第一次获取不到?
  13.       1. 当按下某个键时, 它会触发keydown事件,事件循环将事件方法从任务队列添加到主线中,并立即调用,即console.log立即执行
  14.       2. 但是此时这个键对应的值,例如1, 还没有被DOM渲染到input输入框中,所以console.log获取不到值,或获取一个空值
  15.       3. 因为"按下1" 和 "显示1" 是2步操作,而console.log是在第1步结束后一瞬间执行,而值还没被显示到input框中
  16.       4. 所以, console.log()执行时机,是在"按下"与"显示"之间,所以无法获取到用户输入的内容或获取到一个空值
  17.       5. 为什么第2次按下时,console.log()可以获取到了呢?
  18.       6. 是因为当用户再次按下时, console.log()立即执行,此时input中已经有了内容,就是上一次的输入内容,所以就正常输出了 -->
  20.     <!-- 解决方案也很简单,让console.log()异步执行即可,等到input框中的内容渲染完成之后再执行 -->
  21.     <!-- 必知内容:
  22.       1. DOM渲染是同步任务, 这里的dom渲染,是指将内容显示到input框中
  23.       2. DOM事件是异步任务, 使用keydown
  24.       3. 异步必须在同步完成后执行 
  25.       -->
  27.     <!-- 现在简单了, 将console.log异步调用就可以,直接放在setTimeout中就可以,将延迟设置为0 -->
  29.     <!-- 因为setTimeout是异步任务,完毕才会进一定会等主线程中的同步任务执行入主线程,转为同步任务执行
  30.       而此时, dom渲染已完成, input框中已经有了数据,所以console.log()就正确的, 同步的获取到了数据
  31.       完美解决了"慢半拍"的问题 -->
  32.     <input
  33.       type="text"
  34.       onkeydown="setTimeout(()=>console.log(this.value),10)"
  35.       placeholder="异步"
  36.     />
  38.     <!-- 解决方案 -->
  39.     <input type="text" oninput="console.log(this.value)" placeholder="input" />
  41.     <!-- input = keydown + setTimeout -->
  42.   </body>
  43. </html>

字符串中常用的 api

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>字符中常用api</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let str = "php中文网";
  12.       // 索引从0开始:
  13.       // [0->p,1->p,2->p,3->中,4->文, 5->网]
  14.       // index = [0, str.length-1]
  16.       // 1. length 长度
  17.       console.log(str.length);
  19.       // 2. charAt: 索引->元素
  20.       console.log(str.charAt(3));
  21.       console.log(str[3]);
  23.       // 3. indexOf: 字符->索引
  24.       console.log(str.indexOf("中"));
  26.       // 4. search: indexOf一样,但支持正则等
  27.       console.log(str.search("文"));
  29.       // 5. concat: 字符串拼装
  30.       console.log(str.concat("(", "php.cn", ")"));
  31.       // 直接用"+", 或者`模板字面量` 更方便
  33.       // 6. replace: 替换
  34.       console.log(str.replace("中文网", ".cn"));
  35.       //   str = "php";
  36.       console.log(str);
  38.       // 7. slice: 子串, 忽略结束索引的值
  39.       console.log(str.slice(0, 3));
  41.       // 8. substr: 子串, 只需要知道取多少个
  42.       console.log(str.substr(0, 3));
  43.       console.log(str.substr(3, 3));
  44.       //   -1最后一个, -2向前一个
  45.       console.log(str.substr(-3, 3)); // 中文网
  47.       // 9. split: str->array
  48.       console.log(str.split(""));
  49.       console.log(str.split("", 3));
  51.       // 10. toLowerCase, toUpperCase 大小写转换
  52.       console.log(str.toLowerCase());
  53.       console.log(str.toUpperCase());
  55.       // 11. 与html相关
  56.       console.log(`<a href="https://php.cn">${str}</a>`);
  58.       console.log(str.link("https://php.cn"));
  60.       console.log(str.bold());
  61.       console.log(str.big());
  62.       console.log(str.anchor("url"));
  63.     </script>
  64.   </body>
  65. </html>

常用数组 api

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组常用api-1</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 字面量
  12.       let arr = [
  13.         1,
  14.         2,
  15.         "a",
  16.         "b",
  17.         true,
  18.         { x: 1, y: 2 },
  19.         [1, 2, 3],
  20.         function () {},
  21.       ];
  22.       //   console.log(arr);
  23.       // ...rest
  24.       arr = [4, 5, 6];
  25.       let arr1 = [...arr];
  26.       console.log(arr1);
  27.       arr = [1, 2, 3, ...arr, 7, 8, 9];
  28.       console.log(arr);
  30.       // Array.of
  31.       // 原始数据有可能来自一个外部请求api或文件,而这个原始数据就是数组
  32.       let a = [1, 2, 3, 4, 5, 6];
  33.       // 经过一些其它操作,例如过滤,再重新生成
  34.       arr = Array.of(...a);
  35.       console.log(arr);
  37.       // Array.from
  38.       const likeArr = {
  39.         0: "red",
  40.         1: "blue",
  41.         2: "green",
  42.         length: 3,
  43.       };
  44.       console.log(likeArr);
  45.       console.log(Array.from(likeArr));
  46.     </script>
  47.   </body>
  48. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组常用api-2</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // push,pop, unshift,shift,delete
  13.       let arr = [];
  14.       // 1. 尾部增删
  15.       console.log(arr.push(10));
  16.       // 从左到右进入
  17.       console.log(arr.push(20, 30));
  18.       console.log(arr);
  19.       // 尾部删除
  20.       console.log(arr.pop());
  21.       console.log(arr.pop());
  22.       console.log(arr.pop());
  24.       // 2. 头部增删
  25.       console.log(arr.unshift(10));
  26.       // 从右到左进入
  27.       console.log(arr.unshift(30, 20));
  28.       console.log(arr);
  29.       console.log(arr.shift());
  30.       console.log(arr.shift());
  31.       console.log(arr.shift());
  32.       console.log(arr);
  34.       arr = [1, 2, 3, 4, 5];
  35.       //删除指定索引位置的值，赋null值，但是实际数组长度不变，不影响数组的遍历
  36.       delete arr[1];
  37.       console.log(arr);
  38.       console.log(arr.length);
  39.       //可通过修改数组的长度来删减数组内的成员
  40.       arr.length = 4;
  41.       console.log(arr);
  42.     </script>
  43.   </body>
  44. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组常用api-3</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 迭代方法, 遍历元素
  12.       // 1. forEach,map
  13.       // 2. every, some
  14.       // 3. filter, find, findIndex
  15.       // 4. reduce
  17.       //   1. forEach((item,index,arr)=>{...}), 每个元素逐个调用回调处理
  19.       let arr = [1, 2, 3, 4, 5];
  21.       let res = arr.forEach(function (item, index, arr) {
  22.         // 三个参数中, 只有第一个 item是必须的
  23.         console.log(item, index, arr);
  24.         // dom
  25.         document.body.append(item);
  26.       });
  27.       // 没有返回值
  28.       console.log(res);
  30.       // 2. map: 参数与功能 与forEach一样,只不过有返回值
  31.       res = arr.map((item) => item * 2);
  32.       console.log(res);
  34.       // 3. every, some: 断言函数,返回true,false
  35.       //   every: 数组成员全部满足条件,则返回 true , 否则 false 与
  36.       console.log(arr.every((item) => item >= 0));
  37.       console.log(arr.every((item) => item >= 3));
  38.       // some: 数组成员中只要有一个满足条件,就返回 true, 否则 false, 或
  39.       console.log(arr.some((item) => item >= 3));
  40.       console.log(arr.some((item) => item >= 10));
  42.       // 4. filter: 返回数组中的满足条件的元素组成的新数组
  43.       console.log(arr.filter((item) => item >= 3)); // [3,4,5]
  45.       //   arr.filter(item => item >= 3)[0] -> find
  46.       console.log(arr.find((item) => item >= 3));
  47.       console.log(arr.findIndex((item) => item >= 3));
  49.       // 5. reduce: 归并
  50.       res = arr.reduce(function (acc, cur, index, arr) {
  51.         // 查看reduce的执行过程
  52.         console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
  53.         // 最终结果用 acc 返回, acc累加器
  54.         return acc + cur;
  55.       }, 5);
  56.       console.log(res);
  57.     </script>
  58.   </body>
  59. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>数组常用api-4</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1. sort
  12.       let arr = [1, 10, 20, 6];
  13.       console.log(arr.sort());
  14.       // asc
  15.       console.log(arr.sort((a, b) => a - b));
  16.       // desc
  17.       console.log(arr.sort((a, b) => b - a));
  19.       // 2. join:  array -> string
  21.       //   string.split string -> array
  22.       arr = ["red", "green", "blue"];
  23.       console.log(arr.join());
  24.       console.log(arr.join("-"));
  26.       // 3. slice: 子元素
  27.       arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  28.       console.log(arr.slice(2, 5));
  29.       console.log(arr.slice(2));
  30.       console.log(arr.slice(-6, -3));
  32.       // 4. splce: 删除, 新增, 替换
  33.       // delete
  34.       console.log(arr);
  35.       console.log(arr.splice(1, 2));
  36.       console.log(arr);
  38.       // update
  39.       console.log(arr.splice(1, 2, "a", "b"));
  40.       console.log(arr);
  42.       // insert
  43.       console.log(arr.splice(1, 0, "red", "green"));
  44.       console.log(arr);
  46.       let data = ["red", "green", "blue"];
  47.       console.log(arr.splice(1, 0, ...data));
  48.       console.log(arr);
  49.     </script>
  50.   </body>
  51. </html>
上一条：laravel_day4下一条：Arch Linux 安装 Anbox
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议