IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript中数组常用方法总结 -> 正文阅读

[JavaScript知识库]JavaScript中数组常用方法总结

这是在JavaScript数组中一些操作方法的总结,希望对大家有所帮组


1.unshift() 方法 向数组的头部添加任意个元素, 并返回新的数组长度, 会改变原数组.

let arr = [2,3,4,5];

console.log(arr.unshift(3,6)); // 6 数组长度

console.log(arr); // 打印结果 [3,6,2,3,4,5]

2.shift() 方法 在数组的头部删除一个元素, 并返回删除掉的元素, 改变原数组.

let arr = [2,3,4,5];

let Array = arr.shift() 
console.log(Array); // 2 返回值

console.log(arr); // 打印结果 [3,4,5]

3.push() 方法 在数组的尾部添加任意个元素, 并返回新的数组长度, 会改变原数组

var a = [2,3,4];

var b = a.push(5);

console.log(a); //[2,3,4,5]

console.log(b); //4

4.pop() 方法 在数组尾部删除一个元素。返回被删除掉的元素,会改变原数组.

var arr = [2,3,4];

console.log(arr.pop()); //4

console.log(arr); //[2,3]

5.concat() 方法 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]

6.join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串. 元素是通过指定的分隔符进行分隔的,默认使用','号分割,不改变原数组。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

7.splice() 方法 可以在任意位置删除或者在任意位置添加元素,并以数组形式返回被修改的内容。此方法会改变原数组。
其中参数的含义 : (1.什么位置开始删除, 2.要删除元素的个数, 3.要添加的元素)

var a = [5,6,7,8];

console.log(a.splice(1,0,9)); //[]

console.log(a); // [5, 9, 6, 7, 8]

var b = [5,6,7,8];

console.log(b.splice(1,2,3)); //[6, 7]

console.log(b); //[5, 3, 8]

8.slice()?方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

var arr = [2,3,4,5];

console.log(arr.slice(1,3)); //[3,4]

console.log(arr); //[2,3,4,5]

10.sort (),按照 Unicode code 位置排序,默认升序

var fruit = ['cherries', 'apples', 'bananas'];

fruit.sort(); // ['apples', 'bananas', 'cherries']

var scores = [1, 10, 21, 2];

scores.sort(); // [1, 10, 2, 21]

11.reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组。

var arr = [1,2,3,4];

console.log(arr.reverse()); //[4, 3, 2, 1]

console.log(arr); //[4, 3, 2, 1]

12.indexOf() 和 lastIndexOf()

都接受两个参数:查找的值、查找起始位置

不存在,返回 -1 ;存在,返回位置。indexOf 是从前往后查找 ; lastIndexOf 是从后往前查找。

indexOf用法

var a = [2, 9, 9];

a.indexOf(2); // 0

a.indexOf(7); // -1

if(a.indexOf(7) === -1) {

?// 若数组中找不到7,done
}

lastIndexOf用法

var numbers = [2, 5, 9, 2];

numbers.lastIndexOf(2);? // 3

numbers.lastIndexOf(7);? // -1

numbers.lastIndexOf(2, 3); // 3

numbers.lastIndexOf(2, 2); // 0

numbers.lastIndexOf(2, -2); // 0

numbers.lastIndexOf(2, -1); // 3

13.forEach() 数组遍历

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

14.filter(),对数组的每一项都运行给定的函数,返回 结果为 ture 的项组成的数组

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

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

var numbers = [1, 5, 10, 15];

var doubles = numbers.map(function(x) {

/*arr.map(function callback(currentValue[, index[, array]])
参数: 1.currentValue | callback 数组中正在处理的当前元素
      2.index可选 | callback 数组中正在处理的当前元素的索引
      3.array可选 | map 方法调用的数组。 /*
      
??returnx * 2;

});

// doubles is now [2, 10, 20, 30]

// numbers is still [1, 5, 10, 15]

16.includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

17.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
//  output: 12

18.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

19.toString() 返回一个字符串,表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

20.toLocaleString() 返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary

21.flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

22.reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值

const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

23.some(),对数组的每一项都运行给定的函数,任意一项都返回 ture,则返回?true

function compare(element, index, array) {

?returnelement > 10;

}?

[2, 5, 8, 1, 4].some(compare); // false

[12, 5, 8, 1, 4].some(compare); // true

24.values() 方法返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

25.every(),对数组的每一项都运行给定的函数,每一项都返回 ture,则返回 true

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

26.substring() 和 substr()

相同点:如果只是写一个参数,两者的作用都一样:都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

substr(startIndex);

substring(startIndex);

varstr = '123456789';

console.log(str.substr(2)); // "3456789"

console.log(str.substring(2)) ;// "3456789"

不同点:第二个参数

substr(startIndex,lenth): 第二个参数是截取字符串的长度(从起始点截取某个长度的字符串);

substring(startIndex, endIndex): 第二个参数是截取字符串最终的下标 (截取2个位置之间的字符串,‘含头不含尾')。

console.log("123456789".substr(2,5)); // "34567"

console.log("123456789".substring(2,5)) ;// "345"

等一下, 您先别走, 还没有?点赞?加?关注?呢 !
如要了解数组的更多方法,还是建议去?MDN?上学习.

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-15 15:25:42  更:2021-08-15 15:27:10 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 8:48:41-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码