js_关于数组（三）

2019-02-08 本文已影响0人 mao77_

js_关于数组（三）

1. 认识数组

js的数组是参考python中的列表来的

如果需要存储和处理一些类似的数据的时候，用变量或者对象的属性来存储，就非常的不灵活
特点：
1. js中数组同一个数组，可以存储任意的类型
2. js中的数组的长度可以动态的更改
3. 对数组中的元素可以随意的进行增删改

1.1 - 遍历数组中的元素

普通的循环（for）

    var arr = [10, 20, 1, 4, 6, 9, 30];
    for(var i=0; i<arr.length; i++){
        console.log(arr[i]);
    }

    var arr = [10, 20, 1, 4, 6, 9, 30];
    var sum = 0;
    for(var i=0; i<arr.length; i++){
        sum += arr[i];
    }
    console.log(sum);    //80

用循环的方式打印出来下面的没有规律的图形

    //用循环额方式打印出来下面的没有规律的图形
    var arr = [7, 4, 1, 7, 10];
    for(var i=0; i<arr.length; i++){
        for(var j=0; j<=arr[i]; j++){
            document.write("*");
        }
        document.write("<br>");
    }

for....in

    var obj = {
        age : 20,
        sex : "male",
        name : "lisi",
        speak : function(){
        }
    }
    for(var attName in obj){
        console.log(attName, obj[attName]);
    }

    var arr = [10, 20, 1, 4, 6, 9, 30];
    for(var i in arr){
        console.log(i,arr[i]);
    }

也是用来遍历
for..in不是主要用来遍历数组，它主要用来遍历对象的属性的
用for..in遍历数组的时候，遍历出来的时候数组元素的索引，
一般不喜欢使用for...in来遍历数组

for...of遍历

    var arr = [10, 20, 1, 4, 6, 9, 30];
    for(var  e of arr){     //复制了一份给了变量e
        console.log(e);
    }               //10,20,....

    var arr = [{age :10}, {age:20}];
    for(var obj of arr){
        obj.age = 100;
        console.log(obj);
    }
    console.log(arr);    //100/100

不能更改下标值/索引值。但是可以更改对象属性值
是es6新增的一种遍历，只要有迭代器都可以使用for..of数组，字符串，set, map支持
注意：只能读取遍历到的元素，不能更改这个元素

数组的forEach方法可以用来遍历数组

数组提供的一种遍历自己的元素的功能

    var arr = [10, 20, 1, 4, 6, 9, 30];
    arr.forEach(function(element, index){    //回调函数
        console.log(element, index);
    })

    arr.forEach(function(element, index, array))

2. 数组的转换方法

2.1 - toString():

把数组转换成一个字符串

把每个元素转成字符串之后，再用逗号连接起来

    var arr = [10, 20, 30, 40];
    console.log(arr.toString());
    // 10,20,30,40

2.2 - join():

把数组转换成字符串，中间用的连接符号，可以自定义

    var arr = [10, 20, 30, 40];
    console.log(arr.join(" | "));
    //10 | 20 | 30 | 40

3. 数组的比较

    var arr1 = [1];
    var arr2 = [1];
    console.log(arr1 == arr2);   //false
    console.log(arr1 == "1");    //true
    console.log(arr1 == 1);    //true

    var arr = [{}, {age : 20}];
    console.log(arr.toString());
    //[object Object],[object Object]
    //任何对象默认转换成以上。

{}.toString会变成[object Object]

4. 数组的模拟栈的操作

栈：

其实就是操作数组尾部的元素

push

入栈

var arr = [10, 20, 30];
arr.push(100);
arr.push(100, 200, 300);
console.log(arr);
//(7) [10, 20, 30, 100, 100, 200, 300]

pop

删除数组最后一个元素，一次只能删除一个

var arr = [10, 20, 30];
arr.push(100);
arr.push(100, 200, 300);
console.log(arr);
arr.pop();
arr.pop();
console.log(arr);
//(5) [10, 20, 30, 100, 100]

队列:

操作的数组头部的元素

shift

删除头部的元素

var arr = [10, 20, 30];
arr.shift();
console.log(arr);
//(2) [20, 30]

unshift

向数组的头部添加元素

var arr = [10, 20, 30];
arr.unshift(1);
arr.unshift(100, 200);
console.log(arr);
//(6) [100, 200, 1, 10, 20, 30]

5. 数组中元素的倒置（翻转）

reverse

把数组中的元素倒置，翻转过来

var arr = [10, 20, 40, 33, 88];
arr.reverse();
console.log(arr);
//(5) [88, 33, 40, 20, 10]

indexOf(<num>[, fromIndex])

返回的是从左开始查找第一次碰到的元素索引
判断是否相等，是使用的严格相等===

var arr = [10, 20, 40, 40, 33, 88];
var i = arr.indexOf(40);
console.log(i);
// 2

var arr = [10, 20, 40, 44, 40, 33, 88];
var i = arr.indexOf(40, 3);   //3指从第3索引值位置开始查找
console.log(i);
// 4

[]指示可给可不给
<>必须有

lastIndexOf(<num>[, formIndex])

返回的是从右开始查找的元素索引

var arr = [10, 20, 40, 44, 40, 33, 40, 88];
var i = arr.lastIndexOf(40);
console.log(i);
// 6

indexOf/lastIndexOf

访问值不存在在数组中时：
将会++返回-1，即说明此元素，并不存在++

//如果返回-1，说明这个元素。不存在
var arr = [10, 20, 40, 44, 40, 33, 40, 88];
var i = arr.indexOf(1000);
console.log(i);
//-1

控制台调试方式

    // 控制台调试方式
    console.log(arr);   //日志
    console.table(arr);  //表格形式

6. 数组的连接

concat: 方法并不会修改原数组，而是连接后返回新的数组返回给调用者/ ——————合并

    var arr1 = [10, 20];
    var arr2 = [30, 40];
    var arr3 = [55, 77];
    var newArr = arr1.concat(arr2, arr3);
    console.log(newArr);    //返回新的，不改变原数组
    // for(var e of arr2){
    //     arr1.push(e);
    // }
    // console.log(arr1);  //(4) [10, 20, 30, 40]

    var arr1 = [10, 20];
    var arr2 = [30, 40];
    var a = [...arr1, ...arr2];  //...展开运算符
    console.log(a);

7. 数组的切片操作

slice(from, end): 从from位置开始切，切到end结束，
- 把切到的元素组成新的数组返回
- 不会对原数组造成任何的影响
- 前面包括，后面不包括
- 前闭后包
```
var arr = [10, 20, 40, 50, 60];
var a1 = arr.slice(0, 3);  //end-form就是切到的个数
console.log(a1);    //10， 20， 40
console.log(arr);
```
- 注意
  - 如果没有end，就直接切到最后面
  - 如果from也省略，表示从0开始切，这个时候，其实是完成了原数组的复制。
  - 复制都是浅复制
  - 切片的时候，开始位置和结束位置都支持负值
  - -1就表示倒数第一个元素。-2同。
```
var arr = [30, 40, 50, 60, 70, 80, 30];
var i = arr.indexOf(30);
var j = arr.lastIndexOf(30);
var a2 = arr.slice(i+1, j);
console.log(a2);
```
splice(参数1, 参数2，参数3....):一个方法实现三种操作：添加，删除，替换，
- 参数1 ：从哪个位置开始操作数组中的元素
- 参数2：删除多少个元素，如果不删就是0
- [参数3们]：表示添加的元素
```
var arr = [10, 20, 30, 40, 50, 60, 70];
//删除操作
console.log(arr.splice(2, 3));
arr.splice(0, 0, 100, 200, 300);
console.log(arr);
```

8. 数组的排列算法

需要对数组中的元素进行排序

冒泡排序

var arr = [10, 2, 3, 8, 20, 9];
for(var j=0; j<arr.length-1; j++){
    for(var i=0; i<arr.length-1-j; i++){
        if(arr[i] > arr[i+1]){
            var temp = arr[i];
            arr[i] = arr[i+1];
            arr[i+1] = temp;
        }
    }
}
console.log(arr);

插入排序
选择排序
希尔排序
归并排序
快速排序

9. JS自带的排序

sort: 默认情况是按照字符串来进行排序的

sort永远是把“小”的放前面，“大”的放后面

/*
如果参数函数的返回值
>0      认为a > b
=0      认为a == b
<0      认为a < b
 */
var arr = [10, 2, 3, 8, 20, 9];
arr.sort(function(a, b){
    return a-b;
    // if(a > b){
    //     return 1;
    // }else if(a == b){
    //     return 0;
    // }else{
    //     return 1;
    // }
});
console.log(arr);   //数字的写法排序

10. 判断数组的类型

instanceof

arr instancceof Array
一般不建议使用，容易有bug

var arr = [];
function foo(arr){
    if(!(arr instanceof Array)) return; //判断数组类型
    var a = arr.slice(0);
}
foo(10);//不判断会出错

Array.isArray(arr)

==直接定义在函数对象上的方法，就叫静态方法==
函数名.静态方法（）

console.log(Array.isArray(arr));  
console.log(typeof arr);   //object
console.log(Object.prototype.toString.call(arr));  //object array

11. 二维数组

JS中的二位数组，并不是真正的二维数组，使用一维数组模拟出来的

var arr = [[], []]; //多维数组/二维数组

    var arr = [
        [10, 20],
        [100, 200],
        [300]
    ];   //多维数组/二维数组
    // console.log(arr[0][0]);    //10
    for(var i=0; i<arr.length; i++){
        // var a = arr[i];
        for(var j=0; j<arr[i].length; j++){
            console.log(arr[i][j]);
        }
    }    // 10, 20, 100, 200, 300

12. 数组的去重

    var arr = [10, 10, 10, 10, 20, 1, 3, 10, 20, 4, 4];
    function toHeavy(arr){
        for(var i=0; i<arr.length; i++){
            var num = arr[i];
            // for(var j=i+1; j<arr.length; j++){
            //     if(num == arr[j]){
            //         arr.splice(j, 1);
            //         j--;
            //     }
            // }
            for(var j=arr.length-1; j>=i+1; j--){
                if(num == arr[j]){
                    arr.splice(j, 1);   //从后往前
                }
            }
        }
    }
    function toHeavy1(arr){
        var set = new Set(arr);
        arr.length = 0;
        arr.push(...set);
    }
    toHeavy1(arr);
    console.log(arr);

13. 数组的一些其他方法

    //所有的数组，都增加一个可以计算所有的元素的和的功能
    Array.prototype.sum = function(){
        var sum = 0;
        for(var i=0; i<this.length; i++){    //this就是用户创建的那些数组
            sum += this[i];
        }
        return sum;
    }
    var arr = [10, 20];
    var arr2 = [20, 30];
    console.log(arr.sum());   //30
    console.log(arr2.sum());    //50

    var a = new Array(10, 20, 30);
    console.log(a.sum());       //60

js_关于数组（三）

js_关于数组（三）

1. 认识数组

1.1 - 遍历数组中的元素

普通的循环（for）

for....in

for...of遍历

数组的forEach方法可以用来遍历数组

2. 数组的转换方法

2.1 - toString():

2.2 - join():

3. 数组的比较

4. 数组的模拟栈的操作

栈：

队列:

5. 数组中元素的倒置（翻转）

6. 数组的连接

7. 数组的切片操作

8. 数组的排列算法

9. JS自带的排序

10. 判断数组的类型

11. 二维数组

12. 数组的去重

13. 数组的一些其他方法

猜你喜欢

热点阅读