JavaScript第七篇(p70~p79)

数组(Array)

1.数也是一个对象
2.它和我们普通的对象功能类似,也是用来存储一些值的
3.不同的是普通对象是使用字符串作为属性名的,而数组则使用数字来作为索引操作元素
4.数组的存储性能比普通对象好,在开发中经常使用数组来存储一些数据
5.使用typeof检查数组会返回object

1、索引:从0开始的整数就是索引

//创建数组对象
var arr = new Array();
//向数组中添加元素
//语法: 数组[索引] = 值
arr[0] = 10;
arr[1] = 33;
arr[2] = 55;
//读取数组中的元素
//语法:数组[索引]
//如果读取不存在的索引,会返回undefined
console.log(arr[0]);
  • 获取数组的长度
    可以使用length属性来获取数组的长度(元素的个数)
    语法: 数组.length
  • 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
  • 对于非连续的数组,使用length可以获取到数组的最大索引+1
    尽量不要创造非连续的数组
console.log(arr.length);
  • 修改length
    如果修改的length大于原长度,则会多出部分会空出来
    如果修改的length小于原长度,则多出的元素会被删除
 var arr = new Array();
        arr[0] = 10;
        arr[1] = 33;
        arr[2] = 55;
        arr[10] = 303;

        console.log(arr);
        console.log(arr.length);

        console.log(arr[arr.length-1]);
        arr.length=2;
        console.log(arr);

在这里插入图片描述

- 向数组的最后一个位置添加元素

arr[arr.length] = 70;//相当于arr[12]
arr[arr.length] = 70;//相当于arr[13]

数组对象的创建的另一种方法

  • 字面量方式

var arr1=[1,2,3,5,4,6,8,9];
console.log(arr1);
console.log(arr1.length);

在这里插入图片描述

  • 数组中的元素可以是任意的数据类型
        arr2=["hello",1,true,null,undefined];
        console.log(arr2);

在这里插入图片描述

  • 可以是对象
 var obj={name:"孙悟空"};
        arr3=[{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
        arr3[arr3.length]=obj;
        console.log(arr3[1]);

在这里插入图片描述

  • 也可以是一个函数
 arr=[function(){},function(){}];
  • 也可以放数组
 arr=[[123,456,44],[111,222,333]];

数组的方法

push()

  • 可以向数组末尾添加一个或多个元素,并返回数组的长度
  • 可以将要添加的元素作为方法的参数传递
    这样这些元素将会自动添加到元素的末尾
 var arr=["孙悟空","猪八戒","沙和尚"];
 var  result=arr.push("唐僧","猪八戒","沙和尚");
 console.log(arr);
 console.log(result);

在这里插入图片描述

pop()

  • 该方法可以删除数组的最后一个元素,并将删除的元素作为返回值返回
var arr = ["孙悟空","猪八戒"];
arr.pop();//只剩孙悟空
var result = arr.pop();
console.log("result" + result);//返回猪八戒

unshift()

  • 向数组开头添加一个或多个元素,并返回数组的新长度
  • 向数组中插入元素后,其他的元素会依次调整
//创建一个数组
var arr = ["孙悟空","猪八戒"];
arr.unshift("牛魔王","二郎神");
console.log(arr);

在这里插入图片描述

shift()

可以删除数组的第一个元素,并将被删除的元素作为返回值返回

//创建一个数组
var arr = ["孙悟空","猪八戒"];
arr.shift();
console.log(arr);//只有猪八戒
var result = arr.shift();
console.log("result" + result);//返回孙悟空

检查是否为数组

1.instanceof运算符,可以判断一个对象是否属于某种类型
2.Array.isArray()用于判断一个对象是否属于为数组,是HTML5新提供的方法

 console.log(arr instanceof Array);true
 console.log(Array.isArray(obj));true

遍历数组

 var arr=["孙悟空","123","456","我是你"];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }

在这里插入图片描述

筛选数组

有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除,剩余的放到新数组里面

 var arr=[1500,1200,2000,2100,1800];
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i]>=2000){
            //newArr[newArr.length]=arr[i];
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);

foreach(),slice(),splice()

foreach()

  • 这个方法只支持IE9及以上的浏览器
  • 需要一个函数作为参数
  • 像这种函数由我们创建但是不是由我们调用的,我们称为回调函数
  • 数组中有几个元素,就会执行几次,每次执行时,浏- 览器会将遍历到的元素以实参的形式传递进来,我们可以定义形参读取这些内容
  • 浏览器会在回调函数中传递三个参数:
    第一个就是当前正在遍历的元素;
    第二个是当前遍历元素的索引;
    第三个就是正在遍历的数组
var arr = ["猪八戒","沙和尚","唐僧","孙悟空"];
arr.forEach(function(value , index , obj){
console.log("value" + value);//当前正在遍历的元素;
console.log("index" + index);//当前遍历元素的索引;
console.log(obj == arr);//正在遍历的数组
}
); 

slice()

  • 可以用来从数组中提取指定的元素
  • 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
  • 参数:第一个是截取开始位置的索引,包含开始索引;第二个是截取结束的位置的索引,不包含结束索引
  • 索引可以传递一个负值,如果传递一个负值,则从后往前计算
var arr = ["猪八戒","沙和尚","唐僧","孙悟空"];
var result = arr.slice(1,2);//返回沙和尚
console.log(result);
result = arr.slice(1,-1);//返回沙和尚和唐僧
console.log(result);

在这里插入图片描述

splice()

  • 使用splice()会影响到原数组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回
  • 参数:
    第一个,表示开始的位置的索引;
    第二个,表示删除的数量;
    第三个及以后,可以传递一些新的元素,这些元素会自动插入到开始位置索引前边;
var arr = ["猪八戒", "沙和尚", "唐僧", "孙悟空"];
var result=arr.splice(0,1);
console.log(result);

在这里插入图片描述

var arr = ["猪八戒", "沙和尚", "唐僧", "孙悟空"];
arr.splice(1,2,"牛魔王","铁扇公主");
console.log(arr)//"牛魔王","铁扇公主"代替了"沙和尚", "唐僧"

在这里插入图片描述

数组去重练习

//创建一个数组
        var arr=[1,2,3,2,2,2,2,2,3,1,4,4,4,44,4,4,4,4,4,2,5];

        //去除数组中的重复数字
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
            for(var j=i+1;j<arr.length;j++){
                console.log(arr[j]);
                if(arr[i]==arr[j]){
                    //如果相等则出现了重复的元素
                    arr.splice(j,1);
                    //当删除了当前j所在的元素以后,后边的元素会自动补位,此时将不会再比较这个元素,需要再比较一次j所在位置的元素;
                    j--;
                }
            }
        }
        console.log(arr);

在这里插入图片描述

数组的剩余方法

concat()

  • 可以连接两个或多个数组,并将新的数组返回
  • 该方法不会对原数组产生影响
var arr = ["猪八戒", "沙和尚", "唐僧", "孙悟空"];  
var arr2=["牛魔王","铁扇公主"];
var arr3=["太上老君","玉皇大帝"];
var result = arr.concat(arr2,arr3,"是的");
console.log(result);

在这里插入图片描述

join()

  • 该方法可以将数组转换成一个字符串
  • 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
  • 在()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,如果不指定连接符,则默认使用逗号作为连接符
var arr = ["猪八戒", "沙和尚", "唐僧", "孙悟空"];  
var  result=arr.join(++);
console.log(result);

在这里插入图片描述

reverse()

  • 颠倒数组中元素的顺序,无参数
  • 该方法会改变原来的数组,返回新数组
        var arr2=["牛魔王","铁扇公主"];
 		arr2.reverse();;
        console.log(arr2);//'铁扇公主', '牛魔王'

sort()

  • 用来对数组中的元素进行排序
  • 也会影响原数组,默认会Unicode编码进行排序
  • 如 e d a c f会变为a c d e f
  • 即使对于纯数字的数组,使用此方法排序,也会按照Unicode编码进行排序,所以有时会得到错误的结果
  • 可以自己来指定排序的规则(可以在sort()中添加一个回调函数,来指定排序规则,回调函数需要定义两个形参,浏览器会分别使用数组中的元素作为实参去调用回调函数)
  • 浏览器会根据回调函数的返回值来决定元素的顺序,如果返回一个大于0的值,则元素会交换位置;如果返回一个小于0的值,则元素位置不变;如果返回一个等于0的值,则认为两个元素相等,也不会交换位置;
    var arr=[15,1200,200,210,1800,645,100,1357];
        arr.sort(function(a,b){
            if(a>b){return 1;}//  return a-b;升序
            else if(a<b){return -1;}//  return a+b;降序
            else {return 0;} 
        });
        console.log(arr);
    console.log(arr2);

在这里插入图片描述

函数的方法call()和apply()

  • 这两个方法都是函数对象的方法,需要通过函数对象调用
  • 当对函数调用call()和apply()都会调用函数执行,fun(),fun.call(),fun.apply()
  • 在调用call()和apply()可以将一个对象指定为第一个参数此时这个对象将会成为函数执行时的this
  • call()方法可以将实参在对象之后依次传递
  • apply()方法需要将实参封到一个数组中统一传递
function fun(){//fun为函数对象
alert(this.name);}
var obj = {name :"obj"
sayName:function(){
alert(this.name);
}
};
var obj2 = {name:"obj2"};
fun.apply(obj);
obj.sayName.apply(obj2);//会返回"obj2"

function fun(a,b){
console.log("a=" + a);
console.log("b=" + b);
}
var obj = {name :"obj"
sayName:function(){
alert(this.name);
}
};
fun.call(obj,2,3);//a=2,b=3
//call()方法可以将实参在对象之后依次传递
fun.apply(obj,[2,3]);
//apply()方法需要将实参封到一个数组中统一传递
var obj2 = {name:"obj2"};

this

  1. 以函数的形式调用时,this永远都是window
  2. 以方法的形式调用时,this是调用方法的对象
  3. 以构造函数的形式调用时,this时新创建的那个对象
  4. 使用call和apply调用时,this时指定的那个对象
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值