Js学习之路第八章

yanghongchen666 · 发表于 2021-2-15 07:36:53

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

JS数组字面量

语法:
[]
var arr = [];

例子:

//使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5,10];
console.log(arr.length);
/*
使用构造函数创建数组时，也可以同时添加元素，将添加的元素作为构造函数的参数传递
元素之间使用,隔开
*/
var arr2 = new Array(10,20,30);
console.log(arr2);
//创建一个数组，数组中只有一个元素10
arr = [10];
//创建一个长度为10的数组
arr2 = new Array(10);
console.log(arr2.length);
//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];
//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]
console.log(arr);//孙悟空
//也可以是一个函数
arr = [function(){alert(1)},function(){alert(1)}];
arr[0]();
//数组中也可以放数组(二维数组)
arr = [[123],[3,4,5],[5,6,7]];
console.log(arr);

复制代码

---------------------------------
JS中四个常用的数组方法

//创建数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
push()
-该方法可以向数组的末尾添加一个或多个元素，并返回数组的心的长度
-可以将要添加的元素作为方法的参数传递，
这样这些元素将会自动添加到数组的末尾
-该方法会将数组的长度作为返回值返回
*/
var result = arr.push("唐僧","蜘蛛精","白骨精","嫦娥");
console.log("result = " + result);
console.log(arr);
/*
pop()
-该方法可以删除数组的最后一个元素，删除的元素作为返回值返回
*/
result = arr.pop();
console.log("result = " + result);
console.log(arr);
/*
unshift()
-向数组开头添加一个火多个元素，并返回新的数组长度
-向前边插入元素以后，其他元素的索引会依次后移
*/
result = arr.unshift("牛魔王","二郎神");
console.log("result = " + result);
console.log(arr);
/*
shift()
-可以删除数组第一个元素，并将被删除的元素作为返回值返回
*/
result = arr.shift();
console.log("result = " + reuslt);
console.log(arr);

复制代码

---------------------------
Js中数组的遍历

//创建数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","嫦娥","牛魔王","白骨精"];
//所谓的遍历数组，就是将数组中的所有元素都去取出来
for(var i=0; i<arr.length; i++){
console.log(arr[i]);
}

复制代码

-----------------------
JS中forEach的用法

/*
一般我们都是使用for循环去遍历数组,
JS中还未我们提供了一个方法，用来遍历数组
forEach()
-这个方法只支持IE8以上的浏览器
IE8和以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach
还是使用for循环来遍历
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","嫦娥","牛魔王","白骨精"];
/*
forEach()方法需要一个函数作为参数
-像这种函数，由我们创建但不是由我们调用的，我们成为回调函数
-数组中有几个元素函数就会执行几次,每次执行时，浏览器会将遍历到的元素
以实参的形式传递进来，我们可以来定义形参，来读取这些内容
-浏览器会在回调函数中传递三个参数:
1.第一个参数，就是当前正在遍历的元素
2.第二个参数,就是当前正在遍历的元素的索引
3.第三个参数,就是正在遍历的数组
*/
arr.forEach(function(value,index,obj){
console.log("value = " + value);//数组的元素
console.log("index = " + index);//索引
console.log("obj = " + obj) ;//数组
});

复制代码

------------------------------------------
Js中的Slice和Splice

var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]
/*
slice()
-可以用来从数组提取指定元素
-该方法不会改变元素组，而是将截取到的元素封装到一个新数组中返回
-参数:
1.截取开始的位置的索引,包含开始索引
2.截取结束的位置的索引,不包括结束索引
-第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
-索引可以传递一个负值,如果传递一个负值，则从后往前计算
-1倒数第一个
-2倒数第二个
*/
var result = arr.slice(0,2);
//包含索引1以后的所有元素
result = arr.slice(1);
console.log(arr);
console.log(result);
result = arr.slice(-1);
console.log(result);
/*
splice()
-可以用于删除数组中的指定元素
-使用splice()会影响到原数组，会将指定元素从原数组中删除
并将被珊瑚的元素作为返回值返回
-参数:
1.表示开始位置的索引
2.表示删除的数量
3.第三个参数跟第三个以后的参数
可以传递一些新的元素，这些元素会自动插入到开始位置索引前边
*/
var result2 = arr.splice(0,1,"牛魔王","铁扇公主","红孩儿");
console.log(arr);
console.log(result2);//打印删除的值

复制代码

-------------------------------------------
JS数组的剩余方法:

var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];
/*
concat()可以连接两个或多个数组，并将新的数字返回
-该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
console.log(result);
/*
join()
-该方法可以将数组转换为一个字符串
-该方法不会对原数组产生影响,而是将装换后的字符串作为结果返回
-在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
默认连接符使用,（逗号）
*/
result = arr.join(" ");
console.log(result);
/*
reverse()
-该方法用来反转数组(前边的去后边，后边的去前边)
-该方法会直接修改原数组
*/
arr.reverse();
console.log(arr);
/*
sort()
-可以用来对数组中的元素进行排序
-该方法会直接修改原数组
-默认按照Unicode编码进行排序
*/
/*
即使对于纯数字的数组，使用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;
}
else if(a<b){
return -1;
}
else{
return 0;
} */
//升序排列
return a-b;
//降序排列
//return b-a;
})
console.log(arr);
----------------------------------
Js中call和apply
function fun(a,b){
console.log("a = " + a);
console.log("b = " + b);
//alert(this);
}
var obj = {
name:"obj",
sayName: function(){
alert(this.name);
}
};
/*
call() 和 apply()
-这两个方法都是函数对象的方法，需要通过函数对象来调用
-当对函数调用call()和apply()都会调用函数执行
-在调用call和apply时可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
-call()方法可以将实参在对象之后依次传递
-aplly()方法需要将实参封装到一个数组中统一传递
-this的情况:
1.以函数形式调用时，this永远都是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时,this是新创建的那个对象
4.使用call和apply调用时，this是我们指定的那个对象
*/
fun.call(obj,2,3);
fun.apply(obj,[2,3]);
var obj2 = {
name:"obj2"
};
/* fun.apply();
fun.call();
fun(); */
fun.call(obj);
fun.apply(obj);
obj.sayName.apply(obj2);

复制代码

----------------------------------------------
Js中argument

/*
在我们调用函数时，浏览器每次都会传递进两个隐含的参数:
1.函数的上下文对象this
2.封装实参的对象arguments
-arguments是一个类数组对象,也可以通过索引来操作数据，也可以获取长度
-在调用函数时，我们所传递的实参都会封装到Arguments中保存
-arguments.length可以用来获取实参的长度
-我们不定义实参，也可以通过arguments来使用实参,只不过很麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参....以此类推
-它里边有一个属性叫做callee,
这个属性对应一个函数对象，就是当前正在执行的函数的对象
*/
function fun(a,b){
console.log(arguments);
console.log(Array,isArray(arguments));
console.log(arguments.length);
console.log(arguments[0]);
console.log(arguments.callee);
console.log(arguments.callee == fun); //true
}
fun("hello",true);

复制代码

----------------------------------------------

试一试:

1.题目如下

创建一个函数，可以将perArr中的满18岁Person提取出来，
然后封装到一个新的数组中并返回

      function Person(name,age,gender){
         this.name = name;
         this.age = age;
      }

      //修改Person原型的toString
      Person.prototype.toString = function(){
         return "Person[name="+this.name+",age="+this.name+",gender="+this.gender+"]";
      }

      //创建一个Person对象
      var per = new Person("孙悟空",18);
      var per2 = new Person("猪八戒",28);
      var per3 = new Person("红孩儿",8);
      var per4 = new Person("二郎神",38);
      var per5 = new Person("嫦娥",20);

      //将这些person对象放入到一个数组中
      var perArr = [per,per2,per3,per4,per5];

2.题目如下

把下面数组里面的重复的数字给去除掉(需要结合Splice跟Slice知识点来完成~)
hint: 需要使用到嵌套for循环
var arr = [1,2,3,2,2,1,3,4,2,5];

攸鱼 · 发表于 2021-2-15 11:00:13

罗巴乔 · 发表于 2021-2-18 14:33:24

继续跟你学习

kkl44stupid · 发表于 2021-2-18 17:22:29

墨砚学长 · 发表于 2021-2-18 18:05:25

hornwong · 发表于 2021-2-18 20:37:39

感谢分享！

账号		自动登录	找回密码
密码			立即注册

[见证历程] Js学习之路第八章

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

浏览过的版块