数组基础

讽刺诗人
280 阅读9分钟

一、数组概念

计算机内存中一段连续的空间，使用一个变量名来表示

二、数组的定义

1，var arr = new Array(多个数据)

2，var arr = [多个数据]

数组的规律：

第一个值的下标永远是0;

最后一个值的下标永远是值的个数-1。

三、数组基本操作

  • 访问元素

    • 数组[下标]

  • 设置元素

    • 数组[下标] = 值

      • 下标原本存在

        • 修改

      • 下标原本不存在

        • 新增

  • 删除

    • delete 数组[下标]

      • 只能删除数据，无法删除小空间

  • 长度

    • 求长度

      • 数组.length

    • 设置长度

      • 数组.length = 数字

  • 遍历

    • 写for循环，循环每个元素的下标，条件通常使用数组.length

四、数组方法

  • unshift - 给数组开头添加一个或多个元素 - 返回数组新长度

    var arr = ['a','b','c'];
var l = arr.unshift('d')
console.log(arr) // ['d','a','b','c']
console.log(l) // 4

  • push - 给数组的末尾添加一个或多个元素 - 返回数组新长度

    var arr = ['a','b','c'];
var l = arr.push('d')
console.log(arr) // ['a','b','c','d']
console.log(l) // 4

  • shift - 删除数组的第一个元素 - 返回被删掉的元素

    var arr = ['a','b','c'];
var ele = arr.shift()
console.log(arr) // ['b','c']
console.log(ele) // 'a'

  • pop - 删除数组最后一个元素 - 返回被删掉的元素

  var arr = ['a','b','c'];
  var ele = arr.pop()
  console.log(arr) // ['a','b']
  console.log(ele) // 'c'

  • splice - 对数组做增、删、改的操作

    var arr = ['a','b','c']
// 改 - 参数1：开始下标；参数2：删除的个数；参数3：在删除的位置放上的新的元素 - 可以是多个
arr.splice(1,1,'d') // ['a','d','c']
// 增
arr.splice(1,0,'d') // ['a','d','b','c'] - 删除0个，就是不删除，然后放上新元素
// 删 - 第三个参数可以省略
arr.splice(1,0) // ['a','c']

  • concat - 数组的拼接

    var arr = ['a','b','c'];
var brr = ['d','e','f'];
// 将arr和brr合成一个更大的数组
var crr = arr.concat(brr) // ['a','b','c','d','e','f']
// 将一个或多个值和数组合并成一个大数组
var crr = arr.concat(1,2,3)// ['a','b','c',1,2,3]

  • sort - 数组的排序

    var arr = [9,5,3,7,1,6,4,8,2];
arr.sort() // 默认升序
console.log(arr) // [1,2,3,4,5,6,7,8,9]
arr.sort(function(a,b){ // a代表前面的数，b代表后面的数
    return a-b; // 升序 - 如果前面的数-后面的数>0，则交换位置
    return b-a; // 降序 - 如果后面的数-前面的数>0，则交换位置
})

  • reverse - 数组的反转

    var arr = ['a','b','c'];
arr.reverse()
console.log(arr) // ['c','b','a']

  • join - 将数组中的元素使用指定的连接符连接在一起

    var arr = ['a','b','c'];
var str = arr.join('_') // 参数是连接符
console.log(str) // a_b_c
​
var str = arr.join() // 默认使用逗号连接
console.log(str) // a,b,c
​
var str = arr.join('')
console.log(str) // abc

  • slice - 截取数组

    var arr = ['a','b','c','d','e','f'];
// 将数组中的 'b','c','d'截取出来，组成新的数组
var brr = arr.slice(1,4) // 参数1是开始截取的下标，参数2是截取的结束下标，结果中不包含结束下标对应的元素
console.log(brr) // ['b','c','d']
// 如果省略第2个参数，默认从开始下标截取到数组末尾
var crr = arr.slice(1)
console.log(crr) // ['b','c','d','e','f']

  • indexOf方法

    查找某个元素在数组中第一次出现的位置

    语法：

    arr.indexOf(元素,[开始查找的起始下标]);
# 参数1：将要查找的元素
# 参数2：可选项。从哪个下标开始往后查找
# 返回值：如果找到了，就返回这个元素在数组中的下标，如果没有找到，就返回-1

    例：

    var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); // 2 - 查找数字5在数组中第一次出现的下标
console.log(arr.lastIndexOf(5)); // 5 - 查找数字5在数组中最后一次出现的位置
console.log(arr.indexOf(5,3)); // 5 - 从下标2开始查找数字5在数组中第一次出现的位置
console.log(arr.lastIndexOf(5,4)); // 2 - 从下标4开始查找数字5在数组中最后一次出现的下标
console.log(arr.indexOf("5")); // -1 - 数组中全是数字，找不到字符串5，所以返回-1

  • forEach方法

    用于遍历数组

    语法：

    arr.forEach(function(值, 下标, 当前数组){
    // 代码段
});
# 在这个方法中需要传入一个函数参数，这个函数的参数说明如下：
# 参数1：数组遍历出来的每个值
# 参数2：可选项。数组遍历出来的每个值对应的下标
# 参数3：可选项。被遍历的当前数组

    例：

    var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

    使用说明：

    这个方法没有返回值，返回值为undefined，不会改变原来数组的值。

  • map方法

    遍历数组，并将每个元素经过函数处理后，形成新的元素，所有新元素组成新数组返回

    语法：

    arr.map(function(值，下标，当前数组){
    return 新的值 - 通常新的值是由旧的值处理以后得到
});

    例：

    var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

    使用说明：

    这个方法主要用于以同样的规则处理数组中的每个值，并组成新的数组返回

  • filter方法

    将数组中满足指定条件的值，组成新的数组返回

    语法：

    arr.filter(function(值, 下标, 当前数组){
    return 筛选条件
});

    例：

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(v, index) {
    return v>5
}); 
console.log(arr2); //[6, 7, 8, 9, 10]

    使用说明：

    使用方法和功能跟map方法很像，只是运行规则不一样。map方法中的函数，用于返回新的元素，而filter方法中的函数，根据返回true或false来筛选元素

  • reduce方法

    用于数组求和

    语法：

    arr.reduce(function(a, b){
    return a + b
});

    其中a第一次的时候，表示第一个元素，第二次开始表示上一次返回的数据，b第一次表示第二个元素，第二个开始表示第三个元素、第四个元素。。。

  • some - 判断数组中是否至少有一个元素是满足指定条件的，返回布尔值

    语法：

    布尔值 = 数组.some(function(v,i,a){
    return 条件;
})
// 上面的i和a是可选参数

    例：判断所有成绩中是否有不及格的成绩

    var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v<60;
});
console.log(bool); // true

    some内置的原理，遍历数组，判断每个值是否满足条件，有满足的就返回true，并break循环，遍历完以后都没有一个是满足的，返回false

    var arr = [68,95,78,56,86,63];
var k = 0
var bool = arr.some(function(v,i,a){
    k++
    return v<60;
});
console.log(bool); // true
console.log(k); // 4
​
var arr = [68,95,78,66,86,63];
var k = 0
var bool = arr.some(function(v,i,a){
    k++
    return v<60;
});
console.log(bool); // false
console.log(k); // 6

  • every - 判断数组中是否所有元素都满足指定的条件，返回布尔值

    语法：

    布尔值 = 数组.every(function(){
    return 条件
})
// 上面的i和a是可选参数

    例：判断是否所有成绩都及格了

    var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v>60;
});
console.log(bool); // false

    every内置的原理，遍历数组，判断每个值是否满足条件，有不满足的就返回false，并break循环，遍历完以后都满足，返回true

    var arr = [68,95,78,56,86,63];
var k = 0
var bool = arr.every(function(v,i,a){
    k++
    return v>60;
});
console.log(bool); // false
console.log(k); // 4
​
var arr = [68,95,78,66,86,63];
var k = 0
var bool = arr.every(function(v,i,a){
    k++
    return v>60;
});
console.log(bool); // true
console.log(k); // 6

  • find - 查找数组中第一个满足指定条件的值，找到返回值，找不到返回undefined

    语法：

    值 = 数组.find(function(v,i,a){
    return 条件
})
// 上面的i和a是可选参数

    例：找出所有成绩中第一个不及格的成绩

    var arr = [68,95,78,56,86,63];
var ele = arr.find(function(v,i,a){
    return v<60
})
console.log(ele); // 56

    find的原理，遍历数组，判断每个元素是否满足条件，满足就返回这个元素，并break循环，如果遍历完了都没有满足条件的，就返回undefined

    var arr = [68,95,78,56,55,86,63];
var k = 0
var ele = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(ele); // 56
console.log(k); // 4
​
var arr = [68,95,78,66,86,63];
var k = 0
var ele = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(ele); // undefined
console.log(k); // 6

  • findIndex - 查找数组中满足条件的第一个对应的下标，找到返回下标，找不到返回-1

    语法：

    下标 = 数组.findIndex(function(v,i,a){
    return 条件
})
// 上面的i和a是可选参数

    例：找出所有成绩中第一个不及格的成绩的下标

    var arr = [68,95,78,56,86,63];
var index = arr.find(function(v,i,a){
    return v<60
})
console.log(index); // 3

    findIndex的原理，遍历数组，判断每个元素是否满足条件，满足就返回这个元素的下标，并break循环，如果遍历完了都没有满足条件的，就返回-1

    var arr = [68,95,78,56,55,86,63];
var k = 0
var index = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(index); // 3
console.log(k); // 4
​
var arr = [68,95,78,66,86,63];
var k = 0
var index = arr.find(function(v,i,a){
    k++
    return v<60;
});
console.log(index); // -1
console.log(k); // 6

五、基础类型和引用类型

从内存空间的角度看待js中的数据，可以将数据类型分为两大类：

基础类型 - 简单类型:number/string/boolean/undefined

引用类型 - 复杂类型:object/function

区别

1.在内存中存储方式不同：

    基础类型将数据存储在 栈内存 空间中

    引用类型将数据存储在 堆内存 空间中，将堆内存中内存地址存储在栈内存中

2.在赋值的时候不同：

    基础类型赋值的时候，是将栈中存储的数据，复制一份放在另一个变量空间中

    引用类型赋值的时候，是将栈中存储的内存地址，复制一份放在另一个变量空间中 - 两个变量共用同一个堆内存的地址

3.在比较的时候不同：

    基础类型，相等比较，忽略类型，比较数据是否相等；全等比较，先比较类型是否相等，相等后再比较数据是否相同

    引用类型，无论相等比较还是全等比较，都是在比较栈中存储的内存地址是否相同

六、冒泡排序

相邻两个元素进行比较，将一个数组中的数字使用循环进行升序或降序的排列

var arr = [1, 2, 3, 4]
for (var b = 0; b < arr.length - 1; b++) {

    for (var a = 0; a < arr.length - 1 - b; a++) {

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

            var tmp = arr[a]

            arr[a] = arr[a + 1]

            arr[a + 1] = tmp

        }

    }

}

console.log(arr);

七、选择排序

降序：先找最大值，排在最左边，再找第二大的值，往左边靠...，已经排好的，不再参与比较

for (var b = 0; b < arr.length - 1; b++) {

    var maxIndex = b

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

        if (arr[b] < arr[a]) {

            maxIndex = a

        }

    }

    var tmp = arr[b]

    arr[b] = arr[maxIndex]

    arr[maxIndex] = tmp

}

console.log(arr);
avatar
文章
阅读
粉丝