盘一盘那些你必须要掌握的JavaScript数组、字符串方法

---

前言

大家好我是前端新手小猿同学，这篇文章主要给大家简单介绍一下常用的JavaScript数组、字符串方法的使用以及原理分析，希望对大家的学习进步有所帮助，当然文章中可能存在理解不正确的地方希望大家可在评论区相互讨教，共同进步。

---

一、数组必须掌握的10种常用方法？

1.push（）

作用：
向数组的末尾添加一个元素，并且返回新数组的长度。
特点：
会改变原数组的内容
实现：

const arr = [1,2,3]
arr.push(4)
console.log(arr.push(4))
输出:
5
console.log(arr)
输出：
[1,2,3,4]

2.pop（）

作用：
删除数组末尾的元素，并且返回删除的元素
特点：
会改变原数组的内容
实现：

const arr = [1,2,3]
arr.pop()
console.log(arr.pop())
输出:
2
console.log(arr)
输出：
[1,2]

3.unshift（）

作用：
向数组中的头部增加一个或者多个元素，返回新的数组长度
特点：
会改变原数组的内容
实现：

var arr = ["1", "2", "3", "4"];
arr.unshift("5","6");
console.log(arr.unshift("5","6"))
输出：
6
console.log(arr)
输出：
["5","6","1", "2", "3", "4"]

4.shift（）

作用：
删除数组头部的第一个元素，并返回第一个元素的值
特点：
会改变原数组的内容
实现：

var arr = ["1", "2", "3", "4"];
arr.shift();
console.log(arr.shift())
输出：
2
console.log(arr)
输出：
["2", "3", "4"]

5.splice（）

作用：
删除数组中的指定元素
特点：
会改变原数组的内容
实现：

var arr = ["1", "2", "3", "4"];
从下标为2的元素开始删除，删除一个元素,返回删除元素的数据
arr.splice(2，1);
console.log(arr.splice())
输出：
["3"]

6.slice（）

作用：
从数组中获取到选定的元素，传入两个参数start和end分别对应数组的起始下标和结束下标，返回一个由选定元素组成的数组
特点：
不会改变原数组,只会返回一个浅复制了原数组中的元素的一个新数组
实现：

var arr = ["1", "2", "3", "4"];
arr.slice(1,3)
console.log(arr.slice(1,3))
输出：
["2", "3", "4"]

7.concat（）

作用：
方法用于连接两个或多个数组
特点：
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
实现：

var arr = ["1", "2", "3", "4"];
var brr = ["阿虎","李四"]
var arr1 = ["a","b"];
console.log(arr1.concat(arr,brr))
输出：
["a","b","1", "2", "3", "4","阿虎","李四"]

8.reverse（）

作用：
用于颠倒数组中元素的顺序。
特点：
会改变原数组的内容
实现：

var arr = ["1", "2", "3", "4"];
console.log(arr1.reverse())
输出：
["4", "3", "2", "1"]

9.sort（）

作用：
sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。
特点：
会改变原数组的内容
注意：

使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。如果不适用函数调用那么34将会排在40前面，因为sort()的默认排序是按照unicode码顺序排列。

实现：

var arr = ["10", "6789", "9", "4"];
arr.sort();
console.log(arr.sort(function(a,b){return a-b}))
输出：
["4", "9", "10", "6789"]

10.join（）

作用：
用于把数组中的所有元素按照指定的分隔符号转换一个字符串
特点：
会改变原数组的内容
注意：
如果不传入指定分隔符号，默认使用，号隔开
实现：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
console.log(energy);
输出：
Banana,Orange,Apple,Mango

二、字符串常用方法

1.length

作用：
length 属性返回字符串的长度(字符数)
实现：

 var txt = "Hello World!"
 console.log(txt.length)
 输出：
 12

2.CharAt（）

作用：
charAt() 方法可返回指定位置的字符，第一个字符位置为 0, 第二个字符位置为 1,以此类推。
实现：

 var str = "HELLO WORLD";
 var n = str.charAt(2)
 输出：
 L

3.CharCodeAt（）

作用：
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码，字符串中第一个字符的位置为 0， 第二个字符位置为 1，以此类推。
实现：

 var str = "HELLO WORLD";
 var n = str.charCodeAt(0);
 输出：
 72

4.fromCharCode（）

作用：
fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
实现：

 var n = String.fromCharCode(65);
 输出：
 A

5.indexOf（）

作用：
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。
实现：

 var str="Hello world, welcome to the universe.";
 var n=str.indexOf("welcome");
 输出：
 13

6.lastIndexOf（）

作用：
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。
实现：

var str="I am from China,I love China";
var n=str.lastIndexOf("China");
输出：
23

7.replace()

作用：
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
实现：

var str="Visit C! Visit C!";
var n=str.replace("C","R");
输出：
Visit R!Visit C!

注意：之后替换匹配到的第一个字符串，并不会全部匹配，全部替换要使用正则表达式实现例如：

var str="Mr Blue has a blue house and a blue car";
var n=str.replace(/blue/g,"red");
输出
Mr Blue has a red house and a red car

8.字符串截取的几种方法

1. slice
   作用：
   slice(start,end)提取字符串的某个部分并以新字符串返回被提取的部分
   实现：

var str = "Hello word"
console.log(str.slice(1,4))
输出：
"ello"

2. substring
   作用：
   substring(start,end)提取字符串介于两个给定值之间的部分并以新字符串返回被提取的部分
   实现：

var str = "Hello word"
console.log(str.substring(1,4))
输出：
"ell"

9.split（）

作用：
split() 方法用于把一个字符串分割成字符串数组。可以根据字符串中的某一个符号进行分割。
实现：

 var str="How are you doing today?";
 var n=str.split(" ");
 输出：
 [ 'How', 'are', 'you', 'doing', 'today?' ]
 var str = "abTcgThgT12T32"
 var n=str.split("T");
 输出：
 [ 'ab', 'cg', 'hg', '12', '32' ]

10.toLowerCase（）&toUpperCase（）

作用：
toLowerCase() 方法用于把字符串转换为小写，oUpperCase() 方法用于把字符串转换为大写。