基础巩固-js数组(es5-数组API)Filter使用filter，find方法通过筛选条件符筛选数组对象中的元素两个

Filter

使用filter，find方法通过筛选条件符筛选数组对象中的元素

let arr = [
    {code: '1', name: '苹果'},
    {code: '2', name: '雪梨'},
    {code: '3', name: '葡萄'},
    {code: '4', name: '香蕉'},
    {code: '5', name: '橙子'},
]
// let searchCode = '3'
let searchByFilter = arr.filter(item => item.code === '3')
let searchByFind = arr.find(item => item.code === searchCode)
console.log(searchTarget) //  [{code: "3", name: "葡萄"}]，查不到则返回 []
console.log(searchByFind) // {code: "3", name: "葡萄"}, 查不到则返回undefined

两个数组对象取共同集合

let arr2 = [    {code: '1', name: '苹果'},    {code: '4', name: '雪梨'},    {code: '3', name: '葡萄'},    {code: '9', name: '香蕉'},    {code: '7', name: '橙子'},]// some 用于检测数组中的元素是否满足指定条件（函数提供）。let arr3 = arr.filter(item => arr2.some(it =>it.code === item.code))console.log(arr3);

Map

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

举了个例子：

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);

打印结果

> Array [2,8,18,32]

而我这样写时：

var array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
});
 
console.log(map1);

打印结果为：

> Array [undefined, 8, undefined, undefined]

为什么会出现三个undefined呢？而不是我预期的[1,8,9,16]。这样写只是增加了一个条件，即x的值为4时才乘以2，之所以会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。所以，下面这样修改后就正确了：

var array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
    return x;
});

join函数

push 和pop

shift 和unshift

sort

reverse 反转函数

曾经遇到个面试，数组的拼接。

我当时回答的concat和用loadash工具

其实最简便的方法是解构

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>ES6解构代替concat数组拼接</title>  
</head>    
<body>  
<script type="text/javascript">
let a = [10, 20, 30]
let b = [40, 50]
let c = [...a, ...b]
console.log(c) // 10 20 30 40 50
</script>      
</body>    
</html>

  <script>        var a = [1,2,30]        var b = [5,6,7]        // var c = a.concat(b)        var c = [...a,...b]        console.log(c);    </script>