js数组和字符串的各种操作方法

156 阅读6分钟

数组和字符串的各种操作方法

数组的方法:

  • 新增或删除用push()、pop()、shift()、unshift()
  • 新增或删除一段用splice()
  • 截取一段用slice()
  • 查找用includes()、every()、some()、filter()、(find()、findIndex()只找第一个符合条件的)、indexOf()

上文只列举了部分案例,详细如下:

push()

push()可以将数据添加到数组的最后一个位置,不限制添加数量,添加多个内容用逗号隔开,加入后数组长度增加。(改变原数组)

let a = [1,2,3]; 
a.push(45); 
console.log(a);  // [1, 2, 3, 4, 5]

pop()

pop()会移除 (取出) 数组的最后一个元素。(改变原数组、有返回值)

let a = [1,2,3,4,5];
let b = a.pop(); 
console.log(a);  // [1, 2, 3, 4] 
console.log(b);  // 5

shift()

shift()会移除 (取出) 数组的第一个元素。(改变原数组、有返回值)

let a = [1,2,3,4,5]; 
let b = a.shift(); 
console.log(a);  // [2, 3, 4, 5] 
console.log(b);  // 1

unshift()

unshift()会将指定的元素添加到第一个位置,不限制添加数量。(改变原数组)

let a = [1,2,3,4,5]; 
a.unshift(10,20,30); 
console.log(a);  // [10, 20, 30, 1, 2, 3, 4, 5]

reverse()

reverse()会将数组反转。(改变原数组)

let a = [1,2,3,4,5]; 
a.reverse(); 
console.log(a); // [5, 4, 3, 2, 1]

slice()

slice()截取数组部份元素为一个新的数组,有两个必填参数,第一个是起始位置,第二个是结束位置。(不改变原数组,有返回值)

let a = [1,2,3,4,5]; 
let b = a.slice(2,4); 
console.log(b); // [3, 4]

splice()

splice()可以移除或插入一段数组的元素,包含了三个参数。(改变原数组,有返回值)

  1. 第一个是要移除元素的位置 (必填)
  2. 第二个是移除的长度 ( 选填,不填则第一个移除位置后方所有元素都被移除,填 0 则不会有元素被移除 )
  3. 第三个是要添加的内容 ( 选填 )
let a = [1,2,3,4,5]; 
a.splice(3,1); 
console.log(a);   // [1, 2, 3, 5] ( 4 被移除了 )
let a = [1,2,3,4,5]; 
let b = a.splice(3,1,10); 
console.log(a);   // [1, 2, 3, 10, 5] ( 4 被移除,移除位置插入10  )
console.log(b);   // 4 ( 返回被删除元素  )
let a = [1,2,3,4,5]; 
let b = a.splice(1,2,10,20,30); 
console.log(a);   // [1, 10, 20, 30, 4, 5] ( 2,3 被移除,移除位置插入10、20、30  )
console.log(b);   // [2, 3] ( 返回被删除元素 )
let a = [1,2,3,4,5]; 
a.splice(3,0,10); 
console.log(a);   // [1, 2, 3, 10, 4, 5] ( 没有元素被移除,位置插入元素 )

sort()

sort 方法用于对数组元素进行排序,并返回排序后的数组。sort 方法默认按照字符串 Unicode 码进行排序,而不是数值大小排序,因此需要提供比较函数,比较函数接受两个参数,分别代表第一个数据和下一个数据,并返回一个数值。

  • 如果比较函数返回值小于 0,a 将排在 b 之前,升序。
  • 如果比较函数返回值等于 0,a 和 b 的相对顺序保持不变。
  • 如果比较函数返回值大于 0,a 将排在 b 之后,降序。
const numbers = [5, 2, 4, 1]; 
numbers.sort((a, b) => a - b); 
console.log(numbers); // 输出: [1, 2, 4, 5]
const numbers = [5, 2, 4, 1]; 
numbers.sort((a, b) => b - a); 
console.log(numbers); // 输出: [5, 4, 2, 1]
const users = [
  { name: '小白', age: 12 },
  { name: '小兰', age: 15 },
  { name: '小红', age: 13 }
];

users.sort((a, b) => a.age - b.age);
console.log(users);
// 输出:
// [
//   { name: '小白', age: 12 },
//   { name: '小红', age: 13 },
//   { name: '小兰', age: 15 }
// ]

length()

length可以取得数组的长度 (所有元素的数量)。

let a = [1,2,3,4,5]; 
console.log(a.length);  // 5

fill()

fill()会把数组中的元素替换为指定的值,fill()有三个参数,第一个是准备要替换的内容 (必填),第二个是起始位置,第三个是结束位置。

let a = [1,2,3,4,5]; 
a.fill('x',1,3); 
console.log(a); // [1,'x','x',4,5]

find()

find()会将数组中每个元素带入函数做判断,返回第一个符合条件的元素,如果没有元素符合返回 undefined。

let a = [1,2,3,4,5]; 
console.log(a.find(item => item > 3)); // 4 
console.log(a.find(item => item < 0)); // undefined

findIndex()

find()会将数组中每个元素带入函数做判断,返回第一个符合条件的位置,如果没有元素符合返回 -1。

let a = [1,2,3,4,5]; 
console.log(a.findIndex(item => item > 3)); // 3 
console.log(a.findIndex(item => item < 0)); // -1

indexOf()

indexOf()会判断数组中是否包含某个值,有就返回位置,没有就返回 -1,有两个参数,第一个参数表示寻找的值 (必填),第二个参数表示开始判断位置 ( 选填 )。

let a = [1,2,3,4,5]; 
console.log(a.indexOf(4));  // 3 

filter()

filter()会将数组中每个元素带入函数做判断,符合条件则返回,返回所有符合条件数据的新数组。

let a = [1,2,3,4,5]; 
console.log(a.filter(item => item > 3));    // [4, 5] 
console.log(a.filter(item => item%2 == 0)); // [2, 4]

includes()

includes()会判断数组中是否包含某个值,如果有包含就返回 true,否则返回 false,有两个参数,第一个参数表示要判断的值 (必填),第二个参数表示从数组的哪个位置开始判断 ( 选填 )。

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

every()

every()会将数组中每个元素带入函数判断,全部符合返回 true,否则返回false。

let a = [1,2,3,4,5]; 
console.log(a.every(item => item > 0)); // true
console.log(a.every(item => item > 3)); // fasle

some()

some()会将数组中每个元素带入函数判断,只要有任意一个符合就返回 true,否则返回false。

let a = [1,2,3,4,5]; 
console.log(a.every(item => item > 4)); // true
console.log(a.every(item => item > 8)); // false

forEach()

forEach()会将数组中每个元素套用到指定的函数里进行运算,函数有三个参数,第一个参数表示每个元素的值 (必填),第二个参数为该元素的索引值 ( 选填 ),第三个参数则表示原本的数组 ( 选填 )。

let a = [1,2,3,4,5]; 
a.forEach((item, index, arr) => {     
    arr[index] = item * 10; 
}); 
console.log(a); // [10,20,30,40,50]

map()

map()会处理数组中每个元素,最后返回出一个新的数组,包含三个参数,第一个是每个元素的值 ( 必填 ),第二个是当前元素的索引值 ( 选填 ),第三个是当前的数组 ( 选填 )。

let a = [1,2,3,4,5]; 
let b = a.map(item => {     
    return item + 10; 
}); 
console.log(b); // [11, 12, 13, 14, 15]

join()

join()将数组中所有元素合成一个字符串,参数为间隔符。

let a = [1,2,3,4,5];
console.log(a.join(','));      // 1,2,3,4,5
console.log(a.join(''));    // 12345 

concat()

concat()可以将两个数组合并在一起。

let a = [1,2,3]; 
let b = [4,5]; 
let c = a.concat(b); 
console.log(c); // [1,2,3,4,5] 

flat()

flat()可以将一个多维数组的深度转成一维 (扁平化),它有一个选填的参数,代表要转换的深度数字,默认为 1,如果深度有很多层,可使用Infinity来全部展开成一维数组。

let a = [1,2,[3],[4,[5,[6]]]]; 
let b = a.flat(); 
let c = a.flat(Infinity); 
console.log(b);   // [1, 2, 3, 4, [5, [6]]] 
console.log(c);   // [1, 2, 3, 4, 5, 6]

Array.isArray()

Array.isArray()能判断一个对象是否为数组,如果是就返回 true,不然就返回 false。

let a = [1,2,3,4,5,6,7,8]; 
let b = 123; 
console.log(Array.isArray(a)); // true 
console.log(Array.isArray(b)); // false