前端知识点-数组方法汇总

一、管理元素

一、1 push

压入元素，直接改变元数组，返回值为数组元素数量
操作：操作原数组末尾，直接在原数组的末尾进行元素添加。
返回值：返回修改后的数组的新长度。

let arr = ["jeck", "marry"];
console.log(arr.push('marry1', 'marry2')); 
console.log(arr); //["jeck", "marry", "marry1", "marry2"]

一、2 pop

从末尾弹出元素，直接改变元数组，返回值为弹出的元素
操作：删除调用数组的最后一个元素，原数组长度减一，并返回删除的该元素。
返回值：原数组被删除的元素值。

let arr = ["jeck", "marry"];
console.log(arr.pop()); 
console.log(arr);["jeck"]

注意：

1，push() 方法可把它的参数顺序添加到 arrayObject 的尾部。

2，它直接修改 arrayObject，而不是创建一个新的数组。

3，push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

4，若原数组已经为空，则pop()不改变数组，并返回undefined值。

5，pop直接操作原数组，原数组长度会改变。

一、3 shift

从数组前面取出一个元素
操作：删除原数组的第一个元素，并将该元素作返回值。
返回值：原数组被删除的元素。

let arr = ["jeck", "marry"];
console.log(arr.shift()); 
console.log(arr);["marry"]

一、4 unshift

从数组前面添加元素
操作：直接操作原数组的开头，将参数顺序的加入原数组的开始位置，并将后面的元素向后移动。
返回值：返回修改后的原数组的新长度。

let arr = ["jeck", "marry"];
console.log(arr.unshift(('marry1', 'marry2')); 
console.log(arr);//["jeck", "marry", "marry1", "marry2"]

注意：

1，如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。

2，该方法会改变数组的长度。

3，unshift() 方法不创建新的创建，而是直接修改原有的数组，该方法会改变数组的长度。

4，unshift() 方法无法在 Internet Explorer 中正确地工作！

一、5 fill

使用fill 填充数组元素

console.dir(Array(4).fill("jeck")); //["jeck", "jeck", "jeck", "jeck"]

指定填充位置

console.log([1, 2, 3, 4].fill("jeck", 1, 2)); //[1, "jeck", 3, 4]

一、6 slice

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。
操作：从原来的数组中选取元素。
返回值：选定的元素重新组成的数组。

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 3)); // [1,2]  左闭右开

不设置参数是为获取所有元素

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.slice()); //[0, 1, 2, 3, 4, 5, 6]

注意：

1，返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

2，start(必需)。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

3，end(可选)。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

4，可用来复制数组，筛选需要的数组元素。

二、查找元素

二、1 indexOf

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.indexOf(2)); // 2 从前面查找2出现的位置

如下面代码一下，使用 indexOf 查找字符串将找不到，因为indexOf 类似于===是严格类型约束。

let arr = [7, 3, 2, '8', 2, 6];
console.log(arr.indexOf(8)); // -1

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
//从第二个元素开始向后查找
console.log(arr.indexOf(2, 3)); //4

二、2 lastIndexOf

使用 lastIndexOf 从后向前查找元素出现的位置，如果找不到返回 -1。

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.lastIndexOf(2)); // 4 从后查找2出现的位置

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
//从第五个元素向前查找
console.log(arr.lastIndexOf(2, 5));

//从最后一个字符向前查找
console.log(arr.lastIndexOf(2, -2));

二、3 includes

使用 includes 查找字符串返回值是布尔类型更方便判断

let arr = [7, 3, 2, 6];
console.log(arr.includes(8)); //true

我们来实现一个自已经的includes函数，来加深对includes方法的了解

function includes(array, item) {
  for (const value of array)
    if (item === value) return true;
  return false;
}

console.log(includes([1, 2, 3, 4], 3)); //true

二、4 find

find 方法找到后会把值返回出来

如果找不到返回值为undefined
返回第一次找到的值，不继续查找

let arr = ["rose", "jeck", "rose"];

let find = arr.find(function(item) {
  return item == "rose";
});

console.log(find); //rose

使用includes等不能查找引用类型，因为它们的内存地址是不相等的

const user = [{ name: "李四" }, { name: "张三" }, { name: "rose" }];
const find = user.includes({ name: "rose" });
console.log(find);

find 可以方便的查找引用类型

const user = [{ name: "李四" }, { name: "张三" }, { name: "rose" }];
const find = user.find(user => (user.name = "rose"));
console.log(find);

二、5 findIndex

findIndex 与 find 的区别是返回索引值，参数也是 : 当前值，索引，操作数组。

查找不到时返回 -1

let arr = [7, 3, 2, '8', 2, 6];

console.log(arr.findIndex(function (v) {
	return v == 8;
})); //3

附加：find原理

下面使用自定义函数

let arr = [1, 2, 3, 4, 5];
function find(array, callback) {
  for (const value of array) {
    if (callback(value) === true) return value;
  }
  return undefined;
}
let res = find(arr, function(item) {
  return item == 23;
});
console.log(res);

下面添加原型方法实现

Array.prototype.findValue = function(callback) {
  for (const value of this) {
    if (callback(value) === true) return value;
  }
  return undefined;
};

let re = arr.findValue(function(item) {
  return item == 2;
});
console.log(re);

三、合并拆分

三、1 join

使用join连接成字符串

join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

操作：将原数组的元素组合成一个字符串输出，以某个分隔符作为连接，若是参数缺省，则分隔符默认为‘，’。

返回值：将原数组以参数为分隔符组合输出为字符串，该字符串为返回值。

let arr = [1, 2,3];
console.log(arr.join('-')); //1-2-3 使用join可以指定转换的连接方式

三、2 split

split 方法用于将字符串分割成数组，类似join方法的反函数

arrayObject.splice(index,howmany,item1,.....,itemX)：删除（或者添加）从index开始的howmany个元素，用itemx来对删除的元素进行替换。

操作：index（包含index）决定操作起始位置，删除或者是添加，当howmany为0则不是删除，则从index开始依次添加itemx。

返回值：若是howmany不为0，则执行删除操作，splice函数返回值是删除的元素组成的数组。若是howmany为0，则返回值是空数组。

let price = "99,78,68";
console.log(price.split(",")); //["99", "78", "68"]

三、3 concat

concat方法用于连接两个或多个数组，元素是值类型的是复制操作，如果是引用类型还是指向同一对象

将参数数组作为参数添加到调用数组中，添加的不是参数数组而是参数数组的元素，顺序添加。

操作：不会改变原数组，会在原数组的副本中添加参数数组，并将添加后的原数组副本作为返回值。

返回值：添加参数数组元素之后原数组副本作为返回值。

let array = ["a", "b"];
let hd = [1, 2];
let cms = [3, 4];
console.log(array.concat(hd, cms)); //["a", "b", 1, 2, 3, 4]

也可以使用扩展语法实现连接

console.log([...array, ...hd, ...cms]);

三、4 copyWithin

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。

语法说明

array.copyWithin(target, start, end)

参数说明

参数 描述
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

const arr = [1, 2, 3, 4];
console.log(arr.copyWithin(2, 0, 2)); //[1, 2, 1, 2]

四、数组排序

四、1 reverse

反转数组顺序

let arr = [1, 4, 2, 9];
console.log(arr.reverse()); //[9, 2, 4, 1]

四、2 sort

sort每次使用两个值进行比较 Array.sort((a,b)=>a-b

返回负数 a 排在 b前面，从小到大
返回正数 b 排在a 前面
返回 0 时不动
默认从小于大排序数组元素

let arr = [1, 4, 2, 9];
console.log(arr.sort()); //[1, 2, 4, 9]

使用排序函数从大到小排序，参数一与参数二比较，返回正数为降序负数为升序

let arr = [1, 4, 2, 9];

console.log(arr.sort(function (v1, v2) {
	return v2 - v1;
})); //[9, 4, 2, 1]

下面是按课程点击数由高到低排序

let lessons = [
  { title: "媒体查询响应式布局", click: 78 },
  { title: "FLEX 弹性盒模型", click: 12 },
  { title: "MYSQL多表查询随意操作", click: 99 }
];

let sortLessons = lessons.sort((v1, v2) => v2.click - v1.click);
console.log(sortLessons);

四、3 排序原理

let arr = [1, 5, 3, 9, 7];
function sort(array, callback) {
  for (const n in array) {
    for (const m in array) {
      if (callback(array[n], array[m]) < 0) {
        let temp = array[n];
        array[n] = array[m];
        array[m] = temp;
      }
    }
  }
  return array;
}
arr = sort(arr, function(a, b) {
  return a - b;
});
console.table(arr);

五、循环遍历

五、1 for

根据数组长度结合for 循环来遍历数组

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

for (let i = 0; i < lessons.length; i++) {
  lessons[i] = `后盾人: ${lessons[i].title}`;
}
console.log(lessons);

五、2 forEach

forEach使函数作用在每个数组元素上，但是没有返回值。

下面例子是截取标签的五个字符。

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

lessons.forEach((item, index, array) => {
    item.title = item.title.substr(0, 5);
});
console.log(lessons);

五、3 for/in

遍历时的 key 值为数组的索引

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

for (const key in lessons) {
    console.log(`标题: ${lessons[key].title}`);
}

五、4 for/of

与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。

let lessons = [
	{title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
	{title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

for (const item of lessons) {
  console.log(`
    标题: ${item.title}
    栏目: ${item.category == "css" ? "前端" : "数据库"}
  `);
}

使用数组的迭代对象遍历获取索引与值（有关迭代器知识后面章节会讲到）

const hd = ['rose', 'jeck'];
const iterator = hd.entries();
console.log(iterator.next()); //value:{0:0,1:'rose'}
console.log(iterator.next()); //value:{0:1,1:'jeck'}

这样就可以使用解构特性与 for/of 遍历并获取索引与值了

const hd = ["rose", "jeck"];

for (const [key, value] of hd.entries()) {
  console.log(key, value); //这样就可以遍历了
}

取数组中的最大值

function arrayMax(array) {
  let max = array[0];
  for (const elem of array) {
    max = max > elem ? max : elem;
  }
  return max;
}

console.log(arrayMax([1, 3, 2, 9]));

六、迭代器方法

六、1 keys

通过迭代对象获取索引

const hd = ["rose", "jeck"];
const keys = hd.keys();
console.log(keys.next());
console.log(keys.next());

获取数组所有键

"use strict";
const arr = ["a", "b", "c", "rose"];

for (const key of arr.keys()) {
  console.log(key);
}

使用while遍历

let arr = ["rose", "jeck"];
while (({ value, done } = values.keys()) && done === false) {
	console.log(value);
}

六、2 values

通过迭代对象获取值

const hd = ["rose", "jeck"];
const values = hd.values();
console.log(values.next());
console.log(values.next());
console.log(values.next());

获取数组的所有值

"use strict";
const arr = ["a", "b", "c", "rose"];

for (const value of arr.values()) {
  console.log(value);
}

六、4 entries

返回数组所有键值对，下面使用解构语法循环

const arr = ["a", "b", "c", "rose"];
for (const [key, value] of arr.entries()) {
  console.log(key, value);
}

解构获取内容（对象章节会详细讲解）

const hd = ["jeck", "rose"];
const iterator = hd.entries();

let {done,value: [k, v]} = iterator.next();

console.log(v);

七、拓展

七、1 every

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真。

查看班级中同学的JS成绩是否都及格

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 }
];
const resust = user.every(user => user.js >= 60);
console.log(resust);

标题的关键词检查

let words = ['后盾', '北京', '培训'];
let title = '后盾人不断分享技术教程';

let state = words.every(function (item, index, array) {
  return title.indexOf(item) >= 0;
});

if (state == false) console.log('标题必须包含所有关键词');

七、2 some

使用 some 函数可以递归的检测元素，如果有一个返回true，表达式结果就是真。第一个参数为元素，第二个参数为索引，第三个参数为原数组。

下面是使用 some 检测规则关键词的示例，如果匹配到一个词就提示违规。

let words = ['后盾', '北京', '武汉'];
let title = '后盾人不断分享技术教程'

let state = words.some(function (item, index, array) {
	return title.indexOf(item) >= 0;
});

if (state) console.log('标题含有违规关键词');

七、3 filter

使用 filter 可以过滤数据中元素，下面是获取所有在CSS栏目的课程。

let lessons = [
  {title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
  {title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

let cssLessons = lessons.filter(function (item, index, array) {
  if (item.category.toLowerCase() == 'css') {
    return true;
  }
});

console.log(cssLessons);

我们来写一个过滤元素的方法来加深些技术

function except(array, excepts) {
  const newArray = [];
  for (const elem of array)
    if (!excepts.includes(elem)) newArray.push(elem);
  return newArray;
}

const array = [1, 2, 3, 4];
console.log(except(array, [2, 3])); //[1,4]

七、4 map

使用 map 映射可以在数组的所有元素上应用函数，用于映射出新的值。

获取数组所有标题组合的新数组

let lessons = [
  {title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
  {title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

console.log(lessons.map(item => item.title));

为所有标题添加上 后盾人

let lessons = [
  {title: '媒体查询响应式布局',category: 'css'},
  {title: 'FLEX 弹性盒模型',category: 'css'},
  {title: 'MYSQL多表查询随意操作',category: 'mysql'}
];

lessons = lessons.map(function (item, index, array) {
    item.title = `[后盾人] ${item['title']}`;
    return item;
});
console.log(lessons);

七、5 reduce

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。下面通过函数计算课程点击数的和。

第一个参数是执行函数，第二个参数为初始值

• 传入第二个参数时将所有元素循环一遍
• 不传第二个参数时从第二个元素开始循环

函数参数说明如下

参数	说明
prev	上次调用回调函数返回的结果
cur	当前的元素值
index	当前的索引
array	原数组

统计元素出现的次数

function countArrayELem(array, elem) {
  return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);
}

let numbers = [1, 2, 3, 1, 5];
console.log(countArrayELem(numbers, 1)); //2

取数组中的最大值

function arrayMax(array) {
  return array.reduce(
  	(max, elem) => (max > elem ? max : elem), array[0]
  );
}

console.log(arrayMax([1, 3, 2, 9]));

取价格最高的商品

let cart = [
  { name: "iphone", price: 12000 },
  { name: "imac", price: 25000 },
  { name: "ipad", price: 3600 }
];

function maxPrice(array) {
  return array.reduce(
    (goods, elem) => (goods.price > elem.price ? goods : elem),
    array[0]
  );
}
console.log(maxPrice(cart));

计算购物车中的商品总价

let cart = [
  { name: "iphone", price: 12000 },
  { name: "imac", price: 25000 },
  { name: "ipad", price: 3600 }
];

const total = cart.reduce(
	(total, goods) => total += goods.price, 0
);
console.log(total); //40600

获取价格超过1万的商品名称

let goods = [
  { name: "iphone", price: 12000 },
  { name: "imac", price: 25000 },
  { name: "ipad", price: 3600 }
];

function getNameByPrice(array, price) {
  return array.reduce((goods, elem) => {
    if (elem.price > price) {
      goods.push(elem);
    }
    return goods;
  }, []).map(elem => elem.name);
}
console.table(getNameByPrice(goods, 10000));

使用 reduce 实现数组去重

let arr = [1, 2, 6, 2, 1];
let filterArr = arr.reduce((pre, cur, index, array) => {
  if (pre.includes(cur) === false) {
      pre = [...pre, cur];
  }
  return pre;
}, [])
console.log(filterArr); // [1,2,6]

本文参考连接:
https://houdunren.gitee.io/note/js/4%20%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B.html#%E7%AE%A1%E7%90%86%E5%85%83%E7%B4%A0