【收藏】JavaScript数组方法速查手册极简版-低调大师

【收藏】JavaScript数组方法速查手册极简版

2019-04-29 638

1 概述

1.1 前言

JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性，并根据方法的用途进行重新排序和分类，在文中简要的介绍了方法作用和用例说明。收藏备用吧！

文中介绍的过于简单，想更更多理解相关内容还是要多多动手实践！

2 数组属性

2.1 length-长度属性

每个数组都有一个length属性。针对稠密数组，length属性值代表数组中元素的个数。当数组是稀疏数组时，length属性值大于元素的个数。

var array1 = [ 'a', 'b', 'c' ];  
console.log(array1.length);  // 输出 3
array1.length = 2;
console.log(array1);  // 输出 [ "a", "b" ]

查看示例程序

3 数组方法

3.1 Array.isArray-类型判定

Array.isArray() 数组类型判定。

console.log(Array.isArray([1, 2, 3]));   // 输出 true
console.log(Array.isArray({num: 123}));   //输出 false

查看示例程序

3.2 Array.of-创建数组

Array.of() 从可变数量的参数创建数组，不管参数的数量或类型如何。

console.log(Array.of(3));    // 输出 [3]
console.log(Array.of(1,2,3));   // 输出 [1,2,3]

查看示例程序

3.3 Array.from-创建数组

Array.from() 用类数组或可迭代对象创建新数组。

console.log(Array.from('abcd'));  // 输出 [ "a", "b", "c", "d" ]
console.log(Array.from([1, 2, 3], x => x + 1));  // 输出 [ 2, 3, 4 ]

查看示例程序

4 数组原型方法

4.1 查找元素

4.1.1 find-按函数查找

Array.prototype.find() 找到第一个满足检测函数条件的元素，并返回该元素，没找到则返回 undefined。

var array1 = [1, 2, 3, 4, 5];
console.log(array1.find(x => x > 3));    // 输出  4

查看示例程序

4.1.2 findIndex-按函数查找

Array.prototype.findIndex() 找到第一个满足检测函数条件的元素，并返回该元素索引。找不到返回-1。

var array1 = [6, 7, 8, 9, 10];
console.log(array1.findIndex(x => x > 8));    // 输出  3

查看示例程序

4.1.3 indexOf-按元素值查找

Array.prototype.indexOf() 查找元素并返回元素索引值，找不到返回-1。

var arr= [1, 2, 3, 4];
console.log(arr.indexOf(3));    // 输出 2
console.log(arr.indexOf(6));    // 输出 -1
console.log(arr.indexOf(2, 2));    // 输出 -1

第二个参数表示查找的起始位置。

查看示例程序

4.1.4 lastIndexOf-按元素值查找

Array.prototype.lastIndexOf() 从后向前查找元素并返回元素索引值，找不到返回 -1。

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.lastIndexOf('b'));    // 输出 1
console.log(arr.lastIndexOf('e'));    // 输出 -1

查看示例程序

4.2 添加元素

4.2.1 push-尾部添加

Array.prototype.push() 在尾部添加一个或多个元素，返回数组的新长度。

var array1= ['a', 'b', 'c'];
console.log(array1.push('d'));   // 输出 4
console.log(array1);   // 输出 [ "a", "b", "c", "d" ]

查看示例程序

4.2.2 unshift-头部添加

Array.prototype.unshift() 在头部添加一个或多个元素，并返回数组的新长度。

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

查看示例程序

4.3 删除元素

4.3.1 pop-尾部删除

Array.prototype.pop() 从尾部删除一个元素，并返回该元素。

var array1= ['a', 'b', 'c', 'd'];
console.log(array1.pop());    // 输出 d
console.log(array1);    // 输出 [ "a", "b", "c" ]

查看示例程序

4.3.2 shift-头部删除

Array.prototype.shift() 从头部删除一个元素，并返回该元素。

var array1 = [1, 2, 3];
console.log(array1.shift());    // 输出 1
console.log(array1);    // 输出 [ 2, 3 ]

查看示例程序

4.4 替换元素

4.4.1 splice-添加替换删除

Array.prototype.splice() 添加、替换、删除元素。会改变原数组。

var array1 = [ 'a', 'c', 'd' ];
array1.splice( 1, 0, 'b');
console.log(array1);    // 输出 [ "a", "b", "c", "d" ]
array1.splice(1,1);
console.log(array1);    // 输出 [ "a", "c", "d" ]
array1.splice(1,1,'bb','cc');
console.log(array1);    // 输出 [ "a", "bb", "cc", "d" ]

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数 start：表示替换的位置
参数 deleteCount ：表示删除元素的数量
参数 item1... ：表示添加的元素

查看示例程序

4.5 顺序相关

4.5.1 sort-排序

Array.prototype.sort() 数组排序，改变原数组。

var array1 = [ 4, 3, 10, 2 ];
console.log(array1.sort());    // 输出 [ 10, 2, 3, 4 ]
console.log(array1.sort((x1, x2) => x1 > x2));    // 输出 [ 2, 3, 4, 10 ]

查看示例程序

4.5.2 reverse-反序

Array.prototype.reverse() 倒置数组，并返回新数组。会改变原数组。

var sourceArray= [ 'a', 'b', 'c' ];
var reverseArray = sourceArray.reverse();
console.log(reverseArray);    // 输出 [ "c", "b", "a" ]
console.log(sourceArray == reverseArray);    // 输出 true

查看示例程序

4.6 遍历迭代

4.6.1 keys-键迭代器

Array.prototype.keys() 数组的键迭代器。

var array1 = ['a', 'b', 'c'];
for (let key of array1.keys()) {
  console.log(key);     // 输出 0, 1, 2
}

查看示例程序

4.6.2 values-值迭代器

Array.prototype.values() 数组的值迭代器。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
  console.log(value);     // 输出 a b c
}

查看示例程序

4.6.3 entries-键/值对迭代器

Array.prototype.entries() 数组的键/值对迭代器。

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value);    // 输出 Array [0, "a"]
console.log(iterator1.next().value);    // 输出 Array [ 1, "b" ]

查看示例程序

4.6.4 forEach-遍历

Array.prototype.forEach() 遍历数组中的元素，并执行回调函数。

var arr = [1, 2, 3, 4];
arr.forEach(function (x) {
    console.log(x + 1);    // 输出 2  3  4  5
});

查看示例程序

4.7 检测

4.7.1 includes-值包含检测

Array.prototype.includes() 值包含检测，如包含返回 true，不包含返回false。

var array1 = [1, 2, 3];
console.log(array1.includes(2));    // 输出 true
console.log(array1.includes(4));    // 输出 false

查看示例程序

4.7.2 some-函数包含检测

Array.prototype.some() 检测数组中是否有元素可以通过检测函数验证。

var array1 = [ 1, 2, 3, 4 ];
console.log(array1.some(x => x >3));    // 输出  true
console.log(array1.some(x => x > 5));    // 输出  false

查看示例程序

4.7.3 every-函数完全检测

Array.prototype.every() 检测数组中是否所有元素都可以通过检测函数验证。

var array1 = [ 1, 2, 3, 4, 5 ];
console.log(array1.every(x => x < 8));    //输出 true
console.log(array1.every(x => x < 4));    //输出 false

查看示例程序

4.8 合并

4.8.1 join-合并成字符串

Array.prototype.join() 合并数组中所有元素成为字符串并返回。

var array1= [ 'a', 'b', 'c' ];
console.log(array1.join());    // 输出 a,b,c
console.log(array1.join("-"));   // 输出 a-b-c

查看示例程序

4.8.2 concat-合并成数组

Array.prototype.concat() 合并两个或多个数组，返回一个全新数组，原数组不变。

var array1 = [ 'a', 'b' ];
var array2 = [ 'c', 'd' ];
console.log(array1.concat(array2));    // 输出 [ "a", "b", "c", "d" ]

该方法可以有多个参数。

查看示例程序

4.9 累计

4.9.1 reduce-左侧累计

Array.prototype.reduce() 从左至右按 reducer 函数组合元素值，并返回累计器终值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));    // 输出 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));    // 输出 15，其中5是累计器初始值。

查看示例程序

4.9.2 reduceRight-右侧累计

Array.prototype.reduceRight() 从右至左按 reducer 函数组合元素值，并返回累计器终值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator.concat(currentValue);
console.log(array1.reduceRight(reducer));    // 输出 [ 4, 3, 2, 1 ]
console.log(array1.reduceRight(reducer, 5));    // 输出 [ 5, 4, 3, 2, 1 ]

查看示例程序

4.10 copyWithin-内部复制

Array.prototype.copyWithin() 数组内部复制，不改变原数组长度。

var array1 = ['a', 'b', 'c', 'd', 'e','f'];
console.log(array1.copyWithin(0, 3, 5));    // 输出 [ "d", "e", "c", "d", "e", "f" ]
console.log(array1.copyWithin(1, 3));    // 输出 [ "d", "d", "e", "f", "e", "f" ]

arr.copyWithin(target[, start[, end]])

参数target : 表示要复制到的索引位置，如为负值则从后向前计数。
参数start : 表示要复制序列的起始索引位置，如为负值则从后向前计数。如省略该值，则从索引0开始。
参数end : 表示要复制序列的结束位置，如为负值则从后向前计数。如省略该值，则复制到结尾位置。

查看示例程序

4.11 fill-填充函数

Array.prototype.fill() 用固定值填充起始索引到终止索引区间内的全部元素值，不包括终止索引。

var array1 = [1, 2, 3, 4];
console.log(array1.fill(9, 2, 4));    // 输出 [ 1, 2, 9, 9 ]
console.log(array1.fill(8, 1));      // 输出 [ 1, 8, 8, 8 ]
console.log(array1.fill(7));          // 输出 [ 7, 7, 7, 7 ]

查看示例程序

4.12 filter-过滤函数

Array.prototype.filter() 生成由通过检测函数验证元素组成的新数组并返回。

var arr = [ 9 , 8 , 7 , 6];
console.log(arr.filter(x => x >7));    //输出 [ 9, 8 ]

查看示例程序

4.13 flat-数组扁平化

Array.prototype.flat() 按指定深度递归遍历数组，并返回包含所有遍历到的元素组成的新数组。不改变原数组。

var arr1 = [ 1, 2, [ 3, 4 ] ];
console.log(arr1.flat());     // 输出 [ 1, 2, 3, 4 ]
var arr2 = [ 1, 2, [3, 4, [ 5, 6 ] ] ];
console.log(arr2.flat());    // 输出 [ 1, 2, 3, 4,  [ 5, 6 ] ]
var arr3 = [1, 2, [ 3, 4, [ 5, 6 ] ] ];
console.log(arr3.flat(2));    // 输出 [ 1, 2, 3, 4, 5, 6 ]

查看示例程序

4.14 map-映射

Array.prototype.map() 创建一个新数组，该数组中的元素由原数组元素调用map函数产生。

var array1 = [1, 2, 3, 4];
console.log(array1.map(x => x * 2));    // 输出 [ 2, 4, 6, 8 ]

查看示例程序

4.15 slice-截取数组

Array.prototype.slice() 按参数begin 和 end 截取数组，不改变原数组。

var array1 = [ 1, 2, 3, 4, 5];
console.log(array1.slice( 2, 4 ));    //输出 [ 3, 4 ]
console.log(array1);    //输出 [ 1, 2, 3, 4, 5 ]

查看示例程序

5 结尾

5.1 结语

文中介绍的过于简单，想更多理解相关内容还是要多多动手实践！

因时间不足，能力有限等原因，存在文字阐述不准及代码测试不足等诸多问题。如发现错误请不吝指正！谢谢。

微信关注我们

原文链接：https://yq.aliyun.com/articles/700755

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Python爬虫入门教程 17-100 CSDN博客抓取数据

1.写在前面写了一段时间的博客了，忽然间忘记了，其实博客频道的博客也是可以抓取的其实这事情挺简单的，打开CSDN博客首页，他不是有个最新文章么，这个里面都是最新发布的文章。打开F12抓取一下数据API，很容易就获取到了他的接口提取链接长成这个样子 https://blog.csdn.net/api/articles?type=more&category=newarticles&shown_offset=1540381234000000 发现博客最新文章是一个瀑布流页面，不断下拉，只有一个参数shown_offset 在变化，按照我多年的行医经验，这个参数是个时间戳，而且肯定是上一次数据最后一条的时间戳。基于这个理论，看一下数据，咦，猜对了~ 博客返回的数据看一下，是否对味 2.CSDN博客撸代码这个步骤就非常简单了，就

2019-04-30

617

C#以太坊基础入门在这一部分，我们将使用C#开发一个最简单的.Net控制台应用，来接入以太坊节点，并打印所连接节点旳版本信息。通过这一部分的学习，你将掌握以下技能：如何使用节点仿真器如何在命令行访问以太坊节点如何在C#代码中访问以太坊节点我们将使用ganache来模拟以太坊节点。ganache虽然不是一个真正的以太坊节点软件，但它完整实现了以太坊的JSON RPC接口，非常适合以太坊智能合约与去中心化应用开发的学习与快速验证： ganache启动后将在8545端口监听http请求，因此，我们会将JSON RPC调用请求使用http协议发送到节点旳8545端口。不同的节点软件可能会使用不同的监听端口，但大部分节点软件通常默认使用8545端口。以太坊规定了节点必须实现web3_clientVersion 调用来返回节点软件的版本信息，因此我们可以用这个命令来测试与节点旳链接是否成功。 ganache-cli是以太坊节点仿真器软件ganache的命令行版本，可以方便开发者快速进行以太坊DApp的开发与测试。在windows下你也可以使用其GUI版本。启动ganache很简单...

2019-04-30

635

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。