JavaScript常用方法

用户05215648
109 阅读4分钟

JavaScript常用方法

1.Math方法

Math本身就是一个对象, 不需要在通过构造函数去创建, 该对象中集合了很多关于数学运算的方法

属性

  • Math.PI，获取圆周率
  • Math.parselnt，只保留整数部分
  • Math.ceil，向上取整，有小数就整数部分+1
  • Math.round，四舍五入
  • Math.floor，向下取整
  • Math.abs，获取一个对象的绝对值
  • Math.max()，求几个数的最大值
  • Math.min，求几个数的最小值
  • Math.random，随机数 (随机生成0 ~1之间的数，包含0)

2.字符串方法

属性

  • charAt() 方法可以返回指定位置的字符。其语法如下：String.charAt(index)
  • 字符串拼接：String.concat
  • 取从第几位到指定长度的字符串：String.substr
  • 取介于两个指定下标之间的字符串：String.substring
  • slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。String.slice()
const str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.slice(31));
// Expected output: "the lazy dog."
  • 返回子字符串的位置(没有找到返回-1)：首次的位置：String.IndexOf、最后的位置：String.lastIndexOf
  • 删除头尾的空格：String.trim()
  • 替换现有字符串：String..replace()
  • 把字符串分割成字符串数组：String.split(分隔符)

3.数组方法

属性

  • 返回原数组指定两个下标之间的新数组：slice()
  • 删除 插入 替换数组 【参数不同】 ：splice()
  • 将参数添加到数组的最后，返回新数组的长度：push()
  • 删除数组的最后一个元素，返回被删除的值(减少数组的长度)：pop()
  • 向数组的开头添加一个或多个的元素，并返回新的长度：unshift()
  • 删除数组的第一个参数，数组的长度减1：shift()
  • 按指定的参数对数组进行排序，返回的值是经过排序后的数组： sort()
  • 将数组中的元素进行反转，倒序显示：reverse()
  • 用分隔符将数组的元素组成一个字符串：join()
  • 从数组的开头向后查找，（接受两个参数，要查找的项和查找起点的位置索引）：indexOf()
  • 从数组末尾开始获取：lastIndexof()
  • 遍历数组：for
  • 对数组的每个元素执行一次提供的函数：forEach()
  • 对数组的每一项运行给定的函数，返回没戏函数调用的结果组成的数组：map()
  • 通过检查指定数组中符合条件的所有元素（不会改变原始数组）：filter()
  • 把数组转换成字符串，每一项用,分割：toString()
  • every和some* every 是所有函数的每个回调都返回 true 的时候才会返回 true，当遇到 false 的时候终止执行，返回 false。 some 函数是存在有一个函数返回 true 的时候终止执行并返回 true，否则返回 false。
  • reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。）
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial);
// Expected output: 10
  • 判断一个对象是否为数组：isArray()

4.JS获取DOM元素的方法

ID:document.getElementById(‘myid’); class：document.getElementsByClassName(‘myclass’)[0]; TagName： document.getElementsByTagName(‘mydiv’)[0]; 标签： document.getElementsByName(‘myname’)[0];

JS修改CSS样式

document.getElementById(‘myid’).style.display = ‘none’;

JS修改CLASS属性

一个class属性：document.getElementById(‘myid’).className = ‘active’; 多个class用空格分开：document.getElementById(‘myid’).className = ‘active div-1’; 改元素的所有class属性 使用空格：document.getElementById(‘myid’).className = ‘’;

JS修改文本：

document.getElementById(‘myid’).innerHTML = ‘123’;

js创建元素并向其中追加文本

const newdiv = document.createElement(‘div’); const newtext = document.createTextNode(‘123’); newdiv.appendChild(newtext); document.body.appendChild(newdiv);

同理：removeChild()移除节点，并返回节点

​ cloneNode() 复制节点 ​ insertBefore() 插入节点（父节点内容的最前面）

注意：insertBefore() 有两个参数，第一个是插入的节点，第二个是插入的位置

5.DOM追加元素的几种方法

在父级最前面追加一个子元素：prepend()

在父级最后面追加一个子元素：append()

将子元素追加到父级的最前面：prependTo()

将子元素追加到父级的最后：appendTo()

在当前元素之前追加（是同级关系）：before()

在当前元素之后追加（是同级关系）：after()

将元素追加到指定对象的前面（是同级关系）：insertBefore()

将元素追加到指定对象的后面（是同级关系）：insertAfter()

在节点的最后追加子元素：appendChild()

6.获取DOM的节点对象

firstChild 返回第一个子节点

lastChild 返回最后一个子节点

parentNode 返回父节点对象

nextSibling 返回下一个兄弟节点对象

previousSibling 返回前一个兄弟节点对象

nodeName 返回节点的HTML标记名称

avatar
文章
阅读
粉丝