String、Array、Object、Function常用方法

目录

一、StringAPI揭秘

二、ArrayAPI揭秘

三、Object揭秘

四、Function揭秘

四、奇淫巧技

---

一、StringAPI揭秘

1.charCodeAt() 返回在指定的位置的字符的 Unicode 编码。

var str = "HELLO WORLD";
var n = str.charCodeAt(0); // 72

2.concat() 连接两个或更多字符串，并返回新的字符串

var str1 = "Hello ";
var str2 = "world!";
console.log(str1); //Hello
var n = str1.concat(str2); // Hello world!

3.fromCharCode() 将 Unicode 编码转为字符。

var n = String.fromCharCode(72); // L

4.indexOf()   返回某个指定的字符串值在字符串中首次出现的位置。

var str="Hello world, welcome!";
var n=str.indexOf("welcome"); // 13

5.lastIndexOf()   从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

var str="Hello world, welcome!";
var n=str.lastIndexOf("welcome"); // 13

6.match() 查找找到一个或多个正则表达式的匹配。

var str="The rain in SPAIN stays mainly in the plain";
var n=str.match(/ain/g);
console.log(n) // [ain,ain,ain]

7.replace()   在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。 可以使用正则表达式

var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob"); // Visit Runoob!Visit Microsoft!

8.search() 查找与正则表达式相匹配的值。

var str="Visit Runoob!";
var n=str.search("Runoob"); // 6

9.slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。

var str="Hello world!";
var n=str.slice(1,5); //ello

10.split() 把字符串分割为字符串数组。

var str="How are you doing today?";
var n=str.split(" "); //[How,are,you,doing,today?]

11.substr() 从起始索引号提取字符串中指定数目的字符。

var str="Hello world!";
var n=str.substr(2,3) //llo

12.substring() 提取字符串中两个指定的索引号之间的字符。 不包含最后的

var str="Hello world!";
str.substring(3,7) // lo w

13.toLowerCase()   把字符串转换为小写。

var str="Hello World!";
str.toLowerCase() // hello world!

14.toUpperCase()   把字符串转换为大写。

var str="Hello World!";
str.toUpperCase() //HELLO WORLD!

15.trim()  去除字符串两边的空白

var str="  Hello World!   ";
str.trim() // Hello World!

 

二、ArrayAPI揭秘

1.join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符

var array = [1,2,3,4];
var str = array.join('-');
console.log(str); // 1-2-3-4
console.log(array);// [1,2,3,4]

2.Push(arguments)  可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度

var array = [1,2,3,4];
var length = array.push(5,6);
console.log(length); //6
console.log(array); // [1,2,3,4,5,6]

3.pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项

var array = [1,2,3,4];
var ele = array.pop();
console.log(ele); //4
console.log(array); // [1,2,3]

4.shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 

var array = [1,2,3,4];
var ele = array.shift();
console.log(ele); //1
console.log(array); // [2,3,4]

5.unshift:将参数添加到原数组开头，并返回数组的长度 。

var array = [1,2,3,4];
var length = array.unshift(5,6);
console.log(length); //6
console.log(array); // [5,6,1,2,3,4]

6.reverse()：反转数组项的顺序。

var array = [1,2,3,4];
var newArray = array.reverse();
console.log(newArray); // [4,3,2,1]
console.log(array); // [[4,3,2,1]

7.Sort()升序排列数组项——即最小的值位于最前面，最大的值排在最后面

7.1字符串比较

'b' > 'b' //true
'a1' > 'a0' //true
'2' > '14' //true

7.2sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串 

var array = [1,2,11,32,25,5]
var newArray = array.sort();
console.log(array)  //[1, 11, 2, 25, 32, 5]
console.log(newArray) //[1, 11, 2, 25, 32, 5]

7.3sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数

var array = [1,2,11,32,25,5]
function createCompareFunction(value1,value2) {
    if(value1 > value2){
        return 1;
    }else if(value1 < value2){
        return -1;
    }else{
        return 0;
    }
}
array.sort(createCompareFunction); //[1, 2, 5, 11, 25, 32]

8.concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var array = [1,2];
var newArray = array.concat(3,[4,5]);
console.log(array); // [1,2]
console.log(newArray); // [1,2,3,4,5]

9.slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。支持负数，但是会加数组长度

var array = [1,2,3,4];
var newArray = array.slice(2,3);
var newArray2 = array.slice(-2,-1);
console.log(array); // [3]
console.log(newArray); // [1,2,3,4]
console.log(newArray2); // [3]

10.splice()：它有很多种用法，可以实现删除、插入和替换。

删除：只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

插入：只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

var array = [1,3,5,7,9,11];
var newArray = array.splice(0,2);
console.log(array); //[5, 7, 9, 11]
console.log(newArray); //[1, 3]
var newArray2 = array.splice(2,0,4,6);
console.log(array); // [5, 7, 4, 6, 9, 11]
console.log(newArray2); // []
var newArray3 = array.splice(1,1,2,4);
console.log(array); // [5, 2, 4, 4, 6, 9, 11]
console.log(newArray3); //[7]

11.indexOf()  lastIndexOf()

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。

lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var array = [1,3,5,7];
console.log(array.indexOf(5)); //2
console.log(array.lastIndexOf(5)); //2
console.log(array.indexOf(5,2)); //2
console.log(array.lastIndexOf(5,4)); // -1
console.log(array.indexOf("5")); //-1

12.forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var array = [1,2,3,4,5];
array.forEach(function(x, index, arr){
    console.log(x);//1 2 3 4 5
});
console.log(array); //[1,2,3,4,5]
var newArray = array.forEach(function(x, index, arr){
    return 2 * x
});
console.log(array);//[1,2,3,4,5]
console.log(newArray);//undefined

13.map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var array = [1,2,3,4];
var newArray = array.map(function(item){
    return item*item;
});
console.log(newArray); //[1, 4, 9, 16,]

14.filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var newArray = array.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
});
console.log(array); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(newArray); //[1, 4, 7, 8, 9, 10]

 

15.every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var array = [1, 2, 3, 4, 5];
var flag1 = array.every(function(x) {
    return x < 10;
});
console.log(flag1); //true
var flag2 = array.every(function(x) {
    return x < 3;
});
console.log(flag2); // false

16.some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var array = [1, 2, 3, 4, 5];
var flag1 = array.some(function(x) {
    return x < 4;
});
console.log(flag1); //true
var flag2 = array.some(function(x) {
    return x < 0;
});
console.log(flag2); // false

17.Reduce() reduceRight()

这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

var numberArray = [1,2,3,4,5];
var sum = numberArray.reduce(function (prev, current, index, array) {
    return prev + current;
})
console.log(sum); //15
console.log(numberArray); // [1,2,3,4,5]

注意：会改变原数组的 splice slice map sort push pop shift unshift

三、Object揭秘

1.Object.assign() 通过复制一个或多个对象来创建一个新的对象。如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

Object.assign(target, ...sources)

var obj1 = {a:1,b:2};
var obj2 = {a:3,c:4};
var newObj = Object.assign(obj1,obj2);
var newObj2 = Object.assign({},obj1,obj2);
console.log(newObj); //{a: 3, b: 2, c: 4}
console.log(obj1); // {a: 3, b: 2, c: 4}

var obj3 = {a:{aa:1},b:2}
var obj4 = {c:1}
var newObj1 = Object.assign({},obj3,obj4);
obj3.a.aa = 4;
console.log(newObj1) // {a: {aa:4}, b: 2, c: 1}

针对深拷贝，需要使用其他方法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。

2.Object.create() 使用指定的原型对象和属性创建一个新对象。

Object.create(proto, [propertiesObject])

function Person(name){
   this.name = name;
}
Person.prototype.sayName = function () {
    console.log(this.name);
}
var a = Object.create(Person.prototype,{name:{
    writable:true,
    configurable:true,
    value: "qcg"
}})

3.Object.defineProperty() 给对象添加一个属性并指定该属性的配置。
4.Object.defineProperties() 给对象添加多个属性并分别指定它们的配置。

5.Object.entries() 返回给定对象自身可枚举属性的[key, value]数组。其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

var obj = {a:1,b:2}
obj.__proto__ = {c:2};
var c = Object.entries(obj);// [[a,1],[b,2]];  

6.Object.freeze() 冻结对象：其他代码不能删除或更改任何属性。 Object.isFrozen() 判断对象是否已经冻结。

var obj = {a:1,b:2}
var b = Object.freeze(obj);
obj.a = 2 //error

7.Object.getOwnPropertyDescriptor() 返回对象指定的属性配置。

Object.getOwnPropertyDescriptor(obj, key)
//obj为对象  key为要查找的对象的键值
obj = { a: 42 };
d = Object.getOwnPropertyDescriptor(obj, "a");

8.Object.getOwnPropertyNames() 返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名。该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for...in 循环（或 Object.keys）迭代该对象属性时一致

obj = {a:1,b:2}
d = Object.getOwnPropertyNames(obj); // [a,b]

9.Object.getOwnPropertySymbols() 返回一个数组，它包含了指定对象自身所有的符号属性。要返回 Symbol 属性的对象。在给定对象自身上找到的所有 Symbol 属性的数组。

10.Object.getPrototypeOf() 返回指定对象的原型对象。

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

11.Object.is() 比较两个值是否相同。所有 NaN 值都相等（这与==和===不同）

两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其它同一个数字

Object.is('a','a'); //true
Object.is(NaN,NaN); //true

12.Object.preventExtensions() 防止对象的任何扩展。可以修改

var obj = {a:2};
Object.preventExtensions(obj);
obj.a = 3; // {a:3}
obj.name = 1 // error

13.Object.seal() 防止其他代码删除对象的属性。阻止添加新属性并将所有现有属性标记为不可配置  Object.isSealed() 判断对象是否已经密封。

var obj = {a:2};
Object.seal(obj);
obj.a = 3; // error
obj.name = 1 // error

14.Object.isExtensible() 判断对象是否可扩展。 就是是否可以在它上面增加新属性

// 不可扩展.
Object.preventExtensions(obj);
Object.isExtensible(obj); // === false

// 密封对象是不可扩展的.
var obj = Object.seal({});
Object.isExtensible(obj); // === false

// 冻结对象也是不可扩展.
var obj = Object.freeze({});
Object.isExtensible(obj); // === false

15.Object.keys() 返回一个包含所有给定对象自身可枚举属性名称的数组。

var obj = { a: 1,b:2, c:3};
console.log(Object.keys(obj)); // [a,b,c]

16.Object.setPrototypeOf() 设置对象的原型（即内部[[Prototype]]属性）。

Object.setPrototypeOf(obj, prototype)

17.Object.values() 返回给定对象自身可枚举值的数组。

var obj = { a: 1,b:2, c:3};
console.log(Object.values(obj)); // [1,2,3]

 

四、Function揭秘

1.arguments 属性代表传入函数的实参，它是一个类数组对象。

function a(){
    console.log(arguments);//代表传入的参数
}

1.1 callee属性 代表函数自身，在递归中为了避免函数被重命名导致递归错误

function recursion(num) {
    if (num <= 1)
        return 1;
    else
        return num * recursion(num - 1);
}
var other = recursion;
recursion = null;
other(6); //error

//改进 严格模式不能访问 arguments.callee
function recursion(num) {
    if (num <= 1)
        return 1;
    else
        return num * arguments.callee(num - 1);
}
var other = recursion;
recursion = null;
other(6); //720

2.length 属性 代表函数需要传递形参的必须函数

function a(a){}
function b(){}
function c(a,c){}
function d(a,b=1,c){}
function e(a=1,b,c){}
console.log(a.length); //1
console.log(b.length); //0
console.log(c.length); //2
console.log(d.length); //1
console.log(e.length); //0

3.name 属性  实例的名称

console.log((function a(){}).name) //a
console.log((new Function).name)//anonymous

4.apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。

function.apply(thisArg, [argsArray])

5.call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

function.call(thisArg, arg1, arg2, ...)

6.bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

function.bind(thisArg, arg1, arg2, ...)

7.caller返回调用指定函数的函数.如果一个函数f是在全局作用域内被调用的,则f.caller为null,相反,如果一个函数是在另外一个函数作用域内被调用的,则f.caller指向调用它的那个函数 非标准属性。禁止使用

8.闭包

var d = 4;
var dom = document.getElementById('root');
function foo(a){
    var b = a * 2;
    function bar(c){
        console.log(a,b,c);
    }
    bar( b * 3);
    dom.addEventListener('click',bar)
}

foo(2);

js允许函数嵌套，内部的函数可以访问外部函数的所有变量和函数,外部函数不能访问内部函数的变量和函数 当内部函数的生存周期比外部函数大(类似绑定到dom结构上)bar的生存周期比foo长，外部函数中定义的变量和函数将的生存周期比内部函数执行时间长 此时构成了一个闭包
例如：函数foo可以访问 变量 d  a  b 函数 bar
函数bar 可以访问 变量 d a  b  c

9.箭头函数 this不可变，arguments不可用

var a = 2;
foo = () =>{
    console.log(this.a);
}
obj = {
    a:'obj a'
};
var fn = foo.bind(obj,);
fn(); // 2

bar = () =>{
    console.log(arguments);
}
bar();//arguments is not defined

四、奇淫巧技

1.数组或者对象排序

function createCompareFunction(propertyName) {
    return function (obj1,obj2) {
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        if(value1 > value2){
            return 1;
        }else if(value1 < value2){
            return -1;
        }else{
            return 0;
        }
    }
}

var array = [{name:'aa',age:1},{name:'db',age:2},{name:'dc',age:3},{name:'ae',age:4}];
array.sort(createCompareFunction('name'));

 

2.获取数组中的最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

这里只针对数字有用，如果数组中出现字符串的需要过滤.增加filter 或者every来进行判断

3.深拷贝问题

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    

function deepClone2(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

4.模拟路由截取对应的path

截取https://m.xx.com/guangzhou/s/?a=1&b=2  二级路由的/s/

var pathName = location.pathname; 
//这样写是为了防止后面的链接带转译字符导致截取错误
var reg = /^.*\/(.*)\/$/;
var sourcStr = pathName.replace(reg,'$1');

5.请求参数的拼接

            let newUrl = '//cs.xx.com?'
            let parmas = {
                a:1,
                b:2,
                c:3,
            }
            let parmasArray = [];
            Object.keys(parmas).forEach(key => parmasArray.push(key + '=' + encodeURIComponent(parmas[key])))
            if(newUrl.search(/\?/)===-1) {
                newUrl += '?' + parmasArray.join('&')
            } else {
                newUrl += '&' + parmasArray.join('&')
            }   }

6.函数检测 单例模式

之前

export default function getApiHost (oldurl) {
    let url = oldurl || '';
    let reg=/^localhost/;
    let reg1=/^cs.test.xxx.com/;
    let testLife = /^life.test.xxx.com/;
    let prodLife = /^life.xxx.com/;
    let host = window.location.host;
    if(reg.test(host)||reg1.test(host)||testLife.test(host)){
        var newUrl = `//develop.lifeapi.test.xxx.com/${url}`;
    }else if(prodLife.test(host)){
        //正式线1
        var newUrl = `//lifeapi.xxx.com/${url}`;
    }else{
        //待删除 正式线2
        var newUrl = `//csapi.xxx.com/${url}`
    }
    return newUrl
}

之后：

getApiHost = (function () {
    var newUrl = '';
    return function (url) {
        if(newUrl){
            return `${newUrl}${url}`;
        }else{
            let reg=/^localhost/;
            let reg1=/^cs.test.uxincredit.com/;
            let testLife = /^life.test.uxincredit.com/;
            let prodLife = /^life.uxincredit.com/;
            let host = window.location.host;
            if(reg.test(host)||reg1.test(host)||testLife.test(host)){
                 newUrl = `//develop.lifeapi.test.xxx.com/`;
            }else if(prodLife.test(host)){
                //正式线1
                 newUrl = `//lifeapi.xxx.com/`;
            }else{
                //待删除 正式线2
                 newUrl = `//csapi.xxx.com/`
            }
            return `${newUrl}${url}`;
        }
    }
})()

7.react中复用函数

   handleSelect = (flag,value) =>{
        let config = this.state.config;
        config[flag] = value;
        this.setState({
            config,
        })
    };

    .......
    .......
    .......

    <Select  onSelect={this.handleSelect.bind(this,'flag1')}>
        <Option value={'1'} key={'1'}>{'test'}</Option>
    </Select>
    <Select  onSelect={this.handleSelect.bind(this,'flag2')}>
        <Option value={'1'} key={'1'}>{'test'}</Option>
    </Select>
    <Select  onSelect={this.handleSelect.bind(this,'flag3')}>
        <Option value={'1'} key={'1'}>{'test'}</Option>
    </Select>