ES6数组循环、数组新增

news/2024/7/10 22:46:01 标签: js, es6, html

1.数组循环

参数 val : 数组元素 , index:元素索引,arr:原数组本身

arr.forEach( function( val, index, arr ){ } )        //  没有返回值,undefiend
let arr = ["red","blue","green"]
let arr2 = arr.forEach(function(val,index,arr){
    console.log(val,index,arr)
})
 
red 0 ["red","blue","green"]
blue 1 ["red","blue","green"]
green 2 ["red","blue","green"]
 
 
注:forEach是没有返回值的
console.log(arr2 )  // undefiend

arr.map( function( val, index, arr ){ return } ) // 有返回值,返回的是一个新数组

一般用于数据的映射(数据改造),正常情况下需要配合return使用。如果不使用return,那么他的功能和forEach一模一样,就没必要使用map,所以只要使用map,一定要有return。

return
let arr = [
	{name:"张三",age:20,sex:"男"},
	{name:"张三",age:10,sex:"男"},
	{name:"张三",age:8,sex:"男"}
    ];
let arr1 = arr.map( function(item, index, arr ){ 
	let obj = {};
	    obj.NAME = item.name
	    obj.AGE = item.age
	    obj.SEX = item.sex
	    return obj
	})
console.log(arr1)
    结果如下:
    [
	{NAME :"张三",AGE :20,SEX :"男"},
	{NAME :"张三",AGE :10,SEX :"男"},
	{NAME :"张三",AGE :8,SEX :"男"}
    ]
-----------------------------------------------------
    没有return,则默认返回的是undefiend
let arr1 = arr.map( function(item, index, arr ){ 
	console.log(item,index,arr )
    })
 
console.log(arr1 )
    结果如下:
    [undefiend,undefiend,undefiend]

arr.filter( function( val, index, arr ){ } ) // 过滤不合格的数据,返回合格数据组成的新的数组

let arr = [
	{name:"张三",age:20,sex:"男"},
	{name:"张三",age:10,sex:"男"},
	{name:"张三",age:8,sex:"男"}
    ];
let arr1 = arr.filter( function(item, index, arr ){ 
        // 过滤掉age<10的数据
	    return item.age>=10
	})
console.log(arr1)
结果如下:
    [
	{name:"张三",age:20,sex:"男"},
	{name:"张三",age:10,sex:"男"}
    ]

arr.some( function( val, index, arr ){ } ) // 数组中某一个元素符合条件,就整体返回true,否则返回false

arr.every( function( val, index, arr ){ } ) // 数组中每一个元素都符合条件,就整体返回true,否则返回false

some,every类似查找的功能

let arr = [
	{name:"张三",age:20,sex:"男"},
	{name:"张三",age:10,sex:"男"},
	{name:"张三",age:8,sex:"男"}
    ];
let arr1 = arr.some( function(item, index, arr ){ 
	    return item.age>=20   // 有一个满足条件
	})
    console.log(arr1)  // true
let arr1 = arr.some( function(item, index, arr ){ 
	    return item.age>=30   // 都不满足条件
	})
    console.log(arr1)  // false
 
 
let arr1 = arr.every( function(item, index, arr ){ 
	    return item.age>=20  // 只有一个满足条件
	})
    console.log(arr1)  // false
let arr1 = arr.every( function(item, index, arr ){ 
	    return item.age>=8   //  都满足条件
	})
    console.log(arr1)  // true

注:上面的forEach、map、filter、some几个方法实际上是可以接受两个参数,第一个是回调函数,第二个是希望this指向谁

let arr = ["red","blue","green"]
arr.map( function( val, index, arr ){  return } )
arr.forEach(function(val,index,arr){ 
    console.log( this,val,index,arr)  // 默认this指向 window 
})
arr.forEach(function(val,index,arr){ 
    console.log( this,val,index,arr)  // 此时this指向 123 
},123)
 
注意:如果使用箭头函数作为回调函数,那么不管第二个参数传什么,this永远指向定义箭头函数所在的对象
arr.forEach((val,index,arr)=>{ 
    console.log( this,val,index,arr)  // 此时this指向 window 
},123)

arr.includes( function( val ){ } ) // 包含 ,返回true、false

let arr = [1,2,3,4,5,6]   
let arr2 = arr.indexOf(5)   // 返回的是下标,没有找到就返回 -1   ES5 方法
let arr2 = arr.includes(5)  // 返回的是布尔值,true
console.log(arr2)           //   true 

arr.find( function( val, index, arr ){ } ) // 从左往右,找出第一个符合条件的数组成员,并返回出来(找成员)

arr.findIndex( function( val, index, arr ){ } ) // 从左往右,找出第一个符合条件的数组成员,并返回出来成员的索引,没找到则返回 -1(找位置)

let arr = [20,30,40,50]   
let arr2 = arr.find((val,index,arr)=>{
   	return val>30
   })
console.log(arr2)       // 40   
 
--------------------------------------------------
let arr = [20,30,40,50]   
let arr2 = arr.findIndex((val,index,arr)=>{
   	return val>30
   })
console.log(arr2)       // 2   

arr.fill( function( 填充的内容, 开始位置, 结束位置(不包含) ){ } ) // 填充或覆盖

空数,组填充
let arr = []   
arr.length = 6
let arr2 = arr.fill("默认值")
console.log(arr2)       // ["默认值", "默认值", "默认值", "默认值", "默认值", "默认值"]  
 
-------------------------------------------------------------------------------------
实体数组,覆盖
let arr = [20,30,40,50]   
let arr2 = arr.fill("默认值")
console.log(arr2)       // ["默认值", "默认值", "默认值", "默认值"] 
 
-------------------------------------------------------------------------------------
let arr = [1,2,3,4,5,6]   
let arr2 = arr.fill("默认值",2,5)
console.log(arr2)       // [1, 2, "默认值", "默认值", "默认值", 6]   

arr.reduce(function(prev,val,index,arr){ }) // 从左往右计算 数组求和、阶乘等 用法如下

arr.reduceRight(function(prev,val,index,arr){ }) // 从右往左计算 数组求和、阶乘等 用法如下

数组求和
let arr = [1,2,3,4,5,6,7,8,9,10]
let arr1 = arr.reduce( function(prev,val, index, arr ){ 
	    return prev + val  // 前面数字的和 + 当前的数
	})
prev:指前面的元素的和
console.log(arr1)    // 55
 
 
let arr = [1,2,3,4,5,6,7,8,9,10]
let arr1 = arr.reduceRight( function(prev,val, index, arr ){ 
	    return prev + val  // 前面数字的和 + 当前的数
	})
prev:指前面的元素的和
console.log(arr1)    // 55

ES2017 新增了一个运算符,幂运算符:**

let str = Math.pow(2,3)   // 2的3次方  以前的算法
let str = 2**3   // 2的3次方  新增的运算符
console.log(str)

for of 循环:for of 可以循环很多东西,这里介绍数组的循环

let arr = ["red","blue","green"]
 
for(let val of arr){   // 循环元素
	console.log(val)   // red  blue  green
}
 
for(let index of arr.keys()){  // 循环索引
	console.log(index)  // 0  1  2 
}
 
for(let item of arr.entries()){  // 循环实体
	console.log(item)   // [0, "red"] [1, "blue"] [2, "green"]
}
for(let [key,val] of arr.entries()){  // 循环索引,和元素
	console.log(key,val)  // 0 "red"    1 "blue"     2 "green"
}
由此可以看出数组新增了两个方法:arr.keys()  数组下标    arr.entries()  数组某一项

 

2.数组新增

Array.from( arr ) 伪(类)数组转数组。arr 一定要有length属性 否则 Array.from 失效

<html lang="en">
    <ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
    </ul>
</html>
<script>
    //伪()数组一般是一组dom节点,或者是函数的auguments的对象
    let aLi = document.querySelectorAll("li")
    let arrLi = [].slice.call(aLi)        //  方法1 ES5 的方法
    let arrLi = [...aLi]                  //  方法2 扩展运算符
    let arrLi = Array.from(aLi)           //  方法3 ES6新增
</script>

length问题:

let str = 'asdf'
let arr = Array.from(str)      
console.log(arr)                    // ["a", "s", "d", "f"]
 
--------------------------------------------------------------------------------------------
let html" title=js>json = {
	0:"a",
	1:"b",
	2:"c"
}
let arr1 = Array.from(html" title=js>json)      
console.log(arr1)                     // []  html" title=js>json 没有呢length属性,Array.from失效,返回空数组
 
--------------------------------------------------------------------------------------------
let html" title=js>json1 = {
	0:"a",
	1:"b",
	2:"c",
	length:3
}
let arr2 = Array.from(html" title=js>json1)  
console.log(arr2)                      // ["a", "b", "c"]  html" title=js>json1 增加了length属性,Array.from成功

Array.of( arr ) 把一组值转成数组

let arr = Array.of("red","blue","green")      
console.log(arr)       // ["red", "blue", "green"]  

http://www.niftyadmin.cn/n/1836747.html

相关文章

Linux下的常用命令[转]

在CU看到的&#xff0c;总结的还不错&#xff0c;转过来了转自&#xff1a;http://blog.chinaunix.net/u2/61598/showart.php?id2170404 Linux命令组成&#xff1a;shell内部命令shell外部命令shell内部命令&#xff1a;最简单最常用的命令&#xff0c;在shell启动时进入内存s…

iframe加载页面

<!-- 内容部分 --><article class"article"><iframe class"my_content" id"mainiframe" src"./home.html" frameborder"no" scrolling"no"></iframe></article>js 设置 加…

Android点击无效,android点击无效验证的解决方法

背景在写一个东西滑动删除列表的时候&#xff0c;出现了一个问题。我的需求是&#xff0c;左滑然后出现delete&#xff0c;然后点击delete&#xff0c;让该滑块消失。我在点列表的第一行的时候&#xff0c;左滑&#xff0c;出现delete&#xff0c;点击删除&#xff0c;ok的&…

对jquery ajax进行封装请求

对jquery ajax进行封装请求 var ajaxObj (e_id,Obj) > {eval("Obj.data.e_id111"); //动态添加对象属性console.log(Obj);$.ajax({ url: Obj.url,dataType: "json",async: true, //true:异步,false:同步data: Obj.data, type: "POST",timeo…

android tv 和手机,Android TV 设计

© matoi matoi / 2017-09-11虽然同样是安卓系统&#xff0c;设计TV这种大屏幕的应用程序和设计手机平板等其它设备不太一样&#xff0c;需要注意一些点&#xff1a;1. 在Material Design的基础上进行设计可以使不同平台的应用保持一致性&#xff1a;相同的外观和相同的使用…

使用Google Code项目托管实现资料共享(转载)

使用Google Code项目托管实现资料共享 对于不固定工作场所的程序员来说&#xff0c;通过http的Source Control是个不错的选择。GoogleCode就提供了Subversion server。使用Google Code的项目托管功能&#xff0c;结合svn客户端&#xff0c;实现了文档和工作资料的统一管理与使用…

android studio分部调试,地方话开发——Android Studio代码调试技巧篇

Android Studio目前已经成为开发Android的主要工具&#xff0c;用熟了可谓相当顺手。作为开发者&#xff0c;调试并发现bug&#xff0c;进而解决&#xff0c;可是我们的看家本领。正所谓&#xff0c;工欲善其事必先利其器&#xff0c;和其他开发工具一样&#xff0c;如Eclipse、…

命令[30]

命令[30]转载于:https://www.cnblogs.com/motadou/archive/2010/03/11/1683202.html