Home > List of blog posts > javascript数组常用得api与表单事件实例

Blogger Information

Blog 30

fans 1

comment 0

visits 16066

Special Recommendation

More>

Related recommendations

表单事件

以下为表单实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="" method="post" id=login>
        <label for="email" class="title">用户登录</label>
        <label for="email">邮箱</label>
        <input type="text" onblur="check(this)" name="email" class="email" placeholder="请输入邮箱">
        <label for="password">密码</label>
        <input type="password" onblur="check(this)" name="password" class="password" placeholder="请输入8位数得密码">
        <button>提交</button>
    </form>
    <script>
            function check(ele){
                event.preventDefault();
                event.stopPropagation();
                let act = document.activeElement.name;
                if (act==="email")
                {
                    return false;
                }
                if (act=="password")
                {
                    return false;
                }
                let parent=ele.form;
                console.log(ele.value);
                if (parent.email.value.length==0)
                {
                    alert("邮箱不能为空");
                    parent.email.focus();
                    return false;
                }
                else if(parent.password.value.length==0)
                {
                    alert("密码不能为空");
                    parent.password.focus();
                    return false;
                }
                else{
                    alert("验证通过");
                    return true;
                }
            }
    </script>
</body>
</html>

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或文件,而这个原始数据就是数组例

    let a=[1,2,3,4,5];
    arr=Array.of(...a);
    console.log(arr);

Array.from将类数组转成数组例

   const likeArr = {
        0: "red",
        1: "blue",
        2: "green",
        length: 3,
      };
      console.log(likeArr);
      console.log(Array.from(likeArr));

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

       let arr = [1, 2, 3, 4, 5];
let res = arr.forEach(function (item, index, arr) {
  // 三个参数中, 只有第一个 item是必须的
  console.log(item, index);
  // dom
  document.body.append(item);
});

map: 参数与功能与forEach一样,只不过有返回值,返回值是新数组

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

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: 归并

   res = arr.reduce(function (acc, cur, index, arr) {
        console.log("acc=", acc, "cur=", cur, "index=", index, "arr=", arr);
        // 最终结果用 acc 返回, acc累加器
        return acc + cur;
      }, 5);

sort排序升序console.log(arr.sort((a, b) => a - b));,降序console.log(arr.sort((a, b) => b - a));
join将数组转成字符串

 arr = ["red", "green", "blue"];
      console.log(arr.join());
      console.log(arr.join("-"));

slice子元素

 arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      console.log(arr.slice(2, 5));
      console.log(arr.slice(2));
      console.log(arr.slice(-6, -3));

splice: 删除, 新增, 替换

 // delete
      console.log(arr);
      console.log(arr.splice(1, 2));
      console.log(arr);
      // update
      console.log(arr.splice(1, 2, "a", "b"));
      console.log(arr);
      // insert
      console.log(arr.splice(1, 0, "red", "green"));
      console.log(arr);
      let data = ["red", "green", "blue"];
      console.log(arr.splice(1, 0, ...data));
      console.log(arr);

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

浅谈HTML开发基础

2021-12-22 17:30:06

表单事件

javascript数组常用api

字符串数组

其他数组