【有价值】js常用数据处理方法

一、数组操作

1、map:依次遍历每一个元素,返回新数组,新数组元素由方法定义的return构成

1、filter:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,即return为true的数据。不更改原始数据

1、splice(startIndex, deleteNum, addItem1, addItem2):数组插入、删除和替换,直接改变当前数组

2、slice(start, end):返回截取的子数组,不包含end索引的元素

3、reverse(): 用于颠倒数组中元素的顺序

4、push:添加元素;添加到最后位置

5、unshift:添加元素;添加到起始位置

5、shift:删除元素;删除第一个元素

5、pop:删除数组;删除最后一个元素

6、concat:合并数组。arr1.concat(arr2)

7、join:在数组之间插入字符形成一个新的字符串,该方法返回的是一个字符串;与字符串方法split()互逆

8、filter:查找满足条件的元素并构造一个新数组返回。filter() 不会改变原始数组

9、ES6 find() 方法返回通过测试函数的第一个元素的值。找到返回true,如果没有值满足测试函数,则返回 undefined

9、findIndex()

find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined

findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1

[1, 2, 3, 4].find((value, index, arr) => {

})

10、reduce:Array.reduce方法是JavaScript中一个非常强大的数组方法,用于对数组中的每个元素执行一个由用户提供的回调函数,最终将所有元素汇总为一个单一的值。
用于:数组求和,数组求最大值,数组去重


array.reduce(callbackFn, initialValue);

callbackFn:这是一个回调函数,接收四个参数:accumulator(累计器),currentValue(当前值),currentIndex(当前索引,可选),和array(调用reduce的数组,可选)。

initialValue:可选参数,作为第一次调用callbackFn时的第一个参数的值。如果不提供initialValue,则数组的第一个元素将被用作初始值,并且从数组的第二个元素开始执行回调函数。


// 数组求和

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 输出: 15

11、every:用于判断所有元素是否都满足条件,返回boolean类型值

11、some:用于判断存在是否满足条件的至少一个元素,返回boolean类型值

12、include,查找是否存在某个元素, 返回布尔类型值
13、Array.from() ,从类数组对象或可迭代对象创建一个新的数组实例

  1. 将类数组对象转换为数组
// 将 DOM 节点集合转换为数组
const divs = document.querySelectorAll('div');
const divArray = Array.from(divs);
  1. 将字符串转换为字符数组
Array.from('hello'); 
// ['h', 'e', 'l', 'l', 'o']
  1. 从 Set 创建数组
const set = new Set(['a', 'b', 'c']);
Array.from(set); 
// ['a', 'b', 'c']
  1. 从 Map 创建数组
const map = new Map([[1, 'one'], [2, 'two']]);
Array.from(map); 
// [[1, 'one'], [2, 'two']]
  1. 使用映射函数
Array.from([1, 2, 3], x => x * 2); 
// [2, 4, 6]

// 等同于
Array.from([1, 2, 3]).map(x => x * 2);
  1. 生成数字序列
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

// 生成1-5的数组
Array.from({length: 5}, (v, i) => i + 1);
// [1, 2, 3, 4, 5]

#二、字符串操作

split:把一个字符串分割成字符串数组;如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割;不改变原始字符串;与数组的join互逆;

常用场景

字符倒序:String.split() 执行的操作与 Array.join 执行的操作是相反的

               message.split('').reverse().join('')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容