javascript学习笔记——引用类型（1）

1.Object类型

①创建实例的方式：

a.使用new操作符

var person =new Object();
person.name="amy";
person.age=20;

b.对象字面量表示法：

var person={
name:"amy",
age:29     //属性名也可以使用字符串
};

②Object类型是所有对象的基础，所有对象都拥有该类型基本的属性和方法

③属性和方法

2.Array类型

数组的每一项可以保存任何类型的数组，大小可以动态调整

①创建数组的方式：

var colors=new Array();  //new操作符也可以省略
var colors=new Array(20);
var colors=new Array("red","green","blue");

var colors=[];  //创建空数组
var colors=["red","green","blue"];   //使用数组字面量表示法

②length属性

var colors=["red","green","blue"];
alert(colors.length);  //访问数组长度
colors.length=2;    //移除数组最后一项
colors[colors.length]="black";  //在数组末尾增加一项

③转换方法

var colors=["red","green","blue"];
alert(colors.toString());//返回以逗号连接的字符串
alert(colors.valueof()); //返回数组，数组的每一项都调用toString(),最后变成字符串
alert(colors.join("||"));//如果join没有参数或者是undefined,则返回结果用逗号分隔

④栈方法(先进后出)

var colors=new Array();
colors.push("red");   //push()可以在数组末尾添加任意数量的数值
colors.push("blue","green");
var item=colors.pop();   //在数组末尾移除最后一项
alert(item);   //green

⑤队列方法（先进先出）

var colors=new Array();
colors.push("red");   //push()可以在数组末尾添加任意数量的数值
colors.push("blue","green");
var item =colors.shift();  //删除数组的第一项
alert(item);   //red

var count=colors.unshift("red","orange"); //在数组开头添加任意项，并返回数值长度
alert(count);  //4

⑥重排序方法

var values=[2,3,6,1,7,0,4];
values.sort();  //0,1,2,3,4,6,7   对数组进行排序

values.reverse();  //7,6,4,3,2,1,0    反转数组

⑦操作方法

a.concat()基于当前所有项创建一个新数组，该方法的对于数组的操作都作用于新数组，对原数组没有影响

var colors=["red","green","blue"];
var s=["a","b","c"];
var c1=colors.concat();  //复制colors数组内容到新数组c1中
var c2=colors.concat(s);  //先把colors数组内容复制到新数组中，将s中的每一项都添加都新数组末尾
var c3=colors.concat("grey");  //直接将值加入新数组c3末尾

b.slice()方法基于当前数组的一项或多项创建一个新数组，对原数组没有影响

var colors=["red","green","blue","black"];

//只有一个参数时，返回新数组的项包括角标1到末尾的所有项
var s=colors.slice(1); //  green,blue,black
//两个参数时，返回1到2的所有项的新数组，不包括结束位置
var s=colors.slice(1,3);  //  green,blue

c.splice()

1）删除：删除任意数量的项

splice(位置，删除数量)

var colors=["red","green","grey"];
var re=colors.splice(0,2);  //删除数组的前两项，返回删除的项  red,green

2）插入：可以在指定位置插入任意数量的项

splice(位置，要删除的项数量，要插入的项)

var colors=["red","green","grey"];
var re=colors.splice(1,0，"pink","black"); //从当前数组的位置1开始插入“pink”和“black”

3）替换：可以在指定位置插入任意项，但同时删除任意数量的项

var colors=["red","green","grey"];
var re=colors.splice(1,1，"pink","black"); //在1位置删除一项，插入两项  red,pink,black,grey

⑧位置方法

var s=[1,2,3,4];
alert(s.indexOf(2));  //1  从头开始查找，返回脚标，找不到返回-1
alert(s.lastIndexOf(3));  //2  从数组最后开始往回查找，返回脚标，找不到返回-1

⑨归并方法

var s=[1,2,3,4];
var sum=s.reduce(function(pre,cur,index,array){  //返回数组项的和 正向相加
   return pre+cur;
});
alert(sum);  //10

var s=[1,2,3,4];
var sum=s.reduceRight(function(pre,cur,index,array){ // 返回数组项的和 反向相加
   return pre+cur;
});
alert(sum);  //10

⑩迭代方法

ES5为数组定义了五个迭代方法：every,some,forEach,map,filter；这五个方法都接收两个参数——要在每一项运行的函数和运行该函数的作用域的对象；在这五个方法中对数组的每一项运行给定的函数，各自返回不同的结果；

第一个参数：函数会接收三个参数分别为：数组项的值，该项在数组中的位置，数组对象的本身；即function(item,index,array)

a. every()，数组每一项都返回true时返回true

var number=[1,2,3,4,5,4,3,2,1];
var everyResult=number.every(function(item,index,array){
   return (item>2);     //返回false  
});

b. some() 数组中的任一项返回true,则返回true;

var number=[1,2,3,4,5,4,3,2,1];
var someResult=number.some(function(item,index,array){
   return (item>2);     //返回true  
});

c. filter() 返回该该函数会返回true的项组成的数组

var number=[1,2,3,4,5,4,3,2,1];
var filterResult=number.filter(function(item,index,array){
   return (item>2);     //返回[3,4,5,4,3] 
});

d. map() 返回每次函数调用的结果组成的数组

var number=[1,2,3,4,5,4,3,2,1];
var mapResult=number.map(function(item,index,array){
   return item*2;     //返回[1,4,6,8,10,8,6,4,1]  
});

e. forEach() 没有返回值

var number=[1,2,3,4,5,4,3,2,1];
number.forEach(function(item,index,array){
     //执行操作  
});

 ES6新增的数组有关方法：

a. Array.from()方法用于将类似数组的对象和可遍历的对象转为真正的数组（返回的是一个新的数组实例）。

     类似数组的对象指的是：任何具有length属性的对象；

     可遍历的对象指的是部署了遍历器接口（Symbol.iterator）的对象，比如Set和Map数据结构对象

// 字符串转数组
var str ='1234556'
console.log("str",Array.from(str));

// set结构转数组
var set=new Set([1,2,3,2,2,4,5]);
console.log("set",Array.from(set));

//map结构转数组
var map=new Map([[1,2],["name",'张三'],['age','10']]);
console.log("map",Array.from(map));

//类似数组的对象，想要完整的转化成数组，除了要具有length属性，
//键值要数值型的，如果为字符串则生成的是空数组，length的值为多少生成的新数组就多长；
//键值要小于等于数组的长度，才能生成对应的数组项，否则为undefined
var price ={
  '1':'$1.99',
  '4':'$0.45',
  '5':'$0.88',
  length:6
}

console.log("000",Array.from(price));

var price ={
  '1':'$1.99',
  '2':'$0.45',
  '3':'$0.88'
}

console.log("111",Array.from(price));

var price ={
  '0':'$1.99',
  '1':'$0.45',
  '2':'$0.88',
  length:3
}

console.log("2222",Array.from(price));

运行结果：

 

注意：

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

// set结构转数组
var set=new Set([1,2,3,2,2,4,5]);
console.log("99999",Array.from(set,x=>x*2)); // [2, 4, 6, 8, 10]

b.Array.of方法用于将一组值转换为数组。

总是返回参数值组成的数组，如果没有参数，就返回一个空数组。

console.log(Array.of());  //[]
console.log(Array.of(1));   //[1]
console.log(Array.of(undefined));  //[undefined]
console.log(Array.of(1,3,"9"));    //[1,3,"9"]

c. find()  用于找出第一个符合条件的数组成员，入参为一个回调函数，所有的数组成员一次执行该回调函数，直到找到第一个返回值为true的成员，如果找不到则返回undefined

[2,1,3,24,3].find(n=>n>10)    //24

d.findIndex()  用于返回第一个符合条件的数组的成员的角标，不符合条件则返回-1 

[2,1,3,2,4,3].findIndex(n=>n<2)   //1

 d. fill()  使用给定值填充一个数组。（用于空数组的初始化比较方便）

传入第二第三个参数可以用于指定填充的起始位置和结束位置。(左闭右开)

[1,2,3,4].fill(6);    //[6,6,6,6]
[1,2,3,4].fill(6,1,2);   //[1,6,3,4]

 e.数组实例的entries()、keys()、values()

entries()、keys()、values()都用于键值的遍历，可用for..of遍历，唯一区别在于keys()遍历的是键名，values()遍历的是键值，

entries()是对键值对的遍历

for(let index of ['a','b'].keys()){
  console.log("key",index);
}
for(let index of ['a','b'].values()){
  console.log("values",index);
}
for(let index of ['a','b'].entries()){
  console.log("entries",index);
}

 

f.数组实例的includes()

includes()方法返回一个布尔值，表示某个数值是否包含给定的值。

[1,2,3].includes(2)    //true

 该方法的第二个参数表示搜索的起始位置，默认为0。如果为负数，表示倒数的位置。大于数组的长度，则重置为0开始

[1,2,3].includes(3,4)  //false
[1,2,3].includes(3,-1)  //true

3.Date类型

①创建日期对象的方式

a.新对象自动获得当前的日期和时间

var now=new Date();

b.根据特定的日期和时间创建日期对象

  Date.parse(日期字符串)  返回相应日期的毫秒数

  Date.UTC(年份，月份，天，小时，分，秒，毫秒)  返回相应日期的毫秒数，其中参数月份（0-11）、小时（0-23）是从0开始，年和月     是必须

var someDate=new Date(Date.parse("May 25,2011"));

var someDate=new Date("May 25,2011");

var someDate=new Date(Date.UTC(2011，4，25，17，55，12));
//本地时间2011年5月25号17点55分12秒
var someDate=new Date(2011，4，25，17，55，12);

②Date.now() 返回调用这个方法的时间和日期的毫秒数

var start=Date.now();

③比较日期值

var date1=new Date(2011,0,1);
var date2=new Date(2011,1,1);

alert(date1<date2);  //true
alert(date1>date2);   //false

④将日期转化为特定格式“yyyy-MM-dd hh:mm:ss”或“yyyy-MM-dd”

为Date原型添加如下方法：（转：https://www.cnblogs.com/tugenhua0707/p/3776808.html）

Date.prototype.format = function(fmt) { 
     var o = { 
        "M+" : this.getMonth()+1,                 //月份 
        "d+" : this.getDate(),                    //日 
        "h+" : this.getHours(),                   //小时 
        "m+" : this.getMinutes(),                 //分 
        "s+" : this.getSeconds(),                 //秒 
        "q+" : Math.floor((this.getMonth()+3)/3), //季度 
        "S"  : this.getMilliseconds()             //毫秒 
    }; 
    if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    }
     for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
         }
     }
    return fmt; 
} 



//调用
var time1=new Date().format("yyyy-MM-dd hh:mm:ss");  //2018-07-25 20:34:24
var time2=new Date().format("yyyy-MM-dd");  //2018-07-25

⑤日期转化为字符串

toDateString()  显示星期几、月、日和年

toTimeString() 显示时、分、秒和时区

4.Function类型

①函数的定义：

function sum(num1,num2){
   return num1+num2;
}

//函数表达式，调用函数要放在函数表达式后面，避免报错
var sum=function(num1,num2){
   return num1+num2;
};

//使用Function构造函数
var sum=new Function("num1","num2","return num1+num2");   //不推荐，因为代码要解析两次，影响性能

② apply()和call()

作用：参数传递、扩充函数赖以运行的作用域

区别：接收参数的方式不同，call()传递给函数的参数必须逐个列举

a.参数传递

function sum(num1,num2){
   return num1+num2;
}

function callSum(num1,num2){
   return sum.apply(this,arguments);   //传入arguments对象
}

function callSum2(num1,num2){
   return sum.apply(this,[num1,num2]);   //传入数组
}

function callSum3(num1,num2){
   return sum.apply(this,num1,num2);   //call()方法传递参数
}
callSum()在执行sum()方法时传入了this（因为callSum在全局中调用，即传入了window对象）
alert(callSum(10,10));  //20
alert(callSum2(10,10));  //20
alert(callSum3(10,10));  //20

b.扩充函数的作用域

window.color="red";
var o={color:blue};

function sayColor(){

  alert(this.color);
}

sayColor();  //red

sayColor.call(this);  //red
sayColor.call(window);  //red
sayColor.call(o);  //blue

//bind函数
var objsayColor=sayColor.bind(o);
objsayColor();   //blue

5.RegExp类型

1）以字面量形式定义正则表达式

var expression=/pattern/flags;

pattern：表示任何简单或复杂的正则表达式；

flags：标志，每个正则表达式都有一个或多个标志，用以标明正则表达式的行为；

正则表达式的匹配模式支持下列3个标志：

① g：表示全局模式，即模式将被应用于所有字符串；

②  i：表示不区分大小写模式，即在确定匹配项时忽略模式与字符串的大小写；

③ m：表示多行模式；

//匹配字符串中所有"at"的实例
var pattern1=/at/g;
//匹配第一个“bat”或“cat”，不区分大小写
var pattern2=/[bc]at/i;
//匹配所有以“at”结尾的3个字符的组合，不区分大小写
var pattern3=/.at/gi;
//匹配第一个“[bc]at”，不区分大小写
var pattern4=/\[bc\]at/i;
//匹配所有".at"，不区分大小写
var pattern5=/\.at/gi;

 2）使用RegExp构造函数创建正则表达式；

var pattern2=/[bc]at/i;
var pattern3=new RegExp("[bc]at","i");

传递给RegExp构造函数的两个参数都是字符串（不能把正则表达式字面量传递给构造函数）

 3）exec()方法

接收一个参数，即要应用模式的字符串；

返回包含第一个匹配信息的数组，没有匹配项的情况下返回null；

返回的数组实例，还包含两个额外的属性：

index：表示匹配项在字符串中的位置；

input：表示应用正则表达式的字符串；

        exec（字符串）即使在模式中设置全局标志（g）,每次也只会返回一个匹配项，在下一次调用中继续查找新匹配项；

在不设置全局标志的情况下，在同一个字符串上多次调用exec()将始终返回第一个匹配项的信息。

var text="cat, bat, sat, fat";
var pattern=/.at/g;
var matches=pattern.exec(text);
alert(matches.index);     //0
alert(matches[0]);      //cat
alert(pattern.lastIndex);   //3
matches=pattern.exec(text);
alert(matches.index);     //5
alert(matches[0]);      //bat
alert(pattern.lastIndex);   //8

 

 4）test()方法

接收一个字符串参数；

在模式与该参数匹配的情况下返回true；否则返回false；

只想知道目标字符串与某个模式是否匹配，但不需要知道其文本内容的情况下，使用这个方法非常方便；

var text="000-00-0000";
var pattren=/\d[3]-\d[2]-\d[4]/;
if(pattern.test(text)){
   alert("the pattern was matched");
}