【前端】JavaScript入门及实战76-80
76 数组的方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
/*
slice()
可以用来从数组中提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：
1. 截取开始位置的索引，包含开始索引
2. 截取结束位置的索引，不包含结束索引
第二个参数可以省略不写，此时截取从开始索引往后的所有元素
索引可以传递一个负值，负值从后往前计算
-1是倒数第一个
*/
var arr = ["孙悟空", "猪八戒", "沙和尚", "白龙马", "唐三藏"];
var res = arr.slice(0, 2); // "孙悟空", "猪八戒"
res = arr.slice(1); // "猪八戒", "沙和尚", "白龙马", "唐三藏"
res = arr.slice(1, -2); // "猪八戒", "沙和尚"
/*
splice()
可以用于删除数组中的指定元素
会影响到原数组，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
参数：
1. 第一个，表示开始位置的索引
2. 第二个，表示删除的数量
3. 第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前面
*/
var arr = ["孙悟空", "猪八戒", "沙和尚", "白龙马", "唐三藏"];
var res = arr.splice(0, 2); // "孙悟空", "猪八戒"
console.log(arr);
res = arr.splice(0, 2, "牛魔王", "铁扇公主"); // "牛魔王", "铁扇公主", "沙和尚", "白龙马", "唐三藏"
res = arr.splice(0, 0, "牛魔王", "铁扇公主"); // "牛魔王", "铁扇公主", "孙悟空", "猪八戒", "沙和尚", "白龙马", "唐三藏"
</script>
<style>
</style>
</head>
<body>
</body>
</html>
77 数组练习
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
// 创建一个数组
var arr = [1, 2, 3, 2 ,1, 3, 4, 2, 5];
// 去除数组中重复的数字
for(var i = 0; i < arr.length; i++){
for(var j = i + 1; j < arr.length; j++){
if(arr[j] == arr[i]){
arr.splice(j, 1);
j--;
}
}
}
document.write(arr);
</script>
<style>
</style>
</head>
<body>
</body>
</html>
78 数组的剩余方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
var arr = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
/*
concat()可以连接两个或多个数组，并将新的数组返回
该方法不会对原数组产生影响
*/
var res = arr.concat(arr2); // 1, 2, 3, 4, 5, 6
res = arr.concat(arr2, arr3, "牛魔王"); // 都连到一块，拼接成一个数组
/*
join()
该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
如果不指定连接符，则默认使用“,”作为连接符
*/
res = arr.join(); // typeof res -> string
res = arr.join("-"); // "1-2-3"
res = arr.join(""); // "123"
/*
reverse()
该方法用来反转数组（前边的去后边，后边的去前边）
该方法会直接修改原数组
*/
arr.reverse(); // 321
/*
sort()
可以用来对数组中的元素进行排序
也会影响原数组，默认会按照Unicode编码进行排序
即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序
所以对数字进行排序时，可能会得到错误的结果
我们可以自己来指定排序的规则
可以在sort()中添加一个回调函数，来指定排序规则，
需要定义两个形参，
浏览器将会分别使用数组中的元素作为实参去调用回调函数，
使用哪个元素调用不确定，但是肯定的是，数组中a一定在b前面
浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于0的值，则元素会交换位置，
如果返回一个小于0的值，元素位置不变，
如果返回一个0的值，则两个元素相等，也不交换位置
*/
arr = ["b", "d", "c", "a", "e"];
arr.sort(); // abcde
arr.reverse(); // edcba
arr = [3, 4, 1, 2, 5];
arr.sort(); // 1, 2, 3, 4, 5
arr = [3, 4, 11, 2, 5];
arr.sort(); // 11, 2, 3, 4, 5
arr = [5, 4, 3];
arr.sort(function(a, b){
// a = 5, b = 4; a = 4, b = 3
console.log(a);
console.log(b);
});
// 升序排列
arr.sort(function(a, b){
// 前边的大
if(a > b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
// 升序排列
return a - b;
// 降序排列
return b - a;
});
</script>
<style>
</style>
</head>
<body>
</body>
</html>
79 数组的方法
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
/*
call()和apply()
这两个方法都是函数对象的方法，需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this
call()方法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中，统一传递
this的情况：
1. 以函数形式调用时，this永远都是window
2. 以方法的形式调用时，this是调用方法的对象
3. 以构造函数的形式调用时，this是新创建的那个对象
4. 使用call和apply调用时，this是指定的那个对象
*/
function fun(){
alert(this);
}
function fun(a, b){
console.log(a);
console.log(b);
}
var obj = {
name:"obj",
sayName: function(){
alert(this.name);
}
};
var obj2 = {
name:"obj2"
};
fun.call();
fun.apply();
fun.call(obj); // obj
obj.sayName.apply(obj2); // obj2
fun.call(obj, 2, 3); // a = 2, b = 3
fun.apply(obj, 2, 3); // 错误
fun.apply(obj, [2, 3]); // 正确 a = 2, b = 3
</script>
<style>
</style>
</head>
<body>
</body>
</html>
80 arguments
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
/*
在调用函数时，浏览器每次都会传递两个隐含的参数
1. 函数的上下文对象this
2. 封装实参的对象arguments
arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
在调用函数时，我们所传递的实参都会在arguments中保存
即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
arguments[0]表示第一个实参
arguments[1]表示第二个实参
。。。
arguments中有一个属性：callee，这个属性对应一个函数对象，就是当前正在执行的函数对象
*/
function fun(){
console.log(arguments instanceof Array);
console.log(Array.isArray(arguments));
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee); // fun函数
}
fun(); // arguments.length = 0
fun("hello", true); // arguments.length = 2
fun("hello", true); // arguments[0] = "hello"
</script>
<style>
</style>
</head>
<body>
</body>
</html>
原文地址：https://blog.csdn.net/weixin_45980065/article/details/140605940
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！