盒子
盒子
文章目录󰁋
  1. 一、String对象
    1. 1.1 slice
    2. 1.2 substr
    3. 1.3 substring
  2. 二、Array对象
    1. 2.1 concat
    2. 2.2 pop
    3. 2.3 push
    4. 2.4 shift
    5. 2.5 unshift
    6. 2.6 slice
    7. 2.7 splice
    8. 2.8 sort
    9. 2.9 reverse
    10. 2.10 map
    11. 2.11 forEach
    12. 2.12 find
    13. 2.13 filter
    14. 2.14 reduce和reduceRight
    15. 2.15 some
    16. 2.16 every
  3. 三、Object
    1. 3.1 for in
    2. 3.2 for of
      1. 3.2.1 entries
      2. 3.2.2 keys
      3. 3.2.3 values

JavaScript数组、字符串、对象常用方法

一、String对象

1.1 slice

  • stringObject.slice(start, end)
1
2
3
4
5
6
var a = 'Hello world!';
var b = a.slice(2);
var c = a.slice(-4, -2);
// a: 'Hello world!'
// b: 'llo world!'
// c: 'rl',参数可为负

1.2 substr

  • stringObject.substr(start, length)
1
2
3
4
5
6
var a = 'Hello world!';
var b = a.substr(0, 4);
var c = a.substr(-5, 2);
// a: 'Hello world!'
// b: 'Hell'
// c: 'or',参数可为负

1.3 substring

  • stringObject.substring(start, stop)
1
2
3
4
5
6
7
8
var a = 'Hello world!';
var b = a.substring(0, 4);
var c = a.substring(3, 2);
var d = a.substring(0, -1);
// a: 'Hello world!'
// b: 'Hell'
// c: 'l',start比stop小,交换这两个参数
// d: '',参数为负,返回空字符串

slicesubstrsubstring都是字符串的切割方法,三者之间有细微的区别,根据不同的使用场景可以灵活使用。三种方法都是生成新的字符串,而不是修改原string

二、Array对象

2.1 concat

  • 参数可以为具体的值,也可以为数组对象,可以任意多个。不改变现有的数组,返回被连接数组的一个副本。
1
2
3
4
5
6
var a = [1, 2, 3];
var b = a.concat(4, 5);
var c = a.concat([4, 5]);
// a: [1, 2, 3]
// b: [1, 2, 3, 4, 5]
// c: [1, 2, 3, 4, 5]

2.2 pop

  • 删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。该方法会改变原数组
1
2
3
4
var a = [1, 2, 3];
var b = a.pop();
// a: [1, 2],修改了原数组
// b: 3,返回删除元素的值

2.3 push

  • 参数顺序添加到 arrayObject 的尾部,直接修改arrayObject
1
2
3
4
var a = [1, 2, 3];
var b = a.push(4, 5);
// a: [1, 2, 3, 4, 5],修改了原数组
// b: 5,返回修改后的数组的长度

2.4 shift

  • 把数组的第一个元素从其中删除,并返回第一个元素的值。如果数组是空的,那么 shift() 方法将不进行任何操作,返回undefined值。该方法会改变原数组。类比pop方法
1
2
3
4
var a = [1, 2, 3];
var b = a.shift();
// a: [2, 3],修改了原数组
// b: 1,返回删除元素的值

2.5 unshift

  • 向数组的开头添加一个或更多元素,并返回新的长度。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推
1
2
3
4
var a = [1, 2, 3];
var b = a.unshift(4, 5);
// a: [ 4, 5, 1, 2, 3 ],修改了原数组
// b: 5,返回修改后的数组的长度

2.6 slice

  • 返回一个新的数组,包含从 startend (不包括该元素)的 arrayObject 中的元素。该方法不会修改原数组
1
2
3
4
5
6
7
8
9
var a = [1, 2, 3, 4, 5];
var b = a.slice(2);
// a: [1, 2, 3, 4, 5],不修改原数组
// b: [3, 4, 5],返回新数组

var c = [1, 2, 3, 4, 5];
var d = c.slice(2, -1);
// c: [1, 2, 3, 4, 5],不修改原数组
// d: [3, 4],返回新数组

2.7 splice

  • 可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = [1, 2, 3, 4, 5];
var b = a.splice(1, 1);
// a: [1, 3, 4, 5],修改了原数组
// b: [2],返回新数组

var c = [1, 2, 3, 4, 5];
var d = c.splice(-1, 1);
// c: [1, 2, 3, 4],修改了原数组
// d: [5],返回新数组

var e = [1, 2, 3, 4, 5];
var f = e.splice(1, 1, 6, 7);
// e: [ 1, 6, 7, 3, 4, 5 ],修改了原数组
// f: [2],返回新数组

var g = [1, 2, 3, 4, 5];
var h = g.splice(1, 0, 8);
// g: [ 1, 8, 2, 3, 4, 5 ],修改了原数组
// h: [],没有删除值,返回空数组

2.8 sort

  • 无参数时,将按字母顺序对数组中的元素进行排序。参数为比较函数时,如果要交换prevnext的值,返回大于0的值
1
2
3
4
5
6
var a = [1, 10, 8, 6, 9];
var b = a.sort(function (prev, next) {
return prev - next;
});
// a: [1, 6, 8, 9, 10],修改了原数组
// b: [1, 6, 8, 9, 10],返回修改后的数组

2.9 reverse

  • 用于颠倒数组中元素的顺序。会改变原数组
1
2
3
4
var a = [1, 2, 3];
var b = a.reverse();
// a: [3, 2, 1],修改了原数组
// b: [3, 2, 1],返回修改后的数组

2.10 map

有返回值,返回一个新的数组,每个元素为调用func的结果

1
2
3
4
5
6
let list = [1, 2, 3, 4, 5];
let other = list.map((d, i) => {
return d * 2;
});
console.log(other);
// print: [2, 4, 6, 8, 10]

2.11 forEach

  • 数组的每个元素执行一次提供的函数。一般来说不修改原数组,但也可以通过处理函数修改原数组。该方法很灵活,可类比for...of
  • 没有返回值,只针对每个元素调用func
  • 优点:代码简介。
  • 缺点:无法使用breakreturn等终止循环
  • value 当前操作的数组元素
  • 当前操作元素的数组索引
  • array 当前数组的引用
1
2
3
4
5
6
let list = [1, 2, 3, 4, 5];
list.forEach((d, i) => {
this.push(d * 2);
});
console.log(other);
// print: [2, 4, 6, 8, 10]

2.12 find

  • 返回数组中第一个满足测试条件(返回true)的元素。如果不存在这样的元素,返回undefinedfindIndex类似,只不过返回的是第一个满足测试条件的元素的index
1
2
3
4
5
6
var a = [1, 2, 3];
var b = a.find((curVal) => curVal === 1);
var c = a.find((curVal) => curVal === 4);
// a: [1, 2, 3],不修改原数组
// b: 1
// c: undefined

2.13 filter

  • 返回数组中所有满足测试条件(返回true)的元素组成的数组。如果不存在这样的元素,返回[]
1
2
3
4
5
6
var a = [1, 2, 3];
var b = a.filter((curVal) => curVal > 1);
var c = a.filter((curVal) => curVal > 3);
// a: [1, 2, 3],不修改原数组
// b: [2, 3]
// c: []

2.14 reduce和reduceRight

.reduce从左到右而.reduceRight从右到左循环遍历数组,每次调用接收目前为止的部分结果和当前遍历的值

  • 两种方法都有如下典型用法:.reduce(callback(previousValue, currentValue, index, array), initialValue)
  • previousValue是最后被调用的回调函数的返回值,initialValue是开始时previousValue被初始化的值。currentValue
  • 是当前被遍历的元素值,index是当前元素在数组中的索引值。array是对调用.reduce数组的简单引用
1
2
3
4
5
6
7
8
Array.prototype.sum = function () {
return this.reduce(function (partial, value) {
return partial + value
}, 0)
};

[3,4,5,6,10].sum()
// <- 28

可以使用.reduce作为对象的字符串生成器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function concat (input) {
return input.reduce(function (partial, value) {
if (partial) {
partial += ', '
}
return partial + value
}, '')
}

concat([
{ name: 'George' },
{ name: 'Sam' },
{ name: 'Pear' }
])
// <- 'George, Sam, Pear'

2.15 some

返回一个boolean,判断是否有元素符合func条件,如果有一个元素符合func条件,则循环会终止

1
2
3
4
5
6
7
let list = [1, 2, 3, 4, 5];
list.some((d, i) => {
console.log(d, i);
return d > 3;
});
// print: 1,0 2,1 3,2 4,3
// return false

2.16 every

返回一个boolean,判断每个元素是否符合func条件,有一个元素不满足func条件,则循环终止,返回false

1
2
3
4
5
6
7
let list = [1, 2, 3, 4, 5];
list.every((d, i) => {
console.log(d, i);
return d < 3;
});
// print: 1,0 2,1 3,2
// return false

三、Object

3.1 for in

for-in循环实际是为循环”enumerable“对象而设计的,for in也可以循环数组,但是不推荐这样使用,for–in是用来循环带有字符串key的对象的方法

1
2
3
4
5
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// print: "obj.a = 1" "obj.b = 2" "obj.c = 3"

3.2 for of

for ofES6提供,具有iterator接口,就可以用for of循环遍历它的成员

  • for of循环可以使用的范围包括数组、SetMap结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串

3.2.1 entries

entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于Set,键名与键值相同。Map结构的iterator接口,默认就是调用entries方法

3.2.2 keys

  • keys() 返回一个遍历器对象,用来遍历所有的键名。

3.2.3 values

  • values()返回一个遍历器对象,用来遍历所有的键值。

这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 遍历数组
let list = [1, 2, 3, 4, 5];
for (let e of list) {
console.log(e);
}
// print: 1 2 3 4 5

// 遍历对象
obj = {a:1, b:2, c:3};
for (let key of Object.keys(obj)) {
console.log(key, obj[key]);
}
// print: a 1 b 2 c 3
//说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。
//一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

// entries
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
支持一下
扫一扫,支持poetries