定义数组的方式:
第一种方式:定义数组Array - 字面量形式
<script>
var arr = []; // 空数组
// 往里面添加成员(元素)
arr[0] = "饶梓杭";
arr[1] = "黄鑫张";
arr[2] = "张洁";
// 查看数组 打印对象(数组)快照信息
console.log(arr);
// 还可以初始化时 直接添加元素
var arr = ['a', 'b', 'c'];
// dir方法 用于展示对象结构
console.dir(arr); // Array(3)
// 在页面查看
// console是在控制台结构化的展示,如果在页面中查看需要转化成字符串
// 它会隐式的调用继承的toString(),返回一个以逗号拼接的字符串
// 相当于自定义方法:
arr.toString = function () {
return this[0] + ',' + this[1] + ',' + this[2];
// return "[object Array]";
}
document.write(arr); // a,b,c
// 数组本质上也是对象
console.log(typeof arr); // object
</script>
第二种方式:
<script>
// 使用构造器 创建空数组
var arr = new Array();
// 向数组添加元素
arr[0] = "a";
arr[1] = "b";
arr[2] = "c";
console.dir(arr);
// 初始化数组元素
var arr = new Array("a", "b", "c");
console.dir(arr);
// 如果给构造器初始化传入一个数值 表示数组的元素个数
var arr = new Array(10);
console.log(arr); // 快照会直接展示元素 结果为[empty * 10]
console.log(arr[0]); // undefined
</script>
关联数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 所谓的关联数组指以字符串作为下标的元素
var arr = ["a", "b", "c"];
// arr[0] = "a"
// arr[1] = "b"
// arr[2] = "c"
arr["foo"] = "hello";
arr["bar"] = "world";
console.dir(arr);
// 字符串编号的元素 被视作对象的属性
console.log(arr["foo"], arr.bar);
// js中的数组和对象完全互通的,除了在数组里面定义字符串下标外,也可以在对象里面定义数字属性
var obj = {
// 数字编号的属性
0 : "a",
1 : "b",
2 : "c",
foo : "foo",
bar : "bar",
}
console.dir(obj);
console.log(obj.foo, obj.bar); // foo bar
console.log(obj[0], obj[1], obj[2]); // a b c
// 数组本质上就是对象 只不过具有额外功能层的对象,就是在对象基础上延伸了 数字编号的 属性,其中数字编号的部分被理解成
// 数组成员,并支持[]语法来操作
var arr = ['a', 'b', 'c'];
arr["foo"] = "foo";
arr["bar"] = "bar";
// 显示数组的长度(个数)
console.log(arr.length); // 3
</script>
</body>
</html>
for循环遍历数组:
<script>
/*
* for 循环遍历数组元素有2个限制条件
*/
// 1、数组编号必须是连续的
var arr = ['a', 'b']; // 0 1
// 跳过...arr[2]
arr[3] = 'd';
// 打印快站时 缺少元素 显示效果为empty
console.log(arr); // ['a', 'b',empty, 'd']
// 取值为undefined
console.log(arr[2]);
// 2、for循环的是下标 不能遍历对象属性
arr["foo"] = "foo";
arr["bar"] = "bar";
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
} // a b undefined d
</script>
for ...in遍历数组:
<script>
/*
* 使用for...in遍历对象属性,它也有2个限制
* 1、遍历出来的属性的顺序 不可控
* 2、不能遍历继承的属性
*/
var person = {
name : "zhangsan",
sex : "male",
age : 18,
study () {
return "床前明月光,疑是地上霜"
},
sing () {
return "一人我饮酒醉,错把佳人成双对"
}
}
// 定义变量p 用来接收person中的属性
// p始终代表在person对象里面的某个属性
// for的过程 会自动循环 p值一直在更新
var i = 0;
for (var p in person) {
console.log(i++, p);
// 接下来取属性的值 .运算符后面跟着的只能是硬编码的字符(标志符) 不能解析变量名
// 只用[]里面可以解析变量
console.log(person.p, person[p]);
}
</script>
数组的方法:
<!-- 学习内置函数方法的几个关键点:
1、函数名
2、函数参数,有几个参数 分别代表什么含义
3、函数返回值是什么!!!! -->
<script>
var arr = ['a', 'b', 'c', 'b'];
/*
* 查询索引的方法
*/
// 元素在数组中的位置
console.log(arr.indexOf('b')); // 1
// 元素在数组中最后出现的位置
console.log(arr.lastIndexOf('b')); // 3
/*
* 检测元素
*/
// 判断数组中是否存在某个元素
console.log(arr.includes("e")); // false
console.log(arr.includes("b")); // true
/*
* 截取数组
*/
// 截取数组的一部分,它有2个参数 分别是截取的起始位置和结束位置(不包含)
// 它返回的是截取出来的新数组,原数组不变,其实slice是在复制
console.log(arr.slice(1, 3)); // ['b', 'c']
console.log(arr); // ['a','b','c','b']
// 删除数组元素,它返回的是删除的元素,但是原数组本身已经改变
console.log(arr.splice(1, 2)); // ["b", "c"]
console.log(arr); // ['a', 'b']
/*
* 队列方法:愁边动角寒 夜久意难平
*/
var arr = ['a', 'b', 'c', 'd']
// 在数组头部添加元素 返回操作之后的数组长度
console.log(arr.unshift(0)); // 5
// 原数组已经发生改变
console.log(arr); // [0, 'a', 'b', 'c', 'd'];
// 在头部删除元素 返回被删除的元素
console.log(arr.shift()); // 0
console.log(arr);
// 尾部添加一个元素 返回操作之后的数组长度
console.log(arr.push("e")); // 5
console.log(arr); // ['a', 'b', 'c', 'd', 'e'];
// 尾部删除一个元素 返回被删除的元素
console.log(arr.pop()); // e
console.log(arr); //['a', 'b', 'c', 'd']
/*
* 其他常用方法
*/
var arr = [1,2,3,4,5];
// 将数组元素拼接成字符串
console.log(arr.join("<")); // 1<2<3<4<5
// 合并数组
var arr2 = [6,7,8,9,10];
console.log(arr.concat(arr2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
</script>
字符串方法:
<script>
// 创建字符串 - 数组类型
var str = "hello world"; // 字面量
// 创建字符串 - 对象类型
var str = new String("hello world"); // 构造器
console.dir(str);
// 查看字符串长度
console.log(str.length); // 11
// 通过编号取字符
console.log(str[1]); // e
console.log(str.charAt(1)); // e
/*
* 由值找索引
*/
console.log(str.indexOf("o")); // 4
console.log(str.lastIndexOf("o")); // 7
/*
* 字符串截取
*/
// 不包括结束位置,如果不传第二个参数 则表示截取到末尾
console.log(str.slice(6, 11)); // world
// 第二个参数是截取的长度
console.log(str.substr(6, 5)); // world
// 字符串检测,是否包含某个内容
var gname = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶"
if (gname.includes("伊利")) {
console.log("显示该商品")
}
var name = "#user",
cont = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶.";
// 检测字符串开头
if (name.startsWith("#")) {
console.log("id选择器");
} else if (name.startsWith(".")) {
console.log("类选择器");
}
// 检测字符串结尾
if (cont.endsWith(".")) {
console.log("一句完整的话")
} else {
console.log("没有结束的话");
}
// 大小写转化
var code = "Xi2d"; // 系统生成的验证码
var user = "xI2d"; // 用户输入的验证码
// 比较的要求是不区分大小写,所以需要统一转化
if (code.toLowerCase() == user.toLowerCase()) {
console.log("输入正确");
} else {
console.log("输入不正确");
}
var nickname = "冷光~秋月";
if (nickname.trim() == "") {
console.log("输入不能为空");
}
</script>