JS中数组、对象、字符串方法总结

逐浪_
1,969 阅读9分钟

1. 数组相关方法：

1）改变原始数组的9个基本方法

  • push(val, ...) 在数组尾部插入元素，参数可以不止一位，返回数组长度
  • pop() 删除最后一个元素，返回删除的元素。不可以有参数，传了不报错，但是没用
  • shift() 删除第一个元素，返回删除的元素
  • unshift(val, ...) 在数组头部插入元素，参数可以不止一位，返回长度
  • splice(从第几位开始截取, 截取的长度, 在切口处添加的新元素, ...) 返回截取下来的数组
    arr = [1, 2, 3, 4, 5];
截取应用：
var arr1 = arr.splice(1, 2);
    // 返回arr1 = [2, 3], 此时arr = [1, 4, 5];
添加元素应用：
arr.splice(4, 0, 6);
    // arr = [1, 2, 3, 4, 6, 5]; 这种应用用的比较多，注意光标位置
  • reverse() 将数组逆序返回
  • sort(orderfunc) 如果不传函数，会根据ascii码来排序，一般传入一个比较函数
    arr.sort( function (a, b) {
    return a-b;     // 升序
    // return b-a;  // 降序
})
// 函数的注意点：
// 必须要有两个参数
// 看返回值：当返回值为负数时，前面的值放在前面，当返回值为正数时，那么后面的数放在前面。当为0时，不变。

1. 给一个有序的数组乱序：
arr.sort(function(a,b) {
    return Math.random() - 0.5;
})
2. 
var cheng = {
    name: 'cheng',
    age: 18
}
var deng = {
    name: 'deng',
    age: 40
}
var zhang = {
    name: 'zhang',
    age: 20
}
var arr = [cheng, deng, zhang];     
按照年龄给数字升序排序：    
arr.sort(function(a,b){
    return a.age - b.age;
    //关键要懂它的内部原理
})
  • ES6新增： copyWithin
  • ES6新增： fill

2）不改变原数组的8个方法

  • concat(arr) 将两个数组拼接到一起返回
  • slice(start, end) 截取的范围：[start, end) 可以传负数，-1代表最后一位
    slice(start) 如果不传end，截取到最后一位
    slice() start和end都不传，截取所有
  • join(sep) 将数组用sep拼接成字符串返回 join() 如果不传，默认用英文逗号
  • indexOf(val, start) 在array中查找等于value的值，返回找到的第一个元素的索引。start表示从第几个索引找，默认值为0; 找不到返回-1
  • lastIndexOf(val, start) start为从第几个索引开始找，默认值为最后一个，反向查找，返回第一个元素的索引值， 找不到返回-1
  • toString() 将数组变成字符串展示出来，中间用逗号隔开
  • toLocaleString() 将数组转化为本地化字符串
  • ES7新增： includes(val) 看数组中是否存在某个值，返回boolean
    let arr = [10, 20, 30, 40, 50, 60, 70];
console.log( arr.includes(50) );

3) 其他方法

  • Array.isArray() 用来判断一个值是否为数组
  • ES6新增： Array.from() 将具有迭代接口的数据转化为数组
    Array.from(oS);

4）遍历方法

  • ES6新增： find: 返回数组中第一个满足条件的值，函数里面要有返回值

    let arr = [10, 20, 30, 40, 50, 60, 70];
let value = arr.find( (ele, index, self) => {
    return ele > 40;
});

  • ES6新增： findIndex: 返回数组中第一个满足条件的值的索引，函数里面要有返回值

    let arr = [10, 20, 30, 40, 50, 60, 70];
let value = arr.findIndex( (ele, index, self) => {
    return ele > 40;
});

  • ES6新增： keys: 把所有的索引取出来，返回一个可以迭代的对象

    // 可以迭代的对象，可以用for of 进行遍历
for (let key of arr.keys()) {
    console.log(key);
}

  • ES6新增： values: 把所有的值取出来，返回一个可以迭代的对象

    for (let value of arr.values()) {
    console.log(value);
}

  • ES6新增： entries: 返回数组中每一项的索引、值构成的数组的集合，依然可迭代

    for (let key of arr.entries()) {
    console.log(key);
}

  • ES6新增： Symbol.iterator

    let array = ["abc", "xyz"];
let iterator = array[Symbol.iterator]();
console.log(iterator.next().value);     // abc
console.log(iterator.next().value);     // xyz

  • for 循环

  • for in
    也可以遍历对象

  • ES6新增： for of
    遍历可迭代的array、map、set、string、typearray、arguments等

    for (item of arr) {
    console.log(item);
}

  • forEach

// 没有返回值，函数里面也不需要返回
// 第一个参数是一个函数，函数里面有三个参数，ele元素、index索引、self数组本身
// 也可以传第二个参数，用来改变函数执行时的this指向

// 模拟实现：
Array.prototype.myForEach = function(func) {
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i ++) {
        func.apply(_this, [this[i], i, this]);
    }
}
  • map
// 返回新的数组，函数需要有返回值
// 第一个参数是一个函数，函数里面有三个参数，ele元素、index索引、self数组本身
// 也可以传第二个参数，用来改变函数执行时的this指向

// 模拟实现：
Array.prototype.myMap = function(func) {
    var arr = [];
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i ++) {
        arr.push(func.apply(_this, [this[i], i, this]))
    }
}
  • filter
// 返回新数组，函数里面返回true和false决定 ele是否放在新数组里
// 第一个参数是一个函数，函数里面有三个参数，ele元素、index索引、self数组本身
// 也可以传第二个参数，用来改变函数执行时的this指向

// 模拟实现：
Array.prototype.myFilter = function(func) {
    var arr = [];
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i ++) {
        func.call(_this, this[i], i, this) && arr.push(this[i]);
    }
    return arr;
}
  • every
// 返回true和false，函数需要返回boolean，全部返回true，最终才返回true,否则返回false
// 第一个参数是一个函数，函数里面有三个参数，ele元素、index索引、self数组本身
// 也可以传第二个参数，用来改变函数执行时的this指向

// 模拟实现：
Array.prototype.myMap = function(func) {
    var flag = true;
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i ++) {
        if (func.apply(_this, [this[i], i, this] == false) {
            flag = false;
            break;
        }
    }
    return flag;
}
  • some
// 返回true和false，函数需要返回boolean，有一个true，最终就返回true,否则返回false
// 第一个参数是一个函数，函数里面有三个参数，ele元素、index索引、self数组本身
// 也可以传第二个参数，用来改变函数执行时的this指向

// 模拟实现：
Array.prototype.mySome = function(func) {
    var flag = false;
    var len = this.length;
    var _this = arguments[1] || window;
    for (var i = 0; i < len; i ++) {
        if (func.apply(_this, [this[i], i, this] == true) {
            flag = true;
            break;
        }
    }
    return flag;
}
  • reduce （相当于是reduceLeft）
// 返回一个值，每次函数都要返回一个值
// 第一个参数是一个函数，函数里面有四个参数，prevValue、icurValue(ele)元素、index索引、self数组本身
// 第二个参数是initialValue，是初始化的值
// initialValue作为第一次执行函数时prevValue的值
// 每次函数执行后都会返回一个值，这个值就作为下一次函数执行时prevValue的值
// 最后一次函数执行后返回的值，就是reduce返回的值
// reduce不可以改变this指向，所以没有第三个参数。但是我们可以加上这个功能

// 模拟实现：
Array.prototype.myReduce = function(func, initialValue) {
    var len = this.length,
        _this = arguments[2] || window,
        nextValue = initialValue;
    for (var i = 0; i < len; i ++) {
        nextValue = func.apply(_this, [nextValue, this[i], i, this]);
    }
    return nextValue;
}

// 应用：将cookie里面的字符串变为对象的形式
function parseCookieStr (str) {
    var obj = {};
    var cookieArr = str.split("; ");    // 注意：split里面是分号+空格
    return cookieArr.reduce( function(prevValue, icurValue, index, self) {
        var arr = icurValue.split('=');
        prevValue[arr[0]] = arr[1];
        return prevValue;
    }, obj);
}
  • reduceRight
// reduceRight功能和reduce一样，唯一的区别就是遍历数组是从后向前遍历的

// 模拟实现：
Array.prototype.myReduceRight = function(func, initialValue) {
    var len = this.length,
        _this = arguments[2] || window,
        nextValue = initialValue;
    for (var i = len - 1; i >= 0; i --) {
        nextValue = func.apply(_this, [nextValue, this[i], i, this]);
    }
    return nextValue;
}

2. 对象相关方法：

1）遍历对象的方法

  • for in
    会打印出该对象原型链上的所有属性，但是不包括Object上的,但是Object上后添加的也可以打印出来。
    这个方法可遍历对象和数组，prop在对象中值为属性名，为字符串型；prop在数组中为0,1,2...，也是字符串型

    • obj.hasOwnProperty(prop):判断属性prop是否属于对象obj自己的。
    • in方法：prop in obj 返回boolean值
      它是判断这个对象能不能访问到这个属性，而不是判断这个属性是不是属于该对象的。它会认为原型的属性也是属于后代的。
    • instanceof：obj instanceof Func
      判断对象a原型链上有没有原型B这个构造函数，返回boolean值
      在js中typeof null会返回"object",这并不意味着null是object类型，这个是历史遗留问题；null不是object创建的实例对象。 null instanceof Object ----> false
    for(var prop in obj){
    if(obj.hasOwnProperty(prop)) {
        console.log(obj[prop]);
    }
}

  • ES6新增： Object.keys(): 返回数组

    let obj = {
    name: 'gyq',
    age: 20
}
Object.keys(obj);

  • ES6新增： Object.values(): 返回数组

    let obj = {
    name: 'gyq',
    age: 20
}
Object.values(obj);

  • ES6新增： Object.entries(): 返回数组

    let obj = {
    name: 'gyq',
    age: 20
}
Object.entries(obj);

2）对象的其他方法：

  • Object.assign(target, obj1, ...)
  • Object.is()
  • object.setPrototypeOf()
    Object.setPrototypeOf(AttackPlane.prototype, Plane.prototype);
// 这个方法就是让AttackPlane.prototype的原型为Plane.prototype

3. 字符串相关方法

1）常用方法

  • trim() 去掉开头和结尾的空白字符
  • split(delimiter, limit)
  • concat(val, ...) 将一个值或多个值连接成一个字符串并返回
  • ES6新增： repeat(n) 将原字符串重复n次返回
    'str'.repeat(2)     // 'strstr'
'str'.repeat(0)     // ''

2）截取子串：

  • slice(start, end) 提取一个子串，包含start，不包含end
  • substring(from, to)
  • substr(start, length) ==已废弃==

3）判断字符串中是否包含某个子串：

  • indexOf(substring, start) start默认为0，在字符串中寻找一个字符或子串，返回substring第一次出现的位置，没有找到返回-1
  • lastIndexOf(substring, start) start默认为最后一个字符，在字符串中向后前寻找一个字符或子串，返回子串第一次出现的位置，没有返回-1
  • ES6新增： includes: 字符串是否包含某个子串，返回boolean
    let str = 'hello gyq';
console.log( str.includes('lo') );
  • ES6新增： startsWith: 字符串是否以某一子串开头，返回boolean
    let str = 'hello gyq';
console.log( str.startsWith('he') );
  • ES6新增： endsWith: 字符串是否以某一子串结尾，返回boolean
    let str = 'hello gyq';
console.log( str.endsWith('yq') );

4）获取n位置的字符或编码：

  • charAt(n) 返回字符串中n位置的字符
  • charCodeAt(n) 返回字符串中指定位置的字符编码

5）转化大小写：

  • toLowerCase() 将字符串转为小写
  • toUpperCase() 将字符串转化为大写

6）字符串补全长度：

  • ES6新增： padStart()
    'a'.padStart(5, 'b')    // 'bbbba'
'a'.padStart(5)         // '    a' 不传的话，用空格来补全
  • ES6新增： padEnd()
    'a'.padEnd(3, 'b')      // 'abb'

7）其他（不常用的）：

  • match(regexp) 找到一个或多个正则表达是匹配结果，返回一个包含匹配结果的数组。

  • replace(regexp, replacement) 替换匹配给定正则表达式的字串，返回一个新的字符串

  • search(regexp) 根据一个正则表达是查找

  • valueOf() 返回dtring的原始字符串值

  • toString() 返回原始字符串值

  • localeCompare() 使用本地定义的顺序比较字符串

  • String.fromCharCode(c1, c2, ...) 静态方法
    使用作为参数传入的字符编码创建一个新的字符串

    var s = String.fromCharCode(104, 101, 108, 108, 111);   
console.log(s); // "hello"
avatar
文章
阅读
粉丝