javascript 字符串、数组

本文介绍了JavaScript中字符串和数组的基本操作,包括字符串的长度获取、大小写转换、索引查找等,以及数组的增删改查、排序、反转等功能。

字符串String

字符串用’ ‘或” “括起来的字符表示
如果字符串内部既包含’又包含”怎么办?可以用转义字符\来标识
ES6标准新增了一种多行字符串的表示方法,用 ...表示

console.log(Hello,
world!
);
字符串的长度可以通过length属性获得

var s = ‘Hello, world!’;
s.length; // 13
字符串方法

toUpperCase
toUpperCase()把一个字符串全部变为大写

“aBcD”.toUpperCase(); // “ABCD”
toLowerCase
oLowerCase()把一个字符串全部变为小写

“aBcD”.toLowerCase(); // “abcd”
indexOf
indexOf()获取字符位置

var s = ‘hello, world’;
s.indexOf(‘world’); // 返回7
s.indexOf(‘World’); // 没有找到指定的子串,返回-1
replace
replace()字符串替换

“abc”.replace(‘b’, ‘B’); // “aBc”,找到’b’替换为’B’
split
split()分割字符串位数组

“a,bc,d,e”.split(‘,’); // [a, bc, d, e]
substr
substr(start, length)获取子字符串

“abcdef”.substr(2,3); // 从索引2开始(后面的3个子串)”cde”
“abcdef”.substr(2); // 从索引2开始到结束,返回”cdef”
substring
substring(start, end)获取子字符串,返回指定索引区间的子串

var s = ‘hello, world’;
s.substring(0, 5); // 从索引0开始到5(不包括5),返回’hello’
s.substring(7); // 从索引7开始到结束,返回 ‘world’
数组Array

Array可以包含任意数据类型,并通过索引来访问每个元素。
要取得Array的长度,直接访问length属性

var arr = [1, 2, 3.14, ‘Hello’, null, true];
arr.length; // 6
通过索引把对应的元素修改为新的值

var arr = [‘A’, ‘B’, ‘C’];
arr[1] = 99;
arr; // arr现在变为[‘A’, 99, ‘C’]
indexOf
与String类似,Array也可以通过indexOf()来搜索一个指定的元素的位置

var arr = [10, 20, ‘30’, ‘xyz’];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到,返回-1
arr.indexOf(‘30’); // 元素’30’的索引为2
slice
slice()就是对应String的substring()版本,它截取Array的部分元素,然后返回一个新的Array

var arr = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’];
arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: [‘A’, ‘B’, ‘C’]
arr.slice(3); // 从索引3开始到结束: [‘D’, ‘E’, ‘F’, ‘G’]
slice()的起止参数包括开始索引,不包括结束索引。
如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array

var arr = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’];
var aCopy = arr.slice();
aCopy; // [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’]
aCopy === arr; // false
push和pop
push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉

var arr = [1, 2];
arr.push(‘A’, ‘B’); // 返回Array新的长度: 4
arr; // [1, 2, ‘A’, ‘B’]
arr.pop(); // pop()返回’B’
arr; // [1, 2, ‘A’]
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错,而是返回undefined
arr; // []
unshift和shift
如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉

var arr = [1, 2];
arr.unshift(‘A’, ‘B’); // 返回Array新的长度: 4
arr; // [‘A’, ‘B’, 1, 2]
arr.shift(); // ‘A’
arr; // [‘B’, 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错,而是返回undefined
arr; // []
sort
sort()可以对当前Array进行排序,它会直接修改当前Array的元素位置,直接调用时,按照默认顺序排序

var arr = [‘B’, ‘C’, ‘A’];
arr.sort();
arr; // [‘A’, ‘B’, ‘C’]
reverse
reverse()把整个Array的元素给掉个个,也就是反转

var arr = [‘one’, ‘two’, ‘three’];
arr.reverse();
arr; // [‘three’, ‘two’, ‘one’]
splice
splice()方法是修改Array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素

var arr = [‘Microsoft’, ‘Apple’, ‘Yahoo’, ‘AOL’, ‘Excite’, ‘Oracle’];
// 从索引2开始删除3个元素,然后再添加两个元素
arr.splice(2, 3, ‘Google’, ‘Facebook’); // 返回删除的元素 [‘Yahoo’, ‘AOL’, ‘Excite’]
arr; // [‘Microsoft’, ‘Apple’, ‘Google’, ‘Facebook’, ‘Oracle’]
// 只删除,不添加:
arr.splice(2, 2); // [‘Google’, ‘Facebook’]
arr; // [‘Microsoft’, ‘Apple’, ‘Oracle’]
// 只添加,不删除:
arr.splice(2, 0, ‘Google’, ‘Facebook’); // 返回[],因为没有删除任何元素
arr; // [‘Microsoft’, ‘Apple’, ‘Google’, ‘Facebook’, ‘Oracle’]
concat
concat()方法把当前的Array和另一个Array连接起来,并返回一个新的Array

var arr = [‘A’, ‘B’, ‘C’];
var added = arr.concat([1, 2, 3]);
added; // [‘A’, ‘B’, ‘C’, 1, 2, 3]
arr; // [‘A’, ‘B’, ‘C’]
请注意,concat()方法并没有修改当前Array,而是返回了一个新的Array。
实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里

var arr = [‘A’, ‘B’, ‘C’];
arr.concat(1, 2, [3, 4]); // [‘A’, ‘B’, ‘C’, 1, 2, 3, 4]
join
join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串

var arr = [‘A’, ‘B’, ‘C’, 1, 2, 3];
arr.join(‘-‘); // ‘A-B-C-1-2-3’
如果Array的元素不是字符串,将自动转换为字符串后再连接。多维数组如果数组的某个元素又是一个Array,则可以形成多维数组,例如:

var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];
arr.join(‘#’); //’1,2,3#400,500,600#-’
练习1:如何通过索引取到500这个值

var arr = [[1, 2, 3], [400, 500, 600], ‘-‘];
console.log(arr[1][1]);
练习2:在新生欢迎会上,你已经拿到了新同学的名单,请排序后显示:欢迎XXX,XXX,XXX和XXX同学!

var arr = [‘小明’, ‘小红’, ‘大军’, ‘阿黄’];
console.log(‘欢迎’+arr.slice(0,arr.length-1)+’和’+arr[arr.length-1]+’同学!’);

原文:http://www.jianshu.com/p/3002c940b696

<think>嗯,用户想用JavaScript字符串数组去重。我需要先回忆一下常见的去重方法。首先,最简单的可能是用Set,因为Set自动去重。例如,[...new Set(array)]就可以。不过用户的是字符串数组,所以这个方法应该适用。但要注意的是,Set是基于严格相等性,所以像"5"和5不会被视为重复,但如果是字符串数组的话,不会有这个问题。然后,用户可能希望看到其他方法,比如使用filter和indexOf的方法。比如array.filter((item,index)=> array.indexOf(item) ===index)。这种方法在旧版浏览器中可能兼容性更好,但时间复杂度是O(n²),对于大数组可能效率不高。还有引用中提到的使用对象来记录是否重复的方法,比如用对象来存储已经出现过的字符串,这样检查是否存在的时间是O(1),整体时间复杂度是O(n)。不过对于字符串数组来说,这种方法需要注意属性名的唯一性,比如用字符串作为键,这样不会有类型转换的问题。比如引用的第二个方法,把不同类型分开存储,但对于纯字符串数组可能不需要这么复杂,直接用对象或者Set就行。 另外,用户提到的第三个引用中的indexOf方法,但那个方法可能效率低,特别是数组很大的时候。不过对于字符串数组来说,如果数组不是特别大,这种方法可能足够用。还要考虑是否保持原数组的顺序。Set和filter/indexOf的方法都会保持顺序,而使用对象的方法如果正确实现的话也能保持顺序。比如在遍历数组时,第一次出现的元素保留,后面重复的去掉。 然后,用户可能需要具体的代码示例。比如,使用Set的最简单方式: constuniqueArray= [...new Set(originalArray)];或者使用reduce: constuniqueArray= originalArray.reduce((acc, current) =>{if (!acc.includes(current)){acc.push(current);}returnacc;}, []); 不过这种方法也是O(n²)的时间复杂度。 还有更高效的方法,比如使用对象来记录已出现的元素:functionremoveDuplicates(arr) {constseen ={};return arr.filter(item=> {returnseen.hasOwnProperty(item)? false: (seen[item]= true);}); }这种方法对于字符串数组来说,需要注意如果字符串可能包含像"toString"这样的属性名,可能会有冲突,不过这种情况比较少见。或者可以使用Map来避免这个问题,因为Map的键可以是任意值,而对象的键只能是字符串或Symbol。不过对于纯字符串数组来说,使用对象应该没问题,因为字符串作为键不会有冲突,除非数组中有相同的字符串,但重复的字符串本来就是要去重的。所以综合起来,最简洁高效的方法是使用Set,其次是使用对象或Map的方法。需要根据用户的需求选择,如果用户需要兼容性更好的方法,可能需要用filter/indexOf或者对象的方法,如果用户使用ES6环境,推荐Set。另外,用户的问题是关于字符串数组的,所以不需要处理对象或不同类型的元素,可以简化代码。比如引用中的第二个方法处理了不同类型的元素,但用户的情况可能不需要,可以调整代码。 最后,需要给出代码示例,并比较不同方法的优缺点,比如时间复杂度、兼容性、是否保持顺序等。这样用户可以根据自己的情况选择合适的方法。</think>### JavaScript字符串数组去重方法 #### 方法一:使用Set对象(ES6+) 利用Set自动过滤重复值的特性,转换为数组后即可得到唯一结果。这是最高效简洁的方法,时间复杂度$O(n)$。 ```javascript const names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"]; const uniqueNames = [...new Set(names)]; console.log(uniqueNames); // ["Mike","Matt","Nancy","Adam","Jenny","Carl"] ``` #### 方法二:使用对象哈希(ES5兼容) 通过对象属性快速判断重复元素,时间复杂度$O(n)$[^2]。 ```javascript function removeDuplicates(arr) { const seen = {}; return arr.filter(item => seen.hasOwnProperty(item) ? false : (seen[item] = true) ); } ``` #### 方法三:使用filter+indexOf 通过遍历时检查首次出现位置,时间复杂度$O(n^2)$,适合小数组[^3]。 ```javascript const uniqueNames = names.filter((item, index) => names.indexOf(item) === index ); ``` #### 方法四:使用reduce 通过累加器逐步构建唯一数组,时间复杂度$O(n^2)$。 ```javascript const uniqueNames = names.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], [] ); ``` #### 性能对比 | 方法 | 时间复杂度 | 兼容性 | 保持顺序 | |------------|--------|------|------| | Set | O(n) | ES6+ | 是 | | 对象哈希 | O(n) | ES5+ | 是 | | filter+indexOf | O(n²) | ES5+ | 是 | | reduce | O(n²) | ES5+ | 是 |
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值