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的方法汇总
Feb 13 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
详解vue 组件的实现原理
Nov 12 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防攻击代码升级版
2010/12/29 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP网络操作函数汇总
2015/05/18 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Java基础面试题
2014/07/19 面试题
生产车间主管岗位职责
2013/12/28 职场文书
实验室标语
2014/06/21 职场文书
2014年计生标语
2014/06/23 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
python双向链表实例详解
2022/05/25 Python