常用的数组方法+字符串方法
常用的 数组 方法
1、push()【末尾追加】
push()方法向数组末尾添加新项目，并返回新长度。提示：新的项目将被添加到数组的末尾。
注释：
push()方法会改变数组的长度。
let arr = [3, 6, 2, 4, 1, 5];
let result = arr.push(9);
console.log(result); // 返回数组长度7
console.log(arr); // [3, 6, 2, 4, 1, 5 ,9]
2、unshift()【头部追加】
unshift()方法将新项添加到数组的开头，并返回新的长度。注释：
unshift()方法会改变数组的长度。
let arr = [1, 2, 3, 4, 5, 6];
let result = arr.unshift(9);
console.log(result); // 返回数组长度7
console.log(arr); // [ 9, 1, 2, 3, 4, 5, 6]
3、pop()【删除最后一个元素】
pop()方法移除数组的最后一个元素，并返回该元素。注释：
pop()方法会改变数组的长度。
let arr = [1, 2, 3, 4, 5, 6];
let result = arr.pop();
console.log(result); // 返回删除的元素 6
console.log(arr); // [1, 2, 3, 4, 5]
4、shift()【删除第一个元素】
shift()方法移除数组的第一项。注释：
shift()方法会改变数组的长度。注释：
shift方法的返回值是被移除的项目。注释：
shift()方法会改变原始数组。
let arr = [1, 2, 3, 4, 5, 6];
let result = arr.shift();
console.log(result); // 返回删除的元素 1
console.log(arr); // [ 2, 3, 4, 5, 6 ]
5、splice()【删除/修改/替换】
通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。
语法：
array.splice(index, howmany, item1, ....., itemX)
splice()方法向/从数组添加/删除项目，并返回删除的项目。注释：
splice()方法会改变原始数组。
// 将项目添加到数组：
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // [ 'Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango' ]
// ------------------------------------------------------------------------------------------------------------------
// 在位置 2，添加新项目，并删除 1 个项目：
let fruits2 = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits2); // [ 'Banana', 'Orange', 'Apple', 'Mango' ]
// ------------------------------------------------------------------------------------------------------------------
// 在位置 2，删除 2 个项目：
let fruits3 = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.splice(2, 2);
console.log(fruits3); // [ 'Banana', 'Orange', 'Apple', 'Mango', 'Kiwi' ]
6、reverse()【翻转】
翻转
// 实现对该数组的倒排，输出[5,1,4,2,6,3]
var arr = [3, 6, 2, 4, 1, 5];
console.log(arr.reverse()); // [5,1,4,2,6,3]
7、sort()【排序】
对数组的元素进行排序
// 实现对该数组的降序排列，输出[6,5,4,3,2,1]
var arr = [3, 6, 2, 4, 1, 5];
// a-b 输出从小到大排序，b-a 输出从大到小排序。
var A= arr.sort(function (a, b) {
return b - a;
});
console.log(A); // [6,5,4,3,2,1]
8、join()【数组 ===> 字符串】
把数组中的元素拼接成字符串（不会改变原数组）
// join() 方法 ===> 用于把数组中的所有元素放入一个字符串。
var stringArray = ["This", "is", "Baidu", "Campus"];
console.log(stringArray.join(" ")); // This is Baidu Campus
9、filter【过滤】
filter()方法创建一个包含通过测试的数组元素的新数组。【不会改变原数组】请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：
// 普通函数形式
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(over18); // [ 45, 25 ]
// ------------------------------------------------------------------------------------------------------------------
// 箭头函数形式
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter((value)=>{
return value > 18;
});
console.log(over18); // [ 45, 25 ]
10、forEach【迭代】
forEach()方法为每个数组元素调用一次函数（回调函数），【不会改变原数组】注释：该函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
// 普通函数形式
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + value + "......";
console.log(txt);
}
// ------------------------------------------------------------------------------------------------------------------
// 箭头函数形式
var txt2 = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach((value) => {
txt2 = txt2 + value + "------";
console.log(txt2);
});
11、map【映射】
map()方法通过对每个数组元素执行函数来创建新数组。【不会改变原数组，得到新数组】
map()方法不会对没有值的数组元素执行函数。注意，该函数有 3 个参数：
- 项目值
- 项目索引
- 数组本身
当回调函数仅使用 value 参数时，可以省略索引和数组参数：
// 普通函数形式
var numbers1 = [1, 2, 3, 4, 5];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return value * 2;
}
console.log(numbers2); // [ 2, 4, 6, 8, 10 ]
// ------------------------------------------------------------------------------------------------------------------
// 箭头函数形式
var numbers1 = [1, 2, 3, 4, 5];
var numbers2 = numbers1.map((value) => {
return value * 2;
});
console.log(numbers2); // [ 2, 4, 6, 8, 10 ]
12、reduce()
reduce()方法在每个数组元素上运行函数，以生成（减少它）单个值。【不会改变原数组】
reduce()方法在数组中从左到右工作。另请参阅 reduceRight()【从右到左工作】。
reduce()方法能够接受一个初始值请注意此函数接受 4 个参数：
- 总数（初始值/先前返回的值）
- 项目值
- 项目索引
- 数组本身
// 确定数组中所有数字的总和：
var numbers1 =[1, 2, 3, 4, 5];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
console.log(total); // 1，3，6，10
console.log(value); // 2，3，4，5
return total + value;
}
console.log(sum); // 15
---------------------------------------------------------------------------------------------------------------------
// // 箭头函数形式
var numbers1 = [1, 2, 3, 4, 5];
var sum = numbers1.reduce((total, value) => {
console.log(total); // 1，3，6，10
console.log(value); // 2，3，4，5 【注意：因未给定初始值，所以默认数组下标0的值为初始值 1，然后输出的是数组的每一项值】
return total + value;
});
console.log(sum); // 15
---------------------------------------------------------------------------------------------------------------------
// reduce() 方法能够接受一个初始值：
var numbers1 = [1, 2, 3, 4, 5];
var sum = numbers1.reduce(myFunction, 100);
function myFunction(total, value) {
console.log(total); // 100，101，103，106，110 【注意：第一个值是所给定的初始值100，然后在每个数组元素上运行函数】
console.log(value); // 1，2，3，4，5 【注意：输出的是数组的每一项值】
return total + value;
}
console.log(sum); // 115
13、indexOf()
indexOf()方法在数组中搜索元素值并返回其位置。语法：
array.indexOf(item, start)注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
console.log(a); // 0 【注意：如果项目多次出现，则返回第一次出现的位置】
var b = fruits.indexOf("Mango");
console.log(b); // 3 【第一个项目的位置是 0，第二个项目的位置是 1，以此类推】
var c = fruits.indexOf("Hello");
console.log(c); // -1 【注意：如果未找到项目，`Array.indexOf()` 返回 -1。】
14、find()
find()方法返回通过测试函数的第一个数组元素的值。请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
// 查找（返回）大于 18 的第一个元素的值：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(first); // 25
---------------------------------------------------------------------------------------------------------------------
// 箭头函数----简写形式
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find((value) => {
return value > 18;
});
console.log(first); // 25
15、findIndex()
findIndex()方法返回通过测试函数的第一个数组元素的索引。请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
console.log(first); // 3 【注意：查找符合条件的第一个元素的索引，如果都不符合条件，则返回-1。】
16、every()
every()方法检查所有数组值是否通过测试。
- 判断数组中是不是所有的元素都符合条件，如果都符合条件返回true，否则返回false
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
// 检查所有数组值是否大于 18
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
// 如果回调函数仅使用第一个参数（值）时，可以省略其他参数：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
return value > 18;
}
17、some()
some()方法检查某些数组值是否通过了测试。
- 判断数组中是不是有一个元素符合条件，如果有一个符合条件返回true，否则返回false
请注意此函数接受 3 个参数：
- 项目值
- 项目索引
- 数组本身
// 检查某些数组值是否大于 18：
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
18、concat() 【合并多个数组】
合并多个数组【不会改变原数组】
var array1 = ["a", "b", "c"];
var bArray = ["d", "e", "f"];
var cArray = array1.concat(bArray);
console.log(cArray); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
// 不改变原数组
console.log(array1); // [ 'a', 'b', 'c' ]
console.log(bArray); // [ 'd', 'e', 'f' ]
常用的 字符串 方法
注意：字符串的方法都不会改变字符串自身 ！！！！！！
1、trim()【去除前后空格】
let str = " Runoob ";
console.log(str.trim()); // Runoob
2、split()【字符串 ===> 数组】
把字符串按某个字符切分成数组
// split()方法 ===> 在JavaScript中用于把一个字符串分割成字符串数组，
var str = "get-element-by-id";
console.log( str.split("-")); // [ 'get', 'element', 'by', 'id' ]
3、replace()【替换】
replace()方法在字符串中搜索值或正则表达式。
replace()方法返回已替换值的新字符串。
replace()方法不会更改原始字符串。提示：如果您替换值，则只会替换第一个实例。如需替换所有实例，请使用带有
g修饰符集的正则表达式。
// 普通替换
let text = "Visit Microsoft!";
let result = text.replace("Microsoft", "W3School");
console.log(result); // Visit W3School!
let text = "Mr Blue has a blue house and a blue car";
// 全局替换：
let result2 = text.replace(/blue/g, "red");
console.log(result2); // Mr Blue has a red house and a red car
// 全局的、不区分大小写的替换：
let result3 = text.replace(/blue/gi, "red");
console.log(result3); // Mr red has a red house and a red car
// 返回替换文本的函数：
let result = text.replace(/blue|house|car/gi, function (x) {
return x.toUpperCase();
});
console.log(result); // Mr BLUE has a BLUE HOUSE and a BLUE CAR
4、toUpperCase【小===>大】
把字符串中的小写英文字母转成大写
let str = "abcdef";
let result = str.toUpperCase();
console.log(result); // ABCDEF
5、toLowerCase【大===>小】
把字符串中的大写英文字母转成小写
let str = "ABCDEF";
let result = str.toLowerCase();
console.log(result); // abcdef
6、slice()【提取字符串内容】
语法：
string.slice(start, end)
slice()方法提取字符串的一部分。
slice()方法以新字符串的形式返回提取的部分，不会更改原始字符串。start 和 end 参数规定要提取的字符串部分。
第一个位置是 0，第二个是 1，…
负数从字符串的末尾来选取。
let text = "Hello world!";
// 裁切前 5 个位置：
let result = text.slice(0, 5);
console.log(result); // Hello
// 从位置 3 到末尾：
let result2 = text.slice(3);
console.log(result2); // lo world!
// 从位置 3 到 8：
let result3 = text.slice(3, 8);
console.log(result3); // lo wo
// 仅第一个字符：
let result4 = text.slice(0, 1);
console.log(result4); // H
// 仅最后一个字符：
let result5 = text.slice(-1);
console.log(result5); // l
// 整个字符串：
let result6 = text.slice(0);
console.log(result6); // Hello world!
数值去重的方法
1、Array.from(new Set)
const arr = [1, 2, 2]
const result = Array.from(new Set(arr))
console.log(result) // [ 1, 2]
2、includes方法
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
function list(arr) {
// 定义一个新的空数组
const newArr = [];
// 使用 forEach 遍历数组
arr.forEach((item) => {
// 使用 includes 去重
if (!newArr.includes(item)) {
newArr.push(item);
}
});
return newArr;
}
const arr = [1, 2, 2];
const result = list(arr);
console.log(result); // [ 1, 2]
3、map去重
//map数据结构是es6中新出的语法，其本质也是键值对，只是其键不局限于普通对象的字符串
let list = [1,2,2,3]
let newList3 = [];
let map = new Map()
list.forEach((item) => {
// 如果map.has指定的item不存在，那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组
// 如果下次出现重复的item，那么map.has(item等于ture 取反 !map.has(item)) 不执行
if (!map.has(item)) {
map.set(item,ture)
newList3.push(item)
}
})
console.log('newList3', newList3);
4、indexOf去重
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1
let list = [1,2,2,3]
let newList4 = [];
list.forEach((item) => {
// 空数组newList4第一次循环没有找到匹配的item 返回-1 执行数组添加操作
// 如果数组在第n次循环中找到了newList4数组中item 例如：item等于6 而在newList4数组中已经有9 所以indexOf就不等于-1 不执行数组添加操作
if (newList4.indexOf(item) === -1) {
newList4.push(item)
}
})
console.log('newList4', newList4); // newList4 [ 1, 2, 3 ]
5、利用 filter
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
const arr = [1, 2, 2]
const result = unique(arr)
console.log(result) // [ 1, 2]
6、双层for循环+splice()去重
function unique(arr) {
// 第一次 for 遍历
for (vari = 0; i < arr.length; i++) {
// 第二次 for 遍历
for (varj = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
//第一个等同于第二个，splice方法删除第二个
arr.splice(j, 1);
j--;
}
}
}
returnarr;
}
7、利用Array.filter和map对象去重 （性能较高）
let map = new Map();
let list3 = [
{
name: "好先森1",
id: 1,
},
{
name: "好先森1",
id: 2,
},
{
name: "好先森2",
id: 3,
},
{
name: "好先森3",
id: 3,
},
];
// 对象数组去重
function xxx(list3, key) {
return list3.filter(
(item) => !map.has(item[key].toString()) && map.set(item[key].toString())
);
}
console.log("newList8", xxx(list3, "id"));
8、利用Array.filter和Array.includes 对象数组去重
let list4 = [
{
name: "好先森1",
id: 1,
},
{
name: "好先森1",
id: 2,
},
{
name: "好先森2",
id: 3,
},
{
name: "好先森3",
id: 3,
},
];
function xxx(arr) {
let list = [];
return arr.filter(
(item) => !list.includes(item.name) && list.push(item.name)
);
}
console.log("newList9", xxx(list4));