JavaScript source notes (sixth day) - front-end training institutions
A, JS objects in
JS three objects: built-in objects, host objects, custom objects
JS, in addition to undefined, everything can be seen as an object
Today introduces three built object in js in the three built-in objects have already decided their properties and methods for developers to use.
String String objects, Array array object, RegExp regular expression object
Second, the array Array object
An array is a series of data of various data types package enclosed within brackets, such as: [10, "Hello", 10,25, true, function () {}]
Recall that the variable can be seen as a container for storing data, it is a data storage; so arrays, may also be seen as a container for storing data, but a plurality of data are stored; can be seen as a large array box, which installed a lot of small boxes
Way to create arrays 2.1 Array object
² literal way
var arr = [10,”Hello”,10,25,true,function(){}];
² using the new keyword
var arr = new Array(10);
|
// literal manner and stored in a variety of different data types
var ARR = [10, "the Hello", to true , function () {}, null , undefined , Infinity, NaN3, new new a Date (), {name: "zhangsan", Age: 23 is}];
the console.log ( "ARR:", ARR);
// Create an empty array literal
var arr2 is = [];
the console.log ( "arr2 is:", arr2 is);
// using the new keyword
// Create an empty array of length 10
var array = new the array (10);
the console.log ( "array:", array);
// create an array with two elements
var array2 = new Array (10, 20);
console.log ( "array2:", array2);
// Create an array to store a data string
var at array3 = new new Array ( "the Hello");
console.log ( "array3:", array3);
// create an array to store a Boolean data
var array4 = new new Array ( to true );
console.log ( "array4:", array4);
1 |
operation result:
| 1 arr: (10) [10, "Hello", true, ƒ, null, undefined, Infinity, NaN, Thu Jul 11 2019 09:48:04 GMT + 0800 (China Standard Time), {...}] 2 arr2: [] 3 array: (10) [empty × 10] 4 array2: (2) [10, 20] 5 26 array3: ["Hello"] 6 30 array4: [true] |
Get in touch with the assignment of elements in the array 2.2
Array with the index, starting from 0, in ascending order; the corresponding element in the array can be acquired by the index brackets indexed manner.
For example: var arr = [10,20,30,40]
Want to get the first element 10, using arr [0]
40 want to obtain the last element, using arr [arr.length-1] i.e. 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 |