ECMAScript6-数组的扩展

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量319 收藏
点赞数
分类专栏： 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45969711/article/details/121253937
版权

数组的扩展

上一期我们讲解了函数扩展的相关内容，这一期我们开始讲解数组的相关内容。

  • 数组的遍历
  • for…of循环的使⽤实例
  • Array.from()
  • Array.of()
  • 数组实例的 find() 和 findIndex()
  • 数组实例的 some() 和 every()
  • 数组实例的 fill()

目录

1、数组的遍历

传统方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let arr=[1,2,3];
      for (let i = 0; i < arr.length; i++) {
          console.log(arr[i]);
      }
  </script>
</body>
</html>

使用forin遍历数组：会将索引不是数字的也遍历出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let arr=[1,2,3];
      arr.name="123";
      for(let i in arr){
          console.log(arr[i])
      }
      /*
      1
      2
      3
      123
      * */
  </script>
</body>
</html>

使用foreach遍历数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let arr=[1,2,3];
      arr.name="123";
      arr.forEach(function (v){
          console.log(v)
      });
      /*
      1
      2
      3
      * */
  </script>
</body>
</html>

使用箭头函数遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let arr=[1,2,3];
      arr.name="123";
      arr.forEach(value => console.log(value));
      /*
      1
      2
      3
      * */
  </script>
</body>
</html>

使用forof遍历数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let arr=[1,2,3];
      arr.name="123";
      for (let number of arr) {
          console.log(number)
      }
      /*
      1
      2
      3
      * */
  </script>
</body>
</html>

2、For…of循环的使用实例

  • for…of 语句创建⼀个循环来迭代可迭代的对象。
  • 在 ES6 中引⼊的 for…of 循环，以替代 for…in 和 forEach(),并⽀持新的迭代协议。
  • for…of 允许你遍历Arrays(数组),Strings(字符串),Maps(映射),Sets(集合)等可迭代的数据结构等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      //数组对象entries()⽅法返回⼀个数组的迭代对象，该对象包含数组的键值对(key/value)。
      //1.使⽤for...of遍历数组：
      let a = ['zhangsan','lisi','wangwu'];
      for(let [k,v] of a.entries()){
          console.log(k,v);
      }
      //0 "zhangsan"
      //1 "lisi"
      //1 "lisi"
      //2.使⽤for...of遍历Maps(映射)
      const iterable1 = new Map([['one','zhangsan'],['two','lisi'],
          ['three','wangwu']]);
      for (const [key, value] of iterable1) {
          console.log(`${key} -> ${value}`);
      }
      //one -> zhangsan
      //two -> lisi
      //three -> wangwu
      //Set(集合) 对象允许你存储任何类型的唯⼀值，这些值可以是原始值或对象。
      //3.使⽤for...of遍历Set(集合)
      const iterable2 = new Set([10,30,20,10,30]);
      for (const value of iterable2) {
          console.log(value);
      }
      //10
      //30
      //20
      //字符串⽤于以⽂本形式存储数据
      //4.使⽤for...of遍历字符串
      const iterable3 = 'Hello';
      for (const value of iterable3) {
          console.log(value);
      }
      //H
      //e
      //l
      //l
      //o
      //5.使⽤for...of遍历arguments Object(参数对象)
      function demo(){
          for(const arg of arguments) {
              console.log(arg);
          }
      }
      demo('a','b','c');
      //a
      //b
      //c
  </script>
</body>
</html>

3、Array.from()

  • Array.from()⽅法就是将⼀个类数组对象或者可遍历对象转换成⼀个真正的数组。
  • 格式：
    1.Array.from(arrayLike[, mapFn[, thisArg]])
    2.arrayLike：想要转换成数组的伪数组对象或可迭代对象
    3.mapFn：如果指定了该参数，新数组中的每个元素会执⾏该回调函数；
    4.thisArg：可选参数，执⾏回调函数 mapFn 时 this 对象。
  • 返回值：是⼀个新的数组实例（真正的数组）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let array = {
          0: 'name',
          1: 'age',
          2: 'sex',
          3: ['user1','user2','user3'],
          'length': 4
      };
      let arr = Array.from(array);
      console.log(arr); // ['name','age','sex',['user1','user2','user3']]

  </script>
</body>
</html>

Array.from()的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array.from()使⽤实例</title>
</head>
<body>
<ul>
    <li>zhangsan</li>
    <li>lisi</li>
    <li>wangwu</li>
</ul>
<script type="text/javascript">
    //获取上⾯的li节点对象列表
    let nlists = document.querySelectorAll("li");
    console.log(nlists); //NodeList(3) [li, li, li]
    //将NodeList列表对象转成数组，并解析出每个元素之间的内容。
    const alist = Array.from(nlists,li => li.textContent);
    console.log(alist); // ["zhangsan", "lisi", "wangwu"]
</script>
</body>
</html>

4、 Array.of()

Array.of()⽅法⽤于将⼀组值转化为数组，即新建数组，⽽不考虑参数的数量或类型。

//使⽤Array.of()创建数组
console.log(Array.of()); //[] 创建⼀个空数组
console.log(Array.of(8)); //[8] 创建只有⼀个元素值为8的数组
console.log(Array.of(1, 2, 3)); //[1,2,3] 创建⼀个值为1，2，3的数组
//以前直接使⽤Array创建数组
console.log(Array()); //[] 创建⼀个空数组
console.log(Array(4)); // [ , , , ] 创建拥有4个元素空值的数组
console.log(Array(1, 2, 3)); //[1,2,3] 创建⼀个值为1，2，3的数组

5、数组实例的 find() 和 findIndex()

  • find()⽅法，⽤于找出第⼀个符合条件的数组成员。
    1.参数是⼀个回调函数，所有数组成员依次执⾏该回调函数。
    2.直到找出第⼀个返回值为true的成员，然后返回该成员。
    3.如果没有符合条件的成员，则返回undefined。
  • findIndex()⽅法的⽤法与find⽅法⾮常类似，返回第⼀个符合条件的数组成员的位置。
    1.返回成员位置，如果所有成员都不符合条件，则返回-1。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      const data =[
          {name:'zhangsan',age:22,sex:'man'},
          {name:'lisi',age:25,sex:'woman'},
          {name:'wangwu',age:23,sex:'man'},
      ];
      //使⽤find获取name属性值为lisi的信息
      let s1 = data.find(function(v){
          return v['name']=='lisi'
      });
      //同上效果使⽤箭头函数
      let s2 = data.find(v => v['name']=='lisi');
      console.log(s1); //{name: "lisi", age: 25, sex: "woman"}
      console.log(s2); //{name: "lisi", age: 25, sex: "woman"}
      //使⽤find获取name属性值为lisi的信息
      let s3 = data.findIndex(function(v){
          return v['name']=='lisi'
      });
      //同上效果使⽤箭头函数
      let s4 = data.findIndex(v => v['name']=='lisi');
      console.log(s3); //1
      console.log(s4); //1 

  </script>
</body>
</html>

6、数组实例的 some() 和 every()

  • every（）和 some（）⽬的：确定数组的所有成员是否满⾜指定的测试.
    1.some()⽅法 只要其中⼀个为true 就会返回true。
    2.every（）⽅法必须所有都返回true才会返回true，哪怕有⼀个false，就会返回false。
  • 即：every:⼀假即假； some:⼀真即真。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      const data =[
          {name:'zhangsan',age:22,sex:'man'},
          {name:'lisi',age:25,sex:'woman'},
          {name:'wangwu',age:23,sex:'man'},
      ];
      //使⽤some判断data中是否含有⼀条name以"wang"开头的
      let s1 = data.some(v => v['name'].startsWith("wang"));
      console.log(s1); //true
      //使⽤every判断data信息中是否都是age⼤于20的信息。
      let s2 = data.every(v => v['age']>20);
      console.log(s2); //true 若有⼀个不符合则返回false
  </script>
</body>
</html>

7、数组实例的 .fill()

  • fill()函数，使⽤指定的元素替换原数组内容，会改变原来的数组。
  • 语法结构：arr.fill(value[, start[, end]])
    1.value：替换值。
    2.start：替换起始位置（数组的下标），可以省略。
    3.end：替换结束位置（数组的下标），如果省略不写就默认为数组结束。<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
//空数组则没有替换
console.log([].fill(6)); //[]
//将数组中的值都替换成指定值6
console.log([1,2,3].fill(6));//(3) [6, 6, 6]
//从数组索引位置2开始替换成指定值6，替换到数组结束位置。
console.log([1,2,3,4,5].fill(6,2)); //(5) [1, 2, 6, 6, 6]
//从数组索引位置2开始替换到索引位置4前结束。
console.log([1,2,3,4,5].fill(6,2,4)); //(5) [1, 2, 6, 6, 5]

总结

这期我们讲解了数组的扩展方面的内容，下期我们讲解Set和Map相关的知识

菜鸟一枚在这
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript6(6)：数组的扩展
FareBlog
06-07 1442
相关文章 ECMAScript6 (1)：块级作用域 ECMAScript6 (2)：解构赋值 ECMAScript6 (3)：数值类型扩展 ECMAScript6 (4)：字符串类型扩展 ECMAScript6 (5)：函数的扩展数组的扩展 Array, from() 将类数组对象和可遍历对象转化为真正的数组。 var arrayLike = { '0' : 'a', '1' :
let关键字金典面试题
VirGilZhong的博客
09-03 256
1.调用for循环赋值数组中的函数结果(使用var 声明变量i) <script> var arr= []; for(var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } //因为是把函数赋值给数组，所以可以用小括号直接调用。 //var声明的不是块级作用域，所以可以打印，且不满足for循环时，i=2，故arr[0]()、arr[1]()打印的值是2 arr[0](); arr[1](
JavaScript高级(含ES6)-Day05 ES6
weiweianx的博客
03-01 143
箭头函数 const fn =（）=> {}：原来简化函数定义语法 如果函数体内只有一句代码，且代码的执行结果就是返回值，可以省略大括号； 如果形参只有一个，可以省略小括号； const fn = () => { let name = 'andy'; console.log(name); } fn(); //函数体中只有一句代码，可省略大括号 const sum = (nu
ECMAScript6学习笔记-数组扩展
gaiyaguang的博客
03-05 1517
1.扩展运算符 扩展运算符是三个点，将一个数组转为用逗号分割的参数序列。console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5[...document.querySelectorAll('div')] // [<div>, <div>, <div>]主要用于函数调用function add(x,
ECMAScript 6 入门-数组的扩展
PresByter的博客
03-29 257
原文http://es6.ruanyifeng.com/#docs/array#Array-from扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5function fs(a,b,...e) { console.log(a);
ECMAScript6-基础8-数组的扩展
狼行千里吃肉
12-03 89
目录 扩展运算符 概念 案例讲解 扩展使用 Array.from() 概念 案例讲解 Array.of() 概念 案例讲解 实例copyWithin() 概念 基础案例 实例find()/findIndex() 概念 基础案例 实例fill() 概念 基础案例 实例entries()/keys()/values() 概念 基础案例 实例includes() 概念 基础案例 实例flat()/flatMap() 概念 基础案例 数组的空位 概念 .
ECMAScript-数组的遍历方式
东东爱编码博客
10-11 347
文章目录一、数组的遍历方式【ES5】1. for循环2. forEach()：没有返回值，只是针对每个元素调用func3. map()：返回新的Array，每个元素为调用func的结果4. filter()：返回符合func条件的元素数组5. some()：返回boolean，判断是否有元素是否符合func条件6. every()：返回boolean，判断每个元素是否符合func条件7. reduce()：接收一个函数作为累加器8. for in二、数组的遍历方式【ES6】1. find()：返回第一个通过
ECMAScript 6学习笔记之----数组的扩展
凌霄的专栏
04-27 234
扩展运算符 … rest的逆运算 扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 //rest参数逆运算 print(...[1, 2, 3]) print([1, 2, 3]) print(1, ...[2, 3, 4], 5) 作用 合并数组。代替数组apply function f(x,y,z) { consol...
ECMAScript 6 中数组的扩展
诗渊的博客
12-28 478
ECMAScript 6 中数组的扩展 1、扩展运算符 2、Array.from() 3、Array.of() 4、copyWithin() 5、find() 和 findIndex() 6、fill() 7、entries()，keys() 和 values() 8、includes() 9、flat()，flatMap() 10、数组的空位 11、Array.prototype.sort() 的排序稳定性 ECMAScript 6 中数组的扩展 之前有记录过 ES5 中数组的常用方法(Java.
js代码-es6-数组扩展。
07-16
在JavaScript的世界里，ES6（ECMAScript 2015）是一次重大更新，引入了许多新特性，其中数组扩展是开发者们非常欢迎的一部分。数组扩展使得操作和处理JavaScript数组变得更加灵活和高效。本文将深入探讨`js代码-es6-...
js代码-数组的扩展应用
07-15
随着ES6（ECMAScript 2015）的引入，数组拥有了更多扩展功能，使得开发者能够更高效地处理数据。本主题将深入探讨“js代码-数组的扩展应用”，包括一些关键的新特性，如`map()`、`filter()`、`reduce()`、`find()`、...
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1311
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 213
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 274
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 1035
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
JS混淆基本类型和原理
朴拙科技的博客
07-06 402
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
Vue 数据大屏适配
FitnessSnail的博客
07-02 268
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
vue3+ts项目中.env配置环境变量与情景配置
我愿化作繁星
07-03 867
就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。
ecmascript6入门 (阮一峰著)pdf
06-24
其中包括：let 和 const 命令、变量的解构赋值、字符串的扩展、正则表达式的扩展、数值的扩展、数组的扩展、函数的扩展、对象的扩展等。 本书采用了易于理解的方式，详细解读了ES6新特性的实现原理，从而读者可以更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值