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();
}

相关文章
|
前端开发 JavaScript
|
6月前
|
JavaScript 前端开发
ES6 函数
ES6(ECMAScript 2015)是 JavaScript 的一个重要版本,它引入了许多新的特性和语法。其中,函数是 ES6 的一个重要组成部分,它提供了许多新的函数语法和特性,如箭头函数、函数参数默认值、函数解构赋值等。
41 8
|
6月前
|
存储 前端开发 JavaScript
ES6语法
ES6语法
62 0
|
网络架构
es6 语法简单使用1
es6 语法简单使用
72 0
|
前端开发
es6 语法简单使用2
es6 语法简单使用
63 0
|
Web App开发 前端开发 JavaScript
ES9语法知识点回顾
ES9语法知识点回顾
258 31
|
JavaScript 前端开发 索引
JavaScript ES6语法学习笔记 03、ES6新增方法(一)
JavaScript ES6语法学习笔记 03、ES6新增方法(一)
JavaScript ES6语法学习笔记 03、ES6新增方法(一)
|
JavaScript 前端开发
JavaScript ES6语法学习笔记 03、ES6新增方法(二)
JavaScript ES6语法学习笔记 03、ES6新增方法(二)
JavaScript ES6语法学习笔记 03、ES6新增方法(二)