技术文章 | Technical articles

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);

运行结果:

arr: (10) [10, "Hello", true, ƒ, null, undefined, Infinity, NaN, Thu Jul 11 2019 09:48:04 GMT+0800 (中国标准时间), {}]

arr2: []

array: (10) [empty × 10]

array2: (2) [10, 20]

26 array3: ["Hello"]

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]);

执行结果:

arr添加元素前: []

arr添加元素后: (11) [10, 10.24, "Hello", empty × 7, true]

检测数据类型: object

数组中的第一个元素: 10

数组中的第五个元素: undefined

数组中的最后一个元素: 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结果: 数组

 

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

 

 

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





关注微信公众号“icketang”,获取最新前端资讯,学习资料
  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: JavaScript(第五天)—web前端培训
下一篇文章: JavaScript源码笔记(第七天)—web前端培训

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>