JS常用方法总结

2023-11-19

数组常用的方法

方法 语法 描述
增加方法
splice() // arr.splice(起始下标,长度,添加的元素1,元素2); arr.splice(3,0,0,1,"xiaolv"); 从数组中添加或删除元素。
push() arr.push("xiaonan"); var length = arr.push("dijia"); 向数组的末尾添加一个或更多元素,并返回新数组的长度。
unshift() var a = arr.unshift("ez","geleifusi") 向数组的开头添加一个或更多元素,并返回新的长度。
fill() // arr.fill("a",2,3); for(var i=0;i<arr.length;i++){ if(arr[i]==5){ arr.fill("a",i,i+1) } } 使用一个固定值来填充数组。
删除方法
slice() var arr1 = arr.slice(起始下标,结束下标); var arr1 = arr.slice(); var arr1 = arr.slice(3); var arr1 = arr.slice(3,4); 选取数组的的一部分,并返回一个新数组。
splice() // arr.splice(起始下标,长度,添加的元素1,元素2); arr.splice(3,0,0,1,"xiaolv"); 从数组中添加或删除元素。
pop() var d = arr.pop(); 删除数组的最后一个元素并返回删除的元素。
shift() var a = arr.shift(); 删除并返回数组的第一个元素。
查询方法
indexOf() var index = arr.indexOf("xiaolv"); 搜索数组中的元素,并返回它所在的位置。
lastIndexOf() var index = arr.lastIndexOf("xiaolv"); 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
includes() var f = arr.includes("jipai"); 判断一个数组是否包含一个指定的值。
isArray() var f = Array.isArray(obj); 判断对象是否为数组。
every() var f = arr.every(function(item,index){ return item>=5; }) 检测数值元素的每个元素是否都符合条件。
some() var f = arr.some(function(item,index){ return item<=5; }) 检测数组元素中是否有元素符合指定条件。
修改方法
toString() var str = arr.toString(); console.log("str:",str); var num = 5; var str1 = num.toString(); 把数组转换为字符串,并返回结果。
concat() var arr = arr1.concat(arr2,arr3); 连接两个或更多的数组,并返回结果。
sort() arr.sort(function(a,b){ return a - b; }); 对数组的元素进行排序。
join() var str = arr.join("+"); 把数组的所有元素放入一个字符串。
reverse() var a = arr.reverse().push(0); 反转数组的元素顺序。
函数方法
find() var obj = arr.find(function(item){ return item.age > 70; }) 返回符合传入测试(函数)条件的数组元素。
findIndex() var index = arr.findIndex(function(item){ return item.age > 80; }) 返回符合传入测试(函数)条件的数组元素索引。
forEach() arr.forEach(function(item,index,arr){ console.log(item,index,arr); }) 数组每个元素都执行一次回调函数。
map() var arr1 = arr.map(function(item){ return item*2; }) 通过指定函数处理数组的每个元素,并返回处理后的数组。
filter() var arr1 = arr.filter(function(item){ return item%2==0; }) 检测数值元素,并返回符合条件所有元素的数组。

字符串常用方法

方法 语法 描述
主要记忆 常用
charAt() var str1 = str.charAt(4); 返回在指定位置的字符
concat() var str = str1.concat(str2,str3); 连接两个或多个字符串, 返回新的字符串
indexOf() var index = str.indexOf("博文"); 返回某个指定的字符串值在 字符串中首次出现的位置
includes() var f = str.includes("精神"); 查找字符串中是否包含指定的字符串
lastIndexOf() var index = str.lastIndexOf("精神"); 从后向前搜索字符串 并从起始位置(0) 开始计算返回字符串最后出现的位置
slice() var str1 = str.slice(起始下标,结束下标); var str1 = str.slice(2); 提取字符串的片段, 并在新的字符串中返回被提取的部分
split() var arr = str.split("0"); 把字符串分割为字符串数组
startsWith() var f = str.startsWith("hollo"); 查看字符串是否以指定的字符串开头
substr() var str1 = str.substr(起始下标,长度); var str1 = str.substr(3,4); 从起始索引提取字符串中指定数目的字符
substring() var str1 = str.substring(起始下标,结束下标); var str1 = str.substring(3,4); 提取字符串中两个指定索引之间的字符
search() var index = str.search("大吕"); 方法用于检索字符串中指定的子字符串, 或检索与正则表达式相匹配的子字符串
replace() var str1 = str.replace("大吕","小吕"); 方法用于在字符串中用一些字符替换另 一些字符,或替换一个与正则表达式匹配的子串。
次要记忆 不常用
toUpperCase() var str1 = str.toUpperCase(); 把字符串转为大写
toLowerCase() var str1 = str.toLowerCase(); 把字符串转为小写
trim() var str1 = str.trim(); 去掉字符串两边的空白
fromCharCode() var str = String.fromCharCode(97); 将Unicode编码转为字符
charCodeAt() var str1 = str.charCodeAt("a"); 返回指定的位置的字符的Unicode编码

Math对象及其方法

算术对象(Math) Math(算术)对象的作用是:执行常见的算数运算任务。 Math 对象提供多种算术值类型和函数。无需在使用这个对象之前对它进行实例化。

算数名 语法 描述
Math.PI console.log(Math.PI); 返回圆周率
Math.abs(x) console.log(Math.abs(-2)); 返回绝对值
Math.ceil() console.log(Math.ceil(6.01)); 对数进行向上取整
Math.floor() console.log(Math.floor(3.3)); 对数进行向下取整
Math.max(a,b,c,d...,n) console.log(Math.max(99,45,3,68)); 返回给定的数中的较大的数。
Math.min(a,b,c,d...,n) console.log(Math.min(99,45,3,68)); 返回给定的数中的较小的数。
Math.pow(x,y) console.log(Math.pow(2,3)); 返回 x 的 y 次幂
Math.random() console.log(Math.random()); // [0, 1) 返回 0 到 1 之间的随机数。[0, 1);
Math.round() console.log(Math.round(3.45)); 将小数四舍五入成整数
Math.sqrt(x) console.log(Math.sqrt(9)); 平方根

Date对象及其方法

对象名 语法
new Date(); 当前日期和时间
new Date(milliseconds); 通过时间戳创建(从1970年1月1日至今的毫秒数)
new Date(dataString); 通过字符串表示的日期创建(如“2016-09-09”)
getTime(); 返回1970年1月1日至今的毫秒数(时间戳)
getFullYear(); 从Date对象以四位数字返回年份。
getMonth(); 从Date对象返回月份(0 ~ 11)
getDate(); 从Date对象返回一个月中的某一天(1 ~ 31)
getDay() 从Date对象返回一周中的某一天(0 ~ 6)
getHours() 返回Date对象的小时(0 ~ 23)
getMinutes() 返回Date对象的分

获取DOM的方式

获取方法 方法描述
document.getElementById(); 返回对拥有指定 id 的第一个对象的引用。
document.querySelector(); 返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll(); HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表
document.getElementsByTagName(); 返回带有指定标签名的对象集合。
document.getElementsByClassName(); 返回文档中所有指定类名的元素集合,作为 NodeList 对象。
document.getElementsByName(); 返回带有指定名称的对象集合。

设置或获取HTML内容

设置方法 描述
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
innerText: 设置或获取位于对象起始和结束标签内的文本
outerHTML: 设置或获取对象及其内容的HTML形式
outerText: 设置(包括标签)或获取(不包括标签)对象的文本
value:input,select,textarea,checkbox,radio 内容的获取和设置

设置或获取HTML属性

设置方法 描述
obj.hasAttribute() 如果元素中存在指定的属性返回 true,否则返回false。
obj.hasAttributes() 如果元素有任何属性返回true,否则返回false。
obj.setAttribute(); //设置属性 (属性名, 属性值1 属性值2)
obj.getAttribute(); //获取属性
obj.removeAttribute(); //删除属性

设置或获取HTML样式

设置方法 描述
var styleAll=div.style;
var styleB=div.style.border; 替换边框
var styleFS=div.style["font-size"]; 替换字体大小
var styleFW=div.style.fontWeight; 替换加粗

element.className 返回元素属性

设置方法 描述
HTMLElementObject.className 获取属性值:
HTMLElementObject.className=classname 设置属性值:

element.classList 返回元素的类名

获取方法 描述
add 在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加
contains(class) 返回布尔值,判断指定的类名是否存在可能值:true && false
item(index) 返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove 移除元素中一个或多个类名.注意: 移除不存在的类名,不会报错。
toggle 在元素中切换类名。

标签节点的操作方法

操作方法 描述
1.document.createElement()(最常用) 通过指定名称创建一个元素
2.document.createTextNode() 可创建文本节点。
3.element.appendChild() 可向节点的子节点列表的末尾添加新的子节点。
4.父节点.insertBefore(插入的新节点,原节点) 方法可在已有的子节点前插入一个新的子节点。
5.element.replaceChild(新节点,老节点) 方法可将某个子节点替换为另一个。
6.element.removeChild(element) 方法可从父节点下的子节点列表中删除某个节点。
7.element.remove() 将本身移除掉

鼠标事件

属性 描述
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseenter 当鼠标指针移动到元素上时触发。通常与mouseleave事件一同使用
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发

键盘事件

属性 描述
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onkeydown onkeypress onkeyup 事件相关的事件发生次序:
onkeydown onkeypress 1、前者不区分输入内容的大小写 后者区分输入内容的大小写 返回keycode是不同的 2、前者识别任何按键 后者不识别功能键 3、主要使用前者

表单事件

属性 描述
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea)
onfocus 元素获取焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onselect 用户选取文本时触发 ( input 和 textarea)
onsubmit 表单提交时触发

Cookie查询

1.使用 JavaScript 创建Cookie
            JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
            JavaScript 中,创建 cookie 如下所示:
            document.cookie="username=John Doe";
            您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
            document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
            您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
            document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
2.使用 JavaScript 读取 Cookie
            在 JavaScript 中, 可以使用以下代码来读取 cookie:
            var x = document.cookie;
            document.cookie 将以字符串的方式返回所有的 cookie,
            类型格式: cookie1=value; cookie2=value; cookie3=value;
3.使用 JavaScript 修改 Cookie
            在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:
            document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
            旧的 cookie 将被覆盖。
4使用 JavaScript 删除 Cookie
            删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
            document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
            注意,当您删除时不必指定 cookie 的值。

本地存储

if(localStorage.arr0806){
            /* 数据存储 */
            var arr = JSON.parse(localStorage.arr0806);
        }else{
            var arr = [];
            localStorage.arr0806 = JSON.stringify([]);
        }
        localStorage.arr0806 = JSON.stringify(arr);

数据类型为false的几种情况

        1."" 字符串为空返回 false 否则为true
        2.0   数字中0返回 false  其他返回true
        3.undefined  未定义  返回 false
        4.null 空值 返回 false
        5.false 本身返回false
        6.NaN 非数字 返回false

三目运算符

条件表达式?条件成立时:条件不成立时;

本地存储固定格式

判断本地是否有数据

        if(localStorage.arr0806){
            /* 数据存储 */
            var arr = JSON.parse(localStorage.arr0806);
        }else{
            var arr = [];
            /*JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)。*/
            localStorage.arr0806 = JSON.stringify([]);
        }

只要进行添加 删除 等数据改动 (就需要本地存储)

/*JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。*/      
localStorage.arr0806 = JSON.stringify(arr);

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS常用方法总结 的相关文章

随机推荐

  • Flutter开发之——动画-Lottie

    一 概述 Lottie是Aribnb开源的面向Android iOS等的高性能动画库 Flutter原生库不支持Lottie 但是可以通过第三方插件实现Lottie的动画效果 二 导入lottie flutter插件 2 1 插件地址 Lo
  • unity局域网开关机步骤二-c#-tcp

    using System using System Collections Generic using System Linq using System Text using System Net Sockets using System
  • Python基础知识(四):一文看懂列表、元组和字符串操作

    序列 序列是具有索引和切片能力的集合 列表 元组和字符串具有通过索引访问某个具体的值 或通过切片返回一段切片的能力 列表 元组 字符串都属于序列 1 列表 列表 List 是Python中非常重要的内置数据类型 列表由一系列元素组成 所有的
  • 设计模式——简单工厂模式

    简单工厂模式定义为 简单工厂模式又称为静态工厂方法模型 它属于类创建型模式 在简单工厂模式中 可以根据参数的不同返回不同类的实例 简单工厂专门定义一个类来负责创建其他类的实例 被创建的实例通常都具有共同的父类 简单工厂模式结构图 简单工厂模
  • Picture控件的加载图像的使用总结

    一 非动态显示图片 即图片先通过资源管理器载入 有一个固定ID 二 动态载入图片 即只需要在程序中指定图片的路径即可载入 为方便说明 我们已经建好一个基于对话框的工程 名为Ttest 对话框类为CTestDlg 一 vc picture控件
  • kettle抽取数据判断是否有数据

    kettle分为两种对象 一种是作业 另一种是转换 判断是否有数据 在作业中实现即可 第一步 文件 gt 新建 gt 作业 第二步 右边有主对象树和核心对象 选择核心对象 第三步 选择条件 gt 计算表中的记录数 第四步 双击此对象 计算表
  • 前端摸鱼日记(一)

    一会又要开周五的工作总结会 一天天真闲的 此处省略一万个草 上个月招来一个技术经理 文文雅雅的 是什么也不干 看起来什么都不会 每周五就假装来开个会 真他妈无语了 实在无聊 写个日志 自从创立武当山教学院 目前只有四个人 刘大目前在武当山自
  • 详解Arduino Uno开发板的引脚分配图及定义(重要且基础)

    详解Arduino Uno开发板的引脚分配图及定义 重要且基础 https www cnblogs com Bruce H21 p 11555605 html 首先开发板实物图如下 在本篇文章中 我们将详细介绍Arduino开发板的硬件电路
  • 解决vue路由跳转到同一页面的刷新问题

    问题描述 当我使用路由跳转页面时 如果页面跳转是同一个路由 传递的参数不同时 页面不刷新 如下图 待收定金和待收首款其实跳转的是同一个组件 只是他们传递的参数不同而已 当我使用路由进行跳转时 我发现第一次是可以正确跳转的 比如我当前在其他页
  • qt中获取窗口位置和大小

    窗口左上角的位置 含边框 qDebug lt lt this gt frameGeometry x lt lt this gt frameGeometry y lt lt 1 qDebug lt lt this gt x lt lt thi
  • Ubuntu系统下常用的新建、删除、拷贝文件命令

    常用新建 删除 拷贝命令 mkdir 目录名 新建一个文件夹 文件夹在Linux系统中叫做 目录 touch 文件名 新建一个空文件 rmdir 目录名 删除一个空文件夹 文件夹里有内容则不可用 rm rf 非空目录名 删除一个包含文件的文
  • 【C语言】_4.数组

    目录 1 一维数组 2 二维数组 3 数组越界 4 数组作为函数参数 正文 1 一维数组 1 1 数组的创建 1 数组的概念 数组是一组相同类型元素的集合 2 数组的创建方式 type t arr name const n 即数组元素类型
  • AMD yes!拿下Meta后发布新芯片,FP64性能是A100 4.9倍,面向高性能计算和机器学习...

    明敏 发自 凹非寺量子位 报道 公众号 QbitAI AMD造势已久 面向高性能计算的MI200 终于来了 在拿下元宇宙大客户Meta后 AMD乘势而上官宣一系列新芯片 其中就包括这张不断有消息曝出的计算加速卡 它采用6nm工艺 拥有580
  • 第15课 微信小程序behavior组件间的数据共享:

    第15课 微信小程序behavior组件间的数据共享 先看看目录结构 我们先编写一下两my behavior的代码 这里是my behavior js的代码 behavior内还可以嵌套引入behavior my behavior js 引
  • 嵌入式学习:stm32学习路线推荐之思维导图

    从9月1日开始学习STM32后 对于STM32的一些个人总结 1 对于STM32和51的区别 对于 STM32来说 基本的大概都和51单片的内容相似 但是由于STM的引脚和寄存器的数量较多 所以需要一个更加完善的管理机制 导致了 时钟 的产
  • Caused by: org.attoparser.ParseException: Error resolving template [index], template might not exist

    仿牛客论坛 th replace index header 报错 index html中 th fragment header register html中 th replace index header 主要报错是两个 org thyme
  • 递归算法——八皇后问题 python

    研究了一下午的八皇后算法 可算是搞明白了 为了避免以后忘记 还是写个博客吧 可能会跟其他文章有相似之处 最终还是希望能好好学习算法 都是经过自己思考后亲自写的代码 虽然过程比较艰难 我写了很多注释 参考B站视频链接 2021第十二届蓝桥杯青
  • 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)

    阿里百秀首页案例 技术选型 方案 我们采取响应式页面开发方案 技术 bootstrap框架 设计图 本设计图采用 1280px 设计尺寸 1 页面布局分析 2 屏幕划分分析 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的 因此我们列 定义为
  • Matlab实现蚂蚁群算法(附上多个完整仿真源码)

    蚂蚁群算法是一种模拟自然界中蚂蚁行为的优化算法 其具有全局搜索能力和适应性强的特点 被广泛应用于组合优化问题中 本文将介绍如何使用Matlab实现蚂蚁群算法 文章目录 1 蚂蚁群算法原理 2 Matlab实现蚂蚁群算法 3 代码实现 4 结
  • JS常用方法总结

    数组常用的方法 方法 语法 描述 增加方法 splice arr splice 起始下标 长度 添加的元素1 元素2 arr splice 3 0 0 1 xiaolv 从数组中添加或删除元素 push arr push xiaonan v