欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javascript数组常用得api与表单事件实例

程序员文章站 2022-03-13 12:39:41
...

表单事件

  • 以下为表单实例。
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>Document</title>
    8. 

  8.     <link rel="stylesheet" href="style.css">
    9. 

  9. </head>
    10. 

  10. <body>
    11. 

  11.     <form action="" method="post" id=login>
    12. 

  12.         <label for="email" class="title">用户登录</label>
    13. 

  13.         <label for="email">邮箱</label>
    14. 

  14.         <input type="text" onblur="check(this)" name="email" class="email" placeholder="请输入邮箱">
    15. 

  15.         <label for="password">密码</label>
    16. 

  16.         <input type="password" onblur="check(this)" name="password" class="password" placeholder="请输入8位数得密码">
    17. 

  17.         <button>提交</button>
    18. 

  18.     </form>
    19. 

  19.     <script>
    20. 

  20.             function check(ele){
    21. 

  21.                 event.preventDefault();
    22. 

  22.                 event.stopPropagation();
    23. 

  23.                 let act = document.activeElement.name;
    24. 

    25. 

  25.                 if (act==="email")
    26. 

  26.                 {
    27. 

  27.                     return false;
    28. 

  28.                 }
    29. 

    30. 

  30.                 if (act=="password")
    31. 

  31.                 {
    32. 

  32.                     return false;
    33. 

  33.                 }
    34. 

  34.                 let parent=ele.form;
    35. 

  35.                 console.log(ele.value);
    36. 

  36.                 if (parent.email.value.length==0)
    37. 

  37.                 {
    38. 

  38.                     alert("邮箱不能为空");
    39. 

  39.                     parent.email.focus();
    40. 

  40.                     return false;
    41. 

  41.                 }
    42. 

  42.                 else if(parent.password.value.length==0)
    43. 

  43.                 {
    44. 

  44.                     alert("密码不能为空");
    45. 

  45.                     parent.password.focus();
    46. 

  46.                     return false;
    47. 

  47.                 }
    48. 

  48.                 else{
    49. 

  49.                     alert("验证通过");
    50. 

  50.                     return true;
    51. 

  51.                 }
    52. 

  52.             }
    53. 

  53.     </script>
    54. 

    55. 

  55. </body>
    56. 

  56. </html>
    57.

javascript数组常用api

字符串数组

  • 1.length获取长度str.length
  • 2.charAt通过索引元素str.charAt(0)
  • 3.indexof通过元素获得索引str.indexof("中")
  • 4.serch通过元素获得索引,但是支持正则表达式
  • 5.concat字符串拼接str.concat("a","bcs")
  • 6.replace替换字符串str.replace("中文网",".cn")
  • 7.slice(a,b)取a到B得子串str.slice(0,3)
  • 8.substr(0,num)取子串从第0个字符开始取num个字符str.substr(0,5)
  • 9.split(“a”,num)分割字符串,第一个参数不为空时,跟你a字符分割字符串,返回字符串数组,第一个参数为空,第二个不为空时,返回前n个字符数组
  • 10.tolowercase()将字符串全部转成小写str.tolowercase()
  • 11.toUppercase()将字符串全部转成大写str.toUppercase()

    其他数组

  • Array.of 原始数据有可能来自一个外部请求api或文件,而这个原始数据就是数组例
    

  1.     let a=[1,2,3,4,5];
    2. 

  2.     arr=Array.of(...a);
    3. 

  3.     console.log(arr);
    4.
  • Array.from将类数组转成数组例
    

  1.    const likeArr = {
    2. 

  2.         0: "red",
    3. 

  3.         1: "blue",
    4. 

  4.         2: "green",
    5. 

  5.         length: 3,
    6. 

  6.       };
    7. 

  7.       console.log(likeArr);
    8. 

  8.       console.log(Array.from(likeArr));
    9.
  • push,从数组尾部加入arr.push(10)
  • pop，从数组尾部删除arr.pop(20)
  • unshift从数组头部加入arr.unshift(10)
  • shift从数组头部删除arr.shift()
  • forEach((item,index,arr)=>{…}), 每个元素逐个调用回调处理,item是必须,foreach没有返回值例子如下
    

  1.        let arr = [1, 2, 3, 4, 5];
    2. 

    3. 

  3. let res = arr.forEach(function (item, index, arr) {
    4. 

  4.   // 三个参数中, 只有第一个 item是必须的
    5. 

  5.   console.log(item, index);
    6. 

  6.   // dom
    7. 

  7.   document.body.append(item);
    8. 

  8. });
    9.
  • map: 参数与功能 与forEach一样,只不过有返回值,返回值是新数组
    

  1.  res = arr.map(item => item * 2);
    2. 

  2.       console.log(res);
    3.

  • every断言函数,判断数组中每个值是否符合条件,全部符合返回true，否则返回falseconsole.log(arr.every(item => item >= 0));

  • some: 数组成员中只要有一个满足条件,就返回 true, 否则 false,console.log(arr.some(item => item >= 10));

  • filter: 返回数组中的满足条件的元素组成的新数组console.log(arr.find(item => item >= 3));

  • reduce: 归并

    

  1.    res = arr.reduce(function (acc, cur, index, arr) {
    2. 

  2.         console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
    3. 

  3.         // 最终结果用 acc 返回, acc累加器
    4. 

  4.         return acc + cur;
    5. 

  5.       }, 5);
    6.

  • sort排序升序console.log(arr.sort((a, b) => a - b));,降序console.log(arr.sort((a, b) => b - a));

  • join将数组转成字符串

    

  1.  arr = ["red", "green", "blue"];
    2. 

  2.       console.log(arr.join());
    3. 

  3.       console.log(arr.join("-"));
    4.
  • slice子元素
    

  1.  arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    2. 

  2.       console.log(arr.slice(2, 5));
    3. 

  3.       console.log(arr.slice(2));
    4. 

  4.       console.log(arr.slice(-6, -3));
    5.
  • splice: 删除, 新增, 替换
    

  1.  // delete
    2. 

  2.       console.log(arr);
    3. 

  3.       console.log(arr.splice(1, 2));
    4. 

  4.       console.log(arr);
    5. 

    6. 

  6.       // update
    7. 

  7.       console.log(arr.splice(1, 2, "a", "b"));
    8. 

  8.       console.log(arr);
    9. 

    10. 

  10.       // insert
    11. 

  11.       console.log(arr.splice(1, 0, "red", "green"));
    12. 

  12.       console.log(arr);
    13. 

    14. 

  14.       let data = ["red", "green", "blue"];
    15. 

  15.       console.log(arr.splice(1, 0, ...data));
    16. 

  16.       console.log(arr);
    17.

上一篇： css中rem+vw布局的原理,grid布局与仿img.baidu.com实例

下一篇： javascript得dom编程初体验

推荐阅读