JS中数组的方法

最新推荐文章于 2024-03-29 23:12:06 发布

尘沙共老

最新推荐文章于 2024-03-29 23:12:06 发布

阅读量307

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_60887160/article/details/120096320

版权

concat

合并 / 拼接 / 该方法不会改变原数组

返回值：一个新的合并后的数组

// 参数是被拼接的成员 任意的数据类型都可以 参数个数不限 如果是数组会拆掉一层
        var arr = [1, 2, 3];
        var arr1 = [4, 5, 6, [7, 8, 9]];
        // 将arr和arr1拼接成一个数组 
        var arr2 = arr.concat(arr1, "true", "hahaha");
        console.log(arr2)

slice

截取不传参数表示全部截取一个参数代表从该位置截取到最后两个参数：第一个参数代表开始位置（包含），第二个参数代表结束位置（不包含）

返回值：截取到的子数组

// 这些参数可以使用负数负数表示从后往前 -1表示最后一位

// 参数的传递要求：第一个参数和第二个参数都可以使用负数一定要保证最终第二个参数一定比第一个参数的下标要大

// slice(start, end);  截取 切片
        // start: 表示截取的开始位置(下标)
        // end: 表示截取的结束位置(下标 不包含)
        var arr = ["a", "b", "c", "d", "e", "f"];
        // 两个参数
        var arr1 = arr.slice(2, 5);
        var arr1 = arr.slice(-5, -2);
        console.log(arr1);

splice

增删改参数1：操作位置参数二：删除个数第三个参数及往后：添加给数组的成员

该方法会改变原数组

返回值：被删除的成员组成的数组

var arr = ['张三', '李四', '王五', '赵六'];
// 删除
var result = arr.splice(1, 2)
console.log(result); // ["李四", "王五"]
console.log(arr); // ["张三", "赵六"]   


// 插入
var arr = ['张三', '李四', '王五', '赵六'];
var  result = arr.splice(2, 0, '小绵羊');
console.log(result); // []
console.log(arr) // ["张三", "李四", "小绵羊", "王五", "赵六"]

// 替换
var arr =['张三', '李四', '王五', '赵六'];
var result = arr.splice(2, 2, '小绵羊', '大绵羊');
console.log(result); // ["王五", "赵六"]
console.log(arr) // ["张三", "李四", "小绵羊", "大绵羊"]

unshift

数组头部增加 / 会改变原数组 / 返回值：数组的新长度

var arr = ['张三', '李四', '王五', '赵六'];
arr.unshift('王二')
console.log(arr); 
// ["王二", "张三", "李四", "王五", "赵六"]

shift

数组头部删除 / 会改变原数组 / 返回值：被删除的那一项

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.shift()
console.log(result); // 张三
console.log(arr) //  ['李四', '王五', '赵六'];

push

数组尾部增加 / 会改变原数组 / 返回值：数组的新长度

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.push('王二')
console.log(result); // 5
console.log(arr); // ["张三", "李四", "王五", "赵六", "王二"]

pop

数组尾部删除 / 会改变原数组 / 返回值：被删除的那一项

var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.pop();
console.log(result); // 赵六
console.log(arr) //["张三", "李四", "王五"]

indexOf

查找 / 不会改变原数组 / 返回查找到的下标，如果没找到，则返回-1

参数： 1. 被查找的成员
2. 查找的开始位置(可选)

var arr =['张三', '李四', '王五', '赵六'];
var result = arr.indexOf('李四'， 2);
console.log(result); // -1
console.log(arr); // ['张三', '李四', '王五', '赵六']

join

数组转字符串 / 不会改变原数组 / 返回值：转化得到的字符串 / 参数：拼接符号

var arr =['张三', '李四', '王五', '赵六'];
var str = arr.join();
console.log(str); // 张三,李四,王五,赵六
var str1 = arr.join('+');
console.log(str1); // 张三+李四+王五+赵六 
var str2 = arr.join('❤');
console.log(str2); // 张三❤李四❤王五❤赵六

reverse

作用：将数组的成员倒序 / 会改变原数组 / 返回值：新数组

var arr =['张三', '李四', '王五', '赵六'];
var arr1 = arr.reverse();
console.log(arr) // ["赵六", "王五", "李四", "张三"]
console.log(arr1) // ["赵六", "王五", "李四", "张三"]
console.log(arr === arr1) // true

sort

作用：将数组成员按照指定规则排序 / 会改变原数组 / 返回值：新数组

参数：规则函数

var arr = [1, 44, 6, -7, 99, 145, 5555, 0]
var arr1 = arr.sort(function (a, b) {
  return a - b
})
console.log(arr) // [-7, 0, 1, 6, 44, 99, 145, 5555]
console.log(arr1) // [-7, 0, 1, 6, 44, 99, 145, 5555]

ES5新增数组方法

forEach

(和for循环差不多，遍历，没有返回值)

arr.forEach(handler)

handler(value, index, self): 处理函数

value: 成员

index: 索引

self: 原数组

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
arr.forEach(function(value, index, self) {
  console.log(value, index, self)
})

map

(映射，方便在原数组基础上得到一个新数组，返回值是新数组)

arr.map(handler)

handler(value, index, self): 处理函数

value: 成员

index: 索引

self: 原数组

返回值：新数组取决于handler的返回值

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
var arr1 = arr.map(function (value, index, self) {
  return value + "1";
})
console.log(arr1)

filter

(过滤)

arr.filter(handler)

handler(value, index, self): 处理函数

value: 成员

index: 索引

self: 原数组

返回值：新数组取决于handler的返回值

var arr = [
  { type: "大菜", name: "鱼香肉丝", price: 10 },
  { type: "大菜", name: "红烧肉", price: 10 },
  { type: "大菜", name: "香辣粉", price: 10 },
  { type: "中菜", name: "小炒肉", price: 13 },
  { type: "中菜", name: "云吞", price: 14 },
  { type: "小菜", name: "雪糕", price: 15 },
  { type: "小菜", name: "黄瓜", price: 16 }
]

var arr1 = arr.filter(function(value) {
  return value.price < 13
})
console.log(arr1)

some

(条件检测)

arr.some(handler)

handler(value, index, self): 处理函数

value: 成员

index: 索引

self: 原数组

返回值：布尔值取决于handler的返回值，如果有任何一个符合条件的，为真，都不符合，为假。

var arr = [
  { type: "大菜", name: "鱼香肉丝", price: 10 },
  { type: "大菜", name: "红烧肉", price: 10 },
  { type: "大菜", name: "香辣粉", price: 10 },
  { type: "中菜", name: "小炒肉", price: 13 },
  { type: "中菜", name: "云吞", price: 14 },
  { type: "小菜", name: "雪糕", price: 15 },
  { type: "小菜", name: "黄瓜", price: 16 }
]

// 判断有没有价格小于13的
var result = arr.some(function (value) {
  return value.price < 13
})
console.log(result)

every

(与some恰好相反)

arr.every(handler)

handler(value, index, self): 处理函数

value: 成员

index: 索引

self: 原数组

返回值：布尔值取决于handler的返回值，如果全部符合条件的，为真，有任一不符合，为假。

var arr = [
  { type: "大菜", name: "鱼香肉丝", price: 10 },
  { type: "大菜", name: "红烧肉", price: 10 },
  { type: "大菜", name: "香辣粉", price: 10 },
  { type: "中菜", name: "小炒肉", price: 13 },
  { type: "中菜", name: "云吞", price: 14 },
  { type: "小菜", name: "雪糕", price: 15 },
  { type: "小菜", name: "黄瓜", price: 16 }
]

// 判断是否全部价格都小于13
var result = arr.every(function (value) {
  return value.price < 13
})
console.log(result)

reduce

arr.reduce(handler, init) 累计方法

handler(prev, value, index, self)

第一个参数是上一个handler返回的值

第二个参数是成员

第三个参数是索引

第四个参数是原数组

init handler第一次执行时的prev

返回值：最后一个handler执行的返回值

var arr = [
  { type: "大菜", name: "鱼香肉丝", price: 10 },
  { type: "大菜", name: "红烧肉", price: 10 },
  { type: "大菜", name: "香辣粉", price: 10 },
  { type: "中菜", name: "小炒肉", price: 13 },
  { type: "中菜", name: "云吞", price: 14 },
  { type: "小菜", name: "雪糕", price: 15 },
  { type: "小菜", name: "黄瓜", price: 16 }
]
// prev是上一次结果的返回值
var result = arr.reduceRight(function(prev, value) {
  console.log(value)
  return prev + value.price;
}, 0) // 不传这个初始值，程序会把成员第一项当做函数的prev值
console.log(result / 7)

reduceRight

同reduce，只是从数组的末尾开始运算。

ES6新增数组方法

Array.of(a, b, c, d, ...) 定义数组

每一个参数都是数组的成员

返回值数组

 var arr1 = Array.of(10); // Array.of消除了new Array时 只有一个参数 会因为类型的不同而产生的歧义

Array.from(likeArray) 用于将类数组对象转为真正的数组

likeArray 类数组对象

 // 获取类数组对象
    var lis = document.getElementsByTagName("li");
    console.log(lis);
    // 以前我们可以这么转换
    var arr = [].slice.call(lis);
    console.log(arr);
    // 现在可以通过Array.from
    var arr1 = Array.from(lis);
    console.log(arr1);

find(handler)

用于以条件查询数组中的成员
handler 函数有三个参数
- 成员
- 成员下标
- 数组本身
- 返回值返回布尔值如果为真则停止循环并返回对应的成员

返回值当参数函数返回真时返回对应成员如果没有任何一个返回真则返回 undefined

 var arr = ["浦东", "奉贤", "宝山", "青浦", "闵行", "徐汇"];
    var baoshan = arr.find(function(value, index, arr) {
        // console.log(value, index, arr);
        return value.includes("山");
    });
    console.log(baoshan);

findIndex(handler)

用于以条件查询数组中的成员对应的下标
handler(value, index, arr) 函数有三个参数
- value 成员
- index 成员下标
- arr 数组本身
- 返回值返回布尔值如果为真则停止循环并返回对应的成员
返回值当参数函数返回真时返回对应成员下标如果没有任何一个返回真则返回 -1
copyWithin(pos, start, end)
用于数组的内部复制从start开始复制到end结束(不包含) 再将复制的内容从pos开始一一往后替换
pos 替换的位置下标
start 复制的开始位置下标(包含)
end 复制的结束位置下标(不包含)

返回值原数组注：该方法会改变原数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    arr.copyWithin(1, 4, 7);
    console.log(arr); // [1, 5, 6, 7, 5, 6, 7, 8, 9]

fill(any, start, end)

填充方法
any 填充值
start 起始位置(包含)
end 结束位置(不包含)

特点：会改变原数组

var arr = [1, 2, 3, 4, 5, 6];
arr.fill("ok"); // ["ok", "ok", "ok", "ok", "ok", "ok"]

var arr1 = [1, 2, 3, 4, 5, 6];
arr1.fill("ok", 2); // [1, 2, "ok", "ok", "ok", "ok"]

var arr2 = [1, 2, 3, 4, 5, 6];
arr2.fill("ok", 2, 5); // [1, 2, "ok", "ok", "ok", 6]

尘沙共老

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中数组的方法

concat 合并 / 拼接 /该方法不会改变原数组参数是被拼接的成员任意的数据类型都可以参数个数不限如果是数组会拆掉一层 // var arr = [1, 2, 3]; // var arr1 = [4, 5, 6, [7, 8, 9]]; // 将arr和arr1拼接成一个数组 // var arr2 = arr.concat(arr1, "true", "hahaha"); // console.log(..
复制链接

扫一扫