一. 使用字面量创建数组
<script type="text/javascript">
/*
* 使用字面量创建数组
* - 语法: var 变量 = [];
*
*/
/*
* 使用字面量创建数组时,可以在创建时就指定数组中的元素
*
*/
var arr = [1,2,3,4];
// console.log(arr);
// 使用构造函数创建数组时, 也可以同时添加元素,将需要添加的元素作为构造函数的参数传递
var arr2 = new Array(10,20,30);
// 创建一个数组,数组只添加一个元素10
arr = [10];
//创建一个长度为10的数组
arr2 = new Array(10); // 此时当成了长度,不会当成元素添加进去
// console.log(arr2);
// 数组中的元素可以使任意类型
arr = ['hello',1,true,undefined];
// 也可以是一个对象
var obj = {
name: '张三'
}
// arr = [obj];
// arr[arr.length] = obj
// console.log(arr)
// 也可以是一个函数
arr = [
function (){alert("hello")},
function (){alert("哈哈")}
]
arr[0](); // [x] x代表下标, 0 输出 hello 1 输出 哈哈
</script>
二. 数组的方法(列举部分方法,更多方法参考W3C链接)
W3C- 数组方法 https://www.w3school.com.cn/js/js_array_methods.asp
<script type="text/javascript">
var arr = ["zs", "ls", "ww", "zl"];
/*
* push()
* - 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新长度
* - 可以将要添加的元素作为参数传递
* 这样这些元素就会自动添加到数组的末尾
*/
// var res = arr.push("wangermazi");
// console.log(arr);
// console.log(res); // 输出数组的长度
// arr.push("js","66"); // 也可以添加多个元素
// console.log(arr);
/*
* pop()
* - 该方法会删除数组的最后一个元素, 并且! 返回值为删除的那个元素
* - 该方法调用一次就删除一个元素
*/
// arr.pop();
// console.log(arr)
var res = arr.pop();
console.log(res);
/*
* unshift()
* - 该方法可以向数组的开头添加一个或多个元素, 并返回数组的新长度
*/
/* shift()
* - 删除数组的第一个元素,并返回删除的元素
*/
</script>
<script type="text/javascript">
var arr = ["zs", "ls", "ww", "zl"];
/*
* slice()
* - 该方法可以从数组中提取指定元素
* - 该方法不会影响原数组,而是将截取到的元素封装到一个新的数组中返回
* - 该方法可以传入两个参数:
* 1. 截取开始位置的索引(包含开始索引)
* 2. 截取结束位置的索引(不包含结束索引)
* - 第二个参数可以省略不写,此时会开始索引截到数组后的所有元素
* - 索引也可传入负值, 传负值则从后面往前截取
* -1 代表倒数第一个 -2倒数第二个 ....
*
*/
// var arr = arr.slice(2);
// var arr = arr.slice(2,3);
//
/*
* splice()
* - 删除指定下标的元素。并返回删除的元素
* - 可传入多个参数:
* 1. 第一个参数 代表开始的位置(下标)
* 2. 第二个参数 代表删除的个数, 若为0 则不会删除任何元素
* 3. 第三个及以后的参数
* 可以传递一些新的元素 , 这些元素会自动插入到开始位置索引的前面 举例2
*/
// var arr = arr.splice(0,1); // 举例1
var res = arr.splice(1,1);
// console.log(arr);
console.log(res)
</script>
三. forEach
forEach()方法需要一个函数作为参数
- 像这种函数,由我们创建但不是我们调用的,称之为回调函数
回调函数: 1. 是我们自己创建 2.我们自己没有调用这个函数 3. 最终这个函数执行了 - 数组中有几个元素 函数就会执行几次
- 每次执行时,浏览器就会将遍历的元素,以实参的形式传递出来
- 我们可以定义形参 来接收这些内容
- 浏览器会在回调函数中传递三个参数:
1.第一个参数是正在遍历的元素;
2.第二个参数是正在遍历的元素的下标;
3.第三个参数是正在遍历的元素的数组。
var arr = ["zs", "ls", "ww", "zl"];
arr.forEach(function (a,b,c,d){
console.log(a,b,c,d) // 输出4个hello
})
数组小练习
从数组中筛选出年龄大于18的元素
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
var per = new Person('张三', 18);
var per2 = new Person('李四', 28);
var per3 = new Person('王五', 8);
var per4 = new Person('赵六', 16);
var per5 = new Person('王二麻子', 32);
// 先将上面的对象全部放入一个数组
var arr = [per,per2,per3,per4,per5];
</script>
解:
// 先将上面的对象全部放入一个数组
var arr = [per,per2,per3,per4,per5];
function getAge(arr){
var newArr = [];
//遍历arr,获取arr中的Person对象
for(var i = 0; i < arr.length; i++){
var p = arr[i];
if(p.age >= 18){
newArr.push(p);
}
}
return newArr
}
var result = getAdult(arr);
console.log(result);