JavaScript源码笔记（第六天）—前端培训机构
一、 JS中的对象
JS对象有三种：内置对象、宿主对象、自定义对象
JS中，除了undefined之外，所有的东西都可以看做是对象
今天主要介绍三种内置对象，在js中这三个内置对象都已经内定了自己的属性和方法供开发者使用。
String字符串对象、Array数组对象、RegExp正则 表达式对象
二、 数组Array对象
数组是由中括号包裹的各种数据类型的一系列数据，如：[10,”Hello”,10,25,true,function(){}]
前面讲过，变量可以看做是存储数据的容器，存储的是一条数据；那么数组，也可以看做是存储数据的容器，只不过存储的是多条数据；可以把数组看做是一个大盒子，里面装了很多小盒子
2.1 数组Array对象的创建方式
² 字面量的方式
var arr = [10,”Hello”,10,25,true,function(){}];
² 使用new关键字
var arr = new Array(10);
|
//字面量的方式并存入各种不同数据类型的数据
var arr = [10,"Hello",true,function () { },null,undefined,Infinity,NaN,new Date(),{name:"zhangsan",age:23}];
console.log("arr:",arr);
//字面量创建一个空数组
var arr2 = [];
console.log("arr2:",arr2);
//使用new关键字
//创建一个长度为10的空数组
var array = new Array(10);
console.log("array:",array);
//创建一个带有两个元素的数组
var array2 = new Array(10,20);
console.log("array2:",array2);
//创建一个数组存储一个字符串数据
var array3 = new Array("Hello");
console.log("array3:",array3);
//创建一个数组存储一个布尔数据
var array4 = new Array(true);
console.log("array4:",array4);
1 |
运行结果：
| 1 arr: (10) [10, "Hello", true, ƒ, null, undefined, Infinity, NaN, Thu Jul 11 2019 09:48:04 GMT+0800 (中国标准时间), {…}] 2 arr2: [] 3 array: (10) [empty × 10] 4 array2: (2) [10, 20] 5 26 array3: ["Hello"] 6 30 array4: [true] |
2.2 数组中元素的获取与赋值
数组具有索引，索引从0开始，依次递增；可以通过中括号加索引的方式获取数组中对应索引的元素。
比方：var arr = [10,20,30,40]
想要获取第一个元素10，使用 arr[0]
想要获取最后一个元素40，使用 arr[arr.length-1] 即arr[3]
| //声明一个空数组
var arr = [];
console.log("arr添加元素前：",arr);
//向数组中添加元素
arr[0] = 10;
arr[1] = 10.24;
arr[2] = "Hello";
arr[10] = true;
//打印添加元素后的数组
console.log("arr添加元素后：",arr);
//验证数据类型
console.log("检测数据类型：",typeof arr);
//获取数组中的元素
console.log("数组中的第一个元素：",arr[0]);
console.log("数组中的第五个元素：",arr[4]);
console.log("数组中的最后一个元素：",arr[arr.length-1]); 1 |
执行结果：
| 1 arr添加元素前： [] 2 arr添加元素后： (11) [10, 10.24, "Hello", empty × 7, true] 3 检测数据类型： object 4 数组中的第一个元素： 10 5 数组中的第五个元素： undefined 6 数组中的最后一个元素： true |
2.3 数组对象的属性
constructor 返回对象的构造函数
length 返回数组中元素的个数
prototype 可以用自定义属性和方法供数组对象使用
| var arr = [10,20,30,40,50,60];
//length:获取数组中元素的个数
var eleCounts = arr.length;
console.log("数组中元素的个数",eleCounts,"数据类型：",typeof eleCounts);//数组中元素的个数 6 数据类型： number
//constructor:返回数组对象的构造函数
console.log("数组对象的构造函数为：",arr.constructor);//数组对象的构造函数为： ƒ Array() { [native code] }
// var arr = new Array();
//prototype 可以用自定义属性和方法供数组对象使用
Array.prototype.print = "数组";
console.log("数组对象调用自定义属性print结果：",arr.print);//数组对象调用自定义属性print结果： 数组 1 |
2.4 数组对象的方法
concat(items) 拼接一个或多个数组
参数列表items：可以是一个或多个数组，也可以是任何类型的元素
返回值：返回一个新的数组
不会改变原数组
toString() 数组转换成字符串，数组元素之间默认使用逗号分隔
返回值：字符串
join(seperator) 通过制定分隔符将数组转换成字符串，默认分隔符为逗号
参数separator: 字符串类型的分隔符
返回值：字符串
| var arr = ["猕猴头","榴莲"];
var conArr1 = ["樱桃","蓝莓"];
var conArr2 = ["杨桃","桑葚"];
console.log("拼接前原字符串长度：",arr.length);//拼接前原字符串长度： 2
//数组拼接方法 concat()
var newArr = arr.concat(conArr1,conArr2,"西瓜","葡萄");
console.log("拼接后原字符串长度：",arr.length);//拼接后原字符串长度： 2
console.log("newArr:",newArr);//newArr: (8) ["猕猴头", "榴莲", "樱桃", "蓝莓", "杨桃", "桑葚", "西瓜", "葡萄"]
//数组转字符串方法一 toString()
var str = arr.toString();
console.log("str",str,"数据类型：",typeof str);//str 猕猴头,榴莲 数据类型： string
//数组转字符串方法二 join()
var str2 = newArr.join();
console.log("str2:",str2,"数据类型：",typeof str2);//str2: 猕猴头,榴莲,樱桃,蓝莓,杨桃,桑葚,西瓜,葡萄 数据类型： string
var str3 = newArr.join(" ");
console.log("str3:",str3,"数据类型：",typeof str3);//str3: 猕猴头 榴莲 樱桃 蓝莓 杨桃 桑葚 西瓜 葡萄 数据类型： string
var str4 = newArr.join("\t");
console.log("str4:",str4,"数据类型：",typeof str4);//str4: 猕猴头 榴莲 樱桃 蓝莓 杨桃 桑葚 西瓜 葡萄 数据类型： string
var str5 = newArr.join("&");
console.log("str5:",str5,"数据类型：",typeof str5);//str5: 猕猴头&榴莲&樱桃&蓝莓&杨桃&桑葚&西瓜&葡萄 数据类型： string 1 |
slice(startIndex,endIndex) 截取制定索引之间的元素，左闭右开
参数：startIndex 必须，起始索引
endIndex 可选，结束索引；如果不加这个参数，默认从起始索引截取到最后
返回值：返回一个新的数组
indexOf(searchElement,startIndex) 从指定索引开始查找某个元素
lastIndexOf(searchElement,startIndex) 从指定索引开始反向查找某个元素
参数：searchElement 必须，要从数组中查找的元素
startIndex 可选，指定从某个索引处开始正向或反向查找元素
返回值：查找的元素在数组中对应的索引，如果找不到这个元素，返回 -1
| var arr = ["猕猴头", "榴莲", "樱桃", "蓝莓", "杨桃", "桑葚", "西瓜", "葡萄"];
console.log("截取前原数组arr:",arr);//截取前原数组arr: (8) ["猕猴头", "榴莲", "樱桃", "蓝莓", "杨桃", "桑葚", "西瓜", "葡萄"]
//slice()截取数组中部分元素 左闭右开
var newArr = arr.slice(2,4);
console.log("newArr:",newArr,"数据类型：",typeof newArr);//newArr: (2) ["樱桃", "蓝莓"]0: "樱桃"1: "蓝莓"length: 2__proto__: Array(0) 数据类型： object
console.log("截取后原数组arr:",arr);//截取后原数组arr: (8) ["猕猴头", "榴莲", "樱桃", "蓝莓", "杨桃", "桑葚", "西瓜", "葡萄"]
var newArr2 = arr.slice(5);
console.log("newArr2:",newArr2);//newArr2: (3) ["桑葚", "西瓜", "葡萄"]
//索引相关的方法indexOf() lastIndexOf()
var index = arr.indexOf("桑葚");
console.log("index:",index,"数据类型：",typeof index);//index: 5 数据类型： number
var index2 = arr.indexOf("桑葚",6);
console.log("index2:",index2,"数据类型：",typeof index2);//index2: -1 数据类型： number
//注：返回-1代表没有找到这个元素
var lastIndex = arr.lastIndexOf("桑葚");
console.log("lastIndex:",lastIndex,"数据类型：",typeof lastIndex);//lastIndex: 5 数据类型： number
var lastIndex2 = arr.lastIndexOf("桑葚",4);
console.log("lastIndex2:",lastIndex2,"数据类型：",typeof lastIndex2);//lastIndex2: -1 数据类型： number |
