javascript 数组 对象的一些方法记录

记录一下常用的数组和对象的一些方法

  1. 数组
  • push() 数组后添加元素
// 作用:把一个元素或多个元素,从数组后面添加到数组里面;
// 参数:添加的数据
// 返回:添加后的数组的长度;
let arr = [1, 2, 3];
arr.push(5, "6");
  • find() 数组中找出符合条件的第一个元素
let result = [].find(function(item,index,self){
    return true;
});

// 回调函数有三个参数,分别表示:数组元素的值、索引、整个数组
// 如果某次循环返回的是true,find方法的返回值就是满足这个条件的第一个元素。
// 如果没有找到会返回undefined。

// 用法:找数组中第一个小于0的数字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
    return item < 0;
});
let result =arr.find(item=>item<0)  // -4
  • findIndex 获得指定数组元素下标
// 参数:函数(被传入的函数,回调函数)
//      格式要求:
//          item  回调函数,代表每一次遍历的数据
//          return 判断条件
// 返回:满足条件的第一个元素的下标,若没有,返回-1;
var index = arr.findIndex(function(item) {
    return item === 20;
});
console.log(index);

// 根据 nowArticleID 把其在 articleList 数组中的下标给获得到
const index = this.articleList.findIndex(
    item => item.art_id === this.nowArticleID
)
  • pop 数组后置删除元素
// 作用:从数组的后面删除一个元素
// 参数:无;
// 返回:被删除的元素;

var arr = [2,5,9,8,7,6]
var res = arr.pop();
console.log(arr, res);
  • unshift 数组前置追加元素
  // 作用:从数组前面添加数据(一个或者多个)
  // 参数:一个或者多个;
  // 返回:添加后的数组的长度

  var l = arr.unshift("a", "b");
  console.log(arr, l);
  • shift 数组前置删除元素
// 作用:从数组的前面删除一个元素
// 参数:无;
// 返回:被删除的元素;

var arr = [2,5,9,8,7,6]
var res = arr.shift();
console.log(arr, res);
  • map数组映射
    map映射方法:对数组进行遍历,返回一个新数组,元素个数与被处理数组一致,但是元素的value值是map处理过的。map映射方法:对数组进行遍历,返回一个新数组,元素个数与被处理数组一致,但是元素的value值是map处理过的。
// 获取频道的全部id,以数组格式返回
const userChannelIds = this.channelList.map(item => {
    return item.id
})

var a = [1,2,3,4,5]
var b = a.map(function(current,index,array){
    return current + 1
})

console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

  • filter数组过滤
    filter方法,对数组的元素进行过滤,把符合条件的元素重新组成数组返回。
// 作用:对当前数组一定的过滤;
// 参数:函数(函数)格式要求:
//      函数参数:item,index,arr
//      item:每个数据
//      index:下标;
//      arr:当前遍历的数组;
//      return 过滤条件; 返回是true,把当前满足条件的item 放入新的数组中
// 返回:返回过滤后的新数组;

var arr_1 = arr.filter(function(item, index, arr) {
    // 过滤条件; 返回是true,把当前满足条件的item 放入新的数组中
    return item == 10;
});
console.log(arr, arr_1);

const rest = this.channelAll.filter(item => {
    // Array.includes判断是否包含该元素
    return !userChannelIds.includes(item.id)
})
  • includes数组包含
includes方法,判断数组是否包含指定的元素。返回 true / false
数组.includes(参数1,参数2)

// 参数1,必须,表示查找的内容
// 参数2,可选,表示开始查找的位置,0表示从第一个元素开始找。默认值是0。

let arr = [1, 4, 3, 9];
console.log(arr.includes(4));    // true
console.log(arr.includes(4, 2)); // false, 从下标为2的位置开始查,所以没有找到4
console.log(arr.includes(5));    // false
  • concat 数组拼接
// 数组.concat();
// 传入:拼接的数据。
// 返回:新数组;

// 传入1个数据
var arr = [1, 2];
var Arr = arr.concat("abc");
console.log(arr, Arr);

// 传入多个数据
var Arr = arr.concat("a", "b", "c", "d", "e", "f");
console.log(arr, Arr);

// 传入1个数组
var Arr = arr.concat(["aa", "bb"]);
console.log(arr, Arr);

// 传入多个数组
var Arr = arr.concat(["aa", "bb"], [77, 88]);
console.log(arr, Arr);

  • splice 数组增删改
var arr = ['a', 'b', 'c', 'd', 'e'];
// 删除:
// 参数:第一个参数是开始的下标,第二个参数:要删除的个数;
// 返回:被删除元素的数组;
var res = arr.splice(3, 1);
console.log(arr);----->['a', 'b', 'c',  'e']     删除元素对原数组进行操作
console.log(res);----->['d']

// 添加:
// 参数:第一个参数:开始的下标;第二个参数:删除的个数;后面参数:要添加的数据,从开始的下标位置添加;
// 返回:没有删除,返回[]
var res = arr.splice(3, 0, "AA", 18);
console.log(arr); ---->["a", "b", "c", "AA", 18, "d", "e"]
console.log(res); ---->[]

// 修改:
// 参数:第一个参数:开始的下标;第二个参数:删除的个数;后面参数:要添加替换的数据,从开始的下标位置;
// 返回:被替换的数据的数组;
var res = arr.splice(3, 1, "HH");
console.log(arr); ----->["a", "b", "c", "HH", "e"]
console.log(res); ----->["d"]
  • 数组与字符串互转split和join
var str = '刘备|关羽|张飞';
console.log(str);

// 字符串---->数组:
// 参数:分隔符
// 返回:数组;
var arr = str.split("|");
console.log(arr);

// 数组----->字符串
// 参数:分隔符;
// 返回:字符串;
var str_1 = arr.join("*_*");
console.log(str_1);
  • indexOf 数组中查找元素
// 参数:被查找的元素
// 返回:被查找的元素的下标索引(没有找到返回-1)

// 场景:查找数组中有没有我们需要的数据;
var arr = [1, 10, 20];
var index = arr.indexOf("a");
console.log(index);     ----->-1

  • forEach 遍历数组
var arr = [0, 10, 10, 10, 20];
// 作用:遍历数组
// 参数:函数(函数)格式要求:
//      函数参数:item,index,arr
//      item:每个数据
//      index:下标;
//      arr:当前遍历的数组;

var max = arr[1];
arr.forEach(function(item, index, arr) {
    console.log(item, index, arr);
    if (item > max) {
        max = item;
    }
});
console.log(max);

  • slice 截取数组
// 作用:截取数组
// 参数:
// 返回:被截取的新数组;
var arr = ['a', 'b', 'c', 'd', 'e'];

// 参数:2个参数。第一个参数从哪个下标开始(包括),截取到哪个下标结束(不包括),
var res = arr.slice(1, 4);
console.log(arr, res);

// 参数:1个参数,从哪个下标开始,一直到结尾都要截取
var arr_1 = arr.slice(1);
console.log(arr_1);

// 参数:没有参数,全部截取,复制数组;
var res = arr.slice();
// 数组:复杂数据类型;
console.log(res, arr);
console.log(res == arr);   ---->false
  • 数组排序 sort()
// sort() 方法用于对数组的元素进行排序。

var arr = [11,52,74,85,96,15];
arr.sort(sortby)

// sortby可选。规定排序顺序。必须是函数。
// 返回值:对数组的引用。

// 注意:数组在原数组上进行排序,不生成副本。

// 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

// 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

// 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
// 若 a 等于 b,则返回 0。
// 若 a 大于 b,则返回一个大于 0 的值。

  • 数组倒序reverse()
// reverse() 方法用于颠倒数组中元素的顺序。

var arr = [11,52,74,85,96,15];
arr.reverse();

// 注意:该方法会改变原来的数组,而不会创建新的数组。

  • 扩展运算符
    把数组中的元素一项项地展开,把一个整体的数组拆开成单个的元素。
var arr1 = [1, 2, 3];
var arr2 = [...arr1];
  • 数组的去重操作
let arr1 = [1, 2, 3, 3, 4, 5];
let arr = [...new Set(this.arr1)]
  • some() 方法
    some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意:

some() 不会对空数组进行检测。
some() 不会改变原始数组

// 检索数组中是否存在某个值

function some(item,index,arr){
if(item == 10){
console.log(item+"存在于这个数组");
}
console.log(item+"不存在于这个数组");
}

var a = [11,50,40,3,5,80,90,4];
a.some(some)
// 10不存在于这个数组
// false

  • Array.isArray()
    判断一个对象是不是数组,返回的是布尔值
let arr = [1, 2, 3, 4, 5];
console.log(Array.isArray(arr))    // true

let str = "12345"
console.log(Array.isArray(str))    // false
  • Array.toString()
    此方法将数组转化为字符串:
let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str)     // 1,2,3,4,5
  • Array.every()
// 此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false:

let arr = [1, 2, 3, 4, 5]
const isLessThan4 = value => value < 4
const isLessThan6 => value => value < 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true

转载文章,如有侵犯,联系删除!

(0)

相关推荐

  • WEB前端第二十六课——js数组

    WEB前端第二十六课——js数组

  • 最全的JavaScript常见的操作数组的函数方法宝典

    JavaScript在其内部封装了一个Array对象,使得我们可以方便地使用数组这种简单的数据结构,同时,也在 Array对象的原型上定义了一些常用并且很有用的操作数组的函数. 本文就将详细介绍一下每 ...

  • 9个实用的JavaScript开发技巧,你必须知道一下

    WEB前端开发社区 昨天 从Web开发到机器学习再到应用程序开发,JavaScript拥有大量的应用程序列表. 幸运的是,JavaScript提供了可以方便使用的全面功能列表,但是,其中许多功能和ha ...

  • JS数组

         1.isArray()方法  判断变量是否是一个数组 var a = [1,2]; var b.innerHTML = Array.isArray(a);          2.forEac ...

  • JavaScript--总结三(数组和函数)

    数组 数组的概念: 将多个元素(通常是同一类型)按照一定顺序排列放到一个集合中,这个集合称之为数组---简(一组有序的数据) 数组的作用:可以一次性存储多个数据 数组的定义: 1.通过构造函数创建数组 ...

  • 前端面试题之JavaScript

    ES6语法有哪些,分别怎么用 参考链接:http://es6.ruanyifeng.com/ new的执行过程 创建一个空对象: 将构造函数的 prototype 属性赋值给新对象的 __proto_ ...

  • JavaScript基础ES5/ES6常用数组方法汇总

    一.Array数组常用方法 1.栈方法(先进后出) push():在数组的最后一项后追加值(参数:可以为多个值或数组) 返回:数组的长度,改变了原数组 var a=[1,2,3] a.push(9); ...

  • JS数组方法大全

    一.在使用数组的方法之前,需要先创建数组,创建数组有以下方式: 字面量方式(json方式) //demo1:不省略initial参数,回调函数没有返回值 var arr = [10,20,30,40, ...

  • JavaScript数组 - 栈和队列方法

      栈方法  为了实现栈这个结构存在的方法 什么叫栈? 栈是古代的木盆,相当于现在的洗衣机:从同一个口进并且从同一个口出 如果要洗衣服拿出最底面的衣服必须要先拿出上面的衣服才可以 栈方法也是一样,先进 ...

  • JavaScript数组的一些方法、数学对象、定时器

    <script>         // sort()方法会按照字符串的先后顺序对数组的每一个数组项目的字符顺序来进行排序的         // 如果数组的某个项目不是字符串, 那么会先把 ...

  • [js] 第78天 举例说明数组和对象的迭代方法分别有哪些?

    今日试题: 举例说明数组和对象的迭代方法分别有哪些? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前 ...

  • [js] 第71天 说说你对深浅拷贝的理解?并实现一个对数组和对象深拷贝的方法

    今日试题: 说说你对深浅拷贝的理解?并实现一个对数组和对象深拷贝的方法 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多 ...

  • JavaScript删除对象的某个属性的方法

    WEB前端开发社区 5天前 1.delete  delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其"替代"设置慢100倍 object[key] = u ...

  • JavaScript日期对象 - 方法

    日期对象的方法 日期格式化方法: 格式:日期对象.方法(); alert( box.toDateString() );  以特定的格式显示星期几.月.日和年 alert( box.toTimeStri ...

  • JavaScript数组 - 其他方法

    数组的其他方法 1.concat(); 格式:数组.concat( 数组2 ); 功能:将两个数组合并成一个新数组,源数组不会被改变 返回值:我们合并好的数组 参数:我们要合并的数组 举个小例子: 运 ...

  • 15个你应该掌握的JavaScript数组方法

    点击链接 15个你应该掌握的JavaScript数组方法 WEB前端开发社区 2021-10-12 什么是数组方法? 数组方法是 JavaScript 内置的函数,可以应用于数组.每种方法都有一个独特 ...

  • ExcelVBA使用Shape对象的AddPicture方法制作图片产品目录

    如果需要制作如图1所示的产品目录,因为所需图片的尺寸通常并非完全一致,所以除了插入图片,还需要调整图片的尺寸以适应"图片"列单元格的大小.使用VBA可以快速完成这一系列繁杂的操作, ...