ES6 - 数组

本文详细介绍JavaScript数组常用方法如concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice()等,并重点讲解ES6新增的扩展运算符、apply(), call(), bind()等高级功能。同时,提供将二维数组转一维的各种实用技巧和实例。

数组的方法

方法描述
concat()链接两个过着更多的数组,并返回结果
join(x)将数组以x分隔符分割为字符串
pop()删除并且返回数组的最后一个元素
push()数组末尾添加元素
reverse()点到数组中元素的顺序
shift()删除并返回数组的第一个元素
slice()对某个已有的数组返回选定的元素
sort()对元素进行排序
splice()删除元素,并向数组添加新元素
toSource()返回该对象的源代码
toString()把数组转换为字符串,并返回结果
toLocaleString()把数组转换为贝蒂数组,并返回结果
unshift在数组开头添加一个或者更多元素,返回新的数组
indexOf查找数据在数组中是否存在,返回下标

ES6数组新增方法

方法描述
扩展运算符可以展开数组、对象
apply将数组转换为函数的参数
call
bind
form将类数组转换为真正的数组
of用于将一组值转换为数组
copyWithin数组实例的方法,将指定位置成员复制到其他位置,会覆盖原有成员,然后返回当前数组
find返回满足条件的第一个项
findIndex返回满足条件的第一个项的下标
entries返回一个二维数组 [ key:[val]]
keys找到数组中所有项的键
values找到数组中所有项的值
includes返回一个布尔值,表示某个数组是否包含给定的值
flat()降维,只降低一维
flatMap()对每个原数组成员执行一个函数
forEach数组遍历
filter过滤数组,通过条件返回满足条件的成员,保存到数组当中
every一假为假,全真为真
reduce求和等
some全假为假,一真为真
map遍历返回新数组

二维数组转一维数组

var arr = [1, [2, 3], [4, 5]];
  • 方式一 : 利用Array.proptype.flat()
arr.flat()
  • 方式二: 使用reduce遍历数组作数组合并
const newArr = arr.reduce((total, val) => {
  return total.concat(val);
}, []);

console.log(newArr);
  • 方式三: 利用字符串的特性实现
arr.join().split()
  • 方式四: 递归遍历二维数组,判断项是否是数组,然后合并到新的数组当中
function flatArray(array) {
  return [].concat(
    ...array.map((arr) => {
      return Array.isArray(arr) ? flatArray(arr) : arr;
    })
  );
}
  • 方式五:
function flatArray(array) {
  return Array.prototype.concat.apply([], array);
}
### ES6 数组排序方法及其示例 在 JavaScript 中,`Array.prototype.sort()` 是用于对数组元素进行排序的主要方法。此方法可以接受一个比较函数作为参数来定义排序逻辑[^2]。以下是基于 ES6 的 JSON 数组排序的具体实现方式。 #### 使用 `sort()` 对 JSON 数组按属性排序 假设有一个 JSON 数组如下: ```javascript const jsonArray = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 20 } ]; ``` ##### 按年龄升序排列 可以通过传递一个比较函数给 `sort()` 来实现按特定字段(如 `age`)排序: ```javascript jsonArray.sort((a, b) => a.age - b.age); console.log(jsonArray); // 输出: // [ // { name: 'Charlie', age: 20 }, // { name: 'Alice', age: 25 }, // { name: 'Bob', age: 30 } // ] ``` 上述代码通过减法运算符计算两个对象的 `age` 属性差值,从而决定它们的顺序。 ##### 按姓名字母降序排列 对于字符串类型的字段(如 `name`),可以使用 `localeCompare` 方法来进行大小写敏感或不敏感的排序: ```javascript jsonArray.sort((a, b) => b.name.localeCompare(a.name)); console.log(jsonArray); // 输出: // [ // { name: 'Charlie', age: 20 }, // { name: 'Bob', age: 30 }, // { name: 'Alice', age: 25 } // ] ``` 这里利用了 `localeCompare` 提供的语言环境支持功能。 #### 结合其他 ES6 特性优化排序过程 除了基本的 `sort()` 外,还可以与其他 ES6 新增特性一起工作以增强灵活性。例如,当需要筛选后再排序时,可以用链式调用的方式完成操作: ```javascript const filteredAndSorted = jsonArray .filter(item => item.age >= 25) // 过滤条件:仅保留年龄大于等于25岁的项 .sort((a, b) => a.age - b.age); // 按照年龄升序排序 console.log(filteredAndSorted); // 输出: // [ // { name: 'Alice', age: 25 }, // { name: 'Bob', age: 30 } // ] ``` 这种组合不仅提高了代码可读性和维护性,还充分利用了现代 JavaScript 的优势[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值