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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
浅谈node的事件机制
Oct 09 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 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定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
django实现日志按日期分割
2020/05/21 Python
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
C有"按引用传递"吗
2016/09/06 面试题
C#实现启动一个进程
2016/10/01 面试题
主持人婚宴答谢词
2014/01/28 职场文书
教师现实表现材料
2014/02/14 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
租房协议书样本
2014/08/20 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015年领班工作总结
2015/04/29 职场文书
会计做账心得体会
2016/01/22 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
python编程项目中线上问题排查与解决
2021/11/01 Python