javascript_lesson3_引用类型
2016-08-09 15:23
246 查看
**学习目标
掌握数组的概念、特性、常用方法
掌握Object，学会使用对象
了解其他引用类型对象**
特点： “数组”即一组数据的集合。 js数组更加类似java的容器。长度可变，元素类型也可以不同！
数组长度随时可变！随时可以修改！（length属性） 常用方法： push、pop shift、unshift splice、slice
concat、join、sort、reverse等 对于ECMAscript5这个版本的Array新特性补充： 位置方法：indexOf
lastIndexOf 迭代方法：every filter forEach some map 缩小方法：reduce
reduceRight
Object类型的创建方式、使用 对于Object类型应用for in 枚举循环 Object每个实例都会具有下列属性和方法：
Constructor: 保存着用于创建当前对象的函数。（构造函数）
hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在。
isPrototypeOf(Object): 用于检查传入的对象是否是另外一个对象的原型。
propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。
toLocaleString()：返回对象的字符串表示。该字符串与执行环境的地区对应. toString():返回对象的字符串表示。
valueOf():返回对象的字符串、数值或布尔表示。
、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、Escape、
unescape Math对象 内置的Math对象可以用来处理各种数学运算 可以直接调用的方法：Math.数学函数（参数）
求随机数方法：Math.random(),产生 [0，1) 范围一个任意数 Date对象 获取当前时间的一系列详细方法
基本包装类型：Boolean、String、Number和java的用法类似 Function类型、RegExp类型（以后学习）
掌握数组的概念、特性、常用方法
掌握Object，学会使用对象
了解其他引用类型对象**
3.1 数组
在ECMAScript中数组是非常常用的引用类型了。ECMAScript所定义的数组和其他语言中的数组有着很大的区别。那么首先要说的就是数组也是一种对象。特点： “数组”即一组数据的集合。 js数组更加类似java的容器。长度可变，元素类型也可以不同！
数组长度随时可变！随时可以修改！（length属性） 常用方法： push、pop shift、unshift splice、slice
concat、join、sort、reverse等 对于ECMAscript5这个版本的Array新特性补充： 位置方法：indexOf
lastIndexOf 迭代方法：every filter forEach some map 缩小方法：reduce
reduceRight
3.2 Object
我们目前为止大多数引用类型都是Object类型的实例，Object也是ECMAScript中使用最多的一种类型（就像java.lang.Object一样，Object类型是所有它的实例的基础）。Object类型的创建方式、使用 对于Object类型应用for in 枚举循环 Object每个实例都会具有下列属性和方法：
Constructor: 保存着用于创建当前对象的函数。（构造函数）
hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在。
isPrototypeOf(Object): 用于检查传入的对象是否是另外一个对象的原型。
propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。
toLocaleString()：返回对象的字符串表示。该字符串与执行环境的地区对应. toString():返回对象的字符串表示。
valueOf():返回对象的字符串、数值或布尔表示。
3.3 其他引用类型对象
单体对象： Global对象（全局）这个对象不存在，无形的对象 其内部定义了一些方法和属性：encodeURI、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN、Escape、
unescape Math对象 内置的Math对象可以用来处理各种数学运算 可以直接调用的方法：Math.数学函数（参数）
求随机数方法：Math.random(),产生 [0，1) 范围一个任意数 Date对象 获取当前时间的一系列详细方法
基本包装类型：Boolean、String、Number和java的用法类似 Function类型、RegExp类型（以后学习）
//
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="utf-8">
//js中的数组类似于java里的map容器，长度可以改变，元素类型任意
// var arr = [1,2,3,4,true,'abc',new Date()];
// alert(arr.length);
// alert(arr);
// arr.length = 5;
// alert(arr.length);
// alert(arr);
// var arr = [new Date(),false];
// var result = arr.push(1,2,true);
// alert(arr);
// alert(result);
/**
* push和pop方法
*/
// var obj = arr.pop();//从数组的尾部移除一个元素
// alert(arr);
// alert(obj);
/**
* shift unshift方法
*/
// var arr = [1,2,3,true,new Date()];
// var r1 = arr.shift(10);//从头部移除一个元素（返回移除的元素）
// alert(arr);
// alert(r1);//移除的结果
// var r2 = arr.unshift(10,false);//从头部插入多个元素（返回新数组的元素长度）
// alert(arr);
// alert(r2);
/**
* splice,slice方法
* 操作数组本身
*/
//splice:第一个参数：起始位置
// 第二个参数：表示截取个数
// 第三个参数以后表示追加的新元素个数
// var arr = [1,2,3,4,5];
// arr.splice(1,2,3,4,5);//134545
// alert(arr);
//slice不操作数据本身
// var arr = [1,2,3,4,5];
// var temp = arr.slice(2,4); //截取范围（左闭右开区间）
// alert(arr);
// alert(temp); //3,4
//操作数组的方法：concat join
// var arr1 = [1,2,3];
// var arr2 = [true,4,5];
//不操作数组本身
// var temp = arr1.concat(arr2);
// alert(arr1);
// alert(arr2);
// alert(temp);
// var temp = arr1.join('-');
// alert(temp);
var arr1 = [242,2,3,43,5];
var arr2 = [10,2,4,1,7];
/*
* sort正序排序
* reverse倒序排序
* 按字符串排序 ，不是按数值
*
*/
// arr1.sort();
// alert(arr1);
// arr2.reverse();
// alert(arr2);
/**
* 自定义排序方法
* @param {Object} value1
* @param {Object} value2
*/
function compare(value1,value2)
{
if(value1 < value2)
{
-1;
} else if (value1 > value2)
{
return 1;
} else {
return 0;
}
}
arr2.sort(compare);
alert(arr2);
</script>
</head>
<body>
</body>
</html>//ECMA5新特性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="UTF-8">
// var arr = [1,2,3,4,5,4,3,2,1];
//var index = arr.indexOf(4); //1个参数的时候表示传值，返回索引（从0开始）位置
//var index = arr.indexOf(4,4);//从第4个位置开始向后查，4这个值的位置
//alert(index);
//lastIndexOf
// var index = arr.lastIndexOf(2); //从后向前查找
// alert(index);
//5个新加迭代的方法
//every:对于数组每一个元素进行一个函数的运行，如果都返回true最后则返回true,如果有一项返回false,则返回false
/*var arr = [1,2,3,4,5,4,3,2,1];
var result = arr.every(function(item,index,array){
return item > 2;
});
alert(result);*/
//filter:对于数组的每一个元素进行一个函数的运行 给定的函数去执行 把过滤后的结果返回
// var arr = [1,2,3,4,5,4,3,2,1];
// var result = arr.filter(function(item,index,array){
// return item > 2;
// });
// alert(result);
//forEach:循环数组每一项的值 并执行一个方法
// var arr = [1,2,3,4,5,4,3,2,1];
// arr.forEach(function(item,index,array){
// alert(item);
// });
//map 对于数组的每一个元素进行一个函数的运行 可以经过函数执行完毕后把新的结果返回
// var arr = [1,2,3,4,5,4,3,2,1];
// var result = arr.map(function(item,index,array){
// return item* 2;
// });
// alert(result);
// var arr = [1,2,3,4,5,4,3,2,1];
// var result = arr.some(function(item,index,array){
// return item >= 555;
// });
// alert(result);
//
// 前一个值，当前值，索引位置，array
// var arr = [1,2,3,4,5,4,3,2,1];
// var result = arr.reduce(function(prev,cur,index,array){
// return prev + cur;
// });
// alert(result);
var arr = [1,2,3,4,5,4,3,2,1];
//从右向左依次遍历
var result = arr.reduceRight(function(prev,cur,index,array){
return prev + cur;
});
alert(result);
</script>
</head>
<body>
</body>
</html>//引用类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="UTF-8">
//Object所有类的基础类
//var obj = new Object;
var obj = {}; //实例化对象
//给对象设置属性
obj.name = '张3';
obj.age = 20;
obj.sex = '男';
obj["birthday"] = '1980-08-07';
obj.say = function(){
alert("hello world");
};
//访问对象的属性和方法
//obj.say();
//删除对象属性
//delete操作符 删除对象的属性或方法的
// delete obj.sex;
// delete obj.say;
//
// alert(obj.sex);//undefined
//如何去遍历一个js对象 for in 语句式
// for(var attribute in obj){
// alert(attribute + ":" + obj[attribute]);
// }
//constructor保存对象的创建函数
// alert(obj.constructor);
// var arr = [];
// alert(obj.constructor);
//hasOwnProperty(propertyName)用于检测给定属性在对象中是否存在
//alert(obj.hasOwnProperty('name'));
//alert(obj.propertyIsEnumerable('name'));//该属性是否可以被枚举
</script>
</head>
<body>
</body>
</html>//js实现Map容器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="UTF-8">
//模拟java里的Map
function Map(){
var obj = {};//空的对象容器
//put方法
this.put = function(key,value){
//private
obj[key] = value;
}
//size方法获得map容器的个数
this.size = function(){
var count = 0;
for(var attr in obj){
count++;
}
return count;
}
//get方法根据key取得value
this.get = function(key){
if(obj[key] || obj[key] === 0 || obj[key] === false){
return obj[key];
} else {
return null;
}
}
//remove删除方法
this.remove = function(key){
if(obj[key] || obj[key] === 0 || obj[key] === false)
{
delete obj[key];
}
}
//eachMap遍历map容器的方法
this.eachMap = function(fn){
for(var attr in obj)
{
fn(attr,obj[attr]);
}
}
}
var m = new Map();
m.put('01','abc');
m.put('02',120);
m.put('03',true);
m.put('04',new Date());
// alert(m.size());
// alert(m.get('03'));
// m.remove('03');
// alert(m.get('03'));
m.eachMap(function(key,value){
alert(key + ":" + value);
});
</script>
</head>
<body>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="UTF-8">
//去除重复数据
var arr = [2,1,2,10,2,3,5,5,5,1,1,10,13];
//js对象特性 : 在js对象中key是永远不会重复的
// obj.name = 'z3';
// obj.age = 20;
//
// obj.name = 'w5';
// alert(obj.name);
//1.把数组转成一个js的对象
//2.把数组中的值，变成js对象当中的key
//3.把这个对象 再还原成数组
function toObject(arr){
var obj = {};//私有的对象
var j;
for(var i = 0,j=arr.length; i < j;i++)
{
obj[arr[i]] = true;
}
return obj;
}
//把这个对象转成数组
function keys(obj){
var arr = [];//私有对象 数组
for(var attr in obj){
if(obj.hasOwnProperty(attr))
arr.push(attr);
}
return arr;
}
//综合利用上述2个方法，去掉数组中的重复项
function uniq(newarr) {
return keys(toObject(newarr));
}
alert(uniq(arr));
</script>
</head>
<body>
</body>
</html>//单体对象的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" charset="UTF-8">
// var uri = 'http://blog.csdn.net/wwww_com/article/details/52166668'
//Global全局的 终极的对象 （不存在的）
// var str1 = encodeURI(uri);
// var str2 = encodeURIComponent(uri);
// alert("str1: " + str1 +"\n str2:" + str2);
//encodeURI encodeURIComponent
//decodeURI decodeURIComponent
// decodeURI(str1);
// decodeURIComponent(str2); //解码
//eval(string) 方法 无形的javascript 解析器
// var str1 = "var a = 10;var b = 20;";
// eval(str1);
// alert(a +":" + b)
//数组字符串 直接使用：eval(stringarr);
// {name:z3,age:20}
// var strobj = "{name:'z3',age:20}";
// var obj = eval('(' + strobj + ')');
//
// alert(obj.name);
//parseInt 将字符串的数字值 转为INT类型的值
// var num1 = parseInt('20');
// var num2 = parseFloat('20.5');
//
// alert(num1 + ':' + num2);
// alert(typeof num1);
// alert(typeof num2);
//escape unescape URI 转码解码，中文
// var str1 = '中国IT社区';
// var str2 = escape(str1);
// alert(str1 + ":" + str2)
//
// var str3 = unescape(str2);
// alert(str1 + ":" + str3);
// isNaN //如果不是 number类型 true是number类型false
//在js里面只有NaN自己不等于自己本身的
var num1 = '20';
var num2 = 'abcd10e';
// alert(isNaN(num1)); //是一个number类型 返回false
// alert(isNaN(num2)); //不是一个number 返回true
// if(NaN == NaN){
// alert("相等");
// } else {
// alert("不相等");
// }
//Date日期类型
var date = new Date();
// alert(date);
// var year = date.getYear(); //116
var year = date.getFullYear();//2016
// alert(year);
var month = date.getMonth() + 1;
var da = date.getDate();
var hours = date.getHours();
var min = date.getMinutes();
var se = date .getSeconds();
var day = date.getDay();//星期
document.write('今天是' +
year + "年" +month+"月" +
da + "日 " + hours + "时" +
min + "分" + se + "秒 星期" + day);
</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->addRange 函数
- javascript 基本类型和引用类型的值【javascript高级程序设计】
- Javascript高级程序设计第二版第五章--引用类型--笔记
- JavaScript中值类型与引用类型实例说明
- 深入Atlas系列：Web Sevices Access in Atlas示例（7） - 编写JavaScriptConverter处理含有循环引用的类型
- javascript 高程二 第五章（引用类型）-上
- 值类型与引用类型 in JavaScript
- JavaScript之引用类型介绍
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->clear 函数
- JavaScript中的值类型和引用类型
- JAVASCRIPT基础学习篇（6）－－ECMAScript Basic2（EcmaScript 引用类型）
- JavaScript高级程序设计(第2版) 之 引用类型
- Javascript高级程序设计第二版第五章--引用类型--笔记
- ASP.NET AJAX 说明文档->客户端引用->全局命名空间->JavaScript 基础类型扩展->Array 类型扩展->add 函数
- Javascript 权威指南第五版 手记（1） 引用类型
- javascript高级程序第三版学习笔记【基本类型和引用类型】
- 每天进步一点点-JavaScript之ECMAScript（继JavaScript标准) 引用类型
- JavaScript中的值类型和引用类型
- javascript最常用的继承模式-寄生组合式继承——引用类型最理想的继承范式