JS|JS数组方法 html5|html|javascript

文章目录

- 如何识别数组
- toString()
- join()
- pop()、push()
- shift()、unshift()
- splice()
- sort()
- reverse()
- 数字排序
- Math.max()
- 我的 Min / Max JavaScript 方法
- 以随机顺序排序数组
- forEach()
- map()
- .filter()
- reduce()
- reduceRight()
- every()
- some()
- find()
- findIndex()
- 数组 Const
- Array.from()
- fill()
- Array.of()和Array()的区别
- 其他
- 小知识点
- 和字符串相同方法

如何识别数组问题在于 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(); // 反转元素顺序

数字排序 【JS|JS数组方法】默认地，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 ]

将字符串转换为数组：

letstr = '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”）开始切出一段数组：
实例