【九月打卡】第19天 前端工程师2022版数组第一讲

课程名称：前端工程师2022版

课程章节：数组

课程讲师： elex

课程内容：

数组

1、数组array，用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作。

2、每种高级编程语言中都有数组，它是非常重要的一种数据结构。

数组的定义

1、用方括号[]包裹即可

var arr = [1,2,3,4];

2、使用内置构造函数

var arr = new Array(1,2,3,4);

3、定义一个长度为4的数组，但是这4项都是undefined

var arr = new Array(4);

4、直接[]，定义一个空数组对象

var arr = [];

下标越界

1、在JavaScript中，访问数组中不存在的项会返回undefined，不会报错（一般其他语言会报数组越界错误）；

2、如果更改数组项超过了length - 1，则会去创造这项

var arr = [2,6,7,3];

arr[6] = 4;

则 arr 就变成 (7)[2,6,7,3,empty x 2,4] (empty就是undefined)

3、 arr = [1,2,3,4, , , ,5,6,7,,,]; 这样也可以输出，输出结果就是

(12)[1,2,3,4,undefined,undefined,undefined,5,6,7,undefined,undefined] ,数组最后的逗号会省略。

数组类型的检测

1、数组用typeof检测结果是object，而不是array；

2、Array.isArray()方法可以用来检测类型是否为数组；（兼容到IE8）

3、还可以使用”鸭式辨型“检测方法。

数组的常用方法

数组的头尾操作

1、数组的头尾操作方法

方法 功能

push() 在尾部插入新项

pop() 在尾部删除

unshift() 在头部插入新项

shift() 在头部删除

push()

1、push()方法用来在数组末尾插入新项，参数就是要推入的项，arr.push(1);

2、如果要推入多项，可以用逗号隔开,arr.push(1,2,3);

3、调用push()方法后，数组会立即改变，不需要赋值，就是改变了原数组。

pop()

1、pop()方法用来删除数组的最后一项，不需传参数；

2、pop()方法不仅会删除数组的末项，而且会返回被删除的项的值。

unshift()

1、unshift()方法用来在数组头部插入新项，参数就是要插入的项；

2、如果要插入多项，可以用逗号隔开；

3、调用unshift()方法后，数组会立即改变，不需要赋值接收。

shift()

1、shift()方法用来删除数组中下标为0的项；

2、shift()方法不仅会删除数组的首项，而且会返回被删除的项。

数组的常用方法2

splice()

1、splice()方法用于 替换数组中的指定项:

 splice(开始下标index，替换多少项n（选择多少项被替换），替换的item, item, item...);

从下标index开始（包含index），选择n项目，替换成item

 var arr = ['0','1','2','3','4','5'];

 arr.splice(3,2,'7','8','9')  结果为['0','1','2','7','8','9','5']

2、splice()方法可以用于 在指定位置插入新项

 splice(开始下标index，0，替换的item, item, item...);//从下标index开始插入item

3、splice()方法可以用于 删除指定项

 splice(开始下标index，n); //没有替换项，从下标index开始，删除n项

4、splice()方法会以数组形式返回被删除的项

slice()

1、slice()方法用于得到子数组，类似于字符串的slice()方法；

2、slice(a，b)截取的子数组从下标a的项开始，到下标为b（不包含下标b的项）结束，不会更改原素组；

3、slice()如果不提供第二个参数，则表示从指定项开始，提取所有后续所有项作为子数组；

4、slice()方法的参数允许为负数，表示数组的倒数第几项。

join() 和 split() 方法

1、数组的join()方法可以是数组转化为字符串；

  字符串的split()方法可以使字符串转为数组。

2、join()的参数表示以什么字符串作为连接符，如果留空（完全不写参数，不是空字符串），则默认以逗号拼接，如同调用toString()方法；

3、split()的参数表示以什么字符拆分字符串，留空就表示把字符串每一项拆分成数组项；

3、字符串也可以使用方括号[]内写下标的形式，访问某个字符串，等价于chatAt()方法；

 '我爱学习'[index] == '我爱学习'.chatAt(index)

concat()方法

1、concat()方法可以合并连结多个数组，返回一个拼接起来的新数组。不会改变原数组

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

 var arr2 = [5,6,7,8];

 var arr3 = [9,10];

 //将数组2与数组3拼接到数组1后面

 var arr = arr1.concat(arr2,arr3); //[1,2,3,4,5,6,7,8,9,10]

2、拼接结果用返回值接收，concat()方法不会改变被拼接的每一个数组

reverse()

1、reverse()用来将一个数组中的全部项顺序置反；

2、直接改变原数组， 不用重新赋值。

indexOf() 和 includes()

1、indexOf()方法的功能是 搜索数组中的元素，并返回它首次出现的位置，如果元素不存在，则返回-1；

2、includes()方法的功能是判断一个数组中是否包含一个指定的值，返回布尔值;

3、它们判断元素时，都是判断是否是全等，即相当于===，值和类型都要一样，才相等。

random() 随机数

1、Math.random()，表示获取0~1的随机数(不包含1)；

 利用此特性，就可以构造 获取[a,b)区间的随机数公式

 var nub = Math.random() * (b - a + 1) + a; 

如果是要获取一个数组的随机下标，则可以写成

 var index = parseInt(Math.random() * arr.length);

注:一般其他语言random函数还有以下特性

1、random(max)，表示获取[0 - mar）的随机数，不包含max；

2、random(min，max)，获取[min,max)之间的随机数，包含min，不包含max。

冒泡排序 （从小到大排序）

1.4个数字，要比较3趟，每趟比较3+2+1=6次（因此每趟比较，就会确定一个数，下一趟比较就少比一个）

则 n 个数字，就需要比较 n-1 趟，共要比较 n(n-1)/2 次；

2、具体写法

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

// i 表示第几趟 ，从0开始，刚好i可以当做每趟 已经确立了第几项 的下标

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

//内循环表示每趟要比较多少次，总是最后一位往前比，每趟比上一趟少比一次

//因为前面第i项已经被确立，每趟只要 下标j > i 比较就行

for(var j = arr.length - 1; j > i; j --){

//如果 后面一个数字 比前面数小  就交换位置

if(arr[j] > arr[j - 1]){

   //设立一个中间值，好进行 值互换

   var temp = arr[j];

   arr[j] = arr[j - 1];

   arr[j - 1] = arr[j];

}

}

}

优化，设立一个flag值，表示一趟内是否有元素交换位置。

false表示 没换，true 表示有换，默认为false 表示没有交换了

如果变成true，就表示顺序还没确立，还有顺序需要对调，还要行下一次

如果保持false 则说明该趟顺序就已经是 从小到大，就不用再进行下一次循环，直接跳出循环，输出结果

var flag = false;

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

// 每次遍历标志位都要先置为false，才能判断后面的元素是否发生了交换

flag = false;

//内循环表示每趟要比较多少次，总是最后一位往前比，每趟比上一趟少比一次

//因为前面第i项已经被确立，每趟只要 下标j > i 比较就行

for(var j = arr.length - 1; j > i; j --){

//如果 后面一个数字 比前面数小  就交换位置

if(arr[j] > arr[j - 1]){

   //设立一个中间值，好进行 值互换

   var temp = arr[j];

   arr[j] = arr[j - 1];

   arr[j - 1] = arr[j];

   flag = true;

}

}

// 判断标志位是否为false，如果为false，说明后面的元素已经有序，就直接return

if(!flag) {

   break;

}

}

课程收获：

谢谢老师，讲的非常细致，很容易懂。