事件添加方法

1. 在 HTML 中直接指定

例如鼠标单击事件 onclick 、双击事件 onmouseover 、鼠标移入移出事件 onmouseover 、onmouseout 。又可分为两种。

① 直接写在 HTML 的属性中
<button onclick="alert('hello world')">Click</button>

② 在 HTML 中自定义函数

  1. <button onclick="func()">Click</button>
  2. <script type="text/javascript">
  3.   var func = () => alert('hello world');
  4. </script>

2、在 Javascript 中 绑定

第一种方法将JS事件和HTML标签写在一起，不利于项目的管理和开发。为了使代码结构清晰合理，按照不同功能将其分离将提高效率。

  1. <button id="btn">Click</button>
  2. <script type="text/javascript">
  3. // 添加事件
  4.   document.getElementById('btn').onclick = function func() {
  5.     alert('hello world');
  6.   }
  7.   // 移除事件
  8.   document.getElementById('btn').onclick = null;
  9. </script>

3. 绑定事件监听函数 addEventListenr()

虽然第二种方法比第一种好，但也有不足之处。一般一个点击事件上有时候不止触发一个事件。一种设想是把 func() 函数再套一层函数，比如把定义的函数 a() 和 b() 放在 func() 中。但是这样未免太过烦琐了，于是使用 addEventListenr()，他可以给元素重复添加多个事件。
语法：target.addEventListener(type, listener, options);

① target 是DOM 操作获得的对象
② type 指事件类型的字符串。例如 click、mouseout
③ listener 在这里指当事件出发的时候执行的函数。可直接写函数名，也可直接定义函数然后用引号括起来。
④ options 可选( 函数的冒泡或者捕获, false冒泡 / true 捕获)

  1. <button id="btn">Click</button>
  2. <script type="text/javascript">
  3.   const btn = document.getElementById('btn');
  4.   // 注意：这里func1不能添加括号，不然就立即执行函数了。我们需要给事件添加，当触发事件的时候，执行该函数，所以只需要将函数名称赋值给事件。
  5.   btn.addEventListener('click', function(){
  6.       console.log("你好")
  7.   });
  8.   // 注意：上面通过回调添加的事件是无法移除的
  9.   btn.addEventListener('click', func1);
  10.   btn.addEventListener('mouseout', func2);
  11.   function func1() {
  12.     console.log("hello")
  13.   };
  14.   function func2() {
  15.     console.log("world")
  16.   }; 
  17.   // 鼠标点击事件和移开鼠标事件都被执行，分别输出 hello、world
  19.   // 移除mouseout事件
  20.   btn.removeEventListener("mouseout",func2);
  21. </script>

attachEvent兼容处理（IE）

接收两个参数:

  • 第一个参数:事件名称
  • 第二个参数:回调函数(事件需要做的事情)
    注意点:
  • 事件名称需要加上on
  • 后写的事件不会覆盖先前写的事件
  • 兼容性问题: 只支持低版本浏览器
  • 默认触发事件的冒泡
  1. // 兼容性处理
  2. function addEvent(ele, name ,fn) {
  3.   if(ele.attachEvent){
  4.        obj.attachEvent("on"+name, fn);
  5.     }else{
  6.       obj.addEventListener(name,fn)
  7.   }
  8. }

事件派发dispatchEvent()

这是标准的触发事件方法，使用时需要先创建好事件对象。如下

  1. // 自定义事件
  2. const  ev = new Event("click");
  3. // 获取按钮
  4. const btn = document.querySelector(".btn");
  5. let i = 0;
  6. // 绑定点击事件
  7. btn.addEventListener('click',function(){
  8.     console.log("我会被自动点击"+++i+"次")
  9. })
  10. // 自动触发点击事件
  11. btn.dispatchEvent(ev);
  13. // 使用定时器来自动点击按钮
  14. setInterval("btn.dispatchEvent(ev)",1000);

事件对象中的属性

  1. btn.addEventListener('click',function(e){
  2.     // 事件类型
  3.     console.log(e.type);
  4.     // 事件绑定者
  5.     console.log(e.currentTarget);
  6.     // 事件触发者
  7.     console.log(e.target);
  8.     // 事件传递路径
  9.     console.log(e.path)
  10. })

事件传递机制

event propagation事件冒泡

element.addEventListener(‘click’, listener, useCapture); useCapture 默认是false, 表示使用bubble(冒泡)。

在DOM事件标准中，定义了事件传播的3个阶段

  • capturing phase 捕获阶段，事件从dom tree的上方向下方传递
  • target phase 目标阶段，事件到达目标元素
  • bubbling phase冒泡阶段，事件从该元素向上传递。即触发子元素中注册的事件，再触发父元素中注册的事件。

addEventListener第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

  1.     <div id="s1">红
  2.         <div id="s2"> 黄
  3.             <div id="s3">蓝</div>
  4.         </div>
  5.     </div>

测试事件冒泡-点击蓝色

  1.         s1 = document.getElementById('s1')
  2.         s2 = document.getElementById('s2')
  3.         s3 = document.getElementById('s3')
  5.         s1.addEventListener("click", function(e) {
  6.             console.log("红 冒泡事件"); //从底层往上
  7.         }, false);
  9.         s2.addEventListener("click", function(e) {
  10.             console.log("黄 冒泡事件");
  11.         });
  13.         s3.addEventListener("click", function(e) {
  14.             console.log("蓝 冒泡事件");
  15.              // 事件传递路径
  16.             console.log(e.path)
  17.         });


测试事件捕获-点击蓝色

  1. s1.addEventListener("click",function(e){
  2.     console.log("红 捕获事件");
  3. },true);
  5. s2.addEventListener("click",function(e){
  6.     console.log("黄 捕获事件");
  8. },true);
  9. s3.addEventListener("click",function(e){
  10.     console.log("蓝 捕获事件");
  11. },true);

事件捕获与事件冒泡同时存在

事件捕获过程中，先捕获后冒泡
事件到达目标节点，先注册先执行

  • 这里记被点击的DOM节点为target节点,document 往 target节点，捕获前进，遇到注册的捕获事件立即触发执行
  • 到达target节点，触发事件
  • 对于target节点上，是先捕获还是先冒泡，根据捕获事件和冒泡事件的注册顺序，先注册先执行
  • target节点 往 document 方向，冒泡前进，遇到注册的冒泡事件立即触发
  1. s1.addEventListener("click",function(e){
  2.     console.log("红 冒泡事件");
  3. },false);
  4. s2.addEventListener("click",function(e){
  5.     console.log("黄 冒泡事件");
  6. },false);
  7. s3.addEventListener("click",function(e){
  8.     console.log("蓝 冒泡事件");
  9. },false);
  11. s1.addEventListener("click",function(e){
  12.     console.log("红 捕获事件");
  13. },true);
  15. s2.addEventListener("click",function(e){
  16.     console.log("黄 捕获事件");
  18. },true);
  19. s3.addEventListener("click",function(e){
  20.     console.log("蓝 捕获事件");
  21. },true);

在不使用任何框架的情况下，我们在js中通过addEventListener方法给Dom添加事件监听。这个方法有三个参数可以传递addEventListener(event,fn,useCapture)。event是事件类型click，focus，blur等；fn是事件触发时将执行的函数方法（function）；第三个参数可以不传，默认是false，这个参数控制是否捕获触发。所以我们只传两个参数时，这个事件是冒泡传递触发的，当第三个参数存在且为true时，事件是捕获传递触发的。

阻止事件冒泡和默认事件的方法

  • event.stopPropagation()方法
    这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开
  • event.preventDefault()方法
    这是阻止默认事件的方法，调用此方法是，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素。
    preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
  • return false
    这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，链接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()方法。

事件委托(事件代理)

比如我想点击ul标签里面的li获取它的值,有点人就会遍历去给每个li加一个事件监听
其实我们可以在li的父级加一个事件监听，这就相当于把事件监听委托给了ul。
我们点击li的时候，事件冒泡到ul，被注册在ul的事件代理给捕获到，实现了事件委托机制。

  1. <ul id="ul">
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5.   <li>4</li>
  6.   <li>5</li>
  7.   <li>6</li>
  8.   <li>7</li>
  9. </ul>
  10. <script>
  11.     ul = document.getElementById('ul')
  12.     ul.addEventListener("click",function(e){
  13.         console.log(e.target.innerText);
  14.     },false);
  15. </script>

让我们用事件委托来捕获多个按钮上的点击：

  1. <div id="buttons"> <!-- Step 1 -->
  2.   <button class="buttonClass">Click me</button>
  3.   <button class="buttonClass">Click me</button>
  4.   <!-- buttons... -->
  5.   <button class="buttonClass">Click me</button>
  6. </div>
  8. <script>
  9.   document.getElementById('buttons').addEventListener('click', event => { // Step 2
  10.       if (event.target.className === 'buttonClass') { // Step 3
  11.         console.log('Click!');
  12.       }
  13.     });
  14. </script>

事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听 <div id="buttons">。单击按钮时，父元素的侦听器将会捕获冒泡事件

使用事件委托需要 3 个步骤：

  • 步骤 1：确定要监视事件的元素的父级元素
    在上面的例子中， <div id="buttons"> 是按钮的父元素。

  • 步骤 2：把事件侦听器附加到父元素
    document.getElementById('buttons') .addEventListener('click', handler) 将事件侦听器附加到按钮的父元素。该事件侦听器也会对按钮单击做出反应，因为按钮单击事件冒泡通过祖先元素（由于事件传播）。

  • 步骤 3：用 event.target 选择目标元素
    单击按钮时，将会用event 对象参数调用处理函数。属性 event.target 访问在其上调度了事件的元素，在例子中是一个按钮：

  1. .addEventListener('click', event => {
  2.     if (event.target.className === 'buttonClass') {
  3.         console.log('Click!');
  4.     }
  5. });

event.currentTarget 指向事件侦听器直接附加到的元素。在例子中，event.currentTarget 是 <div id="buttons">。

当发生点击事件（或传播的任何其他事件）时：

  • 事件从 window、document、根元素向下传播，并经过目标元素的祖先（捕获阶段）；
  • 事件发生在目标（目标阶段）上；
  • 最后，事件在目标祖先之间冒出气泡，直到根元素 document 和 window（冒泡阶段）。
    该机制称为事件传播。

事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。

使用事件委托需要三个步骤：

  1. 确定要监视事件的元素的父级元素
  2. 把将事件侦听器附加到父元素
  3. 用 event.target 选择目标元素

常用事件

属性此事件发生在何时……
onclick当用户点击某个对象时调用
ondblclick当用户双击某个对象时调用
onmousedown鼠标按钮被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标移到某元素之上
onmouseup鼠标按键被松开
onfocus元素获得焦点
onblur元素失去焦点
onchange域的内容被改变
onkeydown某个键盘按键被按下
onkeypress某个键盘按键被按下并松开
onkeyup某个键盘按键被松开
onload加载完成时

表单常用事件

  1. <form action="" method="POST" id="login" name="login">
  2.     <input type="text" name="username" id="username" placeholder="请输用户名">
  3.     <input type="password" name="password" id="password" placeholder="输入密码">
  4.     <input type="submit" value="登录">
  5. </form>

获取表单form元素

  1. // const myForm = document.forms[0];
  2. // const myForm = document.forms.item(0);
  3. // const myForm = document.forms.namedItem("login");
  4. // 注意：form.id === form.name
  5. // 除了document.forms[0]和forms.item(0)获取，也可以通过表单ID
  6. // const myForm = document.forms['login'];
  7. const myForm = document.forms.login

表单的提交事件

  1. const myForm = document.forms['login'];
  2. myForm.submit.onclick = function(e){
  3.     console.log("表单提交时触发事件");
  4.     // 返回当前的绑定者
  5.     console.log(e.currentTarget);
  6.     // 返回当前表单
  7.     console.log(e.currentTarget.form);
  8.     // 非空验证
  9.     isEmpty(e.currentTarget.form);
  11.     // 我们一般都是自定义表单的提交行为，需要禁用默认的提交
  12.     // 取消表单提交按钮的默认事件
  13.     //   return false;
  14.     // 取消默认行为
  15.      e.preventDefault();
  16.      // 取消事件冒泡
  17.      e.stopPropagation()
  18. }
  20. function isEmpty(form){
  21.     console.log(form.username.value);
  22.     console.log(form.password.value);
  23.     if(form.username.value.length){
  24.         alert("用户名不能为空");
  25.         // 将输入焦点设置到邮箱输入框中
  26.         form.username.focus();
  27.         return false;
  28.     } else if(form.password.value.length){
  29.         alert("密码不能为空");
  30.         // 将输入焦点设置到邮箱输入框中
  31.         form.password.focus();
  32.         return false;
  33.     }else{
  34.         alert("验证成功！");
  35.     }
  36. }
表单事件何时触发该事件……
focus获取焦点事件
blur失去焦点事件
input只要值变化时连续触发，不等失去焦点
change值发烧改变且失去焦点时触发
select选中文本时触发
invalid提交时表单元素值不满足验证条件时触发
reset将表单值全部重置到默认值（非清空）
submit提交表单时触发，触发的是from，不是按钮
keydown按下键盘时
keyup松开键盘时
keypress按过了键盘时，keydown,keypress,keyup
load,error加载和出错时

留言板案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>留言板</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         li {
  16.             list-style: none;
  17.         }
  19.         body {
  20.             background-color: rgb(174, 236, 236);
  21.             color: #555;
  22.         }
  24.         .comment {
  25.             width: 85%;
  26.             margin: 1em auto;
  27.             display: grid;
  28.             gap: 0.5em;
  29.         }
  31.         .comment #content {
  32.             resize: none;
  33.             border: none;
  34.             padding: 0.5em;
  35.             outline: none;
  36.         }
  38.         .comment #content:focus,
  39.         .comment #content:hover {
  40.             box-shadow: 0 0 8px steelblue;
  41.             transition: 0.6s;
  42.         }
  44.         .comment .submit {
  45.             width: 30%;
  46.             margin-left: auto;
  47.             background-color: lightseagreen;
  48.             border: none;
  49.             outline: none;
  50.             color: white;
  51.             height: 2.5em;
  52.         }
  54.         .comment .submit:hover {
  55.             background-color: seagreen;
  56.             transition: 0.6s;
  57.             cursor: pointer;
  58.         }
  60.         .list {
  61.             width: 80%;
  62.             /* background-color: yellow; */
  63.             margin: auto;
  64.             padding: 1em;
  65.         }
  67.         .del-btn {
  68.             background-color: wheat;
  69.             color: red;
  70.             padding: 0.5em 1em;
  71.             /* height: 2.2em; */
  72.             border: none;
  73.             outline: none;
  74.         }
  76.         .del-btn:hover {
  77.             cursor: pointer;
  78.             background-color: lime;
  79.         }
  81.         .info {
  82.             font-size: 12px;
  83.             color: #aaa;
  84.             display: none;
  85.         }
  86.     </style>
  87. </head>
  89. <body>
  90.     <form class="comment">
  91.         <label for="content">请留言:</label>
  92.         <textarea name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符" maxlength="100"></textarea>
  93.         <span class="info">您还可以输入100个字符</span>
  94.         <button class="submit" type="button" name="submit">提交</button>
  95.     </form>
  96.     <ul class="list ">
  98.     </ul>
  99.     <script>
  100.         // 获取元素
  101.         // from 
  102.         const comment = document.querySelector('.comment');
  103.         // textarea
  104.         const content = comment.content;
  105.         // btn
  106.         const submitBtn = comment.submit;
  107.         // ul
  108.         const commentList = document.querySelector(".list");
  109.         // info
  110.         const info = document.querySelector(".info");
  112.         // 提交按钮点击事件
  113.         submitBtn.onclick = function(ev) {
  114.             let value = content.value.trim();
  116.             if (value.length > 0 && value.length <= 100) {
  117.                 // 将留言输入的内容插入到列表中
  118.                 // 最新的留言总是在第一条
  119.                 const newComment = document.createElement('li');
  120.                 newComment.textContent = value;
  121.                 newComment.style.borderBottom = '1px solid white';
  122.                 newComment.style.minHeight = '3em';
  124.                 // 为每一条留言添加删除按钮
  125.                 const deleteBtn = document.createElement('button');
  126.                 deleteBtn.textContent = '删除';
  127.                 deleteBtn.style.float = "right ";
  128.                 deleteBtn.classList.add('del-btn');
  129.                 deleteBtn.onclick = function(ev) {
  130.                         if (confirm("是否删除 ")) {
  131.                             // 确定：true 取消：false
  132.                             this.parentNode.remove();
  133.                             alert('删除成功！');
  134.                             content.focus();
  135.                         }
  136.                     }
  137.                     // 将删除按钮添加到留言的后面
  138.                 newComment.append(deleteBtn);
  140.                 // 将最新留言添加到列表头部
  141.                 commentList.prepend(newComment);
  142.                 // 通知用户留言成功
  143.                 alert('留言成功！');
  144.                 // 清空输入框
  145.                 content.value = null;
  146.                 // 隐藏提示字符
  147.                 info.style.display = 'none';
  148.                 // 焦点重新定位到输入框中
  149.                 content.focus();
  150.             } else {
  151.                 alert("没有内容或者内容超出规定长度…… ");
  152.                 content.focus();
  153.                 return false;
  154.             }
  155.         }
  157.         // 输入框的输入事件
  158.         content.oninput = function() {
  159.             info.style.display = "inline";
  160.             info.innerHTML = `您还可以输入${100-this.value.length}个字符`;
  161.         }
  162.     </script>
  163. </body>
  165. </html>

演示效果图：


为留言板添加字数实时统计与禁止超出功能
解决思路：实时剩余字数统计，主要是给输入框添加input事件监听，只要输入内容就会触发该事件，从而动态的计算剩余字符个数，显示在标签中提示用户。
禁止超出功能，当达到一百个字符的时候，让用户无法输入，可以给textarea标签添加一个 maxlength=”100”属性，从而限制最大字符个数。

字符串常用方法

  1. concat(v1, v2,.) 字符串拼接
    concat() 方法用于连接两个或多个字符串，此方法不改变现有的字符串，返回拼接后的新的字符串。
  1. //concat(v1, v2,..);
  2. let message="Sam"
  3. let final=message.concat(" is a"," hopeless romantic.")
  4. console.log(final);
  5. //alerts "Sam is a hopeless romantic."
  1. slice(start, [end]) 取子串
    slice() 方法可提取字符串的某个部分，返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
  1. //slice(start, end)
  2. let text="excellent"
  3. text.slice(0,4) //  "exce"
  4. text.slice(2,4) // "ce"
  5. // 省略第二个值，就是从当前位置到结束
  6. text.slice(4); // llent
  7. text.slice(0); // excellent
  8. // -1 是反向的第一个字符
  9. text.slice(-4); // lent
  1. substr(start, [length])取子串
    substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串，包含从 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到该字符串的结尾的字符。
  1. //substring(from, to)
  2. let text="excellent"
  3. text.substr(0,4) //  "exce"
  4. text.substr(2,4) //  "cell"
  5. text.substr(-4,3) // len
  1. trim()删除两端空白字符
    trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）
  1. //trim()
  2. let str = "     Hello Edureka!     ";
  3. console.log(str.length); // 24
  4. console.log(str.trim()); // Hello Edureka!
  5. console.log(str.trim().length); // 14
  1. toLowerCase() 转小写
    toLowerCase() 方法用于把字符串转换为小写。
  1. //toLowerCase()
  2. let myString = 'JAVASCRIPT ROX';
  3. myString = myString.toLowerCase();
  4. console.log(myString)  // javascript rox
  1. toUpperCase() 转大写
    toUpperCase() 方法用于把字符串转换为大写。
  1. //toUpperCase()
  2. let myString = 'javascript rox';
  3. myString = myString.toUpperCase();
  4. console.log(myString) // JAVASCRIPT ROX
  1. split(delimiter, [limit]) 字符串转数组
    split() 方法用于把一个字符串分割成字符串数组，返回一个字符串数组返回的数组中的字串不包括 delimiter自身。 可选的“limit”是一个整数，允许各位指定要返回的最大数组的元素个数。注意：一般与数组的join()方法一起使用，他是将数组分割成字符串
  1. let str = "abcdefg";
  2. let res = str.split('');
  3. console.log(res); // ["a", "b", "c", "d", "e", "f", "g"]
  4. console.log(res.join('|'));  // a|b|c|d|e|f|g
  6. // 从一个邮箱中解析出用户名和邮箱地址
  7. let email = "zhangshuai@163.cn";
  8. res = email.split("@");
  9. console.log(email.split("@")); //  ["zhangshuai", "163.cn"]
  10. console.log("userName=",res[0]); // zhangshuai
  11. console.log("emailAddress=",res[1]); // 163.cn
  1. endsWith()
    endsWith()函数检查字符串是否以指定的字符串或字符结束。
  1. //endsWith()
  2. let email1 = "zhangshuai@163.cn";
  3. let email2 = "zhangshuai@qq.cn";
  4. console.log(email1.endsWith("163.cn")); // true
  5. console.log(email2.endsWith("163.cn")); // false

数组的常用方法

  1. push()和pop() 末尾添加和删除
    push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
    pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
  1. const arr = ["Lily","lucy","Tom"];
  2. var count = arr.push("Jack","Sean");
  3. console.log(count); // 5
  4. console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
  6. var item = arr.pop();
  7. console.log(item); // Sean
  8. console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]
  1. unshift() 和 shift() 开头添加和删除
    unshift:将参数添加到原数组开头，并返回数组的长度 。
    shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 
  1. const arr = ["Lily","lucy","Tom"];
  2. var count = arr.unshift("Jack","Sean");
  3. console.log(count); // 5
  4. console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
  6. var item = arr.shift();
  7. console.log(item); // Jack
  8. console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]
  1. join() 和 split() 数组和字符串互转
    join(separator)将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
    split(separator)将字符串分割为一个数组，以separator为分隔符，该方法只接收一个参数：即分隔符。
  1. let arr = [1,2,3,4,5,6];
  2. console.log(arr.join()); // 1,2,3,4,5,6
  3. console.log(arr.join("-")); // 1-2-3-4-5-6
  5. let str = "abcde";
  6. console.log(str.split('')); // ["a", "b", "c", "d", "e"]
  7. console.log(str.split('c')); // ["ab", "de"]
  9. // 可以利用将其快速生成列表
  10. arr = ['电脑','手机','平板'];
  11. let res = arr.join("</li><li>");
  12. console.log(`<li>${res}</li>`);
  13. // <li>电脑</li><li>手机</li><li>平板</li>
  1. reverse() 反转数组
    reverse()：反转数组项的顺序。
  1. let arr = [1,2,3,4,5,6];
  2. console.log(arr.reverse()); // [6,5,4,3,2,1]
  3. console.log(arr); // [6,5,4,3,2,1] (原数组改变)
  1. concat()
    concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
  1. console.log("hello".concat("world!")); // helloworld!
  2. console.log(["hello"].concat(["world"])); // ["hello", "world"]
  1. slice() 取部分成员
    slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
  1. const arr = [1,3,5,7,9,11];
  2. console.log(arr.slice(0,3)); // [1,3,5]
  3. console.log(arr.slice(-2)); // [9,11]
  1. splice() 增删改

splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

  1. const arr = [1,3,5,7,9,11];
  2. let res = arr.splice(3);
  3. console.log(res); // [7, 9, 11]
  4. console.log(arr) // 原数组   [1, 3，5]
  6. res = arr.splice(0,2);
  7. console.log(res); // [1,3]
  8. console.log(arr) // 原数组   [5]

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

  1. const arr = [1,3,5,7];
  2. // arr.splice(1,0,'a','b','c');
  3. arr.splice(1,0,...['a','b','c']);
  4. console.log(arr); // [1, "a", "b", "c", 3, 5, 7]

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。

  1. const arr = [1,3,5,7];
  2. arr.splice(1,2,...[2,3,4,5,6]);
  3. console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

  1. forEach()
    forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。
  1. var arr = [1, 2, 3, 4, 5];
  2. arr.forEach(function(item,index,arr){
  3.     console(`值：${item}，索引：${index}，数组：${arr}`)
  4. })
  5. /*
  6. 值：1，索引：0，数组：1,2,3,4,5
  7. 值：2，索引：1，数组：1,2,3,4,5
  8. 值：3，索引：2，数组：1,2,3,4,5
  9. 值：4，索引：3，数组：1,2,3,4,5
  10. 值：5，索引：4，数组：1,2,3,4,5
  11. */
  1. filter()过滤
    filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
  1. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  2. // 返回所有奇数成员
  3. var newArr = arr.filter((item,index)=>item%2);
  4. console.log(newArr) // [1, 3, 5, 7, 9]
  5. // 返回所有偶数成员
  6. var newArr = arr.filter((item,index)=>!(item%2));
  7. console.log(newArr) // [2, 4, 6, 8, 10]
  1. every()
    every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
  1. var arr = [1, 2, 3, 4, 5];
  2. // 判断所有元素是否都小于10
  3. var arr2 = arr.every(function(x) {
  4.     return x < 10;
  5. });
  6. console.log(arr2); //true
  8. // 利用箭头函数简化 判断是否所有元素都小于3
  9. var arr3 = arr.every(x=>x < 3);
  10. console.log(arr3); // false
  1. some()
    some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true
  1. var arr = [1, 2, 3, 4, 5];
  2. var arr2 = arr.some(x=>x < 3);
  3. console.log(arr2); //true
  5. var arr3 = arr.some((x)=> x > 6);
  6. console.log(arr3); // false
  1. reduce()
    reduce()方法从数组的第一项开始，逐个遍历到最后。
    函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。
  1. // 下面代码用reduce()实现数组求和，数组一开始加了一个初始值10
  2. var arr = [1,2,3,4,5]; // 15
  3. var sum = arr.reduceRight(function(prev, cur, index, array){
  4.     console.log(prev,cur,index,array)
  5.     // 当前值会自动累加给前一个值
  6.     /* 前一个值  当前值  索引   数组
  7.          10       5      4     (5) [1, 2, 3, 4, 5]
  8.          15       4      3     (5) [1, 2, 3, 4, 5]
  9.          19       3      2     (5) [1, 2, 3, 4, 5]
  10.          22       2      1     (5) [1, 2, 3, 4, 5]
  11.          24       1      0     (5) [1, 2, 3, 4, 5]*/
  12.     return  prev + cur;
  13. },10);
  14. console.log(sum); //25

13.map()
map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

  1. // 利用map方法实现数组中每个数求平方
  2. var arr = [1, 2, 3, 4, 5];
  3. console.log(arr.map(item=>item**2));
  4. // [1, 4, 9, 16, 25]

更多相关文章

  1. 【js知识】splice()实现数组的添加、删除、替换
  2. 【uni-app/微信小程序】预览图片（单张、多张）uni.previewImage()
  3. 2021-04-07：给定一个非负数组arr，长度为N，那么有N-1种方案可以把arr
  4. 数组，对象，传参解构; 访问器属性的get,set操作
  5. input输入框相关事件整理
  6. 开发技巧 | mPaaS 小程序自定义事件，如何取消注册？
  7. JavaScript中的数组，对象，传参解构，访问器属性
  8. 数组函数的练习
  9. js 中的数组，对象，传参解构；访问器属性get，set操作 ---- 0401

随机推荐

  1. Android中shape属性详解
  2. Android搜索框：SearchView用法详解
  3. Android事件分发机制和一些疑问
  4. Android View坐标getLeft, getRight, get
  5. 安卓入门.RelativeLayout相对布局1
  6. android 开发中判断网络是否连接的代码
  7. android EditText 设置弹出数字输入法键
  8. android设置横屏代码
  9. Android(安卓)Studio 时间选择器创建
  10. Android事件分发机制完全解析(终极版二)