JavaScript的一些基本方法总结

最近开始学习JavaScript，以此文章来对学习中的一些方法进行总结，方便以后查阅。

字符串的相关方法

方法名	说明
toUpperCase()	把一个字符串全部变成大写
toLowerCase()	把一个字符串全部变成小写
indexOf()	搜索指定字符串出现的位置
substring()	返回指定索引区间的子串

数组的相关方法

方法名	说明
indexOf()	Array也可以通过indexOf()来搜索一个指定的元素的位置
slice()	截取Array的部分元素，然后返回一个新的Array
push()	向Array的末尾添加若干元素
pop()	把Array的最后一个元素删除掉
unshift()	往Array的头部添加若干元素
shift()	把Array的第一个元素删掉
sort()	对当前Array进行排序，直接修改当前Array的元素位置，直接调用时，按照默认顺序排序
reverse()	把整个Array的元素进行反转
splice()	修改Array的“万能方法”，可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素
concat()	把当前的Array和另一个Array连接起来，没有修改当前Array,并返回一个新的Array
join()	把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

注意：如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量。(反引号和${})

对象的相关方法

方法	说明
in	来判断某个属性是否存在，包括继承得到的
hasOwnProperty()	判断本身属性是否存在，不包括继承得到的

Map,Set相关用法

Map：

操作	代码实现
创建Map	var m = new Map([[‘Michael’, 95], [‘Bob’, 75], [‘Tracy’, 85]]);
添加Map	m.set(‘Adam’, 67);
删除Map	m.delete(‘Adam’);
是否存在key	m.has(‘Adam’);
根据key获得value	m.get(‘Adam’);

Set：
key不能重复

操作	代码实现
创建Set	var s = new Set([1, 2, 3, 3, ‘3’]);
添加Set	s.add(4)
删除Set	s.delete(3);

iterable
for…in循环：对对象的属性名称进行遍历。

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for…of循环：只循环集合本身的元素。

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

使用forEach方法：

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});

函数相关方法

1.apply()和call():
apply():第一个参数为需要绑定的this变量，参数打包成Array作为第二个参数。
call():第一个参数为需要绑定的this变量，参数按顺序传入作为第二个参数。
例子：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

2.map()：传入参数是函数对象本身
定义：定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array。
例子：

function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

注意：关于使用map()方法把字符串转换为整数的坑：

'use strict';
var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);
alert('[' + r[0] + ', ' + r[1] + ', ' + r[2] + ']');

运行结果显示：[1, NaN, NaN]
原因：
由于map()接收的回调函数可以有3个参数：callback(currentValue, index, array)，通常我们仅需要第一个参数，而忽略了传入的后面两个参数。不幸的是，parseInt(string, radix)没有忽略第二个参数，导致实际执行的函数分别是：
parseInt(‘0’, 0); // 0, 按十进制转换
parseInt(‘1’, 1); // NaN, 没有一进制
parseInt(‘2’, 2); // NaN, 按二进制转换不允许出现2
可以改为r = arr.map(Number);，因为Number(value)函数仅接收一个参数；
或者使用如下代码解决parseInt()的转换问题：

var arr = ['1','2','3'];
var r = arr.map(function(val){
    return parseInt(val);
});
console.log(r);

3.reduce()：
定义：Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
例子：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

4.filter():
定义：filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身。
例子：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

5.sort():
定义：默认把所有元素先转换为String再排序，会直接对Array进行修改，它返回的结果仍是当前Array。
例子：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

总结

总结一下，有这么几条规则需要遵守：
1.不要使用new Number()、new Boolean()、new String()创建包装对象；
2.用parseInt()或parseFloat()来转换任意类型到number；
用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
3.通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {…}；
4.typeof操作符可以判断出number、boolean、string、function和undefined；
5.判断Array要使用Array.isArray(arr)；
6.判断null请使用myVar === null；
7.判断某个全局变量是否存在用typeof window.myVar === ‘undefined’；
8.函数内部判断某个变量是否存在用typeof myVar === ‘undefined’。
参考：
廖雪峰的官方网站
https://segmentfault.com/a/1190000007402240