前端常用的JavaScript操作(代码实例)

本篇文章给大家带来的内容是关于前端常用的javascript操作(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1.删除字符串中指定的一段字符

例:删除”10km”中的km

var str = "10km"//方法一:var res = str.replace('km', '')//方法二:var res = str.split('km').join('')//join方法不传参默认使用逗号作为分隔符

2.数组去重

var arr = [1, 2, 3, 1, 2]//方法一:var res = [...new Set(arr)]//方法二:var res = Array.from(new Set(arr))//方法三:var res = [];for (var i in arr) {if (res.indexOf(arr[i] === -1) {res.push(arr[i])}}//方法四:var res = []arr.map((item, index) => {if (res.indexOf(item) === -1){res.push(item)}})

附:Array.from()的用法:

Array.from(arr, mapfn,thisArg):用于将两类可以把对象转换为真正的数组。

类似数组的对象(必须有length属性)

立即学习“Java免费学习笔记(深入)”;

可遍历的对象(部署了Iterator接口的,String,ES6新增的Map和Set)。

参数:第一个是数组,必传;第二个是一个函数(类似map函数),对数组元素进行操作后再返回数组,可选;第三个是对于this关键字的指向,可选。

var obj1 = {0: 'a',1: 'b',2: 'c'}var arr1 = Array.from(obj1)console.log(arr1) // []/* 1. 类数组对象,具有length属性,而普通对象是没有length属性的。*//* 2. 类数组对象的属性名必须为非负整数,对象中的属性名会被当做字符串处理。*/var obj2 = { 0: 'a',1: 'b',2: 'c',length: 2}var arr2 = Array.from(obj2)console.log(arr2) // ["a", "b"]var obj3 = {0: 'a',1: 'b',2: 'c',length: 4}var arr3 = Array.from(obj3)console.log(arr3) // ["a", "b", "c", undefined]var obj4 = {0: 'a',1: 'b',2: 'c',length: 3}var arr4 = Array.from(obj4, item => item + 1)console.log(arr4) // ["a1", "b1", "c1"]var obj5 = {"1": "a","0": "b",length: 2}var arr5 = Array.from(obj5)console.log(arr5) // ["b", "a"]

3.将伪数组对象转化为数组

var obj = {0: 'a',1: 'b',length: 2}//方法一:Array.from(obj)//方法二:Array.prototype.slice.call(obj) //方法三:Array.prototype.concat.apply([], obj)//方法四:Array.prototype.splice.call(obj, 0) // 返回被删除的元素,原对象obj会被破坏掉console.log(obj) // obj: {length: 0}// 上述的Array.prototype 均可用[]代替

4.数组或对象的深拷贝

//方法一:JSON.parse(JSON.stringify(obj))//方法二:递归遍历function clone (obj) {  var res = obj.constructor === Array ? [] : {}  for (var i in obj) {    res[i] = typeof obj[i] === 'object' ? clone(obj[i]) : obj[i] // 即obj[i]为数组或对象,继续拷贝  }  return res}//附:数组浅拷贝var arr = ['a', ['b', ['c']]]//1.使用slice()var res = arr.slice(0)console.log(res) // ['a', ['b', ['c']]]res[1][1] = 'b'console.log(res) // ['a', ['b', ['b']]]console.log(arr) // ['a', ['b', ['b']]]//2.使用concat()var arr = ['a', ['b', ['c']]]var res = [].concat(arr)res[1][1] = 'b'console.log(res) // ['a', ['b', ['b']]]console.log(arr) // ['a', ['b', ['b']]]//Object.assign()也只能实现对象的浅拷贝,它只是一级属性复制,比浅拷贝多深拷贝了一层var obj = {a: "a", b: {c: "d"}}var res = Object.assign({}, obj)res.b.c= "e"console.log(res) // {a: "a", b: {c: "e"}}console.log(obj) // {a: "a", b: {c: "e"}}

5.没有块级作用域导致内层变量覆盖外层变量。

var date = new Date().getDate();function f(){console.log(date);if(false){    var date = 0;//变量提升   }}f();//undefined

6.ES6中标签模板的用法:

let a = 1;let b = 2;function tag(arr, value1, value2){    console.log(arr); //["hello ", " world ", ""]    console.log(value1); //3    console.log(value2); //2}tag`hello ${a + b} world ${a * b}`;/**如果函数名后的模板字符串中没有变量,则直接将其作为函数参数调用。如果存在变量则先将模板字符串处理成多个参数,再调用函数。处理规则:1.默认该函数第一个参数为数组,该数组的成员是模板字符串中那些没有变量替换的部分。2.变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间。以此类推,故arr中第三个成员为"",原因是${a * b}的变量替换发生在第二个成员与第三个成员之间,所以必须存在第三个成员。3.函数的其他参数,都是模板字符串各个变量被替换后的值。函数形如:function tag(stringArr, ...value){}*/

以上就是对的全部介绍,如果您想了解更多有关HTML视频教程,请关注PHP中文网。

以上就是前端常用的JavaScript操作(代码实例)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1547199.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:57:53
下一篇 2025年12月17日 10:46:15

相关推荐

  • 轶事:Chrome小恐龙背后你不知道的故事

    在chrome中当没有网络的时候会出现一个小恐龙在跑的加载,那么这只小恐龙有什么故事呢?我们来看一看 如果你是 Chrome 用户,一定对那萌萌哒的小恐龙不陌生,每当互联网连接断开时,你便能看到那只小恐龙,点击空格键就能开启小恐龙跑酷游戏。 这个游戏的名字叫:Chrome Dino,你现在可以打开 …

    2025年12月21日 好文分享
    000
  • 前端项目中目录结构优化的方法总结

    本篇文章给大家带来的内容是关于前端项目中目录结构优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 目录结构优化 现在前端项目越来越变得像大型工程了,而且越来越复杂了,需要处理好组员之间的协作,也需要做好业务分块、去耦合来降低维护成本,并且还要保持高效率开发。 工程目录结…

    好文分享 2025年12月21日
    000
  • 服务器上webpack打包的过期hash文件如何进行清理

    本篇文章给大家带来的内容是关于服务器上webpack打包的过期hash文件如何进行清理,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 现在前端的项目基本上都会用 webpack 打包代码,并且文件名(html 文件除外)都是 hash 化的,这样可以去除浏览器的缓存。但是会产生另外…

    好文分享 2025年12月21日
    000
  • HTML表单的工作原理(图文)

    本篇文章给大家带来的内容是关于html表单的工作原理(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在前端语言书写中,表单是一种常用的数据传递方式,也是一种行之有效的比较高效率的方式。 其工作原理 为:访问一个包含表单的页面,输入表单信息之后提交表单——通过data,将浏览…

    2025年12月21日 好文分享
    000
  • 关于http前端存储的总结

    本篇文章分享给大家的内容是关于http前端存储的总结,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到有需要的朋友。 cookie 为什么会有cookie http协议的无状态,所谓无状态即是服务器并不是知道这次的请求和上次的请求是不是同一个client发来的,就好比你经常去一家超市买东西,…

    2025年12月21日 好文分享
    000
  • 一次前端面试的经历

    今天给大家分享我之前找工作的面试经历,我辞去了杭州的工作之后去往了深证,给大家分享一下我面试的4次经历 写在最前面: 上个月底辞掉了在杭州的工作,来到了广州开始找工作,讲道理广州的这座城市的经济中心真的不在互联网,个人感觉还不如互联网发展的杭州,找了一个礼拜的工作之后,少许感悟 第一家面试公司: 第…

    好文分享 2025年12月21日
    000
  • 关于前端面试(二)

    今天给大家分享我之前找工作的面试经历,我辞去了杭州的工作之后去往了深证,给大家分享一下我第二波面试的经历。 面试了两了礼拜,首先第二个礼拜的质量表示没有第一个礼拜的质量好,几乎没有面试到什么质量高的公司,下面总结 不知道是第几家家公司: 这家公司是做金融的,需要在线上推广之类的,需求很简单,写写静态…

    好文分享 2025年12月21日
    000
  • 什么是前端

    这次给大家带来什么是前端,前端的概念详解,一起来看一下。 过年的时候和表哥聊天,他说以前也用html,js,css写过网页,那现在的前端和那个时候有什么不同,我当时就向他介绍了一下前端。 但是当时我对前端的理解也不是很透彻,所以我自我感觉也没有介绍清楚。 随着我自己学习的深入,我自己觉得有必要总结一…

    好文分享 2025年12月21日
    000
  • 什么是前端路由及解释

    什么是前端路由 所谓的前端路由,拥有这样一种能力:客户端浏览器可以不依赖服务端,根据不同的URL渲染不同的视图页面。 前端路由的存在合理性 在Ajax之剑还未亮出,前端仍处于襁褓之中的时候,路由的工作交给了后端。在进行页面切换的时候,浏览器发送不同的url请求;服务器接收到浏览器的请求时,通过解析不…

    好文分享 2025年12月21日
    000
  • 前端的VUE怎么使用

    我用vue做项目也有一段时间了,对于vue来说现在已经比较熟悉了,但是关于vue的入门文章却一直没有写过,那么今天就给大家带来几个案例,好好介绍下vue这种好用的小工具。 相关视频教程推荐:Vue.js 教程推荐:2018最新的5个vue.js视频教程精选 1.本篇文章使用的vue版本是2.4.2,…

    好文分享 2025年12月21日
    000
  • 好用的67个前端工具、库和资源

    这个列表包含许多种类的资源,所以这里我将它们分组整理。 Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js— 快速实现全屏滚动特性 Typed.j…

    好文分享 2025年12月21日
    000
  • 怎样零基础学习前端开发

    对于很多想转行的朋友来说,最大的担心就是觉得自己对计算机不太懂,最多会打个游戏,更别说计算机语言基础了。担心自己一点基础没有,不会学也学不会。下面我们就以前端开发为例,分享下如何零基础学会前端开发。 1.首先学习前端,必须要学会的就是HTML和CSS。 有关HTML和CSS的相关基础知识点,可以在P…

    好文分享 2025年12月21日
    000
  • javascript如何实现表单验证_有哪些最佳实践

    JavaScript表单验证核心是提交前快速反馈错误以提升体验,但不可替代后端校验;需结合原生API、解耦规则、无障碍支持及前后端协同。 JavaScript 表单验证的核心目标是:在用户提交前快速反馈错误,提升体验,同时不能替代后端校验。实现上应兼顾即时性、可访问性与健壮性,而非仅靠 onsubm…

    2025年12月21日
    000
  • javascript怎样进行物理模拟?_javascript的物理引擎如何集成?

    JavaScript需借助第三方物理引擎实现物理模拟,推荐Matter.js(2D易用)、Planck.js(高精度2D)、Cannon.js(3D)、Impulse.js(轻量);集成时应隔离物理循环与UI框架,谨慎同步状态以保证稳定性。 JavaScript 本身不内置物理模拟能力,但可以通过第…

    2025年12月21日
    000
  • 如何使用javascript操作DOM_常见方法有哪些?

    JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素;常用方法包括getElementById、querySelector、innerHTML、classList、createElement、addEventListener等,配合事件委托可高效实现动态交互。 Java…

    2025年12月21日
    000
  • 如何实现JavaScript验证表单_前端验证的最佳实践是什么

    JavaScript表单验证核心是提升体验与保障基础数据质量,但不可替代后端验证;需结合HTML5原生属性与JS增强交互,确保提示清晰可访问,并始终信任后端校验。 JavaScript 表单验证的核心目标是提升用户体验和保障基础数据质量,但它不能替代后端验证。前端验证应快速反馈、友好提示、不干扰正常…

    2025年12月21日
    000
  • JavaScript树形结构数据如何操作?

    JavaScript树形结构操作核心是递归与引用处理:查找需递归匹配id并判空children;添加需先定位父节点并初始化children;删除须从父级children中过滤目标节点;扁平化用DFS递归,还原依赖parent_id分组挂载。 JavaScript树形结构数据操作核心是递归和引用处理,…

    2025年12月21日
    000
  • javascript CSP策略是什么_如何防止跨站脚本攻击?

    CSP是一种浏览器强制执行的白名单式安全策略,通过HTTP头或meta标签限制资源加载以防止XSS。需禁用内联脚本与eval、改用事件监听、显式声明第三方域名,并配合服务端转义等其他防护措施。 JavaScript CSP(Content Security Policy,内容安全策略)是一种浏览器安…

    2025年12月21日
    000
  • JavaScript服务端渲染_javascriptSEO优化

    服务端渲染(SSR)通过在服务器端生成完整HTML,使搜索引擎爬虫无需执行JavaScript即可抓取页面内容,从而提升JavaScript应用的SEO效果。Next.js、Nuxt.js等主流框架提供开箱即用的SSR支持,结合动态title与meta标签、语义化结构、Open Graph标签及si…

    2025年12月21日
    000
  • javascript的SEO优化有哪些方法_如何让单页应用被搜索引擎收录

    单页应用(SPA)需通过服务端渲染(SSR)、预渲染或动态渲染使爬虫获取完整HTML,辅以语义化标签、动态元信息、规范路由及Sitemap等基础SEO实践来提升搜索引擎收录效果。 单页应用(SPA)默认对搜索引擎不友好,因为传统爬虫难以执行 JavaScript 渲染页面内容。要让搜索引擎收录 SP…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信