Javascript_引用类型
数组
在ECMAScript中数组是非常常用的引用类型
ECMAScript所定义的数组和其他语言中的数组有着很大的区别
数组也是一种对象
创建数组
//方法一var arr = new Array();//方法二var arr1 = [];
特点
数组即一组数据的集合
js数组更加类似java的map容器。长度可变,元素类型任意
数组长度随时可变!随时可以修改!(length属性)
var arr1 = [123,324,true,'abc',1,4,5,new Date()];
arr1.length = 5;
console.log( arr1 );
//log 里面是传递的字符串 , JS引擎默认会调用.toString(); 隐式的调用.
常用方法
push、pop
shift、unshift
splice、slice
concat、join、sort、reverse(逆序)
影响原数组splice()arr.splice(开始项,[控制几位数,值]); //statr ,count ,var arr = [1,2,3,4,5,6,7];var zf = arr.splice(3); //控制几位数, 默认值 :arr.length-1 //包括3 原来项数console.log( arr ); //[1,2,3]console.log( zf ); //[4,5,6,7] //返回值 -- 取出的内容var arr = [1,2,3,4,5,6,7]; var zf = arr.splice(3,2); //截取console.log( arr ); //[1, 2, 3, 6, 7]console.log( zf ); //[4,5] var arr = [1,2,3,4,5,6,7]; var t = arr.splice(3,2,'zf','dd'); //替换console.log( arr ); //[1,2,'zf','dd',6,7]console.log( t ); //[4,5]var arr = [1,2,3,4,5,6,7]; var t = arr.splice(3,0,'zf','dd'); //插入console.log(arr); //[1,2,3,'zf','dd',4,5,6,7]console.log( t ); //[] //如果为0 ,去除空数组var arr = [1,2,3,4,5,6,7]; var 12 = arr.splice(-4); //截取console.log( arr ); //[1,2,3]console.log( zf ); //[4,5,6,7]
//slice(stat,end) //去出了end-stat 项。 不包括end项。
var zf = arr.sort(function ( a,b ) { //传递匿名函数,通过匿名函数参数判断大小。 if( a>b ){ return 1; } else if( a
//迭代方法
//every : 对于数组每一个元素进行一个函数的运行 如果函数都返回true, 最后则返回true。 如果有一个返回false 最后结果则返回false。
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.every(function ( item,index,array ) {
return item > 0;
});
console.log( reslut ); //true
//filter : 对于数组的每一个元素进行一个函数的运行 给定的函数执行, 把过滤后的结果返回。
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.filter(function ( item,index,array ) {
return item > 2; //所有大于2 的过滤出来
})
console.log( reslut ); //[3, 4, 3, 4, 6]
//forEach : 循环数组每一项, 并执行一个方法
var arr = [1,2,3,4,3,2,4,6];
arr.forEach(function ( item,index,array ) {
console.log( item );
});
//map : 对于数组的每一个元素进行一个函数的运行 可以经过函数执行完毕 把新的结果返回
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.map(function ( item,index,array ) {
return item * 3;
});
console.log( reslut ); //[3, 6, 9, 12, 9, 6, 12, 18]
//some : 对于数组每一个元素进行一个函数的运行 如果有一项返回true 最后则返回true 如果每一项都返回false, 最后才返回false
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.some(function ( item,index,array ) {
return item > 5; //有一个返回true, 就返回true
});
console.log( reslut ); //true
//模拟filter方法
Array.prototype.filter = function ( cb ) {
var reslut = [];try{ if ( cb && cb.constructor === Function ) { for ( var i=0; i 2;
});
console.log( a );
var arr = [1,2,3,4,3,2,4,6];
//reduce reduceRight
//前一个值, 当前值, 索引位置, array
var reslut = arr.reduce(function ( prev,cur,index,array ) {
return prev + cur;
});
console.log( reslut ); //25
// reduceRight 从右开始遍历
var reslut1 = arr.reduceRight(function ( prev,cur,index,array ) {
return prev + cur;
});
console.log( reslut ); //25
# Object引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型(就像java.lang.Object一样,Object类型是所有它的实例的基础) //所有类的 基础类。Object类型的创建方式、使用对于Object类型应用for in 枚举循环## Obj每个实例都具有属性和方法Constructor: 保存着用于创建当前对象的函数。(构造函数)hasOwnProperty(propertyName):用于检测给定的属性在当前对象实例中(而不是原型中)是否存在。isPrototypeOf(Object): 用于检查传入的对象是否是另外一个对象的原型。propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。toLocaleString():返回对象的字符串表示。该字符串与执行环境的地区对应.toString():返回对象的字符串表示。valueOf():返回对象的字符串、数值或布尔表示。# 模拟map模拟java中的Map
//简单实现 map
function Map () {
//priveate 的对象来保存 key 和 valvar obj = {};// put 方法this.put = function ( key,val ) { obj[key] = val; //把键值对 绑定到object上.}//获得map 容器的个数this.size = function () { var count = 0; for ( var i in obj ) { count++; } return count;}//根据key 得到 valthis.get = function ( key ) { return obj[key] || (obj[key] === 0) || (obj[key] === false) ? obj[key] : null;}// remove 删除方法this.remove = function ( key ) { if ( obj[key] || obj[key] === 0 || obj[key] === false ) delete obj[key]; }//eachMap 遍历 map 容器的方法this.eachMap = function ( cb ) { if ( cb && cb.constructor === Function ) { for ( var i in obj ) { cb.call(this,i,obj[i]); } }}
}
var m = new Map();
m.put('01',120);
m.put('02','tan');
// console.log( m.size() );
//
// console.log( m.get('0') );
// m.remove('01');
// console.log( m.get('01'),'--' );
m.eachMap(function ( key,val ) {
console.log( key,val,'---' );
});
# 去掉数组的重复项
var arr = [1,2,4,2,3,4,5,546,57,6,5,4,31,57];
//js 对象特性, 数组去重
// 在 js 对象 中 key 是永远 不会重复的.
// 1, 把数组转成一个js的对象
// 2,把数组中的值,变成js 对象当中的key
// 3,把对象再还原成数组
//数组转对象
var toObject = function ( arr ) {
var reslutObj = {};for ( var i=0; i
//eval(string) 方法 无形的javascript 解析器var str1 = 'var a = 10; var b = 20;';eval(str1);console.log( a+b );//数组字符串 直接使用: eval(strArr);var arr = '[10,203,345,45,6]';var evalArr = eval(arr);console.log( evalArr );//对象字符串 var obj = '{name: "123", age: 20}';var evalObj = eval('(' + obj + ')' );console.log( evalObj );//Object {name: "123", age: 20}
//escape unescape URI 转码var str = '八百米';var str2 = escape(str); //%u516B%u767E%u7C73console.log( str2 );
Math对象
内置的Math对象可以用来处理各种数学运算
可以直接调用的方法:Math.数学函数(参数)
求随机数方法:Math.random(),产生 [0,1) 范围一个任意数
Date对象
获取当前时间的一系列详细方法
var date = new Date();console.log( date.getTime() ); //当前时间的毫秒数
基本包装类型:Boolean、String、Number
Function类型、RegExp类型
简单单体和闭包单体
单体(singleton)模式是js中最基本但又最有用的模式之一,它可能比其他任何模式都常用。
这种模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一的变量进行访问。通过确保单体对象只存在一份实例,就可以确信自己的所有代码使用的都是同样的全局资源。
简单单体
// 简单单体模式 (只能创建一个实例)//无法通过new 关键字来实例化.var Singleton = { //当成模板类 attr1: true, attr2: 10, method1: function () { console.log( this.attr1 ); }}Singleton.method1();//划分命名空间(区分代码)
闭包单体
// 利用闭包来创建单体 , 闭包主要的目的 , 保护数据var alogy = {};alogy.singleton = (function () { //添加私有成员 var a = 100; var fn1 = function () { console.log( a ); } // 块级作用域里的执行结果赋值 单体对象 return { attr1: 10, attr2: 20, method: function () { console.log( this.attr1 ); }, fn1: fn1 }})();alogy.singleton.method();alogy.singleton.fn1();
惰性单体
//惰性单体 (和闭包单体类似)
//通过 一个私有变量来控制是否 实例化对象, 初始化一个 init。var Ext = {};Ext.Base = (function () {//私有变量 控制返回的单体对象var uniqInstance; //需要一个构造器 init 初始化单体对象的方法function Init () { //私有成员 var a1 = 10; var a2 = true; var fun1 = function () { console.log( a1 ); } return { attr1: a1, attr2: a2, fun1: fun1 }}return { getInstance: function () { if ( !uniqInstance ) { //不存在 ,创建单体实例 uniqInstance = new Init(); } return uniqInstance; }}})()var init = Ext.Base.getInstance();init.fun1(); //10
分支单体
//分支单体 (判断程序的分支 - 浏览器差异的检测)//简单判断var Ext = {};var def = true; Ext.More = (function () { var ff = { attr1: 'ff' }; var ie = { attr1: 'ie' } return def ? ff : ie;})()console.log( Ext.More.attr1 ); //ff
简单链式编程实现
简单链式调用。 return this;
//简单函数链式调用 function Dog () { this.run = function () { console.log( 'dog is run...' ); return this; } this.eat = function () { console.log( 'dog is eat...' ); return this; } this.slepp = function () { console.log('dog is sleep'); return this; }}var d1 = new Dog();d1.run().eat().slepp();
模拟jquery底层代码
//模拟jquery底层链式编程// 函数自执行 特点:// 1: 程序启动时候 里面代码自动执行// 2: 内部的成员变量 外部无法访问 (除了不加var修饰的变量)//块级 作用域 (function ( window,undefined ) { //$ 最常用的对象 返回给外界 //大型程序开发 一般使用 '_'作为私有的对象 function _$ ( args ) { // 匹配id 选择器 var idSelect = /^\# [\w+]?/; this.dom; // 接收所得到的元素 if ( idSelect.test(args) ) { //匹配成功接收元素 // # div this.dom = document.getElementById(arguments[0].substr(1)); } else { throw new Error('选择器不正确!'); } } //在Function类上 扩展 一个可以实现 链式编程的方法 Function.prototype.method = function ( methodName,fn ) { //实现链式编程, 方法的名字 和 进行调用的函数是什么 this.prototype[methodName] = fn; return this; //链式编程 } // 在 _$ 原型对象上 加一些公共的方法 _$.prototype = { constructor: _$, addEvent: function ( type,cb ) { //ff chrome if ( window.addEventListener ) { this.dom.addEventListener(type,cb,false); //ie } else if ( window.attachEvent ) { this.dom.attachEvent('on'+type,cb); } return this; }, setStyle: function ( key,val ) { this.dom.style[key] = val; return this; } } //window上注册 一个 全局变量 window.$ = _$; //准备方法 _$.onReady = function ( cb ) { //1,实例化 _$ 对象 ,注册到 window上 window.$ = function ( args ) { return new _$(args); } //2: 执行传入的代码 cb.call(window); //3: 实现链式编程 _$.method('addEvent',function () {}).method('setStyle',function () {}); }})( window ) //程序的入口 window传入作用域中 $.onReady(function () { $('# div') .addEvent('click',function () { console.log('点击了'); }) .setStyle('background','pink')});
关键字:JavaScript
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!