javaScript学习笔记（五） 「数组」

一、数组的概念

一个变量只能存储一个数据，如果我们有一组数据，比如1到100一百个数字，定义100个变量来存储就太痛苦了，这时候我们就需要数组来存储这样的数据。数组类似于数学概念中的中的集合。

二、数组的定义

数组为引用类型，创建时可通过构造方法创建。

堆和栈及索引思维

注意：堆和栈及索引思维,数组元素在内存中的存储方式，画内存图。

构造方法

1.无参构造函数，创建一空数组

var a1=new Array();

2.一个数字参数构造函数，指定数组长度（由于数组长度可以动态调整，作用并不大），创建指定长度的数组

var a2=new Array(5);

3.带有初始化数据的构造函数，创建数组并初始化参数数据

var a3=new Array(4,'hello',2.34);

字面量

4.使用方括号，创建空数组，等同于调用无参构造函数

var a4=[];

5.使用中括号，并传入初始化数据，等同于调用调用带有初始化数据的构造函数

var a5=[10];

三、数组的元素访问

3.1 语法：数组名[下标];

3.2 下标范围：0 - 数组名.length-1

JS数组元素的下标从0开始，数组中元素的序号，从0开始，下标最大取值是“长度-1”；

下标可以是变量或表达式。我们通过索引来访问数组中任意元素。

例：

var arr1=[1,2,3,4,5];

alert(arr1[0]); //输出结果是1，下标0代表第一个元素

alert(arr1[arr1.length-1]); //输出结果是5，下标length-1代表最后一个元素

arr1[2]=7; //通过下标修改了第三个元素的值

alert(arr1[2]); //输出结果是7

3.3 数组的长度：arr1.length

四、数组的遍历

通常操作数组时，每个元素都要操作一遍，这个时候我们会用循环来访问每一个元素，循环访问数组的每一个元素的过程就叫做数组的遍历。

4.1 for循环方式：

var arr1=[1,2,3,4,5,6];

for(var i=0;i<arr1.length;i++){

console.log(arr1[i]);

}

4.2 for in 方式：

var arr1=[1,2,3,4,5,6];

for(var i in arr1){

console.log(arr1[i]);

}

五、数组常见的API(数组的常见函数)

如何学习函数：关注3点

1.函数的含义2.函数的语法3.函数的返回值

会改变原数组的方法：

1.push()

语法：arr.push(元素1,元素2...)

返回：新数组的长度

含义：向arr数组尾部添加一个或者多个元素

    var arr = [12, 34, 45, 3];
    var n = arr.push(0, 9)
    console.log(n); //6
    console.log(arr); //这说明了会改变原数组

2.pop()

语法：arr.pop(); 没有参数

返回值：删除的那个元素

含义：删除数组中最后一个元素

    var arr = [12, 34, 45, 3];
    var res = arr.pop();
    console.log(res);//3
    console.log(arr); //会改变原数组 [12,34,45]

 

3.unshift()

语法：arr.unshift(元素1,元素2...)

返回：新数组的长度

含义：向arr数组头部添加一个或者多个元素

    var arr = [12, 34, 45, 3];
    var n = arr.unshift(0, 9)
    console.log(n); //6
    console.log(arr); //这说明了会改变原数组

4.shift()

语法：arr.shift(); 没有参数

返回值：删除的那个元素

含义：从数组头部删除一个元素

    var arr = [12, 34, 45, 3];
    var n = arr.shift();
    console.log(n);//12
    console.log(arr); //[34, 45, 3]

5.reverse()

含义：反转数组，数组逆序 [12,43,56]--->[56,43,12]

返回值：反转后的数组

语法:arr.reverse();

    var arr = [12, 34, 65, 3];
    var res = arr.reverse(); //返回的是逆序后
    console.log(arr);
    console.log(res);

6.sort()

含义：给数组元素排序 [12,65,32,45,1]---> [1,12,32,45,65]

返回值：排序后的数组

语法：arr.sort(function(a,b){returna-b}) 从小到大排序

arr.sort(function(a,b){returnb-a}) 从小到大排序

    var arr = [12, 34, 65, 3];
    var res = arr.sort(function (a, b) {
        return a - b;
    })
    console.log(arr);
    console.log(res);

不会改变原数组：

1、concat()

语法：arr.concat(arr1)

作用：数组拼接

返回值：拼接好的数组

    var arr1 = [12, 34, 5, 6, 3]
    var arr2 = [8]
    var res = arr1.concat(arr2)
    console.log(res);

2、join() （*****）

语法arr.join('连接符')

作用：将数组元素用连接符连接后，以字符串形式返回

返回值：连接好的字符串

    var arr3 = [23, 45, 67, 8]
    var res = arr3.join('-')
    console.log(res);//23-45-67-8
    console.log(arr3);

3、indexOf() （*****）

vararr = [12,34,46,3]

作用：查找元素首次出现的位置，

返回值：找到了返回该元素的下标位置，找不到返回-1

语法：arr.indexOf(元素)、

arr.indexOf(元素,下标);从下标位置开始查找

    var arr4 = [89, 34, 12, 45, 6, 34, 6]
    var res = arr4.indexOf(34);
    console.log(res);// 1
    console.log(arr4);

4、lastIndexOf()

作用：从后向前查找元素首次出现的位置，

返回值：找到了返回该元素的位置，找不到返回-1

语法：arr.lastIndexOf(元素)

arr.lastIndexOf(元素,下标);从下标位置开始查找

    var arr5 = [89, 34, 12, 45, 6, 34, 6]
    var res = arr5.lastIndexOf(34);
    console.log(res);//5

5、slice()：

作用：从数组中切出来一个数组

返回值：切出来的数组

语法：arr.slice(开始位置,结束位置) 包左不包右

var arr = [12,3,4,23,54] arr.slice(1,3)---->[3,4,23]

    var arr6 = [89, 34, 12, 45, 6, 34, 6]
    var res = arr6.slice(1,4);//[34,12,45]
    console.log(res);
    console.log(arr6);//[89, 34, 12, 45, 6, 34, 6]

六、数组相关案例

6.1 数组元素去重

// 带参数带返回值

        思路：

        1. 定义一个空的数组  var nwar = [];

        2. 我们可以从arr数组中进行遍历

        判断nwar中是否包含每次遍历过来的元素，

               如果不包含，就向这个nwar中放

          第一遍历： 12---> if(nwar.indexOf(arr[i])==-1)}{  将元素放到nwar中}

                       --> 在nwar中找不到 遍历过的元素  nwar = [12]

          第二次遍历：12 --> if(nwar.indexOf(arr[i])==-1)}{ 条件不成立 不元素放到nwar中} nwar = [12]

          第三次遍历：43 --> if(nwar.indexOf(arr[i])==-1)}{ 条件成立   元素放到nwar中}  nwar = [12,43]

    var arr = [12, 12, 43, 2, 12, 34, 2, 2];
    var newarr = [];
    for (var i = 0; i <= arr.length - 1; i++) {
        // 说明在newarr中没有每一次遍历过来的元素
        if (newarr.indexOf(arr[i]) == -1) {
            newarr.push(arr[i])
        }
    }
    console.log(newarr);

利用function：

function has(arr, n) {

var res; //用于存储判断结果，true或者false

for (vari = 0; i < arr.length; i++) {

if (arr[i] == n) {

res = true;

break;

} else {

res = false;

}

}

return res;

}

var a = [21,34,4,60,89,3]

console.log(has(a,60));

6.2 数组中是否包含某个元素

function has(arr, n) {

var res;

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

if (arr[i] == n) {

res = true;

break;

} else {

res = false;

}

}

returnres;

}

var arr = [21, 43, 56, 34, 12, 34, 60, 34, 2]

console.log(has(arr, 60))

 

6.3 数组中元素增加为原来的2倍

七、二维数组（了解）

数组元素为一维数组

数组遍历需要用for循环

      双重for循环进行遍历：外层循环控制arr的元素，内层循环遍历一维数组内的数组

    var arr = [[12,34,1],[34,2,5],[54,67,8],[23,56,8]]
    for(var i = 0;i<arr.length;i++){
        for(var j = 0;j<arr[i].length;j++){
            document.write(arr[i][j]+"&nbsp;")
        }
        document.write('<br>')
    }

八、随机函数

4.1 随机函数： Math.random()

4.2 a-b范围内包含a或者b的随机函数： parseInt(Math.random()*(b-a+1)+a)

九、排序

冒泡排序的原理：两个相邻元素进行比较，大的向后排，一轮下来，能确定一个最大值，放到最后面，通过多轮比较即可。

思考：var arr = [13,18,7,21,1]；这个数组进行排序，需要进行多少轮，每轮比较几次？

轮数：N-1

每轮的次数：N-1-i

    var arr = [12, 9, 6, 3];
    for (var i = 0; i < arr.length - 1; i++) {
        // 为什么要减i
        for (var j = 0; j < arr.length - 1 - i; j++) {
            // 两个相邻元素进行比较，前面元素大于后面了
            if (arr[j] > arr[j + 1]) {
                // 进行交换
                var t = arr[j]
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }

    console.log(arr);

var a = [6,5,4,7,3,8,2,9,1,0];

var t;

for(vari=0; i<a.length-1; i++){

for(varj=0; j<a.length-i-1; j++){

if(a[j]>a[j+1]){

t = a[j];

a[j] = a[j+1];

a[j+1] = t;

}

}

}

for(vari=0;i<a.length; i++){

console.log(a[i]);

}