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 相关文章推荐
js类式继承的具体实现方法
Dec 31 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
其他功能
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
28个JS验证函数收集
2010/03/02 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python使用requests发送POST请求实例代码
2018/01/25 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
如何客观的进行自我评价
2013/12/17 职场文书
《小池塘》教学反思
2014/02/28 职场文书
安全例会汇报材料
2014/08/23 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技