js数组的创建

简介: js数组的创建


数组

概要

Array 是ECMAScript中中最常用的类型了,ECMAScript数组跟其他编程语言的数组有很大的区别.ECMAScript 数组是一组有序的数据,但跟其他编程语言不用的是:数组的每个槽位可以存储任意类型的数据.这意味这可以创建一个数组,它的第一个 元素是字符串,第二个元素是数组,第三个是对象.... 同时数组也是动态大小的,会随着数据添加而自动增长.

创建数组

1.Array

 // 使用Array 创建数组
 let p = new Array()
 console.log(p); // [] 空数组

2.传入参数

 // 该数组的length 设置为 3
 let colros = new Array(3)
 // 也可以同时传参数进去
 let peoples = new Array("张三", '李四', '王五')

3.省略new 关键词 效果一样

 // 再使用Array 创建数组的时候 也可以省略 new 关键字
 let fruit = Array('苹果', '橘子', '香蕉')

4.使用数组字面量的方式

 // 2.使用数组字面量的方式创建数组
 let computer = ['华硕', '联想', '戴尔']

5.Array.from() 与 Array.of()

Array 构造函数还有连个ES6新增的用于创建数组的静态方法:from()of()

  • from()用于将类数组结构转换为数组实例,
  • of()用于将一组参数转换为数组实例.

Array.from()的用法示例

 // 字符串 会被拆分为单字符数组
 console.log(Array.from('Hellow World')); // ['H','e','l'...]

2.将Set/Map结构的数据转换为真数组

 const m = new Map().set(1, 2).set(3, 4)
 console.log(Array.from(m));  // [Array(2),[Array(2)]]两个数组
 
 const n = new Set().add(1).add(10)
 console.log(Array.from(n)); // [1,10]
 // 从Set对象创建一个数组
 var set = new Set([1, 2, 3]);
 var arr = Array.from(set);
 console.log(arr); // [1, 2, 3]
 
 // 从Map对象创建一个数组
 var map = new Map([[1, "a"], [2, "b"], [3, "c"]]);
 var arr = Array.from(map);
 console.log(arr); // [[1, "a"], [2, "b"], [3, "c"]]

3.Array.from() 对现有的数组进行浅复制

 const b = ['ok', 'oh', 'yes']
 const b1 = Array.from(b)
 console.log(b); // ['ok','oh','yes']
 console.log(b1); // ['ok','oh','yes']
 ​
 console.log(b == b1); // false
  1. 将函数参数转换为数组的功能
 // 将函数参数转换为数组的功能。
 function getArgsArray() {
     return Array.from(arguments)
 }
 const v = getArgsArray(1, 2, 3, 4, 5, 6, 7)
 console.log(v);// [1,2,3,4,5,6,7]

5.from() 也可以转换带有必要属性的的自定义对象

 const Aobject = {
     1: '孙飞',
     2: '张三',
     3: '李四',
     5: '王五',
 
     length: 6
 }
 console.log(Array.from(Aobject)); //(6) [undefined, '孙飞', '张三', '李四', undefined, '王五']

Array.from()其他的两个参数的用法

 const o = [1, 2, 3, 4]
 // 其中每个元素都是使用提供的函数应用于源数组的每个元素的结果。 x 的平方
 const o1 = Array.from(o, x => { return x ** 2 })
 console.log(o1);// (4) [1, 4, 9, 16]
 // 在自定义一下
 const o2 = Array.from(o, function (x) { return x * this.a }, {
     a: 3
 })
 console.log(o2); // [1*3,2*3,3*3,4*3] //(4) [3, 6, 9, 12]

Array.of()的用法

 console.log(Array.of("张三",'李四','王五')); // (3) ['张三', '李四', '王五']
 console.log(Array.of(11,12,13));  // (3) [11, 12, 13]
目录
相关文章
|
负载均衡 安全 网络协议
DDOS攻击与防护
DDoS攻击通过大量合法请求占用目标服务器资源,导致正常用户无法访问。常见类型包括洪水攻击(如SYN Flood和UDP Flood)和放大攻击。其危害包括服务中断、经济损失及数据泄露。防护措施涵盖网络层面(流量清洗、带宽扩容、负载均衡)、系统层面(优化配置、安装防护软件、更新补丁)和应用层面(验证码、限速策略、动态IP封禁)。
2232 1
Echarts中tooltip的 formatter用法
Echarts中tooltip的 formatter用法
705 0
echart时间轴设置详解
时间轴设置详解
1333 0
|
JavaScript 前端开发
【Vue 3】如何实现动态表单生成器的拖拽功能?
【Vue 3】如何实现动态表单生成器的拖拽功能?
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
3955 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
6324 0
uniapp的生命周期是什么
uniapp的生命周期是什么
441 0
如何在uni-app项目中使用插件
如何在uni-app项目中使用插件
837 0

热门文章

最新文章