javascript

web前端

发布日期: 2021-08-12

更新日期: 2021-11-27

文章字数: 3.6k

阅读时长: 14 分

阅读次数:

JavaScript数组

JavaScript 数组概念

官方：数组是指一堆有序数据的集合。即数组能够处理多个数据，并保持一定的顺序。
数组是多个数据的”仓库”。一个数组可以保存并管理多个数据。数据的保存顺序是根据下标来决定的
数组也是一个对象
- 它和我们普通对象功能类似，也是用来存储一些值的
- 不同的是普通对象是使用字符串作为属性名的，而数组时使用数字来作为索引操作元素

一维数组的定义和使用

定义

方式一：
//创建数组对象
var arr = new Array();
//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
//元素之间使用,隔开
var arr2 = new Array(10,20,30);
方式二：
//使用字面量来创建数组
var arr = [];//空数组
//使用字面量创建数组时，可以在创建时就指定数组中的元素
var arr1 = [1,2,3,4,5,10];

索引下标

概念：本质是一个数字。每个数组中的数据都有一个下标。下标决定了该数据在数组中的位置。同时我们也是利用下标来对数据进行后续的处理。
原理：下标从0开始。下标为0指的是第一个数据，即数组中从左往右的第一个。后续数据的下标依次递增1。第二个数据的下标为1，第三个数据的下标为2.第i个数据的下标为i-1。最后一个数据的下标为length-1

数组长度

概念：数组的长度指的数组中包含的数据个数

//使用length获取数组长度
//语法： 数组变量名.length

如果修改的length大于原长度，则多出部分会空出来
如果修改的length小于原长度，则多出的元素会被删除,在末尾删除
清空数组，将数组长度length置为0
添加数据
- 向数组的最后一个位置添加元素
- 语法：数组[数组.length] = 值;

数组的基本使用

示例数组
```
var scores = [59,45,73,89,61];
```

获取指定下标的数据

//语法 ：数组变量名[下标]
//例如：获取下标为0的数据
var s = scores[0];
var data = scores[5];
//获取不存在的下标
console.log(s);
console.log(data); undefined

修改指定下标的数据

//数组变量名[下标]= 新数据;
//例子：将下标为0的数据改为60
scores[0] =60;

数组的遍历(获取数组中的每个数据)

所谓的遍历数组，就是将数组中所有的元素都取出来

//方式一
//for循环遍历
for(var i=0;i<数组长度；i++){
    console.log(数组名[i]);
}
//例子： 
for(var i=0;i<scores.length;i++){
    scroes[i];
}

数组的应用

获取数组中的最大值最小值

var number = [45, 12, 89, 92, 53, 89, 89, 61];
var max = number[0];
var min = number[0];
for (var i = 0; i < number.length; i++) {
    if (max < number[i]) {
        max = number[i];
    }
    if (min > number[i]) {
        min = number[i];
    }
}

数组的倒序存放

//方式一：在原数组中进行操作
var sort=[3,4,21,9,6];
var temp;
for(var i=0;i<sort.length/2;i++) {
    temp=sort[i];
    sort[i]=sort[sort.length-i-1];
    sort[sort.length-i-1]=temp;
}
//方式二：创建一个新数组，将原数组中的数据，倒序添加到新数组中

多个数组合并

//创建一个新数组，将所有的数组中的数据依次添加到新数组中

冒泡排序

//从数组的第一个数开始，相邻之间相互比较，将比较中较大的数与较小的数交换位置，最终得到从小到大的排列；
var tab=[2,34,45,23,3332,434,21,22];
for (var i = 0; i < tab.length - 1; i++) {
    for (var j = 0; j < tab.length - i - 1; j++) {
        if (tab[j] > tab[j + 1]) {
            temp = tab[j];
            tab[j] = tab[j + 1];
            tab[j + 1] = temp;
        }
    }
}

质数判断

// 方式一
var num = Number(prompt("请输入一个数："));
for (var i = 2; i < num; i++) {
    if (num % i == 0) {
        break;
    }
}
if (i == num) {
    alert("是质数");
}

// 方式二
var flag = true;
for (var j = 2; j <= num / 2; j++) {
    if (num % j == 0) {
        flag = false;
    }
}
if (flag) {
    alert("是质数");
} else {
    alert("不是质数");
}

数组API

概念

应用编程接口(application programming interface)。指的编程语言已经写好的代码，开发人员直接可以使用，能够解决编程过程中遇到的常见的操作。
JavaScript针对数组提供了大量的api来简化对数组的常规操作。
每个api本质是一个内置函数。
已经用过的api：Math.random、Number()、parseInt()、parseFloat()等

数组相关API(ES3)

push:追加
pop:删除末尾数据
unshift:开头添加
shift:删除开头的数据
join:拼接成字符串
**splice**：数组指定位置的插入和删除
slice：获取数组的一部分开始结束下标
**indexOf**：获取数据第一次出现下标
lastIndexOf：获取数据最后一次出现下标
**sort**：数组排序
reverse()方法颠倒数组元素顺序，改变原始数组，不会创建新数组。
includes() 用来判断一个数组是否包含一个指定的值
concat()可以连接两个或多个数组，并将新的数组返回

详解

push():向数组的末尾添加一个或多个元素，并返回数组的新的长度,改变原数组

var arr2 = ["小明", "小张",  "小李"];
var length = array.push("小王");
console.log(arr2); // ["小明", "小张",  "小李","小王"]
console.log(length); // 4

pop():删除数组的最后一个元素,并将被删除的元素作为返回值返回,若是操作空数组，返回undefined 改变原数组

var arr1 = ["one", "two", "three", "four", "five"];
var pop_arr = array.pop();
console.log(arr1); // ["one", "two", "three", "four"]
console.log(pop_arr); // five

unshift():向数组开头添加一个或多个元素，并返回新的数组长度,向前边插入元素以后，其他的元素索引会依次调整改变原数组

var arr4 = ["red", "green", "blue"];
var length = arr4.unshift("yellow");
console.log(arr4); // ["yellow", "red", "green", "blue"]
console.log(length); // 4

shift():删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr3 = [1,2,3,4,5];
var shift_arr = array.shift();
console.log(arr3); // [2,3,4,5]
console.log(shift_arr); // 1

join():对数组元素以指定的分隔符进行分隔，参数为空，默认以“，”进行分隔。返回值是分隔后形成的字符串,原数组没有影响

var arr2 = [1,2,3,4,5];
console.log(arr2.join()); // "1,2,3,4,5"
console.log(arr2.join('+')); // "1+2+3+4+5"
//如果连接符为空字符串，则会无缝连接
console.log(arr2.join(""));//输出为12345；

**splice()**：从数组中添加/删除元素，返回被删除项，注意：这个操作会改变原始数组。参数有三个，一个是起始位置，第二个是删除的数量，第三个是要插入的项

var arr9 = ["apple","banner","orange","pair"];
var splices = arr9.splice(1,1);
console.log(arr9); // ["apple",,"orange","pair"]  他改变了原来的数组
console.log(splices); // ["banner"]  返回了要删除的项

var arr10 = [1,2,3,4,5,6];//插入任意的数量项
console.log(arr10.splice(6,0,7,8,9))//[]
console.log(arr10)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

var arr11 = [1,2,3,4,5,6];//向指定位置插入任意数量的项，并删掉任意数量的项
console.log(arr11.splice(1,2,7,8))//[2, 3]
console.log(arr11)//[1, 7, 8, 4, 5, 6]

slice()：获取数组的一部分

//语法：arrayObject.slice(start,end)
//1.截取开始的位置的索引，包含开始索引
//2.截取结束的位置的索引，不包含结束索引
var arr3 = ["one", "two", "three","four", "five"];
console.log(arr3.slice()); // ["one", "two", "three","four", "five"]
console.log(arr3.slice(2,3)); // ["three"]

第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

**indexOf()**：获取数据第一次出现的下标,如果数组没有该数据，得到-1

var arr=[1,23,3,2,53,4];
var 变量名= 数组变量名.indexOf(某数据);
var num1 = arr.indexOf(2); //3

lastIndexOf()：获取数据最后一次出现的下标，如果数组没有该数据，得到-1
```
var arr=[1,23,3,2,53,4,23];
var 变量名= 数组变量名.lastIndexOf(某数据);
var nus=arr.lastIndexOf(23);//6
```
- 应用：判断数据是否重复出现在数组中
- indexOf和lastIndexOf的下标不相等，则重复出现

**sort()**：数组排序,也会影响原数组，默认会按照Unicode编码进行排序

//1. 默认排序
数组变量名.sort();
//2. 自定义排序
数组变量名.sort((num1,num2)=>{
   //排序的规则代码
});
//例子:
//1. 按照自然顺序排序(0-9、a-z、A-Z)
arr.sort();
//2. 针对数字数组：从小到大
arr.sort((a,b)=>a-b);
//3. 针对数字数组：从大到小
arr.sort((a,b)=>b-a);
//4. 数组随机排序
arr.sort(()=>Math.random()-0.5);

reverse()方法颠倒数组元素顺序，改变原始数组，不会创建新数组。

var arr5 = [1,2,3,4,5];
var arr6 = arr5.reverse();
console.log(arr6); // [5,4,3,2,1]
console.log(arr6===arr5); // true

includes() 用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
```
var arr7 = [0, 1, 2];
console.log(arr8.includes(0)); // true
console.log(arr8.includes(3)); // false
```

concat()可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");

二维数组

概念

二维数组本质上是以一维数组作为数组元素的数组，即“数组的数组”
二维数组又称为矩阵，行列数相等的矩阵称为方阵。
对称矩阵a[i][j] = a[j][i]，对角矩阵：n阶方阵主对角线外都是零元素。

定义

字面量定义
```
var arrs=[[1,3,4],[2,5,6],[7,8,9]];
```

数组对象创建

var arrs=new Array();
for(var i=0;i<arrs.length;i++){
    arrs[i]=new Array();
}

使用

二维数组的遍历

var arrs=[[1,3,4],[2,5,6],[7,8,9]];
for(var i=0;i<arrs.length;i++){
    for(var j=0;j<arrs[i].length;j++){
        console.log(arrs[i][j]);
    }
}

ES5新增数组API

forEach

forEach()数组的专属遍历，可用于替代传统的for循环
forEach()方法需要一个函数作为参数

像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素

以实参的形式传递进来，我们可以来定义形参，来读取这些内容

arr.forEach(function(value , index , array){
     console.log(value);
     //value:指的是遍历的数据本身
    //index：指的是遍历的数据对应的下标
   // array:指的是遍历数组本身
});
//第二个和第三个参数可选，value参数必须写

流程：当遍历数组时，forEach会依次从数组中拿出一个数据，调用一次我们传过去的函数，吧数据以及对应的下标以及数组作为实际参数传过去进行处理

filter

遍历数组，根据条件拿到数组中满足条件的数据，并返回一个新的数组

arr.filter(function(value,index,array){
    //value:指的是遍历的数据本身
    //index：指的是遍历的数据对应的下标
    //array:指的是遍历数组本身
    如果value满足条件，需要return true 来告诉 filter 当前数据满足条件，不满足则 return false
});

map

遍历数组，会将每次遍历处理后return的数据加入到新数组中并返回。对原数组没有影响

  数组变量名.map(function(value,index,array){
      //value:指的是遍历的数据本身
      //index：指的是遍历的数据对应的下标
      //array:指的是遍历数组本身
      将处理后的数据return，  如果没有return，那么新数组中对应下标位置上的数据是undefined
  })；

some

遍历数组，用于判断某个遍历的数据是否满足指定的条件，只要有一个满足条件，则最终返回true,否则返回false。some返回的是布尔型数据

数组变量名.some(function(value,index,array){
    //value:指的是遍历的数据本身
   // index：指的是遍历的数据对应的下标
    //array:指的是遍历数组本身
    对value进行处理并判断，如果满足，就return true，否则return false
})；

every

遍历数组，用于判断某个遍历的数据是否满足指定的条件，必须每一个都要满足条件，最终返回true，否则false。即every函数返回的是布尔型数据

reduce

为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值(或者上一次回调函数的返回值)，当前元素值，当前索引，调用 reduce 的数组。

语法： arr.reduce(callback,[initialValue])

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

在没有初始值的空数组上调用 reduce 将报错

不给初始值的话，会取数组的第一项作为初始值

应用

数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

find

find（）是在数组中找第一个符合条件的元素

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined。

var stu = students.find(function(item){
  return item.id == 3
})
console.log(stu) 
// 打印结果为{ id: 3, name: '王五', age: 60, sex: 0, like: '下棋' }
stu.aaa = 100
console.log(stu)
//打印结果为{ id: 3, name: '王五', age: 60, sex: 0, like: '下棋',aaa:100 }

数组students竟然也被改变了，由此可见，find方法并没有创建新的内存地址，它所指向的仍然是数组students的内存地址。

find方法和filter方法不同的是，find方法返回的是数组中指定的数据项，而filter方法返回的是原数组过滤后的新数组。

时光路人

https://codehan045.github.io/posts/bd63f59d.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源时光路人 !

javascript

JavaScript作用域和预解析

2021-08-16 web前端

javascript 函数

javascript函数

函数定义、函数使用、函数参数、函数返回值、箭头函数、arguments

2021-08-10 web前端

javascript

JavaScript数组

JavaScript数组

JavaScript 数组概念

一维数组的定义和使用

定义

索引下标

数组长度

数组的基本使用

数组的应用

数组API

概念

数组相关API(ES3)

详解

二维数组

概念

定义

使用

ES5新增数组API

forEach

filter

map

some

every

reduce

应用

find

你的赏识是我前进的动力