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知识库 -> JS数组方法 -> 正文阅读

[JavaScript知识库]JS数组方法

如何识别数组

问题在于 JavaScript 运算符 typeof 返回 “object”:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // 返回 object

typeof 运算符返回 “object”,因为 JavaScript 数组属于对象。

解决方案 1:

为了解决这个问题,ECMAScript 5 定义了新方法 Array.isArray():

Array.isArray(fruits);     // 返回 true

此方案的问题在于 ECMAScript 5 不支持老的浏览器

解决方案 2:

创建您自己的 isArray() 函数以解决此问题:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

假如参数为数组,则上面的函数始终返回 true。

或者更准确的解释是:假如对象原型包含单词 “Array” 则返回 true。

解决方案 3:

假如对象由给定的构造器创建,则 instanceof 运算符返回 true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 返回 true

toString()

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

结果

Banana,Orange,Apple,Mango

🧡join()

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString(),但是您还可以规定分隔符:

实例

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

结果

Banana * Orange * Apple * Mango

pop()、push()

pop() 方法从数组中删除最后一个元素

pop() 方法返回“被弹出”的值

push() 方法(在数组结尾处)向数组添加一个新的元素

push() 方法返回新数组的长度

shift()、unshift()

shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引

shift() 方法返回被“位移出”的字符串

unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素

unshift() 方法返回新数组的长度

🧡splice()

拼接数组

splice() 方法可用于向数组添加新项:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

sort()

sort() 方法以字母顺序对数组进行排序:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();   //['Apple', 'Banana', 'Mango', 'Orange']// 对 fruits 中的元素进行排序

reverse()

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

数字排序

默认地,sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串(“Apple” 会排在 “Banana” 之前)。

不过,如果数字按照字符串来排序,则 “25” 大于 “100”,因为 “2” 大于 “1”。

正因如此,sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题:

实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 

使用相同的技巧对数组进行降序排序:

实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 

比值函数

还可以排序对象数组

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负,零或正值,这取决于参数:

function(a, b){return a-b}

当 sort() 函数比较两个值时,会将值发送到比较函数,并根据所返回的值(负、零或正值)对这些值进行排序。

通过比值函数就能查找最高(或最低)的数组值:因为排好序了

🤣Math.max()

您可以使用 Math.max.apply 来查找数组中的最高值:

实例

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

同理 Math.min()

🤣我的 Min / Max JavaScript 方法

最快的解决方法是使用“自制”方法。

此函数遍历数组,用找到的最高值与每个值进行比较:

实例(查找 Max)

function myArrayMax(arr) {
    var len = arr.length
    var max = -Infinity;
    while (len--) {
        if (arr[len] > max) {
            max = arr[len];
        }
    }
    return max;
}

🤣以随机顺序排序数组

实例

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

forEach()

该函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

map()

参数同上

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

.filter()

参数同上

filter() 方法创建一个包含通过测试的数组元素的新数组。

🤣🤣🤣reduce()

reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。

reduce() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

请注意此函数接受 4 个参数:

  • 总数(初始值/先前返回的值)
  • 项目值
  • 项目索引
  • 数组本身

上例并未使用 index 和 array 参数。可以将它改写为:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}

reduce() 方法能够接受一个初始值:

实例

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

reduceRight()

暂未了解

🤣every()

every() 方法检查所有数组值是否通过测试。

这个例子检查所有数组值是否大于 18:

实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

如果回调函数仅使用第一个参数(值)时,可以省略其他参数:

实例

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

🤣some()

some() 方法检查某些数组值是否通过了测试。

这个例子检查某些数组值是否大于 18:

实例

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

🧡find()

find() 方法返回通过测试函数的第一个数组元素的值。

可用于数组中找对象

这个例子查找(返回)大于 18 的第一个元素的值:

实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这个例子查找大于 18 的第一个元素的索引:

实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数:

  • 项目值
  • 项目索引
  • 数组本身

数组 Const

使用 const 声明数组已成为一种常见做法:

实例

const cars = ["Saab", "Volvo", "BMW"];

无法重新赋值

用 const 声明的数组不能重新赋值

🧡元素可以重新赋值

实例

// 您可以创建常量数组:
const cars = ["Saab", "Volvo", "BMW"];
// 您可以更改元素:
cars[0] = "Toyota";
// 您可以添加元素:
cars.push("Audi");

const块作用域

用 const 声明的数组具有块作用域

在块中声明的数组与在块外声明的数组不同:

实例

const cars = ["Saab", "Volvo", "BMW"];
// 此处 cars[0] 为 "Saab"
{
  const cars = ["Toyota", "Volvo", "BMW"];
  // 此处 cars[0] 为 "Toyota"
}
// 此处 cars[0] 为 "Saab"
const cars = ["Volvo", "BMW"];       // 允许
{
  const cars = ["Volvo", "BMW"];     // 允许
}
{
  const cars = ["Volvo", "BMW"];     // 允许
}

🧡Array.from()

ES6数组扩展、将伪数组对象或可遍历对象转换为真数组

该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

该类数组对象的属性名必须为数值型或字符串型的数字

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4//注意如果这个地方不是‘length’没有‘’、则返回4个undefined的数组
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

🧡🧡🧡将Set结构的数据转换为真正的数组:

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

将字符串转换为数组:

let  str = 'hello world!';//同字符串split方法
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

**🧡🧡🧡Array.from参数是一个真正的数组:**浅拷贝、因为引用类型改变还是会互相影响

let a = [1,2,3,{
            c:4
        }];
let b = Array.from(a)//Array.from会返回一个一模一样的新数组。
a===b//false

fill()

ES6为Array增加了fill()函数,使用制定的元素填充数组,其实就是用默认内容初始化数组。

参数:

  • arr.fill(value, start, end)

  • value:填充的值

  • start: 开始的下标值

  • end:结束的下标值

//传递三个参数
let a = [1,2,3,4,5]
let b = a.fill(6,1,4)
console.log(b)   //[1, 6, 6, 6, 5]
//传递两个参数,那么最后一个值就是到数组的末尾
let a = [1,2,3,4,5]
let b = a.fill(6,1)
console.log(b)   //[1, 6, 6, 6, 6]
//传递一个参数
let a = [1,2,3,4,5]
let b = a.fill(6)
console.log(b)   //[6, 6, 6, 6, 6]

Array.of()和Array()的区别

感觉这两方法都大可不必、直接字面量创建

Array() : 可以有没参数,表示创建一个数组

? 如果一个参数,设置数组的长度,如果这个值是Number类型,则返回[empty × num]

? 如果 多个参数,表示创建数组数组并且初始化

? Array()是构造方法

a = new Array(1, 2, 3);
a = Array(1, 2, 3); // new可省略

Array.of(): 总是返回参数值组成的数组ES6

? Array.of()是静态方法,也返回一个数组

? Array.of(…elements) 创建一个具有可变数量参数的新的数组实例

if (! Array.of) {
  Array.of = function() {
    // 用到了arr.slice(?start, ?end)方法,且置换了运行时其内部的this。
    return Array.prototype.slice.call(arguments);
  }
}

其他

flat(),flatMap()

用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位,flat()方法会跳过空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

delete 运算符

既然 JavaScript 数组属于对象,其中的元素就可以使用 JavaScript delete 运算符来删除

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

自动 toString()

如果需要原始值,则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果:

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits; 

所有 JavaScript 对象都拥有 toString() 方法。

entries keys values这三个数组里不咋用

小知识点

无需使用 new Array()。出于简洁、可读性和执行速度的考虑,请使用第一种方法(数组文本方法)。

注意改变数组的7个方法、非纯函数

🧡所有 JavaScript 对象都拥有 toString() 方法。

for和if都会形成作用域

数组切片就用splice来做吧、作用更大

和字符串相同方法

concat()、slice()、indexOf()、includes()

concat()

合并(连接)数组

concat() 方法通过合并(连接)现有数组来创建一个新数组

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数:

实例(合并三个数组)

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

slice()

裁剪数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 (“Orange”)开始切出一段数组:

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); //['Orange', 'Lemon', 'Apple', 'Mango']

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 (“Apple”)开始切出一段数组:

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3); 

slice() 可接受两个参数,比如 (1, 3)。

该方法会从开始参数选取元素,直到结束参数(不包括)为止。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 

如果结束参数被省略,比如第一个例子,则 slice() 会切出数组的剩余部分。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); 

includes()

同字符串方法

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-04 12:46:00  更:2021-10-04 12:46:11 
 
开发: 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年5日历 -2024/5/18 23:35:08-

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