9个JavaScript日常开发小技巧_JavaScript

来源:脚本之家  责任编辑:小易  

border-radius:100%,把方块变成圆形,之后你改变对应块的width和height就可以改变圆的大小了追问谢谢,怎样同时 对九个小圆点扩大缩小,是同时在变哦www.zgxue.com防采集请勿采集本网。

1.生成指定范围的数字

在某些情况下,我们会创建一个处在两个数之间的数组。假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法

New Document

let start = 1900, end = 2000;[...new Array(end + 1).keys()].slice(start);// [ 1900, 1901, ..., 2000]// 还有这种方式,但对于很的范围就不太稳定Array.from({ length: end - start + 1 }, (_, i) => start + i);

2.使用值数组作为函数的参数

var a = []; for(var i = 1; i < 10; i++){ a.push(i); } a.sort(function(){return 0.5 - Math.random()}); a.length = 3; console.log(a)

在某些情况下,我们需要将值收集到数组中,然后将其作为函数的参数传递。 使用 ES6,可以使用扩展运算符(...)并从[arg1, arg2] > (arg1, arg2)中提取数组:

Document function step(){ for(i=1;i

const parts = { first: [0, 2], second: [1, 3],}["Hello", "World", "JS", "Tricks"].slice(...parts.second)// ["World", "JS"]

3.将值用作 Math 方法的参数

首先for循环不会改变作用域 你的代码相当于 var c; var i; for(i=0;i

当我们需要在数组中使用Math.max或Math.min来找到最大或者最小值时,我们可以像下面这样进行操作:

直接重写window.alert; 用自己的样式实现 window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; sh

const elementsHeight = [...document.body.children].map( el => el.getBoundingClientRect().y);Math.max(...elementsHeight);// 474const numbers = [100, 100, -1000, 2000, -3000, 40000];Math.min(...numbers);// -3000

4.合并/展平数组中的数组

Array 有一个很好的方法,称为Array.flat,它是需要一个depth参数,表示数组嵌套的深度,默认值为1。 但是,如果我们不知道深度怎么办,则需要将其全部展平,只需将Infinity作为参数即可 😎

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]]arrays.flat(Infinity)// [ 10, 50, 100, 2000, 3000, 40000 ]

5. 防止代码崩溃

在代码中出现不可预测的行为是不好的,但是如果你有这种行为,你需要处理它。

例如,常见错误TypeError,试获取undefined/null等属性,就会报这个错误。

const found = [{ name: "Alex" }].find(i => i.name === 'Jim')console.log(found.name)// TypeError: Cannot read property 'name' of undefined

我们可以这样避免它:

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {}console.log(found.name)// undefined

6. 传递参数的好方法

对于这个方法,一个很好的用例就是styled-components,在ES6中,我们可以将模板字符中作为函数的参数传递而无需使用方括号。 如果要实现格式化/转换文本的功能,这是一个很好的技巧:

const makeList = (raw) => raw .join() .trim() .split("\n") .map((s, i) => `${i + 1}. ${s}`) .join("\n");makeList`Hello, WorldHello, World`;// 1. Hello,World// 2. World,World

7.交换变量

使用解构赋值语法,我们可以轻松地交换变量 使用解构赋值语法 😬:

let a = "hello"let b = "world"// 错误的方式a = bb = a// { a: 'world', b: 'world' }// 正确的做法[a, b] = [b, a]// { a: 'world', b: 'hello' }

8.按字母顺序排序

需要在跨国际的项目中,对于按字典排序,一些比较特殊的语言可能会出现问题,如下所示 😨

// 错误的做法["a", "z", "ä"].sort((a, b) => a - b);// ['a', 'z', 'ä']// 正确的做法["a", "z", "ä"].sort((a, b) => a.localeCompare(b));// [ 'a', 'ä', 'z' ]

 localeCompare() :用本地特定的顺序来比较两个字符串。

9.隐藏隐私

最后一个技巧是屏蔽字符串,当你需要屏蔽任何变量时(不是密码),下面这种做法可以快速帮你做到:

const password = "hackme";password.substr(-3).padStart(password.length, "*");// ***kme

掌握这些小技巧,在日常开发过程中可以避免很多不必要的错误,更多关于JavaScript日常开发小技巧请查看下面的相关链接 您可能感兴趣的文章:js中字符替换函数String.replace()使用技巧js技巧--转义符"\"的妙用JavaScript调试技巧之console.log()详解JS调试必备的5个debug技巧使用Chrome调试JavaScript的断点设置和调试技巧JS截取与分割字符串常用技巧总结JavaScript中的alert()函数使用技巧详解在JS数组特定索引处指定位置插入元素的技巧Javascript的数组与字典用法与遍历对象的属性技巧JavaScript截取、切割字符串的技巧Javascript技巧之不要用for in语句对数组进行遍历JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)node.js中Socket.IO的进阶使用技巧JS中JSON对象和String之间的互转及处理技巧nodejs的10个性能优化技巧js字符串转换成xml对象并使用技巧解读JS高级调试技巧:捕获和分析 JavaScript Error详解js DIV滚动条随机位置的设置技巧

<!2113--//没理解你的意思。想详聊的5261话,看下这个的显示!--><html><head><title>无标题4102</title></head><body><script type="text/javascript">var msg=[0,4267,4238,5798,12774,39221,20301,22830,25202,26205,165320303,22836,25214,26178,20293,42566,15251,294,50426,14408,40221,10273,11569,55571,7914,39214];var my=[25105,26159,20256,22855];for(var i=0;i<msg.length;i++)msg[i]^=my[i%my.length];document.write(String.fromCharCode.apply(this,msg));</script></body></html>,理解能力 表达能力都有欠缺啊,估计也只有跟你同课堂的师兄弟看的懂了追问没上过课.....老师忽然要收作业。。。追答那应该有教科书的? 看教科书比再这里问的好,真的。现在的老师基本按照书上的来教的,这些字母只有9个值才有反应?内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序 新建登录页并实现tabbar隐藏
  • 微信小程序 loading(加载中提示框)实例
  • 微信小程序 跳转传递数据的实例
  • google 地图类型详解及示例代码
  • 微信小程序网络请求wx.request详解及实例
  • 微信小程序 用户数据解密详细介绍
  • 微信小程序 swiper组件构建轮播图的实例
  • 微信小程序 loading 详解及实例代码
  • 微信小程序 button 组件详解及简单实例
  • 微信小程序 视图容器组件的详解及实例代码
  • JavaScript问题 写一个键盘上,输入九个按钮
  • javascript怎样实现九个小圆点的放大和缩小
  • (2)编写一个javascript程序,求和:1+3+5+7+9+……...
  • 请用javascript编写一段程序使其能够随机产生3个互...
  • 怎么用JavaScript输出9×9乘法表,要求以梯形输出代码
  • 用javascript编程,使其能够随机产生三个互不相同...
  • 用javascript打出九九乘法表。一行九个数字。写在d...
  • 请问这几行 javascript 代码为什么输出都是9?
  • javaScript中怎么设置”来自网页的消息“如图:
  • 把1到9用javascript中的循环实现三行三列,并且遇...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页javascriptjs中字符替换函数string.replace()使用技巧js技巧--转义符"\"的妙用javascript调试技巧之console.log()详解js调试必备的5个debug技巧使用chrome调试javascript的断点设置和调试技巧js截取与分割字符串常用技巧总结javascript中的alert()函数使用技巧详解在js数组特定索引处指定位置插入元素的技巧javascript的数组与字典用法与遍历对象的属性技巧javascript截取、切割字符串的技巧javascript技巧之不要用for in语句对数组进行遍历js数组排序技巧汇总(冒泡、sort、快速、希尔等排序)node.js中socket.io的进阶使用技巧js中json对象和string之间的互转及处理技巧nodejs的10个性能优化技巧js字符串转换成xml对象并使用技巧解读js高级调试技巧:捕获和分析 javascript error详解js div滚动条随机位置的设置技巧微信小程序 新建登录页并实现tabbar隐藏微信小程序 loading(加载中提示框)实例微信小程序 跳转传递数据的实例google 地图类型详解及示例代码微信小程序网络请求wx.request详解及实例微信小程序 用户数据解密详细介绍微信小程序 swiper组件构建轮播图的实例微信小程序 loading 详解及实例代码微信小程序 button 组件详解及简单实例微信小程序 视图容器组件的详解及实例代码微信小程序 数组(增,删,改,查微信小程序 for 循环详解微信小程序 input输入框控件详解微信小程序 input输入框详解及简微信小程序 传值取值的几种方法总微信小程序 小程序制作及动画(a微信小程序 wx.request(接口调用微信小程序中使元素占满整个屏幕微信小程序通过api接口将json数据微信小程序 时间格式化(util.fo微信小程序 实现动态显示和隐藏某个控件微信小程序 icon组件详细及实例代码javascript实际应用:innerhtml和确认提示用move.js配合创建css3动画的入门指引实现微信小程序的wxml文件和wxss文件在we快速保存网页中所有图片的方法微信小程序通过api接口将json数据展现到小微信小程序 删除项目工程实现步骤微信小程序 (一)新建项目hello weapp 详微信小程序redux绑定实例详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved