JavaScript学习笔记整理之引用类型


Posted in Javascript onJanuary 22, 2016

引用类型是JavaScript中很重要的内容。引用类型是一种数据结构,用于将数据和功能组织在一起。它描述的是一类对象所具有的属性和方法。Object是一个基础类型,Array是数组类型,Date是日期类型,RegExp是正则表达式类型,等。

拥抱JavaScript

曾经名不经传的JavaScript随着AJAX的流行而身价倍增,现在JavaScript不再仅仅是WEB开发中一个可有可无的辅助工具,甚至有了专门属于它的职位“JavaScript工程师”,那怕你仅仅是一名WEB后台开发程序员,你都必须了解JavaScript,至少在一些相关招聘职位要求上你可以看到“熟悉JavaScript优先”的字眼。甚至我还要告诉你,你将可以用JavaScript开发桌面软件,这得益于Adobe AIR的另外一种开发模式,即用HTML+CSS+JavaScript开发AIR。

1.Object类型

1. 创建:

var dog = new Object();

常应用于存储和传输数据。比如存储:

var person = new Object();
person.name = "Nicholas";
person.age = 29;

创建的第二种方式:(在创建时,属性名也可以是字符串格式,即:可以给属性名加引号。)

var person = {
name : "Nicholas",
age : 29
};

2.取出属性值:person["name"];或者:person.name;

2.Array类型

同一个数组可以保存任意类型的数据(大杂烩)。

1.数组可以动态调整(多加一个数据,它自己就增长一个长度,不是死的。)。

2.创建:

var stars=new Array();//方式1
var stars=new Array(20);//方式2
var stars=new Array("周杰伦","林俊杰","孙燕姿");//方式3
var stars=Array(20);//方式4
var stars=["周杰伦","孙燕姿","林俊杰"];//方式6

3.动态调整示例:

var stars=["周杰伦","林俊杰","孙燕姿"];
stars[1]="JJ";//动态改变(把林俊杰变为JJ)
stars[3]="皮裤汪";//动态增长(加了一个长度)
stars.length=1;//动态强制缩减(林俊杰、孙燕姿、皮裤汪强制移除,长度变为1)

4.检测数组:Array.isArray(value);

5.用join()把数组转换成有分隔符的字符串:

var stars = ["周杰伦", "王尼玛", "张全蛋"];
alert(stars .join(",")); //周杰伦,王尼玛,张全蛋
alert(stars .join("-")); //周杰伦-王尼玛-张全蛋

6.可以像栈一样使用数组(pop()出来,push()进去)。

7.可以像队列一样使用数组。(结合shift()和push()):

var stars = new Array(); //create an array
var count = colors.push("周杰伦", "王尼玛"); //push two items
alert(count); //2
count = stars .push("张全蛋"); //push another item on
alert(count); //3
var item = colors.shift(); //get the first item
alert(item); //周杰伦
alert(colors.length); //2
/**所谓栈变队列,其实就是把栈颠倒过来再拉取*/

8.排序。

1.reverse()翻转数组顺序;(返回经过排序后的数组)

2.sort()从小到大排序。但是是按字符串排序,不是按数字排序:(返回经过排序后的数组)。

var values = [, , , , ];
values.sort();
alert(values); //,,,,

要想按你预期的方式排序,可以给sort()里面加一个比较函数当作参数:

function compare(value, value) {
if (value < value) {
return -;
} else if (value > value) {
return ;
} else {
return ;
}
}
var values = [, , , , ];
values.sort(compare);
alert(values); //,,,,

简化版本的比较函数(sort只关心返回的是正数、负数还是0):

function compare(value1,value2){
return value2 - value1; 
}

9.对数组的操作:联结、切片、拼接。

1.联结:使用concat,记忆:concat-->concatenate:连结,连锁。

举例:

var stars = ["周杰伦", "王尼玛", "张全蛋"];
var stars = stars .concat("太子妃", ["花千骨", "梅长苏"]);
alert(stars); //周杰伦,王尼玛,张全蛋 
alert(stars); //周杰伦,王尼玛,张全蛋,太子妃,花千骨,梅长苏

2.切片。使用slice,记忆:slice翻译:切片。举例:

var stars = ["梅长苏", "誉王", "靖王", "霓凰", "飞流"];
var stars= stars.slice();
var stars= stars.slice(,);
alert(stars); //誉王,靖王,霓凰,飞流(从第一个位置开始切)
alert(stars); //誉王,靖王,霓凰(从第个位置切到第个位置,表示半封闭,不包含)

3.拼接。splice。功能强大。可以删除、插入、替换。

 1.删除任意数量的项:比如:splice(0,2),删除第0,1项(半封闭区间)(返回删除项)。

2.指定位置插入任意数量的项:比如:splice(2,0,"周杰伦","王尼玛"),从第2个位置开始插入周杰伦、王尼玛两项。

3.指定位置插入任意数量的项且同时删除任意数量的项。比如:splice(2,1,"周杰伦","王尼玛"),从第2个位置删除1项,然后开始插入周杰伦、王尼玛两项。

10.位置方法:indexOf,lastIndexOf;

11.迭代方法:分为:全部合格才通过、任意一个合格就通过、过滤部分渣渣,一对一映射,迭代查询,缩减。

1.全部合格才通过:

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false

上例中每一项都大于2才返回true。

2.任意一个合格就通过:

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true

上例中,有一个大于2就返回true。

3.过滤部分渣渣:

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

上例中,把大于2的都过滤掉。

4.一对一映射:

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]

上例中,给每一项都乘以2.

5.迭代:使用for-each。

6.缩减:reduce。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
});
alert(sum);//15

累加求和返回,5项缩为1项。 

3.RegExp类型

1.var expression=/ pattern / flags;

2.flags分三种:g(global全局模式,应用于所有字符串)、i(case-insensive,忽略字母大小写)、m(multiline,多行模式,一行检验完了接着下一行。)。举例:

/**匹配字符串中所有'at'的实例*/
var pattern1=/at/g;
/**匹配第一个'bat'或'cat',不分大小写*/
var pattern2 =/[bc]at/i;
/**匹配所有以'at'结尾的3个字符组合,不分大小写*/
var pattern3=/.at/gi;

3.模式中所有的元字符必须转义,元字符:( { [ \ ^ $ | ) ? * + . ] }

4.Function类型

1.每个函数都是Function类型的实例,而且与其他引用类型一样,都有属性和方法。

2.函数的两种定义方法:

方法1:

function sum(a,b){
return a + b; 
}

方法2:

var sum=function(a,b){
return a + b;
}

3.函数没有重载。

5.Boolean、Number、String:基本包装类型

var a="Jay Chou is a superstar";
var b=a.substring(0,8);

上例中,a是基本类型,但是a可以调用substring方法,是因为,后台自动完成a的包装操作,创建String类型的一个实例。Boolean,Number也类似。

6.单体内置对象,不需要实例化,直接使用,如:Math,Global。

1.所有全局作用域中定义的函数、变量,都是Global对象的方法,比如:parseInt,isNaN等。

2.eval()方法也是Global对象的方法,它负责解析javascript。

3.Math对象是保存数学公式和相关信息的。它有很多方法, 如:min求最小值,max求最大值,ceil()向上取整,floor向下取整,round四舍五入,random取随机数。

ps:引用类型理解:变量的交换等于把现有一间店的钥匙(变量引用地址)复制一把给了另外一个老板,此时两个老板同时管理一间店,两个老板的行为都有可能对一间店的运营造成影响。

引用类型例子

function chainStore()
{
var store1=['Nike China'];
var store2=store1;
alert(store2[0]); //Nike China
store1[0]='Nike U.S.A.';
alert(store2[0]); //Nike U.S.A.
}
chainStore();
//在上面的代码中,store2只进行了一次赋值,理论上它的值已定,但后面通过改写store1的值,发现store2的值也发生了改变,这正是引用类型的特征,也是我们要注意的地方
Javascript 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
vue实现井字棋游戏
Sep 29 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 #Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 #Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 #Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 #Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 #Javascript
jQuery解析json格式数据简单实例
Jan 22 #Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 #Javascript
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP中ADODB类详解
2008/03/25 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
vue实现简易计算器功能
2021/01/20 Vue.js
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python正则简单实例分析
2017/03/21 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python库安装速度过慢解决方案
2020/07/14 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
未婚证明书模板
2014/10/08 职场文书
机关作风建设工作总结
2014/10/23 职场文书
高中班主任心得体会
2016/01/07 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript