1 Star 14 Fork 2

Vincent/notes

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

待办的
拥有者
创建于  
2018-02-26 14:54

原文: http://blog.poetries.top/2018/02/23/js-string-arr-object-api/

推酷转载: https://www.tuicool.com/articles/eyAFb2r?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

1.1 slice

  • stringObject.slice(start, end)
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)
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)
    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: '',参数为负,返回空字符串
    slice 、 substr 、 substring 都是字符串的切割方法,三者之间有细微的区别,根据不同的使用场景可以灵活使用。三种方法都是生成新的字符串,而不是修改原 string

二、Array对象

2.1 concat

  • 参数可以为具体的值,也可以为数组对象,可以任意多个。不改变现有的数组,返回被连接数组的一个副本。
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 值。该方法会改变原数组
var a = [1, 2, 3];
var b = a.pop();
// a: [1, 2],修改了原数组
// b: 3,返回删除元素的值

2.3 push

  • 参数顺序添加到 arrayObject 的尾部,直接修改 arrayObject
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 方法
var a = [1, 2, 3];
var b = a.shift();
// a: [2, 3],修改了原数组
// b: 1,返回删除元素的值

2.5 unshift

向数组的开头添加一个或更多元素,并返回新的长度。该方法的第一个参数将成为数组的新元素 0 ,如果还有第二个参数,它将成为新的元素 1 ,以此类推

var a = [1, 2, 3];
var b = a.unshift(4, 5);
// a: [ 4, 5, 1, 2, 3 ],修改了原数组
// b: 5,返回修改后的数组的长度

2.6 slice

  • 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。该方法不会修改原数组
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 中删除了元素,则返回的是含有被删除的元素的数组。
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

  • 无参数时,将按字母顺序对数组中的元素进行排序。参数为比较函数时,如果要交换 prev 和 next 的值,返回大于 0 的值
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

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

2.10 map

  • 有返回值,返回一个新的数组,每个元素为调用 func 的结果
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 。
  • 优点:代码简介。
  • 缺点:无法使用 break , return 等终止循环
  • value 当前操作的数组元素
  • 当前操作元素的数组索引
  • array 当前数组的引用
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 )的元素。如果不存在这样的元素,返回 undefined 。 findIndex 类似,只不过返回的是第一个满足测试条件的元素的 index
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 )的元素组成的数组。如果不存在这样的元素,返回 []
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 数组的简单引用
Array.prototype.sum = function () {
    return this.reduce(function (partial, value) {
        return partial + value
    }, 0)
};

[3,4,5,6,10].sum()

// <- 28
  • 可以使用 .reduce 作为对象的字符串生成器
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 条件,则循环会终止
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
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 的对象的方法
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 of 为 ES6 提供,具有 iterator 接口,就可以用 for of 循环遍历它的成员
  • for of 循环可以使用的范围包括数组、 Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、 DOM NodeList 对象)、后文的 Generator 对象,以及字符串

3.2.1 entries

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

3.2.2 keys

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

3.2.3 values

  • values() 返回一个遍历器对象,用来遍历所有的键值。
  • 这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构
// 遍历数组
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']

评论 (0)

Vincent 创建了任务 7年前
Vincent 修改了描述 7年前

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(1)
1264309 vincentyun 1578947683
1
https://gitee.com/vincentyun/jsnote.git
git@gitee.com:vincentyun/jsnote.git
vincentyun
jsnote
notes

搜索帮助