JavaScript--Array

数组

学习方法看三部分

参数、返回值、是否会改变原来的变量

基础数组

Array.concat()合并数组

​ 1、参数：要合并的数组 可以传一个以上的参数

​ 2、返回值：合并后的结果 返回的是一个新数组

​ 3、是否会改变原来的变量：不会

//Array.concat()方法，合并数组var arr = ['我的','名字','是','YH'];var arr1 = [1 , 2 , 3 , 4 , 5];var arr2 = [11 , 22 , 33];console.log(arr.concat(arr1));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5]console.log(arr);//['我的', '名字', '是', 'YH']console.log(arr.concat(arr1,arr2));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5, 11, 22, 33]

Array.indexOf()

1、参数：

​ 两个参数

​ 第一个参数代表，要找的元素

​ 第二个参数代表，查找的起始下标

​ 如果是负数，从末端开始计数，但是查找顺序还是从左到右

​ 2、返回值：返回下标值，不存在会返回-1

​ 3、是否会改变原来的变量：不会

//Array.indexOf()方法，查找数组对应内容的下标var arr = ['我的','名字','是','YH'];var plants = ['西红柿', '黄瓜', '芹菜', '豆角', '土豆','黄瓜'];console.log(arr.indexOf('名字'));//1console.log(arr.indexOf(' '));//-1console.log(plants.indexOf('黄瓜'));//1console.log(plants.indexOf('黄瓜',-6));//1console.log(plants.indexOf('黄瓜',2));//5console.log(plants.indexOf('黄瓜',-3));//5

Array.isArray()

1、参数：判断的对象

​ 2、返回值：Boolean值

​ 3、是否会改变原来的变量：不会

//Array.isArray()方法，判断是否是数组console.log(Array.isArray('123'));//falseconsole.log(Array.isArray(123));//falseconsole.log(Array.isArray([]));//true

Array.join()连接

​ 1、参数：需要添加的分割符号

​ 2、返回值：添加后的字符串

​ 3、是否会改变原来的变量：不会

//Array.join()方法，数组元素之间添加分割符号进行连接var arr = ['我的','名字','是','YH'];var arr1 = [1 , 2 , 3 , 4 , 5];console.log(typeof(arr.join('')));//stringconsole.log(arr.join(''));//我的名字是YHconsole.log(arr1.join('|'));//1|2|3|4|5console.log(arr1);//[1 , 2 , 3 , 4 , 5]

Array.pop()删除

​ 1、参数：无

​ 2、返回值：被删除的数组元素

​ 3、是否会改变原来的变量：会

//Array.pop()方法，从数组的末端进行删除，只要执行了pop()就会进行删除var arr = ['我的','名字','是','YH'];arr.pop();console.log(arr);//['我的', '名字', '是']console.log(arr.pop());//是 console.log(arr);//['我的', '名字']

Array.push()添加

​ 1、参数：需要添加的内容

​ 2、返回值：数组的长度

​ 3、是否会改变原来的变量：会

//Array.push()方法，从数组的末端进行添加var arr = ['我的','名字','是','YH'];var arr1 = [1 , 2 , 3 , 4 , 5];arr.push(arr1[0]);console.log(arr);//['我的', '名字', '是', 'YH', 1]arr.push('!');console.log(arr);//['我的', '名字', '是', 'YH', 1, '!']console.log(arr.push(arr1));//7,返回值是 数组的长度//Array.concat()方法，合并数组var arr = ['我的','名字','是','YH'];var arr1 = [1 , 2 , 3 , 4 , 5];var arr2 = [11 , 22 , 33];console.log(arr.concat(arr1));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5]console.log(arr);//['我的', '名字', '是', 'YH']console.log(arr.concat(arr1,arr2));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5, 11, 22, 33]

Array.shift()删除

​ 1、参数：无

​ 2、返回值：被删除的数组元素

​ 3、是否会改变原来的变量：会

//Array.shift()方法，从数组的前端进行删除，只要执行了shift()就会进行删除var arr = ['我的','名字','是','YH'];arr.shift();console.log(arr);//['名字', '是', 'YH']console.log(arr.shift());//名字 console.log(arr);//['是', 'YH']

Array.unshift()添加

​ 1、参数：需要添加的内容

​ 2、返回值：数组的长度

​ 3、是否会改变原来的变量：会

//Array.unshift()方法，从数组的前端进行添加var arr = ['我的','名字','是','YH'];var arr1 = [1 , 2 , 3 , 4 , 5];arr.unshift(arr1[0]);console.log(arr);//[1, '我的', '名字', '是', 'YH']arr.unshift(':');console.log(arr);//[':', 1, '我的', '名字', '是', 'YH']arr.unshift(arr1);console.log(arr);//[Array(5), ':', 1, '我的', '名字', '是', 'YH']// console.log(arr.unshift(arr1));//7,返回值是 数组的长度

Array.slice()切割

1、参数：

​ 不管是正数还是负数，方向都是从左到右进行切割

​ 正数：

​ 切割从0开始计数

​ 一个参数的情况下，保留头并且一直到最后部分

​ 两个参数，“保留头，不要尾”

​ 负数：

​ 从末端开始切割，1开始计数

​ 一个参数的情况下，保留头并且一直到最后部分

​ 两个参数，“保留头，不要尾”

​ 2、返回值：

​ “保留头，不要尾”的部分,并且是一个新数组（浅拷贝）

​ 3、是否会改变原来的变量：

​ 不会

//Array.slice()方法，切割数组，“保留头，不要尾”var arr = [1 , 2 , 3 , 4 , 5 , 6];console.log(arr.slice(0));//[1, 2, 3, 4, 5, 6]console.log(arr);//[1, 2, 3, 4, 5, 6]console.log(arr.slice(2));//[3, 4, 5, 6]console.log(arr);//[1, 2, 3, 4, 5, 6]console.log(arr.slice(2,4));//[3, 4]console.log(arr.slice());//[1, 2, 3, 4, 5, 6] 浅拷贝console.log(arr.slice(-2));//[5, 6]console.log(arr.slice(-5,-2));//[2, 3, 4]

进阶数组

数组的高级方法，会进行遍历，让每一个数组都进行对应的操作

Array.filter()过滤

​ 1、参数：

​ current 元素

​ index 元素下标

​ array 数组

​ 2、返回值：返回过滤掉之后的新数组 有return返回，就要有接受的容器

​ 3、是否会改变原来的数组：不会

//Array.filter() 过滤var arr = [1 , 2 , 3 , 4 , 5];var newArr = arr.filter(function(current,index,arr) {return current > 3;});console.log(newArr);//[4, 5]console.log(arr);// [1, 2, 3, 4, 5]

Array.forEach()添加

​ 1、参数：callback(current,index,array)，[option指定this对象]

​ 2、返回值：无

​ 3、是否会改变原来的变量：会

// Array.forEach() 遍历数组var arr = [1,2,3,4];/*forEach()里面放的是函数，有遍历数组的作用里面三个参数，第一个是值，第二个是对应的下标，第三个是数组*/arr.forEach(function(current,index,array){console.log(current,index,array);//[1, 2, 3, 4]});var obj ={name:"lisi",age:18}arr.forEach(function(){//this指向obj，对obj进行遍历console.log(this.name);//lisi},obj);

Array.map()

​ 1、参数：

​ current 元素

​ index 元素下标

​ array 数组

​ 2、返回值：返回一个新数组 有return返回，就要有接受的容器

​ 3、是否会改变原来的数组：不会

//Array.map() 让每一个数组元素进行对应的操作并返回var arr = [1 , 2 , 3 , 4 , 5];var arr1 = [3 , 4 , 5];var newArr = arr.map(function(current,index,arr) {return current*2;});console.log(arr);//[1, 2, 3, 4, 5] 不会改变原来的数组console.log(newArr);//[2, 4, 6, 8, 10]var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}];var newK = kvArray.map(function(current,index,arr) {var newArray = {};newArray[current['key']] = current['value'];return newArray;});console.log(newK);//[{1: 10}, {2: 20}, {3: 30}]

Array.reduce()叠加

​ 1、参数：

​ accumulator 累计器 可以设置初始值

​ current 元素

​ index 元素下标

​ array 数组

​ 2、返回值：返回过滤掉之后的新数组 有return返回，就要有接受的容器

​ 3、是否会改变原来的数组：不会

//Array.reduce() 合并 叠加var arr = [1, 2, 3, 4, 5];var newArr = arr.reduce(function (acc, current, index, arr) {console.log(acc);return acc + current;}, 10);console.log(newArr); //25console.log(arr); //[1, 2, 3, 4, 5]var str = "qwenrhtgfncgzhgnrertyuiytx";//字符串转换成数组var newStr = str.split("");console.log(newStr); //['q', 'w', 'e', 'n', 'r', 'h', 't', 'g', 'f', 'n', 'c', 'g', 'z', 'h', 'g', 'n', 'r', 'e', 'r', 't', 'y', 'u', 'i', 'y', 't', 'x']var count = newStr.reduce(function (acc, current, index, arr) {if (acc[current]) {acc[current]++;} else {acc[current] = 1;}return acc;}, {});console.log(count);

Array.sort()排序

​ 1、参数：function

​ 2、返回值：排序后结果

​ 3、是否会改变原来的变量：会

// Array.sort() 给数组排序var arr = [100,5,3,4,9];const months = ['March', 'Jan', 'Feb', 'Dec'];//直接使用sort方法，什么都不加，会按照开头进行排序console.log(arr.sort());//[100, 3, 4, 5, 9]console.log(months.sort());//['Dec', 'Feb', 'Jan', 'March']//使用函数返回值，进行大小排序//从小变大arr.sort(function(a,b) {return a-b;});console.log(arr);//[3, 4, 5, 9, 100]//从大变小arr.sort(function(a,b) {return b-a;});console.log(arr);//[100, 9, 5, 4, 3]//返回值为0，不会改变排序arr.sort(function(a,b) {return 0;});console.log(arr);//[100, 9, 5, 4, 3]//返回值为-1,倒序arr.sort(function(a,b) {return -1;});console.log(arr);//[3, 4, 5, 9, 100]

Array.flat()降维

​ 1、参数：

​ 需要进行降维的次数

​ 2、返回值：返回降维后的数组

​ 3、是否会改变原来的数组：不会

//Array.flat() 展开嵌套的数组，对数组进行降维var arr = [1 , 2 , [3 , [1 , 9] , 8] , 5 , 6];//三维数组console.log(arr.flat());//[1, 2, 3, Array(2), 8, 5, 6]三维==>二维console.log(arr.flat(1));//[1, 2, 3, Array(2), 8, 5, 6]三维==>二维console.log(arr.flat(2));//[1, 2, 3, 1, 9, 8, 5, 6]三维==>一维console.log(arr);//[1, 2, Array(3), 5, 6]

Array.includes()

​ 1、参数：

​ 需要进行判断的内容

​ 2、返回值：返回Boolean值

​ 3、是否会改变原来的数组：不会

//Array.includes() 判断数组里面是否有这个元素var arr = [1 , 2 , 3 , 4 , 5 , 6];console.log(arr.includes(5));//trueconsole.log(arr.includes(100));//false//Array.filter() 过滤var arr = [1 , 2 , 3 , 4 , 5];var newArr = arr.filter(function(current,index,arr) {return current > 3;});console.log(newArr);//[4, 5]console.log(arr);// [1, 2, 3, 4, 5]

Array.lastIndexOf()

​ 1、参数：

​ 要找的数组元素

​ 2、返回值：返回从末端开始找到的对应的下标 有return返回，就要有接受的容器

​ 3、是否会改变原来的数组：不会

//Array.lastIndexOf() 从末端开始找下标var arr = [1 , 2 , 3 , 4 , 1, 3];      console.log(arr.lastIndexOf(1));//4//查找到重复的元素function duplicates() {var newArr = [];for (var i = 0,len = arr.length;i < len;i++) {if (arr.lastIndexOf(arr[i]) !== arr.indexOf(arr[i])&&newArr.indexOf(arr[i]) === -1) {newArr.push(arr[i]);}}return newArr;}console.log(duplicates(arr));

Array.reverse()反向

​ 1、参数：无

​ 2、返回值：返回反向后的数组

​ 3、是否会改变原来的数组：会

//Array.reverse() 将数组进行反向var arr = [1 , 2 , 3 , 4];console.log(arr.reverse());//[4, 3, 2, 1]console.log(arr);//[4, 3, 2, 1]

Array.some()和every()

​ 1、参数：

​ 需要删除的下标，从0开始

​ 删除或者替换的个数

​ 需要进行替换的字符串。可以有很多个字符串，用逗号,进行分割

​ 2、返回值：返回删除的部分，删除是从下标开始

​ 如果只设置了一个参数，那么就会从开始的下标进行删除，直到最后

​ 如果设置两个参数，会根据下标和删除的个数进行删除

​ 3、是否会改变原来的数组：会

/*判断一个数组是不是纯数字数组some 数组中至少有一项符合return的测试 如果有 返回true 如果没有 返回false ||every 每一项都通过return的条件 返回true 有一项不通过就返回false  &&*/var arr = [1 , 2 , "3" , 4 , 5 , 6];var result1 = arr.some(function (current,index,arr) {return typeof current === 'number';});console.log(result1);//truevar result2 = arr.every(function (current,index,arr) {return typeof current === 'number';});console.log(result2);//false

Array.splice()替换

​ 1、参数：

​ 需要删除的下标，从0开始

​ 删除或者替换的个数

​ 需要进行替换的字符串。可以有很多个字符串，用逗号,进行分割

​ 2、返回值：返回删除的部分，删除是从下标开始

​ 如果只设置了一个参数，那么就会从开始的下标进行删除，直到最后

​ 如果设置两个参数，会根据下标和删除的个数进行删除

​ 3、是否会改变原来的数组：会

//Array.splice() 在对应的地方进行删除或者替换var arr = [1 , 2 , 3 , 4 , 5 , 6];//设置一个参数console.log(arr.splice(1));//[2, 3, 4, 5, 6]console.log(arr);//[1]//设置两个参数arr = [1 , 2 , 3 , 4 , 5 , 6];console.log(arr.splice(1,2));//[2, 3]console.log(arr);//[1, 4, 5, 6]//设置三个参数arr = [1 , 2 , 3 , 4 , 5 , 6];console.log(arr.splice(1,2,'100','56'));//[2, 3]console.log(arr);//[1, '100', '56', 4, 5, 6]arr = ['a','b','c','d','e','f'];var eTargetIndex = 1,colliIndex = 3,colliEle = arr[1];arr.splice(eTargetIndex,1);console.log(arr);//['a', 'c', 'd', 'e', 'f']arr.splice(colliIndex,0,colliEle);console.log(arr);//['a', 'c', 'd', 'b', 'e', 'f']