JavaScript 七大技巧(二)

2024-10-12 02:31:18

上篇文章给大家介绍了JavaScript 七大技巧(二)，写JavaScript代码已经很久了，都记不起是什么年代开始的了。对于JavaScript这种语言近几年所取得的成就，我感到非常的兴奋;我很幸运也是这些成就的获益者。我写了不少的文章，章节，还有一本专门讨论它的书，然而，我现在依然能发现一些关于这种语言的新知识。下面的描述的就是过去让我不由得发出“啊!”的感叹的编程技巧，这些技巧你应该现在就试试，而不是等着未来的某个时候偶然的发现它们。

var band = {
　　 "name":"The Red Hot Chili Peppers",
　　 "members":[
　　 {
　　 "name":"Anthony Kiedis",
　　 "role":"lead vocals"
　　 },
　　 {
　　 "name":"Michael 'Flea' Balzary",
　　 "role":"bass guitar, trumpet, backing vocals"
　　 },
　　 {
　　 "name":"Chad Smith",
　　 "role":"drums,percussion"
　　 },
　　 {
　　 "name":"John Frusciante",
　　 "role":"Lead Guitar"
　　 }
　　 ],
　　 "year":""
　　 }

你可以在JavaScript里直接使用JSON，可以把它封装在函数里，甚至作为一个API的返回值形式。　　我们把这称作 JSON-P ，很多的API都使用这种形式。　　你可以调用一个数据提供源，在script代码里直接返回 JSON-P 数据：　　

01　　
12　　

这是调用 Delicious 网站提供的 Web service 功能，获得JSON格式的最近的无序书签列表。　　

基本上，JSON是最轻便的描述复杂数据结构的方法，而且它能在浏览器里运行。　　

你甚至可以在PHP里用 json_decode() 函数来运行它。　　

JavaScript的自带函数(Math, Array 和 String)　　

让我感到惊奇的一个事情是，当我研究了JavaScript里的math和String函数后，发现它们能极大的简化我的编程劳动。　　

使用它们，你可以省去复杂的循环处理和条件判断。　　

例如，当我需要实现一个功能，找出数字数组里最大的一个数时，我过去是这样写出这个循环的，就像下面：

 var numbers =
　　[,,,,];
　　 var max = ;
　　 for(var i=;i
　　 if(numbers[i]
　　> max){
　　 max = numbers[i];
　　 }
　　 }
　　 alert(max);

　　我们不用循环也能实现：　

 var numbers =

　　[,,,,];
　　 numbers.sort(function(a,b){return b -
　　a});
　　 alert(numbers[]);

　　需要注意的是，你不能对一个数字字符数组进行 sort() ，因为这种情况下它只会按照字母顺序进行排序。　　
如果你想知道更多的用法，可以阅读这篇不错的关于 sort() 的文章。　　

再有一个有意思的函数就是 Math.max()。　　

这个函数返回参数里的数字里最大的一个数字：

Math.max(12,123,3,2,433,4); // returns 433

因为这个函数能够校验数字，并返回其中最大的一个，所以你可以用它来测试浏览器对某个特性的支持情况：

 var scrollTop=
　　Math.max(
　　 doc.documentElement.scrollTop,
　　 doc.body.scrollTop
　　 );

　　这个是用来解决IE问题的。你可以获得当前页面的 scrollTop 值，但是根据页面上 DOCTYPE 的不同，上面这两个属性中只有一个会存放这个值，而另外一个属性会是 undefined，所以你可以通过使用 Math.max() 得到这个数。　　

阅读这篇文章你会得到更多的关于使用数学函数来简化JavaScript的知识。　　

另外有一对非常有用的操作字符串的函数是 split() 和 join()。我想最有代表性的例子应该是，写一个功能，用来给页面元素附加CSS样式。　　

是这样的，当你给页面元素附加一个CSS class时，要么它是这个元素的第一个CSS class，或者是它已经有了一些class　　, 需要在已有的class后加上一个空格，然后追加上这个class。而当你要去掉这个class时，你也需要去掉这个class前面的空格(这个在过去非常重要，因为有些老的浏览器不认识后面跟着空格的class)。　

　于是，原始的写法会是这样：

 function addclass(elm,newclass){
　　 var c =
　　elm.className;
　　 elm.className = (c === '') ? newclass : c+' '+newclass;
　　 }　　你可以使用 split() 和 join() 函数自动完成这个任务： function addclass(elm,newclass){
　　 var classes =
　　elm.className.split(' ');
　　 classes.push(newclass);
　　 elm.className = classes.join(' ');
　　 }

这会确保所有的class都被空格分隔，而且你要追加的class正好放在最后。

是个短视的行为。工具包可以帮你快速的开发，但如果你不深入理解JavaScript，你也会做错事。

用 JSON 形式存储数据

　　在我发现JSON之前，我使用各种疯狂的方法把数据存贮在JavaScript固有的数据类型里面，例如：数组，字符串，中间夹杂着容易进行拆分的标志符号以及其它的令人讨厌的东西。

　　Douglas Crockford 发明了JSON 之后，一切全变了。

　　使用JSON，你可以使用JavaScript自有功能把数据存贮成复杂的格式，而且不需要再做其它的额外转换，直接可以访问使用。

　　JSON 是 “JavaScript Object Notation” 的缩写，它用到了上面提到的两种简写方法。

以上内容是小编给大家分享的javascript七大技巧，希望大家喜欢。

js操作table元素实现表格行列新增、删除技巧总结

本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************
JavaScript 七大技巧（一）

JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript七大实用技巧.最佳实践等非常实用的内容.在过去,如果你想创建一个对象,你需要这样: var car = new Object(); car.colour = 'red'; car.wheels = ; car.hubcaps = 'spinning'; car.age = ; 下面的写法能够达到同样的效果: var car = { colour:'red', whee
JavaScript小技巧整理

本文整理总结了JavaScript的小技巧.分享给大家供大家参考,具体如下: 1.组织默认事件阻止默认事件,h5默认的input type='date'在某些浏览器和android设备上没有效果,这时要调用h5+的时间选择器,但是要组织input默认的click事件,代码如下: //选择时间 $("#end_time").on("click",function(event){ event.preventDefault(); plus.nativeUI.pickDa
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: ① 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ for(j=0; j<len; j++){ if(array[i] < array[j]){ d = array[j]; array[j] = array[i]; array[i] = d; } } } return array; } ② js
JavaScript截取、切割字符串的技巧

对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: str="jpg|bmp|gif|ico|png"; arr=str.split("|"); //arr是一个包含字符值"jpg"."bmp"."gif&q
js性能优化技巧

性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议它的最上层是应用层传输层网络层物理层请求信息:请求行请求头空行消息体响应信息:状态行和状态码使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这
Javascript小技能总结(推荐)

废话不多说,直接上干货.. 具体代码如下所示: /* @@截取字符串长度,汉字算2个字符 @@return [string]+'...' */ var subString = function(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chine
JavaScript小技巧整理篇(非常全)

能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性:performance(性能), conventions(协议), hacks(代码hack), interview questions(面试问题)及所有其他的项. #24 - 使用 === 代替 == ==(或者!=)做对比的时候会将进行对比的两者转换到同一类型再比较.===(或者!==)则不会,他
JavaScript正则表达式解析URL的技巧

正则表达式是一个描述字符模式的对象. 首先,此片文章并不是直接告诉你,url的正则表达式是什么,以及怎么使用这个正则表达式去解析一个URL地址,相信这种问题在网络上已经能找到很多.本文的宗旨在于教你如何理解URL的正则表达式,以达到理解正则表达式,以及能够在日后的工作中写出相对简单的正则.言归正传,先看看一下的例子: var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:
JavaScript 七大技巧(二)

上篇文章给大家介绍了JavaScript 七大技巧(二),写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋;我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本专门讨论它的书,然而,我现在依然能发现一些关于这种语言的新知识.下面的描述的就是过去让我不由得发出"啊!"的感叹的编程技巧,这些技巧你应该现在就试试,而不是等着未来的某个时候偶然的发现它们. var band = { "na
每日十条JavaScript经验技巧(二)

1. 非数值类型转数值使用Number()转换时: undefined会转为NaN 如果字符串以0开始,浏览器会忽略前导0,不会按照八进制进行转换如果字符串以0x开始,浏览器会按照十六进制转化为十进制返回如果字符串有字符,除(+,-,.)外都会转为NaN,十六进制时,字符串包含任何非数字字符都返回NaN 如果是对象转换,则对象先使用valueof(),然后按照规则转换.如果无valueOf方法,则调用toString方法,再转换. 使用parseInt()转换时: parseInt会忽略前
JavaScript 数组常见操作技巧 (二)

目录一.出数组中的重复元素或非重复元素二.数组扁平化 / 数组降维二维数组:双重循环二维数组:循环 + concat 二维数组:reduce + concat 二维数组:展开 / apply + concat 多维数组:toString + split 多维数组:forEach + 递归多维数组:reduce + 递归多维数组:while + some 不确定维数的数组: flat 前言: 数组是 JavaScript 中常见数据类型之一,关于它的一些操作方法,我在这里做一下简单记录
全面介绍javascript实用技巧及单竖杠

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧.本文将为你全面的介绍其中的知识点. 一.js整数的操作使用|0和~~可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快,在处理像素及动画位移等
学JavaScript七大注意事项【必看】

知识说明: 初学JavaScript,注意以下七大细节,在实现同样功能的情况下,让我们的代码更易懂.效率更高. 一.简化代码例如:创建对象之前是这样的: Var car = new object(); Car.color = "red"; Car.wheels = 4; Car.age = 8; 而现在可以写成这样子: Var car = {color:'red', wheels:4, age:8} 例如:创建数组之前是这样的: Var studentArray = new Ar
JavaScript动态创建二维数组的方法示例

本文实例讲述了JavaScript动态创建二维数组的方法.分享给大家供大家参考,具体如下: 学过C语言的我太耿直一般这种情况下我会直接 var arr = new Array[10][10]; 但是不出意外的话这样是会报错的,因为在js中根本没有这样的语法在这之前,让我们先来回顾一下js中是怎么样创建一维数组的: 使用数组直接量,这个是最简单的,在方括号内将数组元素用逗号隔开即可: var arr = [ ]; //空数组 var s = [1,2,3,4]; //4个元素的数组 var n
24个实用JavaScript 开发技巧

目录 1. 初始化数组 2. 数组求和.求最大值.最小值 3. 过滤错误值 4. 使用逻辑运算符 5. 判断简化 6. 清空数组 7. 计算代码性能 8. 拼接数组 9. 对象验证方式 10. 验证undefined和null 11. 数组元素转化为数字 12. 类数组转为数组 13. 对象动态声明属性 14. 缩短console.log() 15. 获取查询参数 16. 数字取整 17. 删除数组元素 18. 检查对象是否为空 19. 使用 switch case 替换 if/else 20.
分享12个非常实用的JavaScript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func
12个非常实用的JavaScript小技巧【推荐】

这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: funct

JavaScript 七大技巧(二)

相关推荐

随机推荐