【前端芝士树】Array的属性及方法整理（参照MDN）

MoAir 发布于2019-08-23 16:15 / 3574人阅读

摘要：本文主要是我自己对的一些整理，参考自，其中的分类有些不准确之处，还望见谅的基本属性属性的一些方法增删改查基础功能增删改查基础功能增删改删除数组的第一个元素删除数组的最后一个元素在数组的开头一个或多个元素，在数组的末尾增加一个或者多个元素数组

本文主要是我自己对Array的一些整理，参考自MDN，其中的分类有些不准确之处，还望见谅

Array

const arr = ["1", "2", "3", "four", "hello"];
let arrObj = new Array();

Array的基本属性

// 属性
console.log(arr.length); //5
console.log(arr.__proto__);

Array的一些方法 Array 增删改查 && 基础功能

/**
 * 增删改查 && 基础功能
 */
// 增删改
arr.shift(); //删除数组的第一个元素
arr.pop(); //删除数组的最后一个元素
arr.unshift(); //在数组的开头一个或多个元素，
arr.push(); //在数组的末尾增加一个或者多个元素
[1, 2, 3].concat([6, 7, 8]); //数组合并 [1,2,3,6,7,8]
[1, 2, 3, 4, 5].copyWithin(0, 1, 2); // 浅复制一部分，[2,2,3,4,5], arr.copyWithin(target[, start[, end]])
// splice(start, deleteCount, item) 删除或者替换现有元素，返回被修改或者删除的部分
[1, 2, 3].splice(1, 0, "hello"); // [] 原数组变成了[1, "hello", 2, 3]

// 查找
[1, 2, 3, 4, 5, 6].find(item => item > 3); // 返回复合条件的第一个值 4
[1, 2, 3, 4, 5, 6].findIndex(item => item > 3); // 返回复合条件的第一个值的位置索引 3
[1, 2, 3, 4, 5, 6].includes(3); // 判断数组是否包含一个指定的值 true
[1, 2, 3, 4, 5, 6].includes(7); // false
[1, 2, 3, 4, 5, 6].indexOf(3); // 判断数组是否包含一个指定的值 2
[1, 2, 3, 4, 5, 6].indexOf(7); // -1
[1, 2, 3, 4, 5, 6].lastIndexOf(3); // 从后往前找 2
[1, 2, 3, 4, 5, 6].lastIndexOf(7); // -1

Array 遍历

// 遍历所有的元素
[1, 2, 3, 4, 5, 6].forEach(item => console.log(item)); //1,2,3,4,5,6

// 填充数组
[1, 2, 3, 4, 5, 6].fill(0, 1); //[1, 0, 0, 0, 0, 0]
[1, 2, 3, 4, 5, 6].fill(); //[0, 0, 0, 0, 0, 0]

// 过滤数组
[1, 2, 3, 4, 5, 6].filter(item => {
  return item > 3;
}); // [4,5,6]

// 排序 原地归并算法 稳定 nlog(n)
[1, 3, 4, 2].sort(); // 默认从小到大 [1, 2, 3, 4]

Array 测试

/**
 * 测试
 */
[1, 30, 39, 29, 10, 13].every(currentValue => {
  return currentValue < 40;
}); // arr.every() 测试数组的所有元素是否是通过了指定函数 true
[1, 30, 39, 29, 10, 13].some(curr => curr < 2); // 测试是否至少有一个元素通过测试 true

Array 转换 && 返回新的对象

/**
 * 转换 && 返回新的对象
 */
[1, 2, 3, 4, 5, 6].join("-"); // 数组转为字符串 "1-2-3-4-5-6"
[1, 2, 3].toString(); // 转换为字符串，相当于join(","); "1,2,3"
[1, 2, 3].map(item => item * 2); // 映射器 [2, 4, 6]
[1, 2, 3].reduce((acc, curr) => {
  return acc + curr;
}); // 累加器 从左到右 6
[1, 2, 3].reverse(); // 翻转数组 [3, 2, 1]
[1, 2, 3].slice(1, 2); // 从原数组中选取值，返回新数组 slice(begin, end) [2]
const keys = ["a", "b", "c"].keys(); // 返回每个索引键的 Array Iterator {} 对象
for (let key of keys) {
  console.log(key); // expected output: 0 1 2
} // 0 1 2
const values = ["a", "b", "c"].values(); // 返回每个索引键的 Array Iterator {} 对象
for (const value of values) {
  console.log(value); // expected output: "a" "b" "c"
}

Array 实验中的功能 && 其他

/**
 * 实验中的功能 IE和Edge不支持
 *  */
// flat(depth) 展开嵌套数组
[1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]]
[1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6]
[1, 2, [3, 4, [5, 6]]].flat(Infinity); // [1, 2, 3, 4, 5, 6]

// 其他
const arr2 = Array.of(1, 2, 3); // [1,2,3]

const iter = ["a", "b", "c"].entries(); // 返回一个Array Iterator
iter.next().value; // [0, "a"]

专线服务 idc机房托管数据整理及存储方案 array方法前端技能树属性定义方法

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

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

【前端芝士树】Javascript的原型与原型链

摘要：在创建对象不论是普通对象还是函数对象的时候，都有一个叫做的内置属性，用于指向创建它的构造函数的原型对象，也就是。因为一个普通对象的构造函数所以原型链原型链的形成是真正是靠而非。参考文章最详尽的原型与原型链终极详解，没有可能是。【前端芝士树】Javascript的原型、原型链以及继承机制前端的面试中经常会遇到这个问题，自己也是一直似懂非懂，趁这个机会整理一下 0. 为什么会出现原型和...

yy736044583 2019-08-23 12:17 评论0 收藏0
【芝士整理】HTML的标签们

摘要：读一遍文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。结构化，通过标签先后顺序和嵌套语法给树提供基础。标签列表基于个人理解即非官方描述，给标签划分为结构化标签语义化标签功能化标签，文档标签。读一遍MDN文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。关于HTML HTML的作用可以简单总结为结构化、语义化和提供基础...

stonezhu 2019-08-02 16:06 评论0 收藏0
【前端芝士树】浅拷贝、深拷贝以及Object.assign()的作用、克隆对象、复制数组

摘要：前端芝士树浅拷贝深拷贝以及的作用首先还是得回到的基本数据类型。值类型深拷贝数值布尔值字符串。它接受任意数量的源对象，主要作用就是枚举它们的所有属性并分配给。【前端芝士树】浅拷贝、深拷贝以及Object.assign()的作用首先还是得回到Javascript的基本数据类型。值类型[深拷贝]：数值Num、布尔值Boolean、字符串String、null、undefined。基本...

ccj659 2019-08-23 16:14 评论0 收藏0
【前端芝士树】如何完成数组的去重 Array Unique？

摘要：前端芝士树如何完成数组的去重输入推荐方法其他方法利用实现数据的去重【前端芝士树】如何完成数组的去重 Array Unique？输入 const users = [{ id: 1, name: a }, { id: 2, name: a }, { id: 3, name: b }, { id: 4, name: v }]; 推荐方法 Array.prototype.u...

doodlewind 2019-08-23 13:01 评论0 收藏0
【前端芝士树】如何完成数组的扁平化 Array flattern？

摘要：前端芝士树如何完成数组的扁平化问题描述输入一个嵌套型数组输出扁平化后的数组如果只是两层的数据如果是多层嵌套的数组【前端芝士树】如何完成数组的扁平化 Array flattern？问题描述输入：一个嵌套型数组输出：扁平化后的数组 let array = [1, [2, 3, 4]]; let arrayDeeper = [1, [2, [3, 4]]]; 如果只是两层的数据 fun...

2shou 2019-08-23 12:57 评论0 收藏0