资讯专栏INFORMATION COLUMN

javaScript引用类型详解

Nekron / 799人阅读

摘要:构造函数用于创建对象的函数。例为构造函数,为新对象提供默认属性与方法。方法一可以省略方法二数组字面量与对象一样,字面量不会调用构造函数。类型基本类型引用类型建议永不要使用对象类型方法按照指定方法返回数值的字符串表示。

概念 : 引用类型是一种数据结构,用于将数据和功能组织在一起,也就是 类;
对象为特殊的引用类型实例。新对象由new后加一个构造函数创建的。
构造函数:用于创建对象的函数。
例 : var person = new Object();
object为构造函数,为新对象提供默认属性与方法。

1、object类型

//普通方法

var person = new Object();
person.name = "syr";
person.age = 22;

//对象字面量

var person = {    
    name : "syr",    
    age : 22,    
    5 : true            //5自动转为"5"
}
* 数值属性名会自动转为字符串;
* 对象字面量推荐只在属性名可读的情况下使用,也是向函数传递大量参数首选方式,必须使用命名参数,对象字面量封装多个可选参数。
* 访问对象一般用点表示法,js中也可以用方括号法,将要访问的属性以字符串的形式放进去。

例 : alert(person["name"]); // 等于 person.name

* 方括号法主要优点是可以通过变量来访问属性。
* 点表示法属性名不能包含错误的自负或者保留字和关键字,但方括号法可以。
* 通常,除非必须使用变量来访问属性,否则推荐使用点表示法。
2、Array类型:
* 数组:数据的有序列表。

es中的数组每一项都可以保存任何类型的数据,数组大小也可以动态调整。

方法一 : new可以省略;
var colors = new Array();
方法二 : 数组字面量
var colors = ["red","blue","green"];

与对象一样,字面量不会调用Array构造函数。

var colors = ["red","blue","green"];
colors[0] // 显示第一项
colors[2] = "black"; // 修改第二项
colors[3] = "brown" ; //增加第四项
colors.length = "black" ;  增加一项

length属性可返回数组的长度,可增加和移除数组的项。

* 检测数组

value instanceof Array // 判断是否为数组
Array.isArray(value) // isArray确定到底是不是数组,不管在哪个环境中创建
* 转换方法

所有对象都具有toLocalString()方法,后台调用tostring(),null和undefined返回结果以空字符串表示。

* 栈方法 : 后进先出(吃了吐)

push() : 接受任意数量参数,添加到末尾;
pop() : 移除数组末尾一项。

* 队列方法 : 先进先出(吃了拉);

shift() : 前端移除项并返回该项,长度减1;
unshift() : 前端推入一项;

* 重排序方法

reverse() : 逆序;
sort() : 顺序;
比较的是字符串,会自动转为字符串。
如 "10" 位于"5"的前面,因此应传给sort一个比较函数。

function compare(value1,value2){    
    if(value1 < value2){        
        return -1;    
    }else if(value1 > value2){        
    return 1;    
    }else{        
    return 0;    
    }
    }
value = [0,1,5,10,15];value.sort(value);  //0,1,5,10,15
* 操作方法

concat()拼接 : 先把原数组复制一个,然后把参数添加至末尾,原数组不变。slice(1,2) : 剪切:返回参数1起始位置,参数2为结束位置,包前不包后,原数组不变。solice() : 主要向数组中插入项。(数组操作最主要的方法):
-删除 : 可删除任意数量项,制定两个参数: arg1位要删除的位置,arg2为要删除的项数,例:splice(0,2) : 删除前两项;
-插入 : 三个参数。起始位置,删除项数和要插入的项,可在后面插入多个项。例 : solice(2,0,"red","green");从位置2插入"red"和"green".
-替换 : 同上,插入项不必与删除项数相等。
注意 : splice()会改变原始数组;

* 位置方法

indexof() : 从头查找
lastIndexof() : 从未查找
arg1表示要查找的项,arg2为起始位置(可选参数),没找到返回-1,比较时使用的是全等。

var number = [1,2,3,4,5,4,3,2,1];
number.indexof(4) ;  //返回5

* 迭代方法

every();
filter();
forEach();
map();

* 归并方法

reduce() : 从头
reduceRight ; 从尾
都会迭代数组所有项,构建一个最终返回项。

3、Date类型
var now = new Data();
date.parse("May 25,2004"); // 新建特定日期
* 继承: 重写了3个方法

toLocalString() : 浏览器设置日期;
toString();
valueof();

* 日期格式化方法:

-toDateString() : 特定格式显示星期、月、日、年;
-toTimeString() : 时分秒,时区;
toLocalDateString() : 按地区显示星期、月、日、年;
toLocalTimeString() : 时分秒;
toUTCString() : 特定格式显示完整UTC日期,具体显示因浏览器而异。

4、RegExp类型: 正则表达式;
var expression = /pattern/flags;
标志flags包括 :
g : 全局;
i : 不区分大小写;
m : 多行模式;
例子 : var pattern = /at/g 全局找at
var pattern = /[bc]at/i ; 匹配第一个bat或cat,不区分大小写。
无意符须转义;
* RegExp实例方法:

RegExp主要方法是
-exec():捕获组,参数为一个字符串,返回数组,无匹配返回null,返回多两个额外属性:index 和 input。
index : 位置 input:捕获的字符串
-test():匹配则返回true,常用来验证用户输入。

5、function类型
* 概念

函数实际就是对象,与其他引用类型一样,有属性和方法,函数名就是只想对象的指针。

* 没有重载

声明相同函数时,后面的会覆盖前面的函数。

* 函数声明和函数表达式
function sum(){    }    // 函数声明
var sum = function(){    }      // 函数表达式函数声明可以变量提升,任何时候任何位置都可以调用。
* 作为值的函数

把函数作为参数传给另一个函数,要访问函数而不执行函数,必须去掉函数名后面的那对圆括号
// 从一个函数返回另一个函数
// 根据某个对象数组排序
function compare(pro){

return function(obj1,obj2){        
var val1 = obj1[pro];        
var val2 = obj2[pro];        
if(val1 > val2){            
return 1;        
}else if(val1 < val2){  
          return -1;        
}else{
          return 0;        
}}}
var data = [{name:"AN:,"age":20},{name:"BN:,"age":30}]
data.sort(compare("name"));
* 函数的内部属性

内部含有两个特殊对象:this和argument
-argument:包含着传入的所有参数,内有callee属性,是一个指针,只想拥有此对象的函数。
// 递归算法算阶乘
function fac(num){

if(num <= 1){
        return 1;    
        }else{
      return num * fac(num-1);   // 等同于 return num * argument.callee(num -1);
      }}
 方法一与函数名耦合严重,且只有名称确定或不发生改变时使用。
 方法二更合适
* this : 引用的是函数执行的环境对象,函数的名称仅为包含着指针的变量而已,所以在不同的环境中执行引用的也是相同的函数。

* 函数的属性和方法(重点)

函数也是对象,因此有属性和方法;

* -属性 : length 和 prototype

-length 表示希望接收命名参数的个数。
-prototype 是保存所有势力和方法的真正所在,如里面保存着tostring(),valueOf等,也可以用来继承,极为重要。
prototype属性不可枚举,因此不能用for-in。

* -方法 : 非继承而来的方法有两个: apply() 和 call().

作用为在特定的作用域中调用函数,实际是设置函数体内this对象的值。两个方法的作用相同,区别为接收参数的方式不同。call() : 参数一一列举
apply() : 参数为一个数组两者的作用不止是传递参数,真正的作用是扩充函数的作用域。把访问不到的地方传进来。
bind():方法,创建函数实例,与this值绑定,全局作用域。

6、基本包装类型 (也是对象)

为方便操作基本类型值,提供3个特殊引用类型:Boolean,Number和String.
每读取值后台都会创建对应的基本包装类型的对象,才可以用方法操作数据。
引用类型与基本包装类型主要区别为对象生存期,用new创建引用累心实例一直保存在内存中,自动创建基本包装类型存在执行瞬间,然后立即销毁,所以不能给基本类型添加属性和方法。

* Boolean 类型

typeof 基本类型 // ‘boolean’typeof 引用类型 // "object"建议永不要使用Boolean对象

* Number 类型

toFixed()方法 : 按照指定方法返回数值的字符串表示。
var num = 10;num.tpFixed(2) // "10.00"
toExpoential() : 幂

* String 类型

属性:length : 表示含多少个字符方法:
1)字符方法:charAt()和charCodeAt():查找某个字符在字符串中的位置。 charCodeAt():查找字符编码
2)字符串操作方法:拼接用+号
-三个给予字符串创建新串:
slice():切片 // 第一个参数为起始位置,第二个参数为结束位置substr():子函数 // 第一个参数为起始位置,第二个参数为截取的个数substring():子串 // 第一个参数为起始位置,第二个参数为结束位置
以上方法都不会影响原始字符串
3)字符串位置方法:
indexof:从字符串中查找字符串,返回位置,查不到则返回-1.
indexOf:从头查找lastIndexOf:从尾查找 返回第一次出现的位置
4)trim:创建字符串副本,删除前后所有空格,原始字符串不变。
5)字符串大小写转变:
toLocalUpperCase():转大写,针对特定地区
toLocalLowerCase():转小写,针对特定地区
toUpperCase():转大写
toLowerCase():转小写
6)字符串模式匹配方法:
match():与RegExp的exec方法相同,参数为正则表达式活RegExp对象。
search():从尾开始查找,参数与match相同,找不到返回-1
replace():替换
split():切片,基于指定分隔符字符串为多个子字符串。第二个参数可选,返回几个数组。

7、单体内置对象

已自行实例化,可直接使用,Global和Math

* -Global对象,全局对象:所有全局作用域中属性和方法都是它的。

--url编码
--eval():解析字符串代码并执行

* -Math对象

--Math.ceil():向上取整。
--Math.floor():向下取整。
--Math.round():四舍五入。

* random()方法:随机数,返回0~1之间随机数。



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103090.html

相关文章

  • 详解js变量、作用域及内存

    摘要:不是引用类型,无法输出简而言之,堆内存存放引用值,栈内存存放固定类型值。变量的查询在变量的查询中,访问局部变量要比全局变量来得快,因此不需要向上搜索作用域链。 赞助我以写出更好的文章,give me a cup of coffee? 2017最新最全前端面试题 基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空...

    waltr 评论0 收藏0
  • JavaScript-简单及复杂数据类型详解

    摘要:打开首先看简单数据类型拿举个栗子看懂这一段应该不难。我们把基本数据类型中的这种操作称为拷值,方便记忆。总结简单数据类型用拷的,复杂数据类型用借的。 本篇不详细介绍每种数据类型的用途,如有需要请访问JS数据类型。 JavaScript中的数据类型 简单(基本)数据类型: Number、String、Boolean、Undefined、Null复杂(引用)数据类型: Object、Arra...

    psychola 评论0 收藏0
  • JavaScript学习总结(五)原型和原型链详解

    摘要:原型对象内部也有一个指针属性指向构造函数实例可以访问原型对象上定义的属性和方法。在创建子类型的实例时,不能向超类型的构造函数中传递参数。 赞助我以写出更好的文章,give me a cup of coffee? 2017最新最全前端面试题 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数。 function ...

    EscapedDog 评论0 收藏0
  • 【进阶1-3期】JavaScript深入之内存空间详细图解

    摘要:进阶期理解中的执行上下文和执行栈进阶期深入之执行上下文栈和变量对象但是今天补充一个知识点某些情况下,调用堆栈中函数调用的数量超出了调用堆栈的实际大小,浏览器会抛出一个错误终止运行。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周正式开始前端进阶的第一期,本周的主题是调用堆栈,今天是第3天。 本计划一共28期,每期重点攻...

    coordinate35 评论0 收藏0
  • JavaScript 继承方式详解

    摘要:原型继承与类继承类继承是在子类型构造函数的内部调用父类型的构造函数原型式继承是借助已有的对象创建新的对象,将子类的原型指向父类。 JavaScript 继承方式的概念 js 中实现继承有两种常用方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) JavaScript不是真正的面向对象的语言,想实现继承可以用JS的原型prototype机制或者call和apply方法 在面...

    YuboonaZhang 评论0 收藏0

发表评论

0条评论

Nekron

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<