7. 数组基本操作及案例

徐徐图之！

已于 2023-07-17 20:07:05 修改

阅读量79

点赞数

分类专栏：一起来 JavaScript 扎马步文章标签： javascript 前端开发语言

于 2023-07-17 19:34:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_55013922/article/details/131741981

版权

一起来 JavaScript 扎马步专栏收录该内容

17 篇文章

订阅专栏

案例----经典面试题

冒泡排序：（相邻）的两个数进行比较，符合条件，交换位置

选择排序：（依次）取一个元素与剩下所有元素进行比较，符合条件交换位置

冒泡排序如下

 //声明数组
 var arr = [9,6,15,4,2];

    //轮数
function fnBubbleSortFromSmallToBig(arr){

    for(var i = 1;i < arr.length;i ++){

        //从数组中取元素---遍历
        for( var j = 0;j < arr.length - i;j ++ ){

            if ( arr[j] > arr[j + 1] ){
                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    return arr;
}

    //声明数组
    var arr = [9,6,15,4,2];

function fnBubbleSortFromBigToSmall(arr){

    for(var i = 1;i < arr.length;i ++){

        //从数组中取元素---遍历
        for(var j = 0;j < arr.length - i;j ++){

            if(arr[j] < arr[j + 1]){

                var t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }

    return arr;
}

选择排序如下

function fnSelectFromSmallToBig(arr){  

    //遍历
    for(var i = 0;i < arr.length - 1;i ++){

        //遍历
        for(var j = i + 1;j < arr.length;j ++){

            if(arr[i] > arr[j]){

                var t = arr[i];
                arr[i] = arr[j];
                arr[j] = t;
            }
        }
    }

    return arr;
}

function fnSelectFromBigToSmall(arr){  

    //遍历
    for(var i = 0;i < arr.length - 1;i ++){

        //遍历
        for(var j = i + 1;j < arr.length;j ++){

            if(arr[i] < arr[j]){

                var t = arr[i];
                arr[i] = arr[j];
                arr[j] = t;

            }
        }
    }

    return arr;
}

数组的常用方法

常用的数组方法

操作内容	作用	返回值	是否影响原数组
unshift 前增	在数组前面添加元素	返回新增后数组的长度	是
push 后增	在数组后面添加元素	返回新增后数组的长度	是
shift 前删	删除数组中的第一个元素，一次只能删除一个	被删除的元素	是
pop 后删	删除数组中最后一个元素	被删除的元素	是
splice 改	在数组的任意位置进行增删改的操作	被删除的元素	是
slice 截	截取数组中指定范围的元素	拼接后的新数组	否
concat 拼	将新元素拼接到指定数组的末尾，如果新元素是一个数组，则去掉最外面的 [ ]将里面的内容进行拼接	拼接后的新数组	否
reverse 逆序排	将数组元素逆序存放	逆序后的数组	是
sort 按编码排	将数组中的元素，按字符编码从小到大排序	排序后的数组	是
join 连接符	将数组转为以指定连接符连接成的字符串
toString 转	这个不是数组的方法，是object对象的方法，数组继承到的方法	字符串	是

ES5新增【都不会影响原数组】

1. indexOf（元素，start）	查找元素在数组中第一次出现的下标位置，如果没有则返回 -1
2. lastIndexOf（元素，start）	查找元素在数组中从右到左查找第一次出现的下标位置，如没有找到，返回 -1
3. forEach（function （value, index ,array）{}）	遍历数组
4. map（function （value,index,array）{} ）	遍历数组，返回数组
5. some（function （value , index, array）{return ...}）	检测数组中的第一个元素，如果有一个元素的条件返回 true，则直接退出循环，返回true,如果所有元素都返回false时，最终返回 false
6. every（function （value,index,array{return ...}）	检测数组中的每一个元素，如果有一个元素的条件，返回false时，则直接退出循环，返回false，如果所有元素都返回true时，最终返回true
7. filter（function （value,index,array{return ...}）过滤条件；返回数组
8. reduce（function （prev,next,index,array）{return ...}）	归并
9. find（）	用于找出第一个符合条件的数组成员，它的参数是一个回调函数所有数组成员，依次执行该回调函数直到找出第一个返回值为true的成员，然后返回该成员，如果没有找到符合条件的成员，则返回unde

上菜

1. unshift 前增

//声明一个数组
var arr = [5,6,7,8,9];

//在前面新增一个元素
console.log(arr.unshift(true,[1,2,3],false)); //8

console.log(arr); //[true,[1,2,3],false,5,6,7,8,9]

2.push 后增

//声明一个数组
    var arr = [5,6,7,8,9];
//在前面新增一个元素
    console.log(arr.push(true,[1,2,3],false)); //8
    console.log(arr); //[5,6,7,8,9,true,[1,2,3],false]

3. shift 前删

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.shift()); //5
console.log(arr); //[6,7,8,9]

//如何删除全部？
while(arr.length){ //0
    arr.shift();
}
console.log(arr);

4.pop 后删

 //声明一个数组
    var arr = [5,6,7,8,9];
    console.log(arr.pop()); //9
    console.log(arr); //[5, 6,7,8]

5. splice 改

splice（start,delLength,newEle,newEle...）

start: 从哪个下标位置开始

delLength: 删除几个元素

newEle:新元素

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1)); //[6, 7, 8, 9]
console.log(arr); //[5]

//声明一个数组
var arr =  [5,6,7,8,9];
		
console.log(arr.splice(1,2)); //[6, 7]
console.log(arr); //[5,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1,2,true,[1,2],false)); //[6, 7]
console.log(arr); //[5,true,[1,2],false,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.splice(1,0,true,[1,2],false)); //[]
console.log(arr); //[5,true,[1,2],false,6,7,8,9]

6. slice 截

start（start , end）

start: 从哪里开始(包含)

end: 到哪里结束(不包含)

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.slice(1)); //[6，7，8，9]
console.log(arr); //[5,6,7,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.slice(1,4)); //[6，7，8]
console.log(arr); //[5,6,7,8,9]

// //声明一个数组
// var arr = [5,6,7,8,9];
// console.log(arr.slice(4,1)); //[]
// console.log(arr); //[5,6,7,8,9]

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.slice(-4,-1)); // [6, 7, 8]
console.log(arr); //[5,6,7,8,9]

7. concat 拼

//声明一个数组
var arr = [5,6,7,8,9];
console.log(arr.concat(-4,[1,[2,3]],-1)); //[5, 6, 7, 8, 9, -4, 1, [2,3], -1]
console.log(arr); //[5,6,7,8,9]

8. 复 copy || clone

面试题：至少写两种复制数组的方法

1.function copyArr(arr){
    return arr.slice(0);
}
function copyArray(arr){
    return arr.concat();
}


2.function cloneArr(arr){
    var list = [];
    for(var i = 0,len = arr.length;i < len;i ++){
        list[i] = arr[i];
    }
    return list;
}

9. reverse 逆序排

var arr = [5,6,7,8,9];
console.log(arr.reverse()); //[9,8,7,6,5]
console.log(arr); //[9,8,7,6,5]

10. sort 按编码排

sort(function(a,b){return a - b;}) : 按数字从小到大排序

sort(function(a,b){return b - a;}) : 按数字从大到小排序

var arr = [3,2,10,1,100,20];
console.log(arr.sort()); //[1,10,100,2,20,3]
console.log(arr); //[1, 10, 100, 2, 20, 3]

11. toString 转

**面试题：不是数组的方法，是Object对象的方法，数组继承到的方法

数字.toString(2-36) : 将数字转为指定进制的字符串

var i = 10;
console.log(i.toString(2)); //1010
console.log(i.toString(8)); //12
console.log(i.toString(16)); //a

数组.toString(): 将数组转为字符串

var arr = [1,2,3,4];
console.log(arr.toString()); //'1,2,3,4'
console.log(arr); //[1,2,3,4]

12. join 连接符

var arr = [1,2,3,4];
console.log(arr); //[1,2,3,4] 原数组
console.log(arr.join('+')); //'1+2+3+4'

ES5 新增【不会影响原数组】

1. indexOf（元素，start）: 要查找的那个元素在数组中第一次出现的下标位置，如果没有，则返回 -1
    var arr = [1,2,3,1,2,3,2,4,2,1];
    console.log(arr.indexOf(2,2)); //4    查找元素2， 从第二个开始数
    console.log(arr.indexOf(5)); // -1
2. lastIndexOf(元素，start) : 要查找的那个元素在数组中从右向左查找第一次出现的下标位置，如果没有找到，返回 -1
var arr = [1,2,3,1,2,3,2,4,2,1];
console.log(arr.indexOf(2,2)); //4
console.log(arr.indexOf(5)); // -1
console.log(arr.lastIndexOf(2)); //8
console.log(arr.lastIndexOf(2,2)); //1
console.log(arr.lastIndexOf(2,5)); //4

3.forEach(function(value,index,array){}) : 遍历数组

4.map(function(value,index,array){return ...}) : 遍历数组,返回数组

5.some(function(value,index,array){return ...}) : 检测数组中每一个元素，如果有一个元素的条件返回true，则直接退出循环，返回true; 如果所有元素都返回false时，最终返回false

6.every(function(value,index,array){return ...}) : 检测数组中每一个元素，如果有一个元素的条件返回false时，则直接退出循环，返回false。如果所有元素都返回true时，最终返回true.

7.filter(function(value,index,array){return ...}) : 过滤-条件，返回数组

8.reduce(function(prev,next,index,array){return ...}) : 归并
var arr = [99,100,89,59,98];
var sum = arr.reduce(function(prev,next){
    console.log(prev,next);
    // prev = 99  next = 100
    //prev = 199 next = 89
    // prev = 288 next = 59
    //prev = 347  next = 98
    //prev = 455
    return prev + next;
})
alert(sum);

var sum = arr.reduce(function(prev,next){
    console.log(prev,next);
    // prev = 0  next = 99
    //prev = 99 next = 89
    return prev + next;
},0)
alert(sum);