5.引用类型

前面讲过,根据内存不同。变量分为:基本数据类型和引用类型
对象是某个特定引用的实例。新对象是使用new操作符,紧跟一个构造函数。

1.Object数据类型。

1.创建Object实例方法。

//第一种:构造函数创建
var obj = new Object();
obj.age = 12;
//第二种:字面量创建,不会调用Object构造函数
var person = {
  age:12
}
var person1= {};
person.age = 12;

注意:字面量创建,索引会自动转换为字符串。
2.属性访问
1.一般来讲,我们都是采用.属性进行访问属性值的。
2.但是,我们也可以采用[属性]进行属性值访问。
使用方法区别:
一般我们使用.属性。但是有些属性里面包含了空格或者采用变量的方法进行访问的时候,我们就使用[属性]进行访问。

2.Array类型

数组的每一项都可以保存不同的类型的值
1.创建数组的方法

//第一种方法:
var color = new Array();
//如果事先知道数组的大小,还可以传入数组的大小,或者值
var color1 = new Array(20);//每一个值都是undefined
var color2 = new Array("red", "blue", "green");

//第二种方法
var color3 = ["yellow", "white", "pink"];
//注意不要这样
var color3 = ["yellow", "white", ];//很容易报错

2.length属性
数组的length属性,可以返回数组的长度。但是这个属性并不是只读的,是可以设置的。

var color = ["yellow", "white", "pink"];
color[2]//pink
color.length = 2;
color[2]//undefined

如果length大于数组的值,后面会添加empty值(undefined),如果小于,那样就会移除数组的值。数组是有一定长度的,超出了会影响性能并且发生异常。
3.检测数组
1.value instanceof Array
之前讲过instanceof的原理:左边的原型链上能否找到右面的prototype相对应的值。但是它有局限性。不同的全局环境,构造函数的prototype是不相同的。
2.Array.isArray(value)
4.转换方法
1.所有对象都有toLocalString(),toString(),valueOf()方法。注意null和undefined没有这些方法

[1, 2].toString(); //"1,2"
toLocalString(); //会调用数组每一项的toLocalString
toString();//会调用数组每一项的toString
alert是调用的toString

2.join方法
在数组的每一个项之间,添加join方法传入的参数。

var color = ["yellow", "white", "pink",,,,,];
color.join('||')//"yellow||white||pink||||||||"

3.栈方法,会返回数组长度
1.push方法,在栈的顶部插入

var color = ["yellow", "white", "pink"];
color.push('blue');
color;  //["yellow", "white", "pink", "blue"]

2.pop方法
pop不接受传值,在栈的顶部弹出

var color = ["yellow", "white", "pink"];
color.pop();
color;//["yellow", "white"];

4.队列方法
1.shift

var color = ["yellow", "blue"];
color.shift();//"yellow"

2.unshift在我看来,和push的作用是一样的。

var color = ["yellow", "blue"];
color.unshift('green','black');
color// ["green",'black', "yellow", "blue"]

5.重排序方法
1.reverse():反转数组

var color = ["yellow", "blue"];
color.reverse()//["blue", "yellow"]

2.sort():对数组进行排序
它是根据字符串编码进行排序,因此不能直接使用这个方法。但是它提供了传入一个函数作为参数,便于我们判断。这个函数需要传入两个参数,如果需要反转则返回一个正数,否则返回一个负数。

var a = [2,6,4,7,3]; 
undefined
a.sort(function(a,b){
    if(a>b){
        return 1
    }else{
        return -1
    }
})
a;// [2, 3, 4, 6, 7]

//但是我们往往采用减的方法
a.sort(function(a,b){
    return a-b;
})//[2, 3, 4, 6, 7]

6.操作方法
1.concat方法。基于当前数组,创建一个新数组。
在没有传参的情况下,只是复制当前数组并返回副本。如果传入是一个或者多个数组,会把数组的每一项,添加到当前数组的副本。不是数组,会简单的添加到末尾。

var a = [2,6,4,7,3]; 
a.concat('2',[1,2,3,[4,5]],{'name':'alen'});
a;//[2, 6, 4, 7, 3, "2", 1, 2, 3, Array(2), {…}]

2.slice方法。基于当前数组创建一个或者多个数组。接收一个或者两个参数。当传入一个参数,表示返回当前位置开始到最后一个参数。传入两个参数,表示返回第一个参数到第二个参数之间的数据。

var a = [2,6,4,7,3];
a.slice(1)//[6, 4, 7, 3]
a.slice(1,4)//[6, 4, 7]

3.splite()方法。可以插入,删除,替换等操作。其中可以传入。可以传入多个参数(a,b,c,d,e)a代表开始位置,b表示删除多少项,c,d,f表示在a之后插入的参数

var a = [2,6,4,7,3]; 
a.splice(1,1)//返回删除的项 删除
a// [2, 4, 7, 3];
a.splice(1,0,10,20)//插入
a//[2, 10, 20, 4, 7, 3]
a.splice(1,1,60)//修改
a//[2, 60, 20, 4, 7, 3]

7.位置方法
1.indexOf()
2.lastIndexOf()
都可以接收两个参数,要查找的项目(必须),起始位置(可选)。使用===操作符
8.迭代方法
1.every():每一个返回true则返回true

var a = [2,6,4,7,3]; 
a.every(function(item,index,array){
    return item >= 2
})
//true

2.filter():返回为true的项,组成数组
3.forEach():运行给定函数,没有返回值。
4.map():调用结构组成数组
5.some():有一个返回true则返回true
9.归并方法
1.reduce():从第一项开始迭代
2.reduceRight():从最后一项开始迭代
这两个方法都会迭代数组的所有项,构建一个最终返回值。都接收4个参数(a,b,c,d)a表示前一个值,b表示当前值,c表示,项目索引,d表示数组对象

var num = a.reduce(function(pre,cur,index,arr){
    return pre+cur
})
num//22
3.Date类型

主要掌握获取年月日的方法。可以自行查询API

4.RegExp

1.创建方法

pattern:表示匹配的方法
flags:匹配模式包含3种模式:
g:全局匹配,并非在找到一个后就返回
i:不分大小写模式
m:多行匹配

var expression = / pattern / flags;
var expression = new RexExp(pattern, flags);//注意传递的两个参数都是字符串

//eg:匹配所有有at的实例
var pattern1 = /at/g;

使用正则表达式字面量和RegExp构造函数创建的正则表达式不一样。
在ES3中,正则表达式的字面量会共享一个RexExp实例。使用构造函数,每一次都会创建一个实例。

//eg:
var re = null;
      i;
for(i=0; i<10; i++){
  re = /cat/g;
  re.test('catastrophe');
}

for(i=0; i<10; i++){
  re = new RegExp('cat', 'g');
  re.test('catastrophe');
}

2.正则表达式的元字符

3.每个RegExp实例都有以下属性
1.global:是否设置g标值
2.ignoreCase:是否设置i标值
3.multiline:是否设置m标值
4.lastIndex:开始搜索的下一个匹配字符位置。
5.source:字符串模式
4.RegExp实例方法
1.exec():接收要匹配的字符串。返回包含第一个匹配项信息的数组,没有匹配的情况下返回null。它有额外的两个属性
index:匹配项在字符串中位置
input:应用正则表达式的字符串

//对于这个方法而言
//即使在模式中设置了g标志,他每次都只会返回一个匹配项
//不设置全局标志的情况下
//在同一个字符上多次调用该方法,都只会返回第一个匹配项
//设置了g标志
//每次调用都会在字符串中继续查找新的匹配项。
//eg:
var text = 'cat, bat, sat, fat';
var pattern1 = /.at/;

var match1 = pattern1.exec(text)
console.log(match1[0]);//cat
var match2 = pattern1.exec(text)
console.log(match2[0]);//cat

var pattern2 = /.at/g;

var match3 = pattern2.exec(text)
console.log(match3[0]);//cat
var match4 = pattern2.exec(text)
console.log(match4[0]);//bat

2.test()
接受一个字符串作为参数。有匹配的情况下,返回true,否则返回false。这里对于上面的/g就不太适用了。可能是浏览器升级的原因。理论上加上/g不能一直匹配。
还有一点。构造函数形式使用toString()会转化为字面量形式。

var pattern = new RegExp('\\[bc]\\]at','g')
pattern.toString()//"/\[bc]\]at/g"

掌握到这种程度已经够用了哈!!!

5.Function类型

1.每个函数都是Function对象的实例。
2.创建函数的方式

//不能够在声明之前使用
var add =  function (add1, add2){
   return add1+add2;
}

//可以在声明之前使用
function sum(sum1, sum2){
  return sum1+sum2;
}

var sum2 = new Function('sum1', 'sum2', 'return sum1+sum2');//建议不使用这种方法

3.函数名其实是一个指向函数对象的指针。不会与函数名绑定

function add(add1, add2){
    return add1+add2;
}
var sum = add(1,2);
console.log(sum);//3
var add2 = add;
add = null;
var sum2 = add2(3,4);
console.log(sum2);//7

4.在js中没有函数重载,可以函数重写。后面的函数会覆盖前面的函数。
5.函数可以作为参数或者作为值。因为函数名本身就是一个引用。这个就涉及到闭包。后面继续为大家讲解。
6.函数内部属性
函数里面有两个特殊对象。
1.arguments:这是一个类数组对象,保存函数传入参数。具有callee属性。指向当前的函数。

function factorial(a){
  if(a<=1){
    return 1;
  }else{
    return a*arguments.callee(a-1);
  }
}

factorial(4)//24

2.this:函数执行的环境对象。谁调用就指向的谁。其中函数caller属性保存this指向的对象。

arguments.callee.caller//函数的调用者。

但是不同的浏览器可能可能运行结果不同,容易出错。
并且严格模式下,不能为caller属性赋值。
7.函数属性和方法
1.length。表示函数希望接收的参数。
2.prototype。属性不可枚举。
3.call()//调用对象,参数1,参数2,参数3......
4.apply()//调用对象,数组参数。
5.bind()//创建一个函数实例,this会绑定到传给bind()函数的值

window.color = "red";
var o = {color : "blue"};
function sayColor(){
    alert(this.color);
}
var objSayColor = sayColor.bind(o);
objSayColor();//blue
6.基本包装类型

Boolean,String,Number
这些其实是基本数据类型,但是我们发现可以使用很多方法。作为基本数据类型是没有属性的,更不谈有什么方法。但是我们为什么能使用这些方法呢。因为它被包装了。
eg

var s1 = "some text";
s1.substring(2)//me text
//其中完成了这样的过程
//1.创建一个String类型的实例var s1 = new String("some text");
//2.在实例上调用这个方法s1.substring(2)//me text;
//3.销毁这个实例s1 = null;
//当然,第二种方法如果不销毁,会占用内存等问题
//但是第一种方法会自动销毁。所以,建议使用第一种

1.Boolean
基本包装类型,使用typeof都是object类型。
注意:我们不建议这样使用还有一个原因

var falseObj = new Boolean(false);
var result = falseObj&&true;//true;
//原因,对象只要不是null,转为bool值都是true。

2.Number
1.里面包含之前讲的一些方法。
2.还有toFixd方法
3.toExponential(n)方法n表示数字部分的位数
3.String
它包含了很多方法

var stringValue = 'hello world';
stringValue.charAt(1);//e
stringValue.charCodeAt(1);//101
stringValue[1]//e
stringValue.concat(',' , 'I love you');//hello world,I love you
stringValue.slice(1,4)//ell
stringValue.substring(1,4)//ell
stringValue.substr(0,4)//ello

stringValue.slice(1)//ello world
stringValue.substring(1)//ello world
stringValue.substr(1)//ello world
//但是对于负数的情况注意
//slice把所有负数转为正数,方法:与字符串长度相加
//substr:第一个转为正数,第二个转为0,方法:与字符串长度相加
//substring:所有负数转为0。

stringValue.indexOf('o');//4
stringValue.lastIndexOf('o');//7
stringValue.lastIndexOf('o',6);//4   表示6之后的字符串忽略
stringValue.indexOf('o',5);//7    表示从5之后开始查找

var stringValue2 = '    hello world      ';
stringValue2.trim();//hello world
stringValue2.toUpperCase()//"    HELLO WORLD      "
stringValue2.toLowerCase()//"    hello world      "

//match方法
var stringValue3 = '    hello world   ell   '
stringValue3.match(/.ell/g);//["hell", " ell"]   有index和lastIndex属性
//search方法
stringValue3.search(/.ello/g);//4始终从头开始查找
stringValue3.search(/.ello/g);//4

//replace方法
var stringValue4 = 'cat, bat, hat';
stringValue4.replace(/at/g , 'ond');//"cond, bond, hond"
stringValue4.replace(/at/ , 'ond');//"cond, bat, hat"
7.单体内置对象

1.Global对象
2.Math对象

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,046评论 0 1
  • 本章内容 使用对象 创建并操作数组 理解基本的 JavaScript 类型 使用基本类型和基本包装类型 引用类型的...
    闷油瓶小张阅读 680评论 0 0
  • 你如果有一点概率的知识,你可能会有这样的判断: 彩票不应该买,因为中奖的概率太小了!不要怕做飞机,因为出事的概率也...
    AaronWu阅读 281评论 0 0
  • 敏感肌肤就会出现红血丝的情况,也可能是皮肤角质层比较薄的原因,也会诱发红血丝,还有就是皮肤过敏等等,都会导致皮肤疾...
    卡植莲2阅读 461评论 0 0
  • 昨天上午拔完牙后,下午就接着发烧了,拔牙处又肿又疼,中午也没敢吃喝任何东西。回来后,忍痛去提了两桶水,然后就躺床上...
    goldfish2017阅读 261评论 0 0