js基础知识：字符串数组方法及留言本实例 - JavaScript

Home > List of blog posts > js基础知识：字符串数组方法及留言本实例

Blogger Information

Blog 17

fans 0

comment 0

visits 14772

Special Recommendation

More>

Related recommendations

一、留言本实例

熟悉事件添加及传递机制，创建留言本实例。具备留言字数实时统计与禁止超出功能。

输入留言内容：

留言按钮提交：

删除留言信息：

html+css+js代码:

<!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>留言本实例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      body {
        background-color: rgb(174, 236, 236);
        color: #555;
      }
      .comment {
        width: 85%;
        margin: 1em auto;
        display: grid;
        gap: 0.5em;
      }
      .comment #content {
        resize: none;
        border: none;
        padding: 0.5em;
        outline: none;
        border-radius: 10px;
      }
      .comment #content:focus,
      .comment #content:hover {
        box-shadow: 0 0 8px steelblue;
        transition: 0.6s;
      }
      .comment .submit {
        width: 30%;
        margin-left: auto;
        background-color: lightseagreen;
        border: none;
        border-radius: 10px;
        outline: none;
        color: white;
        height: 2.5em;
      }
      .comment .submit:hover {
        background-color: seagreen;
        transition: 0.6s;
        cursor: pointer;
      }
      .contentlist {
        width: 85%;
        margin: auto;
        padding: 0.5em;
        border-radius: 10px;
      }
      .contentlist .list {
        width: 100%;
        /* background-color: yellow; */
        margin: auto;
        padding: 1em;
        color: #666;
      }
      .del-btn {
        background-color: wheat;
        color: red;
        padding: 0.5em 1em;
        /* height: 2.2em; */
        border: none;
        outline: none;
      }
      .del-btn:hover {
        cursor: pointer;
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <form class="comment" method="post">
      <label for="content">请您留言：</label>
      <textarea name="content" id="content" cols="30" rows="6" placeholder="请在此留言"></textarea>
      <label class="tishi"></label>
      <button type="button" name="submit" class="submit">提交</button>
    </form>
    <hr width="100%" align="center" />
    <fieldset class="contentlist">
      <legend>留言列表</legend>
      <ul class="list"></ul>
    </fieldset>
    <script>
      // 获取元素
      const comment = document.querySelector(".comment");
      const content = comment.content;
      const submitBtn = comment.submit;
      const contishi = document.querySelector(".tishi");
      const comlist = document.querySelector(".list");
      //输入留言提示，超出限制字数截取显示
      content.oninput = (ev) => {
        if (content.value.trim().length < 100) {
          contishi.textContent = `还可以输入${100 - content.value.trim().length}个字`;
        } else {
          contishi.textContent = `还可以输入0个字`;
          content.value = content.value.substr(0, 100);
        }
      };
      // 提交留言按钮事件
      let i = 0;
      submitBtn.onclick = (ev) => {
        ++i;
        let str = i + "、" + content.value;
        // 将留言插入到列表中
        const newComment = document.createElement("li");
        newComment.textContent = str;
        newComment.style.borderBottom = "1px solid white";
        newComment.style.minHeight = "2em";
        // 为每一条留言添加删除按钮
        const delBtn = document.createElement("button");
        delBtn.textContent = "删除";
        delBtn.style.float = "right";
        delBtn.classList.add("del-btn");
        //删除留言按钮事件
        delBtn.onclick = function () {
          if (confirm("是否删除")) {
            // 确定：true,取消: false
            this.parentNode.remove();
            alert("删除成功");
            content.focus();
            return false;
          }
        };
        // 判断留言长度，添加列表
        if (content.value.length > 0 && content.value.length <= 100) {
          // 将删除按钮添加到新留言的后面
          newComment.append(delBtn);
          // 将新留言添加到列表的头部
          comlist.prepend(newComment);
          // 通知用户
          alert("留言成功");
          content.value = null;
          contishi.textContent = null;
          content.focus();
        } else {
          alert("未输入留言或留言内容超过100字");
          content.focus();
          return false;
        }
      };
    </script>
  </body>
</html>

二、字符串数组方法

1、字符串

方法	含义
concat（）	字符串拼装
slice（）	取子串，可以正负数取数(start, end)
substr（）	取子串，可以正负数取数(start, size)
trim（）	删除字符串两边的空白字符
split（）	将字符打散成数组

//concat() 拼接
let str = "html".concat("css", "js", "php", "!", 888);
console.log(str);  // htmlcssjsphp!888

//slice(start, end) 从字符串中截取,不改变原字符串
const email = 'tp@qq.com';
let emailS = email.slice(3);
console.log(emailS); // qq.com

//substr(start, size) 从字符串中截取,不改变原字符串
res = str.substr(0, 5);
console.log(res); // hello
res = str.substr(-6, 3);
console.log(res); // php

//trim()删除两端空白字符
let str = "     Hello Edureka!     ";
console.log(str.length); // 24
console.log(str.trim()); // Hello Edureka!
console.log(str.trim().length); // 14

//split("") 把字符串拆分为数组
let str = "abcdefg";
let res = str.split('');
console.log(res); // ["a", "b", "c", "d", "e", "f", "g"]
// 从一个邮箱中解析出用户名和邮箱地址
let email = "abc@qq.com";
res = email.split("@");
console.log(email.split("@")); //  ["abc", "qq.com"]
console.log("userName=",res[0]); // abc
console.log("emailAddress=",res[1]); // qq.com

2、数组

方法	含义
concat（）	字符串、数组拼装
push（）	尾部添加，入栈
pop（）	尾部删除，出栈
unsift（）	在数组头部添加
shift（）	在数组头部删除
join（）	将数组转为字符串
slice（）	取部分成员(start,end)
splice（）	数组增删改(index,howmany,item1,…..,itemX)
filter（）	“过滤”功能，对每个成员应用回调函数进行处理返回true的成员
reduce（）	归纳操作，将多个成员进行统计后单值返回

//concat() 拼接,返回由两个数组组合而成的新数组
arr = ['a','b','c','d'];
console.log(arr.concat(['aa','bb'])); //[a,b,c,d,aa,bb]

//push() 数组尾部添加元素, 返回数组长度
arr = ['a','b','c','d'];
console.log(arr.push('e')); //5
console.log(arr); //[a,b,c,d,e]

//pop() 从数组尾部取出一个, 返回取出的元素
arr = ['a','b','c','d'];
console.log(arr.pop()); //d
console.log(arr); //[a,b,c]

//unshift 从数组头部添加元素
arr = ['a','b','c','d'];
console.log(arr.unshift('aa'));
console.log(arr); //[aa,a,b,c,d]

//shift 从数组头部取出一个元素
arr = ['a','b','c','d'];
console.log(arr.shift()); //5
console.log(arr); //[b,c,d]

//join() 将数组元素以指定字符拼接为字符串，返回一个字符串，原数组不变。
arr = ['a','b','c','d'];
console.log(arr.join()); //'a,b,c,d'
let arr = [1,2,3,4,5,6];
console.log(arr.join()); // 1,2,3,4,5,6
console.log(arr.join("-")); // 1-2-3-4-5-6

//slice(start,end) 取对应部分的成员 
arr = [1, 2, 3, 4, 5];
res = arr.slice(0, 3);
console.log(res); // [1,2,3]
res = arr.slice(-2);
console.log(res); // [4,5]

//splice(index,howmany,item1,.....,itemX) 
//howmany 为0表示增加成员
      arr = [1, 2, 3, 4, 5];
      // 不删除元素,将第2个参数设为0,但是要传入第三个参数
      res = arr.splice(1, 0, 88, 99);
      console.log(arr);  // [1, 88, 99, 2, 3, 4, 5]
//howmany 为非0表示数字，表示删除成员
      arr = [1, 2, 3, 4, 5];
      // 删除2个参数
      res = arr.splice(2, 2);
      console.log(res);  // [3,4]
      console.log(arr);  // [1,2,5]
//howmany 数量与第三个参数数量相同时相当于更新
      // 更新元素,将第2个参数设为删除数量,但是要传入第三个参数,用来替换掉被删除的元素
      arr = [1, 2, 3, 4, 5];
      res = arr.splice(1, 2, ...[88, 99]);
      console.log(arr); // [1,88,99,4,5]

//filter() 对数组的每个元素调用定义的回调函数，并返回回调函数为其返回 true 的数组。
arr = [1,2,3,4,5];
console.log(arr.filter((ev)=>ev%2)); //取奇数

//reduce()方法从数组的第一项开始，逐个遍历到最后。
res = [1, 2, 3, 4, 5];
      //   res = arr.reduce(function (prev, curr) {
      //     return (prev += curr);
      //   });
res = arr.reduce((prev, curr) => (prev += curr), 20); // 可以增加个初始值20
console.log(res); // 35

Correcting teacher：

天蓬老师

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

VSCODE，一款免费好用集成Markdown的源代码编辑器

2021-03-26 19:56:23