前端常用的js函数方法

2023年5月27日下午12:23 • JavaScript

在讲解前端常用的JS函数方法之前，先介绍一下JS的基础知识。

JS基础知识

1. 数据类型

JS中包含6种数据类型：

string（字符串）：用于表示文本数据，可使用单引号、双引号或反引号（ES6新增）引用字符串。如：'hello'、"world"、hello world;
number（数字）：表示数值数据，包括整数、浮点数、负数、正数、NaN等等。如：1、1.2、-3、NaN；
boolean（布尔值）：表示真或假的值，只有两个取值：true和false。如：true、false；
null（空值）：表示一个空对象，如果变量没有被初始化，那么就会默认为null。如：let a = null；
undefined（未定义）：表示一个没有被定义过的变量或未被赋值的变量，或者函数没有返回值。如：let a；
object（对象）：表示一组相关值和功能的集合，通常由花括号包裹成一个键值对的形式。如：{name: 'Tom', age: 18}。

2. 常用操作符

JS中包含多种常见的操作符，包括算术操作符、比较操作符、逻辑操作符等。这里只列举部分常见的：

算术操作符：+（加）、-（减）、*（乘）、/（除）、%（取模）；
比较操作符：==（相等）、===（严格相等）、!=（不相等）、!==（严格不相等）、>（大于）、>=（大于等于）、<（小于）、<=（小于等于）；
逻辑操作符：&&（与）、||（或）、!（非）。

前端常用的JS函数方法

在上面介绍了JS的基础知识之后，下面来介绍前端常用的JS函数方法。

1. DOM操作方法

DOM操作是前端开发中必不可少的内容，常用的DOM操作方法包括：

getElementById：通过元素的id获取DOM节点，常用于修改节点样式、内容等。示例代码如下：

<html>
  <head>
    <title>getElementById示例</title>
    <script>
      function changeText() {
        var text = document.getElementById("text");
        text.innerHTML = "Hello World";
      }
    </script>
  </head>
  <body>
    <h1 id="text">Welcome</h1>
    <button onclick="changeText()">点击修改文本内容</button>
  </body>
</html>

addEventListener：添加事件监听器，常用于监听用户操作行为，如点击、滑动等。示例代码如下：

<html>
  <head>
    <title>addEventListener示例</title>
    <script>
      function clickHandler() {
        console.log("用户点击了按钮");
      }
      document.addEventListener("DOMContentLoaded", function(event) {
        var button = document.getElementById("button");
        button.addEventListener("click", clickHandler);
      });
    </script>
  </head>
  <body>
    <button id="button">点击我</button>
  </body>
</html>

2. 数组操作方法

前端开发中，数组操作是常用的技巧之一，常用的数组方法包括：

push：向数组末尾添加元素，返回值为添加元素后的数组长度。示例代码如下：

var arr = [1, 2, 3];
console.log(arr.push(4)); // 输出 4
console.log(arr); // 输出 [1, 2, 3, 4]

join：将数组中所有元素以指定的分隔符连接成一个字符串。示例代码如下：

var arr = ["Hello", "World", "!"];
console.log(arr.join(" ")); // 输出 "Hello World !"

3. 对象操作方法

对象操作也是前端开发中不可缺少的内容之一，常用的对象方法包括：

keys：返回对象中所有可枚举属性的键名数组。示例代码如下：

var person = {name: "Tom", age: 18, sex: "male"};
console.log(Object.keys(person)); // 输出 ["name", "age", "sex"]

values：返回对象中所有可枚举属性的值的数组。示例代码如下：

var person = {name: "Tom", age: 18, sex: "male"};
console.log(Object.values(person)); // 输出 ["Tom", 18, "male"]

结束语

以上就是前端常用的JS函数方法的完整攻略了。当然，这仅仅只是其中的一部分，想要深入了解JS的话，还需要继续学习。希望本文能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：前端常用的js函数方法 - Python技术站