JS 数组详解

2021-04-08 本文已影响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 数组详解

添加

遍历

删除

查询

sort 排序

取最大值 Math.max( )

arr.reverse( ) 反转

findIndex()

filter 方法 (筛选，过滤）

splice()

过滤

数组截取

join()

猜你喜欢

热点阅读