编程技术

JavaScript 常用操作方法

cnguu · 10月21日 · 2018年

concat

连接两个或多个数组(不改变原数组)

var a = [1, 2, 3];
var b = [4, 5];
var c = [6, 7];
console.log(a.concat(b));    // [1, 2, 3, 4, 5]
console.log(a.concat(b, c)); // [1, 2, 3, 4, 5, 6, 7]
console.log(a);              // [1, 2, 3]

join

把数组中的所有元素放入一个字符串(不改变原数组)

元素是通过指定的分隔符进行分隔(默认使用逗号)

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

push

向数组的末尾添加一个或多个元素,并返回新的长度(改变原数组)

var a = ['a', 'b', 'c'];
var b = a.push('d');
var c = a.push(['e', 'f']);
console.log(b); // 4
console.log(c); // 5
console.log(a); // ['a', 'b', 'c', 'd', ['e', 'f']]

pop

删除并返回数组的最后一个元素(改变原数组)

var a = ['a', 'b', 'c'];
var b = a.pop();
console.log(b); // c
console.log(a); // ['a', 'b']

shift

删除并返回数组的第一个元素(改变原数组)

var a = ['a', 'b', 'c'];
var b = a.shift();
console.log(b); // a
console.log(a); // ['b', 'c']

unshift

向数组的开头添加一个或更多元素,并返回新的长度(改变原数组)

var a = ['a', 'b', 'c'];
var b = a.unshift('d');
var c = a.unshift(['e', 'f']);
console.log(b); // 4
console.log(c); // 5
console.log(a); // [['e', 'f'], 'd', 'a', 'b', 'c']

splice

向/从 数组中 添加/删除 项目,然后返回被删除的项目(改变原数组)

// 创建一个新数组,并向其添加一个元素
var a = ['a', 'b', 'c'];
var b = a.splice(2, 0, 'cnguu');
console.log(b); // []
console.log(a); // ['a', 'b', 'cnguu', 'c']

// 删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素
var c = ['a', 'b', 'c', 'd'];
var d = c.splice(2, 1, 'cnguu');
console.log(d); // ['c']
console.log(c); // ['a', 'b', 'cnguu', 'd']

// 删除从 index 2 ('c') 开始的三个元素,并添加一个新元素 ('cnguu') 来替代被删除的元素
var e = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
var f = e.splice(2, 3, 'cnguu');
console.log(f); // ['c', 'd', 'e']
console.log(e); // ['a', 'b', 'cnguu', 'f', 'g', 'h']

substring 和 substr

相同点不同点
substring(startIndex, endIndex)如果只是写一个参数,两者作用都是一样的
都是从字符串当前下标开始截取,直到最后
第二个参数是截取字符串最终的下标
(截取两个位置之间的字符串,含头不含尾)
substr(startIndex, lenth)第二个参数是截取字符串的长度
var a = 'I love cnguu!';
var b = a.substring(2);
var c = a.substr(2);
console.log(b); // love cnguu!
console.log(c); // love cnguu!

var d = a.substring(2, 6);
var e = a.substr(2, 4);
console.log(d); // love
console.log(e); // love

sort

按照 Unicode code 位置,对数组的元素进行排序,默认升序(改变原数组)

var a = ['c', 'n', 'g', 'u', 'u'];
console.log(a.sort()); // ['c', 'g', 'n', 'u', 'u']
console.log(a);        // ['c', 'g', 'n', 'u', 'u']

var b = [10, 5, 40, 25, 1000, 1];
console.log(b.sort()); // [1, 10, 1000, 25, 40, 5]
console.log(b);        // [1, 10, 1000, 25, 40, 5]

上面的代码没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数

function sortNumber(a, b)
{
	return a - b;
}
var a = [10, 5, 40, 25, 1000, 1];
console.log(a.sort(sortNumber)); // [1, 5, 10, 25, 40, 1000]
console.log(a);                  // [1, 5, 10, 25, 40, 1000]

reverse

颠倒数组中元素的顺序(改变原数组)

var a = ['a', 'b', 'c', 'd'];
console.log(a.reverse()); // ['d', 'c', 'b', 'a']
console.log(a);           // ['d', 'c', 'b', 'a']

indexOf 和 lastIndexOf

相同点不同点
indexOf(searchvalue, fromindex)接受两个参数:查找的值、查找起始位置
不存在,返回 -1
存在,返回位置
对大小写敏感
从前往后查找
lastIndexOf(searchvalue, fromindex)从后往前查找
var a = [2, 9, 8, 2, 9];

console.log(a.indexOf(9));        // 1
console.log(a.indexOf(3));        // -1
console.log(a.indexOf(9, 2));     // 4

console.log(a.lastIndexOf(9));    // 4
console.log(a.lastIndexOf(3));    // -1
console.log(a.lastIndexOf(9, 2)); // 1

every

对数组的每一项都运行给定的函数,每一项都是 true,则返回 true,否则返回 false(不改变原数组)

// 检测数组元素是否全部都小于 10
function check(element, index, array)
{
	return element < 10;
}
var a = [2, 8, 5, 11];
var b = [2, 8, 5];
console.log(a.every(check)); // false
console.log(b.every(check)); // true

some

对数组的每一项都运行给定的函数,任意一项都是 true,则返回 true,否则返回 false(不改变原数组)

// 检测数组是否存在大于 10 的元素
function check(element, index, array)
{
	return element > 10;
}
var a = [2, 8, 5, 11];
var b = [2, 8, 5];
console.log(a.some(check)); // true
console.log(b.some(check)); // false

filter

对数组的每一项都运行给定的函数,返回结果为 true 的项组成的数组

var a = ['abc', 'a', 'abcdefg', 'ab', 'abcdefgh'];
var b = a.filter(function(e){
	return e.length > 6;
});
console.log(b); // ['abcdefg', 'abcdefgh']

map

对数组的每一项都运行给定的函数,返回每次函数调用的结果组成一个新数组

var a = [1, 5, 10, 15];
var b = a.map(function(x){
	return x * 2;
});
console.log(b); // [2, 10, 20, 30]

forEach

遍历数组

const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
	copy.push(item);
});
console.log(copy); // ['item1', 'item2', 'item3']
0 条回应