美文网首页
JS 数组详解

JS 数组详解

作者: 浅宇落 | 来源:发表于2021-04-08 11:17 被阅读0次

添加

  • push(向数组的后面添加)
let arr = ["html","css"];
// 1.push  向数组的后面添加
arr.push("js")
console.log(arr); // ["html", "css", "js"]
  • unshift(向数组的前面添加值)
let arr = ["html","css"];
// unshift 向数组的前面添加值
arr.unshift("vue");
console.log(arr)
// ["vue", "html", "css"]
  • 扩展运算符
    ...arr 可以将一个数组展开
var arr = [1,2,3]
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3

var a=[4,5,6]
var b = [7,8,9]
a.push(...b)  // 拼接数组
console.log(a); // [4, 5, 6, 7, 8, 9]
  • concat( ) 连接两个数组 (不改变原数组的内容)
var arr = [1,2,3];
var c = [4,5,6];
var b = arr.concat(c);

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

遍历

  • forEach(遍历)
arr.forEach(function(item, index){
  console.log(item, index)
// html 0
// css 1
})
  • of 方法
var arr = [2,3,4,5]
for(var i of arr){
  console.log(i);
/*
2
3
4
5
*/
}
  • map 方法(可以改变数组的每一项,变成一个新数组)
    1.数组的每一项是基础(简单)类型,执行map不会改变数组原来的结构
    2.数组的每一项为复杂类型,会改变原来的数据结构
var arr = [2,3,4,5]
var res = arr.map((item=>{
  return item*2
}))
console.log(arr);  // [2,3,4,5]
console.log(res);  // [4,6,8,10]
  • some 方法
    只要数组中有一项满足条件,就输出true
var arr = [1,2,3,4,5]
var res = arr.some(item =>{
  return item>3
})
console.log(res); // true
  • every 方法
    数组中的每一项满足条件,才输出true
var arr = [1,2,3,4,5]
var str = arr.every(item => item >2)
console.log(str);  //false

删除

  • pop( ) 从尾部删除
var arr = [1,2,3,4]
arr.pop()
console.log(arr) // [1,2,3]
  • shift( ) 从头部删除
var arr = [1,2,3,4]
arr.shift()
console.log(arr); // [2,3,4]

查询

  • arr[index] 查询对应下标的值
//arr[index] 查询对应下标的值
var arr=[1,2,3];
console.log(arr[0]);  //1;
  • indexOf(value) 查询对应值的下标
var arr=[1,2,3,4];
console.log(arr.indexOf(1)); // 0
//如果没有对应的值,则返回-1
  • includes(value) 判断数组是否包含某个值
// 返回boolean
var arr = [1,2,3,4]
console.log(arr.includes(5)); // false
  • slice(start,end) 截取 (包含开始,不含结束)
// slice(startIndex,endIndex) 截取 包含开始不含结束
// slice(startIndex) 截取从startIndex开始到后面的所有值
var arr = [1,2,3,4]
console.log(arr.slice(1,3));  // [2,3]
console.log(arr.slice(1)); // [2,3,4]

sort 排序

  • 升序算法
var arr = [4,7,18,20,3]  // [3,4,7,18,20]
/* 升序算法 */
arr.sort((a,b)=>{
  return a-b;
})
console.log(arr);
  • 降序算法
var arr = [4,7,18,20,3]
arr.sort((a,b)=>{
  return b-a;
})
console.log(arr);

取最大值 Math.max( )

  • Math.max(...arr) 对数组取最大值
var arr = [1,2,3]
console.log(Math.max(...arr)); // 3
  • Math.min(...arr) 取最小值
// 简单的算法实现
var arr = [4,3,2,1]
var minNum = arr[0]
for(var i=1;i<arr.length;i++){
  if(minNum>arr[i]){
    minNum=arr[i]
  }
}
console.log(minNum);

// Math.min(...arr) 取最小值
var arr = [4,3,1]
console.log(Math.min(...arr)); // 1

arr.reverse( ) 反转

var arr = ["html","css","javascript"]
console.log(arr.reverse());  // ["javascript","css","html"]

findIndex()

  • 普通数组查索引
let arr=[1,2,3,4,5,6];
console.log(arr.findIndex(o=> o==20))
//找不到时返回 -1

console.log(arr.findIndex(o=> o==2))
//返回2的索引是 1

//若有多个符合条件的元素,则返回第一个元素索引。
console.log(arr.findIndex(o=> o>2))
//返回是第一个也就是3的索引 2
  • 对象数组查索引
let arr1=[
    {name:"张三",age:16},
    {name:"张四",age:18},
    {name:"王五",age:20},
]

console.log(arr1.findIndex(o=> o.name=="张四"))
//返回张四的索引是 1

//若有多个符合条件的元素,则返回第一个元素索引。
console.log(arr1.findIndex(o=> o.age>19))
//返回是第一个也就是王五的索引 2

filter 方法 (筛选,过滤)

此方法也不会改变原始数组,会返回一个筛选成功匹配的元素组成的新数组

// 查找符合条件的元素,主要用于筛选
var arr =[1,2,3,4,5]
var res = arr.filter(item =>item>2)
console.log(res); // [3, 4, 5]

splice()

  • 删除 —- splice(index,len)
arr = ['a','b','c','d']
arr.splice(1,1) 
console.log(arr)
//['a','c','d'] 删除起始下标为1,长度为1的一个值,len设置的1,如果为0,则数组不变

arr.splice(1,2) 
console.log(arr)  //['a','d'] 删除起始下标为1,长度为2的一个值,len设置的2

//删除第一个
arr.splice(0,1) 
//删除最后一个
arr.splice(arr.length-1,1)
  • 替换 —- splice(index,len,[新值])
arr = ['a','b','c','d']
arr.splice(1,1,'ttt') 
console.log(arr)
//['a','ttt','c','d'] 替换起始下标为1,长度为1的一个值为‘ttt',len设置的1

arr.splice(1,2,'ttt') 
console.log(arr)
//['a','ttt','d'] 替换起始下标为1,长度为2的两个值为‘ttt',len设置的1
  • 添加 —- splice(index,0,[新值]) 第二个值 是固定为0
arr = ['a','b','c','d']
arr.splice(1,0,'ttt') 
console.log(arr)
//['a','ttt','b','c','d'] 表示在下标为1处添加一项‘ttt'

过滤

  • 简单数组示例
var a =[1,2,3,4,5,6,7,8,9]
var r = a.filter(o=> o<5)
console.log(r)

//输出结果:
[1, 2, 3, 4]
  • 数组对象示例
var aa =[
{id:1,name:"张三"},
{id:2,name:"李四"},
{id:3,name:"王五"}
]
var bb = aa.filter(o=> o.id<3)
console.log(bb)

//输出结果
0: {id: 1, name: "张三"}
1: {id: 2, name: "李四"}

数组截取

  • 取数组某一段的值
    Array<number>.slice(start?: number, end?: number): number[]
var array = [1, 2, 3, 4, 5]
const subArr = array.slice(0, 1)
console.log(subArr) // [1]

const subArr = array.slice(0, 10)
console.log(subArr) // [1, 2, 3, 4, 5]

const subArr = array.slice(0, -2)
console.log(subArr) // [1, 2, 3]

join()

join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。

  • 语法
arrayObject.join(separator)
  • 实例
var list = ["赵","钱","孙"]
console.log(list.join())

//输出结果: 赵,钱,孙

var list = ["赵","钱","孙"]
console.log(list.join("|"))
//输出结果  赵|钱|孙

console.log(list.join("==="))
//输出结果  赵===钱===孙

相关文章

  • JS------数组 reduce() 方法详解及高级技巧

    JS进阶篇--JS数组reduce()方法详解及高级技巧

  • js数组详解

    JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Arr...

  • js数组详解

    数组的定义 数组是一组数据的集合,在内存中是一段连续的内存空间。 数组的特点 数组定义时可以无需指定数组长度 存储...

  • JS 数组详解

    添加 push(向数组的后面添加) unshift(向数组的前面添加值) 扩展运算符...arr 可以将一个数组展...

  • call,apply,bind的实际应用

    call,apply,bind详解传送门 求数组中的最大和最小值 将伪数组转化为数组 js中的伪数组(例如通过do...

  • Math、数组、Date

    JavaScript判断变量是否为数组的方法(Array)Javascript中的apply与call详解JS核心...

  • JavaScript中数组的基本方法详解

    JS中的内置对象有:String,Array,Math,Date。今天我们来详解一下数组的创建及其方法。 数组的创...

  • JS数组reduce()方法详解及高级技巧

    JS数组reduce()方法详解及高级技巧https://www.jianshu.com/p/e375ba1cfc...

  • js冒泡排序

    在js的学习中,总会遇到各种各样的算法,今天来详解下js的冒泡排序。 大致原理: 循环整个数组,如果前面的...

  • JS 调用apply报错:CreateListFromArray

    因为第二个参数没传数组,所以报了这个错误。 参考:Js apply()使用详解Getting error Crea...

网友评论

      本文标题:JS 数组详解

      本文链接:https://www.haomeiwen.com/subject/ozqlvktx.html