分类目录归档:javascript

前端工程师必备技能汇总

项目起源

还记得@jayli 的这幅前端知识结构图么。

前端知识结构

(点击查看大图)

图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个github项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。

尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于DataV项目)。

前端开发知识结构

前端书籍推荐

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

JavaScript

版本控制工具

后端书籍推荐

Linux管理

Linux编程

C/C++

本文来源:https://github.com/JacksonTian/fks

【编辑推荐】

对json对象的增删查改操作

//下面是对json对象的增删查改操作

//声明json对象

var jsonObj2={persons:[{name:”jordan”,sex:”m”,age:”40″}, {name:”bryant”,sex:”m”,age:”28″}, {name:”McGrady”,sex:”m”,age:”27″} ]};

var persons=jsonObj2.persons; 
var str=””;

var person={name:”yaoMing”,sex:”m”,age:”26″}; 
//以下为json对象的操作,去掉注释可以查看操作结果 
//jsonObj2.persons.push(person);//数组最后加一条记录 
//jsonObj2.persons.pop();//删除最后一项 
//jsonObj2.persons.shift();//删除第一项 
jsonObj2.persons.unshift(person);//数组最前面加一条记录 只要适合Javascript的方法都是可以用在JSON对象的数组中的!所以还有另外的方法splice( )进行crud操作! //删除 
//jsonObj2.persons.splice(0,2);//开始位置,删除个数 
//替换不删除 
var self={name:”tom”,sex:”m”,age:”24″}; 
var brother={name:”Mike”,sex:”m”,age:”29″}; 
jsonObj2.persons.splice(1,0,self,brother,self);//开始位置,删除个数,插入对象 
//替换并删除 
//jsonObj2.persons.splice(0,1,self,brother);//开始位置,删除个数,插入对象

for(var i=0;i<persons.length;i++){ var cur_person=persons[i]; str+=cur_person.name+”‘sex is “+cur_person.sex+” and age is “+cur_person.age+”<br><br>”; } 
document.writeln(str); 
//转换为json文本 
var myjsonobj = JSON.stringify(jsonObj2); 
document.writeln(myjsonobj); 
</script>

JS对JSON的操作总结

一、概述

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

 在JSON中,有两种结构:对象和数组。

1.对象

一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value’ 对”之间运用 “,”分隔。

packJson = {“name”:”nikita”, “password”:”1111″}

2.数组

packJson = [{“name”:”nikita”, “password”:”1111″}, {“name”:”tony”, “password”:”2222″}];

数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

二、JSON对象和JSON字符串的转换

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

var jsonStr = ‘{“name”:”nikita”, “password”:”1111″}';

JSON对象:

var jsonObj = {“name”:”nikita”, “password”:”1111″};

对于前端完全是菜鸟,迫于无奈,工作中要用到JS,尤其对JSON的处理为多,网上搜了一下,所讲的基本雷同。所以把平时用的比较多的JSON处理方法总结了一下,权当加深记忆。

一、概述

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

 在JSON中,有两种结构:对象和数组。

1.对象

一个对象以“{”开始,“}”结束。每个“key”后跟一“:”,“‘key/value’ 对”之间运用 “,”分隔。

packJson = {“name”:”nikita”, “password”:”1111″}

2.数组

packJson = [{“name”:”nikita”, “password”:”1111″}, {“name”:”tony”, “password”:”2222″}];

数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

二、JSON对象和JSON字符串的转换

在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:

JSON字符串:

var jsonStr = ‘{“name”:”nikita”, “password”:”1111″}';

JSON对象:

var jsonObj = {“name”:”nikita”, “password”:”1111″};

2、String转换为Json

var myObject = eval('(' + myJSONtext + ')');

eval是js自带的函数,不是很安全,可以考虑用json包。

三、遍历JSON对象

复制代码
复制代码
myJson = {"name":"nikita", "password":"1111"};

for(var p in myJson){//遍历json对象的每个key/value对,p为key

   alert(p + " " + myJson[p]);

}
复制代码

运行结果:

四、遍历JSON数组

复制代码
复制代码
packJson = [

{"name":"nikita", "password":"1111"},

{"name":"tony", "password":"2222"}

];

for(var p in packJson){//遍历json数组时,这么写p为索引,0,1

   alert(packJson[p].name + " " + packJson[p].password);

}
复制代码
复制代码

我更倾向于这种写法:

for(var i = 0; i < packJson.length; i++){

   alert(packJson[i].name + " " + packJson[i].password);

}

运行结果:

 

 五、将两个JSON对象组装到一个里面

复制代码
复制代码
//targetJson 目标JSON,packJson 被组装JSON

function addGroupJson(targetJson, packJson){

    if(targetJson && packJson){

       for(var p in packJson){

           targetJson[p] = packJson[p];

       }

    }

}
复制代码
复制代码

用法如下:

var json1 = {"name":"nikita"};
var json2 = {"password":"1111"};
addGroupJson(json1, json2);
alert(json2str(json1));

运行结果:

引用: http://www.cnblogs.com/csj222/archive/2013/04/11/3013667.html

JS操作JSON读书笔记

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript中处理 JSON数据不需要任何特殊的 API或工具包。
本文主要是对JS操作JSON的方法做下总结。

在JSON中,有两种结构:对象和数组。
1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不需要。例如:
var o={“xlid”:”cxh”,”xldigitid”:123456,”topscore”:2000,”topplaytime”:”2009-08-20″};
2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。
例如:
var jsonranklist=[{“xlid”:”cxh”,”xldigitid”:123456,”topscore”:2000,”topplaytime”:”2009-08-20″},{“xlid”:”zd”,”xldigitid”:123456,”topscore”:1500,”topplaytime”:”2009-11-20″}];

为了方便地处理JSON数据,JSON提供了json.js包,下载地址:http://www.json.org/json.js

在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:
JSON字符串:
var str1 = ‘{ “name”: “cxh”, “sex”: “man” }';
JSON对象:
var str2 = { “name”: “cxh”, “sex”: “man” };
一、JSON字符串转换为JSON对象

要使用上面的str1,必须使用下面的方法先转化为JSON对象:

//由JSON字符串转换为JSON对象

var obj = eval(‘(‘ + str + ‘)’);

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后,就可以这样读取:

Alert(obj.name);

Alert(obj.sex);

 

特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。

二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。

例如:

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);
注意:
上面的几个方法中,除了eval()函数是js自带的之外,其他的几个方法都来自json.js包。新版本的 JSON修改了 API,将 JSON.stringify()和 JSON.parse()两个方法都注入到了 Javascript的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法,则说明您的json包版本太低。

 

注:看了这篇文章我产生了一个疑惑,就是json对象和js对象有什么分别?于是我在百度上Google了一下,找到了一篇文章,暂时解答了我的困惑,原来这个json对象其实说法是不对的,应该叫对象字面量(这个称呼更加抽象),- -!好吧,既然高手这么说了,我作为一个学习者也就这么认为吧。那要是这么说的话其实所谓的json对象就和js对象一样的了!二者其实没什么分别,叫法不一样而已!

以下是参考文章:

来自【博客园】:http://www.cnblogs.com/TomXu/archive/2012/01/11/2311956.html

 

写这篇文章的目的是经常看到开发人员说:把字符串转化为JSON对象,把JSON对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢。
本文的主题是基于ECMAScript262-3来写的,2011年的262-5新规范增加了JSON对象,和我们平时所说的JSON有关系,但是不是同一个东西,文章最后一节会讲到新增加的JSON对象。

英文原文:http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/

 

我想给大家澄清一下一个非常普遍的误解,我认为很多JavaScript开发人员都错误地把JavaScript对象字面量(Object Literals)称为JSON对象(JSON Objects),因为他的语法和JSON规范里描述的一样,但是该规范里也明确地说了JSON只是一个数据交换语言,只有我们将之用在string上下文的时候它才叫JSON。

序列化与反序列化

2个程序(或服务器、语言等)需要交互通信的时候,他们倾向于使用string字符串因为string在很多语言里解析的方式都差不多。复杂的数据 结构经常需要用到,并且通过各种各样的中括号{},小括号(),叫括号<>和空格来组成,这个字符串仅仅是按照要求规范好的字符。

为此,我们为了描述这些复杂的数据结构作为一个string字符串,制定了标准的规则和语法。JSON只是其中一种语法,它可以在string上下文里描述对象,数组,字符串,数字,布尔型和null,然后通过程序间传输,并且反序列化成所需要的格式。YAMLXML(甚至request params)也是流行的数据交换格式,但是,我们喜欢JSON,谁叫我们是JavaScript开发人员呢!

字面量

引用Mozilla Developer Center里的几句话,供大家参考:

1 他们是固定的值,不是变量,让你从“字面上”理解脚本。 (Literals)

2 字符串字面量是由双引号(”)或单引号(’)包围起来的零个或多个字符组成的。(Strings Literals)

3 对象字面量是由大括号({})括起来的零个或多个对象的属性名-值对。(Object Literals)

何时是JSON,何时不是JSON?

JSON是设计成描述数据交换格式的,他也有自己的语法,这个语法是JavaScript的一个子集。
{ “prop”: “val” } 这样的声明有可能是JavaScript对象字面量也有可能是JSON字符串,取决于什么上下文使用它,如果是用在string上下文(用单引号或双引号 引住,或者从text文件读取)的话,那它就是JSON字符串,如果是用在对象字面量上下文中,那它就是对象字面量。

// 这是JSON字符串
var foo = ‘{ “prop”: “val” }';

// 这是对象字面量
var bar = { “prop”: “val” };

而且要注意,JSON有非常严格的语法,在string上下文里{ “prop”: “val” } 是个合法的JSON,但{ prop: “val” }和{ ‘prop': ‘val’ }确实不合法的。所有属性名称和它的值都必须用双引号引住,不能使用单引号。另外,即便你用了转义以后的单引号也是不合法的,详细的语法规则可以到这里查看

放到上下文里来看

大家伙可能嗤之以鼻:难道JavaScript代码不是一个大的字符串?

当然是,所有的JavaScript代码和HTML(可能还有其他东西)都是字符串,直到浏览器对他们进行解析。这时候.jf文件或者inline 的JavaScript代码已经不是字符串了,而是被当成真正的JavaScript源代码了,就像页面里的innterHTML一样,这时候也不是字符 串了,而是被解析成DOM结构了。

再次说一下,这取决于上下文,在string上下文里使用带有大括号的JavaScript对象,那它就是JSON字符串,而如果在对象字面量上下文里使用的话,那它就是对象字面量。

真正的JSON对象

开头已经提到,对象字面量不是JSON对象,但是有真正的JSON对象。但是两者完全不一样概念,在新版的浏览器里JSON对象已经被原生的内置对象了,目前有2个静态方法:JSON.parse用来将JSON字符串反序列化成对象,JSON.stringify用来将对象序列化成JSON字符串。老版本的浏览器不支持这个对象,但你可以通过json2.js来实现同样的功能。

如果还不理解,别担心,参考一下的例子就知道了:

// 这是JSON字符串,比如从AJAX获取字符串信息
var my_json_string = ‘{ “prop”: “val” }';

// 将字符串反序列化成对象
var my_obj = JSON.parse( my_json_string );

alert( my_obj.prop == ‘val’ ); //  提示 true, 和想象的一样!

// 将对象序列化成JSON字符串
var my_other_json_string = JSON.stringify( my_obj );

另外,Paul Irish提到Douglas Crockford在JSON RFC里用到了“JSON object”,但是在那个上下文里,他的意思是“对象描述成JSON字符串”不是“对象字面量”。

 

引用:http://skybirdzw.blog.163.com/blog/static/72570626201212034616294/

Javascript中的函数声明和函数表达式

Javascript有很多有趣的用法,在Google Code Search里能找到不少,举一个例子:
<span>&lt;script&gt;</span>
<span>~function() {</span>
<span>    alert("hello, world.");</span>
<span>}();</span>
<span>&lt;/script&gt;</span>
试一下就知道这段代码的意思就是声明一个函数,然后立刻执行,因为Javascript中的变量作用域是基于函数的,所以这样可以避免变量污染,但这里的位运算符『~』乍一看让人摸不到头脑,如果去掉它再运行则会报错:SyntaxError。
在阐述为什么之前,让我们先来明确Javascript中的两个概念:函数声明和函数表达式:
先来看看什么样的是函数声明:
 
<span>&lt;script&gt;</span>
<span>function() {</span>
<span>    alert("hello, world.");</span>
<span>};</span>

function foo() {
    alert(“hello, world.”);</script>

再来看看什么样的是函数表达式:
<span>&lt;script&gt;</span>
<span>var foo = function() {</span>
<span>    alert("hello, world.");</span>
<span>};</span>
<span>&lt;/script&gt;</span>
现在回头看看文章开头的问题,为什么去掉位操作符『~』后运行会报错,这是因为从语法解析的角度看,Javascript不允许在函数声明的后面直接使用小括号,而函数表达式则没有这个限制,通过在函数声明前面加上一个『~』操作符,就可以让语法解析器把后面看成是函数表达式,同样的,在函数声明前面加上『!,+,-』等操作符也是可行的。
那我们为什么不使用下面这种函数表达式的方式呢?
<span>&lt;script&gt;</span>
<span>var foo = function() {</span>
<span>    alert("hello, world.");</span>
<span>}();</span>
<span>&lt;/script&gt;</span>
虽然从语法解析的角度看没有问题,但是上面的代码存在弊端,它引入了一个变量,可能会污染现有的运行环境,带来潜在的问题。
使用位操作符“~”的方法显得有点奇技淫巧,其实把函数声明用小括号套起来更易读:
<span>&lt;script&gt;</span>
<span>(function() {</span>
<span>    alert("hello, world.");</span>
<span>})();</span>
<span>&lt;/script&gt;</span>
弄明白了原理,不管遇到什么写法,都不会再丈二和尚摸不着头脑了。
This entry was posted in Technical and tagged Javascript by 老王. Bookmark the permalink.
8 THOUGHTS ON “JAVASCRIPT中的函数声明和函数表达式”

转载地址:http://huoding.com/2011/03/02/48
转载目的:用于记录保存资料和学习,感谢原作者分享