js的一些总结

北城余情 提交于 2019-12-10 15:18:17

最近突然发现之前写得好多代码都是一坨屎啊==

比如在数组中我使用(for .. in)去遍历,才发现自己的一些错误,在vue页面中使用了json.parse的类似操作。。

以后要好好的学习啊,不能再犯一些低级小错误了。

一、数组常见的15种操作

1.遍历数组

(1)方法一:

for...of循环

const numbers = [1, 3, 5];

for (const num of numbers) {
  console.log(num);
}
// 1
// 3
// 5

可以使用break语句可以停止遍历

(2)方法二:

for循环

const numbers = [1, 3, 5];

for (let i; i < numbers.length; i++) {
  console.log(numbers);
}
// 1
// 3
// 5

可以随时使用break语句停止遍历。

(3)方法三:

array.forEach()方法

array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。

在每次遍历中,都使用以下参数调用callback(item [, index [, array]]):当前遍历项,当前遍历索引和数组本身。

const numbers = [1, 3, 5];

numbers.forEach(function callback(item, index) {
  console.log(value, index);
});
// 1, 0
// 2, 1
// 5, 2

不能中断array.forEach()迭代。

 2.数组的映射,得到新数组,不改变原素组

(1)Array.map()方法

array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。

在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身,并应该返回新项。

例: 每个数组元素加1

const numbers = [1, 3, 5];

const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});

newNumbers; // => [2, 4, 6]

array.map()创建一个新的映射数组,而不改变原始数组。

 (2)Array.from方法

Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。

在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。

例:

const numbers = [1, 3, 5];

const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);

newNumbers; // => [2, 4, 6]
  • Array.from()创建一个新的映射数组,而不改变原始数组。

  • Array.from()更适合从类似数组的对象进行映射。

 3.数组的简化

Array.reduce() 方法

array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。

在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器,当前项,索引和数组本身且应该返回累加器。

例:数组求和

const numbers = [2, 0, 4];

function summarize(accumulator, number) {
  return accumulator + number;
}

const sum = numbers.reduce(summarize, 0);

4.数据的连接

(1)array.concat() 方法

array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。

const arr1 = ['1', '2'];
const arr2 = ['3', '4'];

const newArr = arr1.concat(arr2);

newArr; // => ['1', '2', '3', '4']

(2)利用数组的展开操作符来得到新数组

[...array1, ...array2]

const arr1 = ['1', '2'];
const arr2 = ['3', '4'];

const numbers = [...arr1, ...arr2];

numbers; // => ['1', '2', '3', '4']

5.获取数组的片段

array.slice() 方法

array.slice([fromIndex [,toIndex]])返回数组的一个片段,该片段从fromIndex开始,以toIndex结尾(不包括toIndex本身)。fromIndex可选参数默认为0toIndex可选参数默认为array.length。

const numbers = [1, 2, 3, 4];

const arr1 = names.slice(0, 2);
const arr2 = names.slice(2);

arr1; // => [1, 2]
arr2; // => [3, 4]

array.slice()创建一个新数组,而不改变原始数组。

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!