遍历数组语法

<script>var emps = ['mike', 'jack', 'tom', 'smill', 'shirley']// 遍历数组的方式: 4种// 方式1: 序号for(let i = 0; i<emps.length;i++){console.log(i, emps[i])}// 方式2: for..in;  为对象准备的遍历方式for(const key in emps){console.log(key, emps[key]);}// 方式3: ES6中提供 for..of 语法, 专门遍历数组// 直接遍历值, 没有序号for(const value of emps){console.log(value);}// 方式4: forEachemps.forEach((value, index, array)=>{console.log(index, value);})
</script>

以上四种方式都可以使用, 看自己喜欢哪一种(个人是比较喜欢forEach的写法, 可以简化, 上篇文章有说到, 这里我就没简化来写)

通过打印结果来看, 是没问题的

reduct

reduct: 归纳,简化;

把数组中的元素合并成1个值

<script>var nums = [12, 34, 54, 65, 23, 5, 456, 3, 4, 4]// box: 容器// 参数2: 代表box容器的默认值, 此处是 0 ; 如果不写,则默认是数组的第一个元素// 自动遍历每个元素, 把盒子进行传递var t = nums.reduce((box, value)=>{// 元素把 值 加入到 盒子中, 返回给下个元素return box + value}, 0)console.log(t);
</script>

展开语法

ES6新增: ...运算符, 可以展开数组或对象类型

<script>var a = [11, 22, 33]// ...可以把数组中的元素取出来var b = [...a, 44, 55]console.log(b);
</script>

解构语法

通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

特点：

解构赋值是对赋值运算符的扩展。
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

代码片段:

<script>var emps = ['小明', '小红','小亮','小黄']// 把数组元素拿出来放在4个变量里// 解构语法var [emp0, emp1 , emp2, emp3] = empsconsole.log(emp0, emp1, emp2, emp3);
</script>

说明：在解构赋值语法中，"="左侧的叫做数据模型，="右侧的叫做数据源。

如果想指定其中的某一个, 可以用 , 逗号符号隔开, 这样就是占一个位置, 什么也不做

<script>var emps = ['小明', '小红','小亮','小黄']// 把数组元素拿出来放在4个变量里// 解构语法var [emp0, , emp2, emp3] = empsconsole.log(emp0 , emp2, emp3);
</script>

ES6语法-遍历-reduct-展开语法-解构语法相关推荐

前端笔记之ES678WebpackBabel（上）初识ES678Babellet和const解构语法
一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
【Kotlin】字符串操作 ① ( 截取字符串函数 substring | 拆分字符串函数 split | 解构语法特性 )
文章目录一.截取字符串函数 substring 二.拆分字符串函数 split 一.截取字符串函数 substring Kotlin 中提供了截取字符串函数 substring , 可接收 Int ...
展开运算符解构赋值_解构式展开式搜索栏
展开运算符解构赋值 View demo 查看演示Download Source 下载源 Maybe you have noticed the little adjustments that we di ...
ES6阮一峰-----变量的解构赋值学习
1.数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...
ES6 对象的新功能与解构赋值介绍
ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
ES6(二） Destructuring-变量的解构赋值
1.解构的含义允许按照一定的模式,从数组和对象中取值,对变量进行赋值,称为解构. 解构赋值时,只要等号右边的值不是对象,就先将其转换成对象. 本质上,这种写法属于 "模式匹配", ...
ES6新特性_变量的解构赋值---JavaScript_ECMAScript_ES6-ES11新特性工作笔记006
然后我们再看,变量的解构赋值. 可以看到按照一定的模式,从数组和对象中提取数据,以及对对应的变量进行赋值被称为解构赋值. 可以看到上面 let[xiao,liu,zhao,song]=F4 相当于我 ...
ES6扩展运算符(三点符号), 解构
http://www.cnblogs.com/chrischjh/p/4848934.html 转载于:https://www.cnblogs.com/lianxisheng/p/10421967.h ...
javascript语法_了解JavaScript中的解构，剩余参数和传播语法
javascript语法 The author selected the COVID-19 Relief Fund to receive a donation as part of the Write ...

ES6语法-遍历-reduct-展开语法-解构语法

遍历数组语法

reduct

展开语法

解构语法

ES6语法-遍历-reduct-展开语法-解构语法相关推荐

最新文章

热门文章