当前位置：网站首页>ES6 array extension methods map, filter, reduce, fill and array traversal for…in for…of arr.forEach

ES6 array extension methods map, filter, reduce, fill and array traversal for…in for…of arr.forEach

2022-08-02 03:59:00 【yorup】

一、数组的扩展方法

1: array.map的用法

const arr = [1,2,3,4];
const newarr = arr.map(item=>item+2);
console.log(newarr);

2: array.filter() 过滤

const arr = [1,2,3,4,5,6,7];
const newarr = arr.filter(item=> item%2==0);
console.log(newarr);

3: array.reduce() "缩减" "累加器"

            //currentValue:当前值
			// reduce第二个参数指定初始值
			const arr = [1,2,3,4,5];
			let sum = arr.reduce((total,currentValue)=>{
				return total + currentValue;
			},10)    //初始值为10,然后累加
			console.log(sum);

4:fill填充

let arr = [1,2,3,4,5,6,7];
arr.fill('x',1,3);
console.log(arr);

二、数组遍历

1:for of遍历数组的值(遍历可迭代具备迭代器接口)

            const arr = ["a","b","c","d"];
			for(let v of arr){
				console.log(v);
			}

2:for in遍历索引(遍历可枚举类型)

const arr = ["a","b","c","d"];
			for(let k in arr){
				console.log(k);
}

3:"遍历对象" for of "遍历对象" 不能直接遍历,Because objects are not iterable

const Person={realname:"张三",age:19};
			for(let key of Person){
				console.log(key);
			}

这个结果是错的

Below is the correct way to traverse：put the object firstkeyThe values are all put in an arrayarr中,遍历arr,Directly output eachkey对应的value

const Person={realname:"张三",age:19};
const keys = Object.keys(Person);//to get all objectskeys
for(let k of keys){
				console.log(`k:${k},v:${Person[k]}`);
}

4:forEach的用法

let arr = [1,2,3,4];
arr.forEach((item,index)=>{
			   console.log(`v:${item},k:${index}`);	
})

三、练习

1: 数组,格式化对象,{name:'张三',birthday:'2020-10-09'} 格式化为
// {name:'张三',birthday:'2020-10-09',age:20}

If you have any questions, you can comment

        const persons = [
            {name:'张三',birthday:'2020-10-09'},
            {name:'李四',birthday:'1990-01-17'},
            {name:'李元芳',birthday:'2002-03-07'},
            {name:'兰陵王',birthday:'1993-08-09'},
        ]
         let newpersons = persons.map((item)=>{
             let year = new Date(item.birthday).getFullYear();
             let age = new Date().getFullYear()-year;
             return {...item,age};
        })
		let str = '';
        // console.log(newpersons);
		for (let item of newpersons) {
			str = str+`<li>姓名：${item.name},出生日期：${item.birthday},年龄：${item.age}</li>`
		}
		document.querySelector('ul').innerHTML = str;

2：筛选1题目中年龄小于20的信息.

<body>
    <h1>年龄小于20岁</h1>
    <p></p>
</body>
<script>
    let newage = newpersons.filter(item=>item.age<20);
    newage = newage[0];
    document.querySelector('p').innerHTML = `姓名：${newage.name},出生日期：${newage.birthday},年龄：${newage.age}`;
</script>

3：一组人员信息,The output is displayed on the page as a table.

<body>

    <table border="1" id="first">
        <thead>
            <tr>
                <th>姓名</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        const arr3 = [
            { uname: '小红', score: 95 },
            { uname: '小蓝', score: 100 },
            { uname: '小绿', score: 80 },
            { uname: '小明', score: 50 },
            { uname: '小花', score: 56 },
            { uname: '小草', score: 64 },
        ]
        let str = '';
        for (const item of arr3) {
            
            str = str+`<tr><td>${item.uname}</td><td>${item.score}</td></tr>`;
        }
        document.querySelector('#first tbody').innerHTML = str;
    </script>
</body>

4：输出一组人员信息,输出到页面信息如下（（姓名,分数,是否及格60分）;

<body>
    <ul></ul>
    <script>
        let newarr = arr3.map((item)=>{
            let pass = item.score>=60?'及格':'不及格';
            return {...item,pass}
        })
        let str1 = ''
        for (const item of newarr) {
            str1 = str1+`<li>姓名：${item.uname},分数：${item.score},${item.pass}</li>`;
        }
        // console.log(newarr);
        document.querySelector('ul').innerHTML = str1;
    </script>
</body>