目录
欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。
数组的元素增删方法
1. push() 数组末尾添加元素
- push()
-
- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
-
- 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
-
- 该方法会将数组新的长度作为返回值返回
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push(
"push新来的1",
"push新来的2",
"push新来的3",
"push新来的4"
);
console.log(arr); //(7) ["孙悟空", "猪八戒", "沙和尚","push新来的1", "push新来的2", "push新来的3", "push新来的4"]
console.log("result = " + result);
</script>
2. pop() 删除数组的最后一个元素
- push()
-
- 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
-
- 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
-
- 该方法会将数组新的长度作为返回值返回
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
/*
* push()
* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递，
* 这样这些元素将会自动添加到数组的末尾
* - 该方法会将数组新的长度作为返回值返回
*/
result = arr.pop();
console.log(arr); //(7) ["孙悟空", "猪八戒"]
console.log("result = " + result); //result = 沙和尚
</script>
3. unshift() 数组开头添加一个或多个元素
- unshift()
-
- 向数组开头添加一个或多个元素，并返回新的数组长度
-
- 向前边插入元素以后，其他的元素索引会依次调整
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
/*
* push()
* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递，
* 这样这些元素将会自动添加到数组的末尾
* - 该方法会将数组新的长度作为返回值返回
*/
result = arr.unshift("unshift新加进去的1", "unshift新加进去的2");
console.log(arr); //(5) ["unshift新加进去的1", "unshift新加进去的2", "孙悟空", "猪八戒", "沙和尚"]
console.log("result = " + result); //result = 5
</script>
4. shift() 删除数组的第一个元素
- shift()
-
- 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
/*
* push()
* - 该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
* - 可以将要添加的元素作为方法的参数传递，
* 这样这些元素将会自动添加到数组的末尾
* - 该方法会将数组新的长度作为返回值返回
*/
result = arr.shift();
console.log(arr); //(2) ["猪八戒", "沙和尚"]
console.log("result = " + result); //result = 孙悟空
</script>
5. slice() 从数组提取指定元素
- slice()
-
- 可以用来从数组提取指定元素
-
- 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返
-
- 参数：
-
1.截取开始的位置的索引,包含开始索引 -
2.截取结束的位置的索引,不包含结束索引 -
- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素 -
- 索引可以传递一个负值，如果传递一个负值，则从后往前计算
-
-1 倒数第一个 -
-2 倒数第二个
var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
/*
* slice()
* - 可以用来从数组提取指定元素
* - 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
* - 参数：
* 1.截取开始的位置的索引,包含开始索引
* 2.截取结束的位置的索引,不包含结束索引
* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算
* -1 倒数第一个
* -2 倒数第二个
*/
var result = arr.slice(1, 4); //取1，2，3索引的数据
console.log(result); //(3) ["猪八戒", "沙和尚", "唐僧"]
result = arr.slice(3); //取3，4索引的数据
console.log(result); //(2) ["唐僧", "白骨精"]
result = arr.slice(1, -2); //取1,2 索引的数据
console.log(result); //(2) ["猪八戒", "沙和尚"]
6. splice() 删除数组中的指定元素
- splice()
-
- 可以用于删除数组中的指定元素
-
- 使用splice()会影响到原数组，会将指定元素从原数组中删除
-
并将被删除的元素作为返回值返回 -
- 参数：
-
第一个，表示开始位置的索引 -
第二个，表示删除的数量 -
第三个及以后。。可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
<script type="text/javascript">
/*
* splice()
* - 可以用于删除数组中的指定元素
* - 使用splice()会影响到原数组，会将指定元素从原数组中删除
* 并将被删除的元素作为返回值返回
* - 参数：
* 第一个，表示开始位置的索引
* 第二个，表示删除的数量
* 第三个及以后。。
* 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
*
*/
arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
//var result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");//从索引1的猪八戒开始（包括猪八戒），删除掉0个元素，并在这个位置后加入"牛魔王", "铁扇公主", "红孩儿"
//相当于可以用于在指定位置后加入新元素
var result = arr.splice(1, 1, "牛魔王", "铁扇公主", "红孩儿"); //从索引1的猪八戒开始（包括猪八戒），删除掉1个元素，并在这个位置后加入"牛魔王", "铁扇公主", "红孩儿"
console.log(arr); //(6) ["孙悟空", "牛魔王", "铁扇公主", "红孩儿", "沙和尚", "唐僧"]
console.log("result" + result); //result猪八戒
</script>
7. concat() 连接两个或多个数组，并将新的数组返回
- concat()可以连接两个或多个数组，并将新的数组返回
-
- 该方法不会对原数组产生影响
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
/*
* concat()可以连接两个或多个数组，并将新的数组返回
* - 该方法不会对原数组产生影响
*/
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(arr); //(3) ["孙悟空", "猪八戒", "沙和尚"]
console.log("result" + result); //result孙悟空,猪八戒,沙和尚,白骨精,玉兔精,蜘蛛精,二郎神,太上老君,玉皇大帝,牛魔王,铁扇公主
</script>
8. join() 数组转字符串
- join()
-
- 该方法可以将数组转换为一个字符串
-
- 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
-
- 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
-
如果不指定连接符，则默认使用,作为连接符
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
/*
* join()
* - 该方法可以将数组转换为一个字符串
* - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
* - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
* 如果不指定连接符，则默认使用,作为连接符
*/
var result = arr.join("#-#");
console.log(arr); //(3) ["孙悟空", "猪八戒", "沙和尚"]
console.log("result:" + result); //result:孙悟空#-#猪八戒#-#沙和尚
</script>
9. reverse() 反转数组
- reverse()
- 该方法用来反转数组（前边的去后边，后边的去前边）
- 该方法会直接修改原数组
<script type="text/javascript">
arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
/*
* reverse()
* - 该方法用来反转数组（前边的去后边，后边的去前边）
* - 该方法会直接修改原数组
*/
result = arr.reverse();
console.log(arr); //(4) ["唐僧", "沙和尚", "猪八戒", "孙悟空"]
console.log("result:" + result); //result:唐僧,沙和尚,猪八戒,孙悟空
</script>
10. sort() 数组排序
- sort()
-
- 可以用来对数组中的元素进行排序
-
- 也会影响原数组，默认会按照Unicode编码进行排序
<script type="text/javascript">
arr = ["b", "d", "e", "a", "c"];
/*
* sort()
* - 可以用来对数组中的元素进行排序
* - 也会影响原数组，默认会按照Unicode编码进行排序
*/
var result = arr.sort(); //默认从小到大排序
console.log(arr); //(5) ["a", "b", "c", "d", "e"]
console.log(result); //(5) ["a", "b", "c", "d", "e"]
result = arr.reverse(); //sort排序后逆序排列即可得到从大到小排序
console.log(arr); //(5) ["e", "d", "c", "b", "a"]
console.log(result); //(5) ["e", "d", "c", "b", "a"]
</script>
- 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
- 所以对数字进排序时，可能会得到错误的结果。
- 我们可以自己来指定排序的规则
- 我们可以在sort()添加一个回调函数，来指定排序规则，
-
回调函数中需要定义两个形参, -
浏览器将会分别使用数组中的元素作为实参去调用回调函数 -
使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边 -
- 浏览器会根据回调函数的返回值来决定元素的顺序，
-
如果返回一个大于0的值，则元素会交换位置 -
如果返回一个小于0的值，则元素位置不变 -
如果返回一个0，则认为两个元素相等，也不交换位置 -
- 如果需要升序排列，则返回 a-b，如果需要降序排列，则返回b-a
<script type="text/javascript">
/*
* 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
* 所以对数字进排序时，可能会得到错误的结果。
*
* 我们可以自己来指定排序的规则
* 我们可以在sort()添加一个回调函数，来指定排序规则，
* 回调函数中需要定义两个形参,
* 浏览器将会分别使用数组中的元素作为实参去调用回调函数
* 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
* - 浏览器会根据回调函数的返回值来决定元素的顺序，
* 如果返回一个大于0的值，则元素会交换位置
* 如果返回一个小于0的值，则元素位置不变
* 如果返回一个0，则认为两个元素相等，也不交换位置
*
* - 如果需要升序排列，则返回 a-b
* 如果需要降序排列，则返回b-a
*/
arr = [5, 4, 2, 1, 3, 6, 8, 7];
arr.sort(function (a, b) {
//便于理解的写法
if (a > b) {
return -1; //-1小于0 位置不变，也就是说前面的a大于后面的b，将序排列
} else if (a < b) {
return 1;
} else {
return 0;
}
//升序排列简单写法;
//return a - b;
//降序排列简单写法
// return b - a;
});
console.log(arr);
</script>
数组遍历
1. for循环一般遍历
所谓的遍历数组，就是将数组中所有的元素都取出来
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
//所谓的遍历数组，就是将数组中所有的元素都取出来
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
</script>
2. foreach遍历
- forEach()方法需要一个函数作为参数
-
- 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
-
- 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
- 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
-
- 浏览器会在回调函数中传递三个参数：
-
第一个参数，就是当前正在遍历的元素 -
第二个参数，就是当前正在遍历的元素的索引 -
第三个参数，就是正在遍历的数组
一般情况来说只需要用到value, index而obj可以在调用时省略不写（我目前用的不多）
<script type="text/javascript">
var arr = ["孙悟空", "猪八戒", "沙和尚"];
/*
* forEach()方法需要一个函数作为参数
* - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容
* - 浏览器会在回调函数中传递三个参数：
* 第一个参数，就是当前正在遍历的元素
* 第二个参数，就是当前正在遍历的元素的索引
* 第三个参数，就是正在遍历的数组
*
*/
arr.forEach(function (value, index, obj) {
console.log(value, index);
});
</script>
总结
大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！
版权声明：
发现你走远了@mzh原创作品，转载必须标注原文链接
Copyright 2023 mzh
Crated：2023-3-1
欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』
扫一扫
3664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
