数组
从数学角度出发,数组是经过编号的数据的有序集合,从这点来看它和对象很相似。而事实上JS中的数组本质上就是对象,是具有额外功能层的对象。数组是在对象的基础上加以改造,支持通过[]来读写对象中数字下标属性并拥有一个自动计算的length属性。
1)创建数组
//创建一个空数组
var arr = [ ];
//按编号添加元素
arr[0] = "a";
arr[1] = "b";
arr[2] = "c";
//或者在声明时直接初始化数组元素
var arr = ["a", "b","c"];
//在控制台可以结构化打印,便于查看数组成员
console.log(arr);
//如果要在页面输出则调用toString()方法
//数组有定制的toString,相当于如下定义
arr.toString = function () {
return this.join(",");
}
document.write(arr);
//数组的类型为object
console.log(typeof arr);
2)使用构造器
更为显示的创建一个数组(对象),需要使用数组的构造器Array(也叫构造函数)
1.1关联数组
数组除了使用数字编号外,还可以使用字符串来标记,这在一些语言中被称为“关联数组”。而js中关联数组被视作数组对象的属性而非数组元素,因此该部分成员既可以使用[ ],也可以使用属性的方式来读写;反之,对象的属性也可以使用数组的方式来读写,考虑如下两种数据模式,你会发现数组和对象完全是互通的,只是操作形式上的区别而已
所谓的关联数组指以字符串作为下标的元素
1.2数组长度
数组的length属性用来查看它的长度也就是元素的个数。只有编号的数组成员才被视作数组元素,而关联数组中的字符串命名数据则是对象的属性,不计入length值。
arr["foo"] = "foo";
arr["bar"] = "bar"; 这两个不计入数组长度的计算
1.3遍历数组
1)可以使用for循环数组的下标然后取数组元素,下标的范围是[0, arr.length - 1]。该方法只能打印出所有数字下标元素且要求数组元素是连续的,否则会产生undefined值。
var arr =["a", "b", "c"];
//跳过编号3的元素
arr[4] = "e";
//添加关联数组成员
arr["foo"] = "hello";
arr["bar"] = "world";
//循环从0到arr.length - 1之间的所有元素
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
1.4 for...in 语句 for...in用来查看对象或者数组的内容,它能遍历对象自身拥有的所有内容,但是对于多数继承的属性和全部的内容都无法遍历;无论如何,使用for...in都是我们调试对象和数组的一个很好的工具。使用for...in遍历对象属性,它也有2个限制
1、遍历出来的属性的顺序 不可控
2、不能遍历继承的属性
for (var p in o) {
console.log(p, o[p] );
}
定义一个变量p或者表达式接收每次从对象o中循环出来的成员,接下来通过p检索属性,属性值则可以通过o[p],而不是o.p来获取,因为在“.”运算中不能解析变量,属性只能是硬编码的字符串;
var o = {
name: "张三",
age: 23,
sing () { }
};
for (var p in o) {
//在[ ]运算中能够解析变量p为一个值
console.log(p, o [p]);
}
// 定义变量p 用来接收person中的属性
// p始终代表在person对象里面的某个属性
// for的过程 会自动循环 p值一直在更新
3)数组方法
学习内置函数方法的几个关键点:
1、记住函数名/单词
2、函数参数,有几个参数,分别代表什么含义
3、函数的最后的返回值是什么
var arr = [ 'a', 'b', 'c', 'b' ];
查询索引的方法
01、indexOf ('b')检测元素在数组的位置
console.log ( arr.indexOf ('b') ) // 数组位置的编号:输出结果为1
02、lastIndexOf ('b')元素在数组中最后出现的位置
console.log ( arr.lastIndexOf ('b') ) // 数组位置的编号:输出结果为3
检测元素
03、includes ('e')判断数组中是否存在某个元素
console.log(arr.includes ('e') ); // false
console.log(arr.includes ('c') ); // true
04、slice (1,3)截取数组
截取数组的一部分,它有2个参数,分别是截取起始位置和结束位置(不包含自己,需要多截取一位)它返回的是截取出来的新数组,原数组不变,其实slice就是在复制再输出出来
console.log(arr.slice (1,3) ); // ['b' , 'c']
console.log(arr); // ['a','b','c','b']
05、splice (1,2)删除数组元素,它返回的是删除的元素,但是元素组本身已经发生改变,因为已经删除
console.log(arr.splice (1,2) ); // ["b", "c"]
console.log(arr); // ['a', 'b']
队列方法
var arr = ['a', 'b', 'c', 'd']
06、unshift (0)在数组头部添加元素,返回操作之后的数组长度
console.log(arr.unshift (0) ); // 返回长度为5
原数组已经发生改变:console.log(arr); // [0, 'a', 'b', 'c', 'd'];
07、shift()在头部删除元素,返回被删除的元素
console.log(arr.shift() ); 0
在头部删除后,数组已经发生改变:console.log(arr) // ['a', 'b', 'c', 'd'];
08、push('e')尾部添加一个元素 返回操作之后的数组长度
console.log(arr.push('e') ); // 5
操作后的数组:console.log(arr); ['a', 'b', 'c', 'd', 'e'];
09、pop()尾部删除一个元素 返回被删除的元素
console.los(arr.pop() ); // e
操作之后的数组:console.log(arr); // ['a', 'b', 'c', 'd']
其他常用的方法
var arr = [1,2,3,4,5];
10、join('<')将数组元素拼接成字符串
console.log(arr.join('<') ); // 1<2<3<4<5
11、concat(arr2)合并数组
var arr2 = [6,7,8,9,10];
console.log(arr.concat(arr2) ); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
4)字符串方法
创建字符串-数组类型
var str = "hello world"; // 字面量
创建字符串-对象类型
var str = new string ("hello world"); // 构造器
打印输出是一个对象类型:console.dir(str);
1、length查看字符串长度
console.log(str.length); // 输出长度为11
2、str[1]通过编号取字符串
console.log(str[1] ); // 输出为e
3、charAt(1)查找1位置的子字符
console.log(str.charAt(1) ); // 输出为e
4、indexOf("o")由值找索引(下标)
console.log(str.indexOf("o") ); // 输出为4 o开始出现的位置
5、lastIndexOf("o")由值找索引(下标)
console.log(str.lastIndexOf("o") ); // 输出为7 o最后出现的位置
6、slice (num,num)字符串截取,不包括结束位置,有两个参数,如果不传入第二个参数,则表示截取到末尾
console.log(str.slice (6,11)); // 输出为world
7、substr(num,num)字符串截取,有两个参数,第一个参数表示开始的位置,第二个参数表示截取多少个字符串
console.log(str.substr(6, 5)); // 输出为world 截取了5个字符串
8、includes("文本")字符串检测,检查是否包含某个字符串的内容
console.log(gname.includes("伊利")); // 输出为true,一般使用if判断的方法检测输出内容
9、startsWith("文本")检测字符串开头
if (name.startsWith("文本")) {
console.log("id选择器");
}
10、endsWith(".")检测字符串结尾
if (cont.endsWith(".")) {
console.log("一句完整的话")
} else {
console.log("没有结束的话");
}
11、大小写转化,比较的要求是不区分大小写,所以需要统一转化
toLowerCase转化为小写,toUpperCase()转化为大写
var code = "Xi2d"; // 系统生成的验证码
var user = "xI2d"; // 用户输入的验证码
// 比较的要求是不区分大小写,所以需要统一转化
if (code.toLowerCase() == user.toLowerCase()) { // 将两个变量转换成小写
console.log("输入正确");
} else {
console.log("输入不正确");
}
11、去除头尾的空白字符
var nickname = " 冷光~秋月";
console.log(nickname.length); // 这个字符串长度输出为7
var a = nickname.trim()
console.log(a) // 这个字符串长度输出为5