JS笔记(1) 数组Array方法-白红宇

一、数组

一组数据的集合，数组里可以存储任何类型的数据

var ary = [2,'hello',true,{name:'珠峰'},['web前端']

索引：方便我们找到数组中的某一项，索引就是从0开始排列数字属性名

length：数组的长度，数组中元素个数,能读能写

length - 1 ：获取数组中最后一项

数组写法：
- 1. let arr = new Array;
- 1. let arr = [];

数组中获取每个值可以通过下标操作 [1,2.3][2] //=>3

清空数组：arr.length = 0; //=> 不要写arr = [];

小结：

// 向数组末尾添加arr.push(x)arr.splice(arr.length, 0, x)arr[arr.length] = x// 向数组开头添加arr.unshift(x)arr.splice(0, 0, x)// 删除数组开头第一项arr.shift()arr.splice(0, 1)// 删除数组最后一项arr.pop()arr.length--arr.length-=1arr.splice(-1)arr.splice(arr.length - 1, 1)// 清空数组arr.splice(0)arr.length = 0// 数组克隆arr.slice()/arr.slice(0)arr.concat()// 能够改变原数组的方法pushshiftunshiftpopsortsplicereverse复制代码

二、数组的方法

数组中提供了很多内置的属性方法（函数）供我们使用

这些数组方法都保存在对象上 Array.prototype

1）push：向数组的末尾添加一项或者多项

-  返回值：添加后的数组长度-  原数组 发生了改变（修改原数组）复制代码

2）unshift：向数组开头添加一项或者多项

- 返回值：添加后的数组长度ary.unshift(20,30);复制代码

3）pop：删除数组中最后一项

- 返回值：删除的那一项ary.pop()复制代码

4）shift：删除数组中的第一项

- 返回值：删除的那一项 - ary.shift()复制代码

5) splice：删除、添加直接修改原数组

返回值：删除的内容组成的新数组

如果第二位为0（即未删除），则返回空数组

// 情况一：只有一个参数// splice(x) 一个参数，从索引x处开始，一直删除到末尾// 返回值：删除后的内容 组成的新数组var arr = [10,20,30,50,60]var res4 = arr.splice(2); //一个参数，从索引1处开始，一直删除到末尾复制代码

// 情况二：两个参数// splice(x,y) 两个参数，从索引x处开始，一直删除y个// 返回值：删除的内容 组成的新数组var arr1 = [10,20,30,50,60,90];var res5 = arr1.splice(1,3);var arr2 = [10,20,30,50,60,90];var res6 = arr2.splice(1,0); // 从索引1开始，删除0个（即一个都不删除）复制代码

//  情况三：多个参数// splice(x,y,a,b,c)  从索引x开始，删除y个，将第三项及后面几项添加到删除的位置// 返回值：删除后的内容组成的新数组var n = [10,20,30,50,60,90];var res7 = n.splice(1,2,100,200,500); // 从索引1开始，删除两个（即20,30），将第三项及后面几项插入到删除的位置var n = [10,20,30,50,60,90];var res7 = n.splice(1,0,100,200,500); // 从索引1开始，一项都不删除，将第三项及后面几项插入到删除的位置var a = [10,20,30,50,60,90];var res8 = a.splice(a.length,0,2,3,4); // 向数组末尾添加var b = [10,20,30,50,60,90];var res9 = b.splice(0,0,2,3,4); // 向数组开头添加复制代码

6）indexOf & lastIndexOf 查找数组索引

1）indexOf 查找某项在数组中首次出现的索引位置
- 返回值：查找到的索引值
- 如果返回-1，数组中不存在这一项

var n = [10,20,30,50,60,20,30,90];var nn = n.indexOf(30); //=>2复制代码

2） lastIndexOf：查找某项，在数组中最后一次出现的索引位置
- 返回值：查找到的索引值
- 如果返回-1，数组中不存在这一项

var a = [10,20,30,50,60,20,30,90];var aa = a.lastIndexOf(30); //=>6复制代码

7）slice：截取

截取数组中的内容组成新数组，不会修改原数组

1）slice() slice(0) slice(null) slice(undefined) 完全克隆，返回值是克隆的新数组，不会影响原数组

var a = [10,20,30];var aa = a.slice(null); //返回克隆的新数组复制代码

2）slice(x) 从索引x处截取到数组末尾，将截取到的内容组成新的数组返回

var b = [10,20,30,40,50];var bb = b.slice(2); //30,40,50复制代码

3）slice(x,y) :从索引x处开始截取到y处，但不包括y这一项，将截取到的内容组成新的数组返回

var c = [10,20,30,40,50];var cc = c.slice(2,4); //30,40复制代码

4）slice(-x,-y) ：索引支持负数，slice(length-x,length-y)

var d = [10,20,30,40,50];var dd = d.slice(-2); //40,50var e = [10,20,30,40,50];var ee = e.slice(-3,-1); //20,30复制代码

8）sort：数组的排序

sort 排序原数组发生改变，从小到大排序（10以内）

sort默认排序是按照unicode编码来排序的

也可以使用自定义排序，sort中需要传入一个函数，形参（a,b）

arr.sort(function(a,b){ return 一定是返回一个数字 })

原理：a: 数组中的当前项 b：数组中的下一项
- return a - b 数组当前项减去下一项，如果返回值>0，则a，b交换位置，否则<=0，什么都不做，实现升序
- return b - a 数组下一项减去当前项，如果返回值>0，则a，b交换位置，否则<=0，什么都不做，实现降序
- return 1 如果返回值为一个数字（大于0），则数组当前项和后一项交换位置，即实现数组倒序（倒着排列）

var ary = [{ age: 1 }, { age: 12 }, { age: 13 }, { age: 11 }, { age: 21 }, { age: 18 }];ary.sort(function(a,b){    return a.age - b.age})console.log(ary); //0: {age: 1} {age: 11} {age: 12} {age: 1}3 {age: 18} {age: 21}复制代码

var a = [4,6,2,8,3,1]var aa = a.sort(); //=>1,2,3,4,6,8a === aa ; //=>true 返回值和原数组一样var b = [4,60,2,86,15,1,101]var bb = b.sort(); //=>1, 101, 15, 2, 4, 60, 86let arr = [10, 3, 18, 38, 48, 26];// 从小到大排序let ary = arr.sort(function (n,m) {console.log(n-m) //前一项数字减后一项数字的结果return n-m;  // -7 15 8 28 20 30 10 8 -22 -12});console.log(ary); //排序后的新数组// 从大到小排序arr.sort(function(n, m){    return m - n})console.log(arr)复制代码

// sort默认可以按照拼音字母顺序 排序var arr = [3, 1, 5, 'c', 'd', 'a', 'b']arr.sort()console.log(arr)['abc', 'ace', 'aae']['aae', 'abc', 'ace']// 从小到大排序arr.sort(function(a, b) {return a - b})// 从大到小arr.sort(function(a, b) {return b - a})复制代码

9） resverse ：倒序

将原数组倒着排列原数组改变返回的是原数组

var a = [3, 1, 24, 5, 11, 22, 12, 101];var ss = a.reverse(); //=>101, 12, 22, 11, 5, 24, 1, 3a === ss //=>true复制代码

10）concat：数组的拼接

concat()
- 返回值：拼接好的新数组，不会影响原数组

var a = [1,2,3];var b = [4,5,6];var ss = a.concat(b); //=>1,2,3,4,5,6复制代码

var a = [1,2,3];var b = [4,5,6];var ss = b.concat(a); //=>4,5,6,1,2,3复制代码

concat默认只能展开一层  var res = [30].concat([10, 15], 20, 'hello')  console.log(res) // [30, 10, 15, 20, "hello"] // concat默认只能展开一层数组var a3 = [1]var res = a3.concat([[2, 3, 4]], [5, 6])console.log(res) // [1, [2, 3, 4], 5, 6]复制代码

var a4 = [1,2,3];var ss1 = a4.concat(); //没有参数，相当于克隆一个新数组返回a4 === ss1 //=>false复制代码

11）join & toString：数组类型转换：将数组转换成字符串

toString()
- 返回值：转换后的字符串，不会影响原数组

var a = [1,2,3];var aa = a.toString();复制代码

join() ：可以通过指定的连接符或分隔符将数组中的每一项连接成为一个字符串

var b = [1,2,3];var bb = b.join();var bb1 = b.join('');var bb2 = b.join('+'); // 可以变成其他符号复制代码

12）evel：数组求和

eval():将字符串当做js 表达式来运行

相当于小型js解释器

var a = [1, 2, 3, 4, 5]// 对数组进行求和var str = a.join('+') // "1+2+3+4+5"console.log(eval(str)) // eval("1+2+3+4+5") => 15// eval("1*2*3*4*5")console.log(eval(a.join('*'))) // 120复制代码

13）forEach & map：数组遍历

1）把数组中的每一项取出来

// for循环var a = [1, 2, 3, 4, 5]for (var i = 0;i

2）forEach：数组内置遍历方法 forEach: 专门用来循环数组的。两个参数:

第一个参数: 函数-> function(){} function(数组中的每个值,索引值,整个数组){ }

第二个参数: 改变this指向,写啥是啥（如果写个null,undefined还是为window）

let arr = [true, 'haha', 10, {}, [1, 2, 3]];arr.forEach(function (item, i, all) {console.log(item);//数组中的每项// console.log(i); //索引// console.log(all); // 整个数组// console.log(this); //第二个参数如果没有，则this是window},arr);复制代码

3）map：循环数组，它的返回值为新的数组

function(item,i,all){ return 新数组的每项,长度和原始数组一样 }

var a = [1, 2, 3, 4, 5];var a2 = a.map(function(item,index,ary){// item 当前这一项// index 当前项的索引// ary原数组 ary === areturn item * 2; //每次指定的返回值被作为新数组中的内容});
    
const ul = document.getElementById('ul');let html = '';let arr = [1, '你好', '哈哈', '呵呵'];let newArr = arr.map(function (item, i) {return '' + item + '
';});ul.innerHTML = newArr.join('');console.log(newArr.join(''));console.log(newArr);复制代码

14）filter：数组过滤

数组的过滤，过滤条件成立的这个值

参数： function(item,i,all){ return 成立的布尔值 }

filter方法返回值为过滤后的新数组

//过滤大于10小于30的数字let arr = [3, 10, 18, 38, 48, 26];let ary = arr.filter(function (item, i) {    return item >= 10 && item < 30})console.log(ary);复制代码

15）some：检测数组中的元素是否满足指定条件

查看数组中某项数据是否满足某个条件，只要有一个满足条件，就返回true；如果所有项条件都不成立，则返回false，返回的是一个布尔值

some() 不会对空数组进行检测。

some() 不会改变原始数组。

let arr = [1, 2, 3, 4, 5];//查看数组中是否有6，明显没有，就返回falselet res = arr.some(function (item) {    return item === 6});console.log(res); // flase(数组中没有6)let res1 = arr.indexOf(6);console.log(res1); //-1(数组中没有6)复制代码

16）every：检测数组中是否每一项都满足指定条件

判断数组中是不是每一项都符合某个条件，全部都符合返回true，只要有一项不符合就返回false

参数：function ( item , i , all ) { return }

let arr = ['62',[],NaN,{},(function(){})(),/^$/,2333];let arr1 = [1,2,3,4,5,6];let res = arr.every(function(item,i){    return item;});let res1 = arr1.every(function(item,i){    return item;});console.log(res); //false (不是所有项都为true)console.log(res1); //true (所有项都为true)复制代码

一、数组

小结：

二、数组的方法

1）push：向数组的末尾添加一项或者多项

2）unshift：向数组开头添加一项或者多项

3）pop：删除数组中最后一项

4）shift：删除数组中的第一项

5) splice：删除、添加 直接修改原数组

6）indexOf & lastIndexOf 查找数组索引

7）slice：截取

8）sort：数组的排序

9） resverse ： 倒序

10）concat：数组的拼接

11）join & toString：数组类型转换：将数组转换成字符串

12）evel：数组求和

13）forEach & map：数组遍历

14）filter：数组过滤

15）some：检测数组中的元素是否满足指定条件

16）every：检测数组中是否每一项都满足指定条件

5) splice：删除、添加直接修改原数组

9） resverse ：倒序