js中Array方法归类解析

mudiyouyou 发布于2019-08-22 14:56 / 2390人阅读

摘要：为什么要对方法进行归类解析因为它常用，而且面试必问改变原数组的方法删除并返回数组最后一个元素从末尾给数组添加元素，返回新数组值颠倒数组元素，返回颠倒后的数组删除并返回第一个元素值数组排序删除指定位置开始指定长度的元素，返回被删除的项目。

为什么要对Array方法进行归类解析

因为它常用，而且面试必问

改变原数组的方法

pop 删除并返回数组最后一个元素
push 从末尾给数组添加元素，返回新数组length值
reverse 颠倒数组元素，返回颠倒后的数组
shift 删除并返回第一个元素值
sort 数组排序
splice 删除指定位置开始指定长度的元素，返回被删除的项目。
unshift 向数组开头添加多个元素，返回新数组长度

不改变原数组

concat 返回合并后数组的副本
join 返回一个通过连接符连接数组元素的字符串
slice 返回选中元素的新数组
toString 返回字符串等同于join()

如何循环一次删除多个元素并改变数组长度

for (var i = arr.length - 1; i >= 0; i--){
    if(arr[i] === 1){
        arr.splice(i,1)
    }
}

操作Array元素的callback的方法集合

forEach、map、filter、every、some、reduce、reduceRight

forEach对元素上执行callback的操作

var a = ["1", 20, 30];
a.forEach((item, index, a)=>{
    ++item
}) // 不会改变a值
a.forEach((item, index)=>{
    a[index] = ++item
}) // 改变a值

map对元素callback并返回一个由callback返回值组成的新数组

var a = ["1", 20, 30];
var b = a.map((item, index, a)=>{
    return ++item // 如果没有return会输出undefined
}) // [2,22,32]

filter返回元素callback返回值为true的元素组成的新数组

var a = ["1", 20, 30];
console.log(a.filter((item)=>{
    return typeof item === "string"
})) //["1"]

every当所有元素的callback都返回true时，值为true。用于判断所有元素是否符合某一条件

var a = ["1", 20, 30];
console.log(a.every((item)=>{
    return typeof item === "string"
})) // false

some只要其中一个元素callback返回true，值为true。用于判断某一个元素符合单一条件的情况

var a = ["1", 20, 30];
console.log(a.some((item)=>{
    return typeof item === "string"
})) // true

reduce和reduceRight是数组元素两两按照callback的逻辑进行递归处理。返回处理完以后的结果。

var a = ["1", 20, 30];
var total = a.reduce(function(first, second) { return first + second; }, 2);
console.log(total) // 212030(((第二个参数2+"1")+20)+30)
var total = a.reduceRight(function(first, second) { return first + second; }, 2);
console.log(total) // 521(((第二个参数2+30)+20)+"1")

如何循环删除多个元素，数组长度不变

for (let i = 0; i < arr.length; i++){
    if(arr[i] === 1){
       delete arr[i]
    }
}
// 删除对应元素后，对应元素被置换为undefined,但是对应的i值(i in arr为false),直接复制arr[i]=undefined时i in arr 为 true

ES6 数组去重

let arr = [1,2,3,1,2,3,4]
let set = new Set(arr)
arr = [...set]

数组的一些扩展方法

Array.from()，Array.of()，Array.prototype.copyWithin()，includes()

参考文献

Array的扩展方法

GPU云服务器云服务器互联网中域名解析方法 js中数据排序方法 js方法中变量前置 js中keyup方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93018.html

js中Array方法归类解析

摘要：为什么要对方法进行归类解析因为它常用，而且面试必问改变原数组的方法删除并返回数组最后一个元素从末尾给数组添加元素，返回新数组值颠倒数组元素，返回颠倒后的数组删除并返回第一个元素值数组排序删除指定位置开始指定长度的元素，返回被删除的项目。为什么要对Array方法进行归类解析因为它常用，而且面试必问改变原数组的方法 pop 删除并返回数组最后一个元素push 从末尾给数组添加元素，返...

li21 2019-08-01 18:39 评论0 收藏0
JS中如何准确判断数据类型

摘要：对于此处的类型都是实例后的对象，并不会深入识别他们的构造函数这里不是数据类型。通过上面的判断，我们知道它并不能满足一些内置构造函数创建的伪类型。在我的第一篇文章里，介绍过JS各大类型并使用typeof进行输出查看.也有提到过每个函数都有一个自己的内部属性[[class]]，这个class指的是js内部分类.这个类的大致包括：数据类型和构造函数这两种。 JavaScript类型介绍 ...

KitorinZero 2019-08-20 16:41 评论0 收藏0
强迫症->js注释规范

摘要：之前自己写代码，就像一盘散沙，完全没有一种规范。经过最近一段时间的开发，和对一些注释风格的参考，形成了自己想去使用的注释规范。如果变量注释有点长，就不太好了。之前自己写代码，就像一盘散沙，完全没有一种规范。这种自由，会让自己写的东西时常变化。也很不利于团队协作开发。经过最近一段时间的开发，和对一些注释风格的参考，形成了自己想去使用的注释规范。 js的组织是模块化，一个模块对...

Thanatos 2019-08-19 14:44 评论0 收藏0
深入理解 form 系列（一）-- HTML 表单

摘要：表单元素从到表单相关的元素已经得到了很大的扩充基本能够满足我们常见的需求。但在此之前清楚的了解并掌握各种表单元素还是很重要的。在本文中我们将对表单元素默认是指表单元素进行详细的阐述。表单元素从 HTML 到 HTML5, 表单相关的元素已经得到了很大的扩充, 基本能够满足我们常见的需求。但在实际工作中, 因为交互或者浏览器兼容的需要, 有时候不得不对原生的表单元素进行扩展或者模拟。...

cnio 2019-08-20 13:52 评论0 收藏0