Javascript_引用类型

数组

在ECMAScript中数组是非常常用的引用类型
ECMAScript所定义的数组和其他语言中的数组有着很大的区别
数组也是一种对象

创建数组

//方法一var arr = new Array();//方法二var arr1 = [];

特点

  1. 数组即一组数据的集合

  2. js数组更加类似java的map容器。长度可变,元素类型任意

  3. 数组长度随时可变!随时可以修改!(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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部