ES6新语法2(上)

简介: ES6新语法2

6、数组扩展


6.1 扩展运算符(...)

{
    // 复制数组
    let list1 = [1,2,3];
    let list2 = [...list1];
    list2.push(4)
    console.log(list1);
    console.log(list2);
}
{
    // 分割数组
    let list1 = [1,2,3,'a','b','c'];
    let [,,,...list2] = list1; // 通过,进行占位
    console.log(list1);
    console.log(list2);
}
{
    // 展开数组,给方法传参
    function func(x,y){
        return x+y;
    }
    let list = [1,2];
    console.log(func(...list));
}


6.2 扩展函数

{
    // fill 填充数组,常用于初始化
    let list1 = [1,2,3,4];
    let list2 = [...list1].fill('a'); // 数据全部填充成a
    let list3 = [...list1].fill('a',1,3); // 数据从下标1,到下标3之前,填充
    console.log(list2); 
    console.log(list3); 
}
{
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:1},
    ];
    // find 查找,查找数组中第一个满足条件的元素
    let person = personList.find(function(item){
        return item.name=='张三'
    })
    // findIndex 查找,查找数组中第一个满足条件的元素的下标
    let personIndex = personList.findIndex(function(item){
        return item.name=='张三'
    })
    // some 判断是否存在符合条件的元素
    let isFind = personList.some(function(item){
        return item.name=='张三';
    });
    console.log(person);
    console.log(isFind);
    console.log(personIndex);
}
{
    // includes判断数组中是否包涵指定的值,一般对简单数据类型进行判断
    let list1 = [1,2,3,4];
    console.log(list1.includes(6));
}
{
    // flat 展开数组,如果数组中还有数组,可以通过flat张开数组,合并成一层数组
    let list1 = [1,2,3,[11,22,33,[111,222,333]]];
    let list2 = list1.flat(2); // 参数2是展开的层级,默认是1
    console.log(list2)
}
{
    // filter 过滤。过滤出数组中所有符合要求的元素
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:0},
    ];
    let personList2 = personList.filter(function(item){
        return item.name == '张三'
    })
    console.log(personList2);
}


6.2 filter

{
    // filter 过滤。过滤出数组中所有符合要求的元素
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:0},
    ];
    let personList2 = personList.filter(function(item){
        return item.name == '张三'
    })
    console.log(personList2);
}
// filter() 去掉空字符串、undefined、null
let arr = ['','1','2',undefined,'3.jpg',undefined]
let newArr = arr.filter(item => item)
console.log(newArr)
// filter() 数组去重
let arr = [1, 2, 2, 3, 4, 5, 5, 6];
let newArr = arr.filter((x, index,self)=>self.indexOf(x)===index) 
console.log(newArr)
// 去重复还是推荐set去重
let arr = [1, 2, 2, 3, 4, 5, 5, 6];
let newArr =Array.from(new Set(arr)) 
console.log(newArr)

6.3 map

map是返回一个新的被改变过后的数组。需要return.


{
    // map 常用于数据的映射
    let personList = [
        {id:'1',name:'张三',sex:1},
        {id:'2',name:'李四',sex:0},
        {id:'3',name:'张三',sex:1},
    ];
    let newPersonList1 = personList.map(function(item){
        return {
            id:item.id,
            name:item.name,
            sex:item.sex ? '男' : '女'
        }
    })
    // 如果只想改变数组中的特定属性
    let newPersonList2 = personList.map(function(item){
        let obj={};
        Object.assign(obj,item);
        obj.sex = item.sex ? '男' : '女';
        return obj;
    })
    console.log(personList)
    console.log(newPersonList1)
    console.log(newPersonList2)
}


6.4 reduce

{
    /**
     * reduce 是对数组中的每个元素进行回调,升序执行后,将回调的值进行汇总
     */
    let str = 'abcdasegsa';
    let result = str.split('').reduce(function(acc,cur){
        // acc 是一个初始化的值,cur是循环中的元素
        acc[cur] ? acc[cur]++ : acc[cur]=1;
        return acc;
    },{});
    console.log(result);
}


7、箭头函数


{
    const func1 = (x)=>{
        console.log('箭头函数');
    }
    func1('1');
    const func2 = x => x*2;
    console.log(func2(1))
}

特点:使用简洁。不绑定this。


{
    let person = {
        name:'张三',
        age:18,
        showName1:function(){
            setTimeout(function(){
                // 这里的this是window
                console.log(this.name,this);
            },1000);
        },
        showName2:function(){
            setTimeout(()=>{
                // 这里的this是person
                console.log(this.name,this);
            },1000);
        }
    }
    person.showName1();
    person.showName2();
}

相关文章
|
3天前
|
人工智能 安全 测试技术
|
5天前
|
云安全 人工智能 安全
阿里云 Agentic SOC 位居 IDC MarketScape安全运营智能体2026领导者类别
以 Agentic AI 重构安全运营闭环,阿里云云安全在产品能力与市场份额
1177 3
|
6天前
|
缓存 UED 开发者
Codex109天重置23次,明天还要再送一次
Codex近109天完成23次额度重置,7月14日将迎来第24次。Tibo高频响应用户反馈:优化GPT-5.6高消耗问题、补发失效福利、调整重置时间——形成“反馈→回应→修复→补偿”正向闭环,彰显以用户为中心的产品哲学。(239字)
659 11
|
5天前
|
数据采集 机器学习/深度学习 人工智能
田间杂草定位与检测4200张YOLO智慧农业数据集分享
本数据集含4200张真实农田图像,YOLO格式,单类别(杂草)高质量标注,覆盖多作物、多光照、多生长阶段等复杂场景,专为智慧农业杂草检测与智能除草设备研发设计,支持YOLOv5/v8/v10等主流模型训练。
362 94
|
9天前
|
存储 人工智能 JSON
Qwen 本地部署搭配 ComfyUI 生成 AI 漫剧完整实操指南(小白零基础可落地,零成本无限生成+角色一致性天花板)
2026全网最优本地漫剧流水线:零成本、离线运行、角色统一、低配(8G显卡)可跑。融合Qwen本地大模型+ComfyUI双引擎,实现剧本生成→分镜绘图→动态成片全自动,隐私安全、无审核限流,新手30分钟上手,日更无忧。(239字)
|
3天前
|
Web App开发 数据采集 人工智能
|
9天前
|
人工智能 缓存 JSON
刚刚 GPT-5.6 发布,吊打 Claude 5 和 Grok 4.5?一手实测来啦!
GPT-5.6 刚发布,跑分号称超越 Fable 5,真的假的?附一手实测,让 3 个最强 AI 编程模型 GPT-5.6 Sol、Claude Fable 5、Grok 4.5 在 Cursor 里同时一把梭开发网页游戏,看看最新模型到底谁更能打。
377 0