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 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
详解javascript遍历方式
Nov 11 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 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的简易冒泡法代码分享
2012/08/28 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
经济管理专业毕业生推荐信
2013/11/11 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
班主任对学生的评语
2014/04/26 职场文书
诚信承诺书模板
2014/05/26 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
防暑降温通知书
2015/04/27 职场文书
教师思想工作总结2015
2015/05/13 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Element实现动态表格的示例代码
2021/08/02 Javascript