Es6数组学习

末蓝、 2023-07-08 12:28 13阅读 0赞

**ECMAScript是JavaScript的标准（语法规范）  
Javascript用于遵循这个规范**  
使用vscode编写代码：  
在扩展中搜索 Live Serve、JavaScript（ES6） 并安装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 1]  
在.html文件 右键 选择open with Live Serve 可以运行该html文件

## 数组方法（7种）： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 2]

### forEach ###

Es5方法（for循环）：

var colors =["red","blue","green"];
    for(var i=0;i<colors.length;i++){
        console.log(colors[i]);
    }

ES6方法（forEach）：

colors.forEach(function(color){
        console.log(color);
    })

**效果：**![在这里插入图片描述][20200227133453355.png]

### map ###

类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现

**1、假设有一个数组（A），将A数组中的值以双倍的形式放到数组B中并打印**

**假设有一个对象数组（A），将A数组中对象某个属性的值储存到B数组中**

var cars =[
        {model:"Buick",price:"CHEAP"},
        {model:"BMW",price:"expensive"}
    ];
    
    var prices=cars.map(function(car){
        return car.price;
    })
    console.log(prices);

总结:map需要返回值，如果不给return，默认返回underfined  
map返回的是一个新的数组

### filter（过滤） ###

**假设有一个对象数组（A），获取数组中的指定类型的对象放到B数组中**

**假设有一个对象数组（A），过滤掉不满足以下条件的对象  
条件：蔬菜 数量大于0，价格小于十**

**假设有两个对象数组（A，B），根据A中的id值，过滤掉B数组不符合的数据**

![在这里插入图片描述][20200227162358872.png]

### find ###

**假设有一个对象数组（A），找到符合条件的对象**

**假设有一个对象数组（A），根据指定对象的条件找到数组中符合的对象**

### reduce（可代替forEach和map） ###

**计算数组中所有值的和**  
var numbers=\[10,20,30\];  
var sum=0;  
//es5  
for(var i=0;i<numbers.length;i++)\{  
sum+=numbers\[i\];  
\}  
console.log(sum);  
//es6使用reduce（拥有两个参数，第一个参数必须初始化）  
var sumValue=numbers.reduce(function(sum,number)\{  
return sum+number;  
\},0)  
console.log(sumValue);

var numbers=[10,20,30];
    var sum=0;
    //es5
    for(var i=0;i<numbers.length;i++){
        sum+=numbers[i];
    }
    console.log(sum);
    //es6使用reduce（拥有两个参数，第一个参数必须初始化）
    var sumValue=numbers.reduce(function(sum,number){
        return sum+number;
    },0)//0初始化的值
    console.log(sumValue);

**将数组中对象的某个属性抽离到另一个数组中**

![在这里插入图片描述][20200227202727145.png]  
**判断字符串中的括号是否对称**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200227112119645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200227113805299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200227115139805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70
[20200227133453355.png]: https://img-blog.csdnimg.cn/20200227133453355.png
[20200227162358872.png]: https://img-blog.csdnimg.cn/20200227162358872.png
[20200227202727145.png]: https://img-blog.csdnimg.cn/20200227202727145.png