← 返回首页
Javascript基础教程(十一)
发表时间:2020-03-26 13:20:43
讲解Javascript的数组

1.如何声明数组

与java类似分为静态初始化和动态初始化。 例如:

<script>
    let arr1 = [1,2,3,4,5]; //静态初始化
    let arr2 = new Array(1,2,3,4,5); //动态初始化
    console.log(arr1);
    console.log(arr2);
</script>

要取得Array的长度,直接访问length属性:arr.length 请注意,直接给Array的length赋一个新的值会导致Array大小的变化,如果通过索引赋值时,索引超过了范围,同样会引起Array大小的变化。

例如:

<script>
    let arr1 = [1,2,3,4,5]; //静态初始化
    let arr2 = new Array(1,2,3,4,5); //动态初始化
    //修改某个元素值
    arr1[4]=100;
    //修改数组长度,引起数组大小变化
    arr1.length = 10;
    console.log(arr1);
    //下标超出范围,引起数组大小变化
    arr2[9] = 10;
    console.log(arr2);
</script>

运行结果:

2.ES6新增数组声明方式

ES5使用中使用new Array创建数组存在以下歧义性。

let arr1 = new Array(5); //只有一个参数,表示声明一个长度为5的数组,元素都是undefined
let arr2 = new Array(1,2,3,4,5); //声明一个长度为5的数组,元素值为[1,2,3,4,5]

for(let i=0;i<arr1.length;i++){
     console.log(arr1[i]);
}

for(let i=0;i<arr2.length;i++){
    console.log(arr2[i]);
}

ES6推荐使用Array.of或者Array.from

    let arr1 = Array.of(5); //只有一个参数也表示声明一个长度为1的数组,元素都是5
    let arr2 = Array.of(1,2,3,4,5); //声明一个长度为5的数组,元素值为[1,2,3,4,5]
    let arr3 = Array.from([1,2,3,4,5]);////声明一个长度为5的数组,元素值为[1,2,3,4,5]
    //把对象转换为数组
    let arr4 = Array.from({
        0: 'zhangsan',
        1: 20,
        2: 'male',
        length:3
    })
    for(let i=0;i<arr1.length;i++){
        console.log(arr1[i]);
    }

    for(let i=0;i<arr2.length;i++){
        console.log(arr2[i]);
    }

    for(let i=0;i<arr3.length;i++){
        console.log(arr3[i]);
    }

    console.log(arr4);

3.数组的遍历

数组有五种遍历方式: - for循环 - forEach循环 - for in - for of - map

例如:

<script>
    let stus = ['张三','李四','王五','赵六'];
    //1.for循环
    for(let i=0;i<stus.length;i++){
        console.log(stus[i]);
    }

    //2.forEach
    stus.forEach(function(e,i){
        console.log("第"+i+"个元素是:"+e);
    })
    //或者使用箭头函数,精简写法
    stus.forEach((e,i)=>{
        console.log("第"+i+"个元素是:"+e);
    })

    //3.for in
    for(let index in stus){
        console.log(stus[index]);
    }

    //4.for of
    for(let value of stus){
        console.log(value);
    }

    //5. map
    stus.map((v,index)=>{
        console.log(v);
        //return;
    })

</script>
运行结果:
张三
李四
王五
赵六
第0个元素是:张三
第1个元素是:李四
第2个元素是:王五
第3个元素是:赵六
第0个元素是:张三
第1个元素是:李四
第2个元素是:王五
第3个元素是:赵六
张三
李四
王五
赵六
张三
李四
王五
赵六
张三
李四
王五
赵六

4.数组的CRUD

常用方法: |方法|说明| |-|-| |shift()|该函数从从数组中删除第一项,并返回该删除项。| |unshift()|该函数向数组的开头添加一个或更多元素,并返回新的长度。| |pop()|该函数从数组中删除最后项,并返回该删除项。| |push()|该函数向数组尾部添加新元素,返回新长度。|

<script>
    var stus = ['张三','李四','王五','赵六'];
    //1.遍历
    stus.forEach(function(e,i){
        console.log("第"+(i+1)+"个学生是:"+e);
    })

    //2.添加新学生
    stus.push('张飞');
    console.log("----------添加新同学之后--------------");
    stus.forEach(function(e,i){
        console.log("第"+(i+1)+"个学生是:"+e);
    })

    //3.查询所有姓‘张’的学生
    console.log("----------查询姓张的同学--------------");
    stus.forEach(function(e,i){
        if(e.startsWith('张')){
            console.log("第"+(i+1)+"个学生是:"+e);
        }
    })

    //4.把赵六改为赵云
    console.log("----------把赵六改为赵云--------------");

    /*  注意:forEach是只读的。
    stus.forEach(function(e,i){
        if(e=='赵六'){
            e = '赵云';
            return;
        }
    });*/
    for(var i=0;i<stus.length;i++){
        if(stus[i]=='赵六'){
            stus[i]='赵云';
            break;
        }
    }

    stus.forEach(function(e,i){
        console.log("第"+(i+1)+"个学生是:"+e);
    })

    //5.删除王五。
    //先找到王五的下标。
    var pos = stus.indexOf('王五');
    stus.splice(pos,1);
    console.log('---------删除王五之后-----------');
    stus.forEach(function(e,i){
        console.log("第"+(i+1)+"个学生是:"+e);
    })

</script>
运行结果:

5.数组的排序

javascript内置的sort函数是多种排序算法的集合,数组在原数组上进行排序。JavaScrip对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序。 例如:

<script>

    var numbers = [12,45,67,8,10,22,11,35,78,43];

    console.log("-------------排序之前---------------");
    numbers.forEach(function(e,i){
        console.log(e);
    })
    numbers.sort();
    console.log("--------------排序之后--------------");
    numbers.forEach(function(e,i){
        console.log(e);
    })

</script>

运行结果:

我们发现默认的排序算法是按照字符的ASCII码排序,并不是按照数值大小排序,我们需要自定义排序算法。

改写如下:

<script>
    //自定义排序算法 
    function mySort(x,y){
        return x-y;
    }
    var numbers = [12,45,67,8,10,22,11,35,78,43];

    console.log("-------------排序之前---------------");
    numbers.forEach(function(e,i){
        console.log(e);
    })

    numbers.sort(mySort); //使用自定义排序算法

    console.log("--------------排序之后--------------");
    numbers.forEach(function(e,i){
        console.log(e);
    })

</script>

运行结果:

6.splice与slice的区别

splice和slice是数组里的两个重要的方法,其splice和slice的区别为:

splice改变原数组,除了可以删除之外,还可以插入。

   let citys = ['北京','上海','广州','深圳','成都','武汉','西安'];

   //1.splice会改变原数组,他通过删除或者替换现有元素或者原地添加新的元素来修改数组,并且以数组形式返回被修改的内容。有三个参数
    citys.splice(2,1); //删除广州
    console.log(citys);
    citys.splice(3,1,'佛山','东莞');//删除成都后,插入'佛山'和'东莞'
    console.log(citys);

运行结果:

(6) ['北京', '上海', '深圳', '成都', '武汉', '西安']
(7) ['北京', '上海', '深圳', '佛山', '东莞', '武汉', '西安']

slice返回由start和end决定的一个浅拷贝的新数组,原数组不会改变。

let citys = ['北京','上海','广州','深圳','成都','武汉','西安'];
let arr = citys.slice(0,3);
console.log(arr);
arr = citys.slice(-3);
console.log(arr);

运行结果:

(3) ['北京', '上海', '广州']
(3) ['成都', '武汉', '西安']
(7) ['北京', '上海', '广州', '深圳', '成都', '武汉', '西安']

7.查找元素的四种方式


    let students = ["张三","李四","王五","赵六","孙七","吴用","刘备","李白","赵六"];
    let target = "赵六";
    //1.使用indexOf 返回第一个元素的下标
    let pos  = -1
    if((pos = (students.indexOf(target))) !==-1){
        console.log("获得下标是:"+pos);
        console.log("找到元素:"+target);
    }

    //2.使用includes返回布尔
    if(students.includes(target)){
        console.log("找到元素:"+target);
    }

    //3.使用find,返回元素
    let obj = students.find((value,index)=>{
        return value === target
    })
    //console.log(obj);
    if(obj!== undefined){
        console.log("找到元素:"+target);
    }

    //4.使用some,返回布尔
    let flag = students.some((value,index)=>{
        return value === target;
    })

    if(flag){
        console.log("找到元素:"+target)
    }

运行结果:

获得下标是:3
找到元素:赵六
找到元素:赵六
找到元素:赵六
找到元素:赵六