解构 箭头函数 展开运算符 数组迭代方法

已于 2022-06-06 19:37:45 修改
阅读量114 收藏
点赞数
文章标签： 前端
于 2022-04-20 19:58:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longfan_/article/details/124290146
版权

1.对象解构赋值

1.解构赋值：变量赋值的简写语法

2.对象解构：

2.1 取出对象的属性值 赋值给 变量

2.2 取出变量的值 赋值给 对象

// 1 取出对象的属性值 赋值给 变量
        let obj={
            name:'张三',
            age:20,
            sex:'男'
        }

        // ES5
        // let name=obj.name
        // let age=obj.age
        // let sex=obj.sex
        // console.log(name,age,sex)

        // ES6
        // let name=obj.name
        // let age=obj.age
        // let sex=obj.sex
        let {name,age,sex,score}=obj
        console.log(name,age,sex,score)

        // 2 取出变量的值 赋值给 对象
        let username='admin'
        let password='123'
        let lin='123456'

        // ES5
        // let user={
        //     username:username,
        //     password:password
        // }

        // ES6
        let user={
            username, //username:username
            password,
            touxiang:lin,
            eat(){    //eat:function(){}
                console.log('吃东西')
            }
        }
        console.log(user)

2.数组解构赋值

数组解构：

            1.1 取出数组的属性值 赋值给 变量

            1.2 取出变量的值 赋值给 数组

// 1 取出数组的属性值 赋值给 变量
        let arr=[1,2,3]
        let [n1,n2,n3,n4]=arr
        console.log(n1,n2,n3,n4) //1 2 3 undefined

        // 2 取出变量的值 赋值给 数组
        let num1=1
        let num2=2
        let num3=3
        let arr1=[num1,num2,num3]
        console.log(arr1)

3.函数参数解构赋值

// 函数参数是：对象

// 函数参数结构原理

        // let obj={name:'李四',age:18}

        // let {name,age}=obj

        // 上面两行代码可以简写为一行

        // let {name,age} = {name:'李四',age:18}

function fn({name,age}){  //let {name,age}={name:'张三',age:20}
            // 对obj进行对象解构
            console.log(name,age)
        }

        fn({name:'张三',age:20})

4.箭头函数

1.箭头函数：相当于function函数的简写（用在匿名函数中）

            (1)把function改成箭头 =>

            (2)把形参小括号()移到箭头的左边

 // 1.基本用法

let fn = (a,b)=>{
            return a+b
        }
        let res = fn(10,20)
        console.log(res)

// 2.其他用法

        // （1）如果箭头函数形参只有一个，形参的小括号()可以省略

let fn1 = a=>{
            return a*2
        }
        let res1=fn1(66)
        console.log(res1)

         // （2）如果箭头函数的函数只有一行，则可以省略大括号（此时也必须省略return）

let fn2 = a=> a*2
        let res2=fn2(88)
        console.log(res2)

4.1 箭头函数的this指向

1. function函数this有三种指向

        (1)普通函数：函数名()  this->window

        (2)构造函数：new 函数名()  this->new创建的实例对象

        (3)对象的方法：对象名.方法名()  this->对象

 2.箭头函数this：箭头函数没有this

            本质是通过作用域链 访问上级this

3.以下几种函数不能是箭头函数

            构造函数

            call()无法修改箭头函数this

            事件处理函数

let obj={
            name:'lin',
            eat(){//1级链 function函数this->Object
                let fn1=function(){
                    // 2级链 fn1()中this->window
                    console.log(this)//window
                }
                fn1()
                let fn2=()=>{
                    // 2级链 箭头函数this指向上一级 Object
                    console.log(this)//Obiect
                }
                fn2()
            },
            learn:()=>{//1级链 箭头函数this指向上一级 window
                let fn1=function(){
                    // 2级链 fn1()中this->window
                    console.log(this)//window
                }
                fn1()
                let fn2=()=>{
                     // 2级链 箭头函数this指向上一级 window
                    console.log(this)//window
                }
                fn2()
            }
        }
        obj.eat()
        obj.learn()

5.展开运算符

1.展开运算符：...

            相当于对象遍历的一种简写

            语法：...对象名

 2.应用场景：

            2.1 连接数组

            2.2 求数组最大值

// 1.连接数组
        let arr1=[10,20,30]
        let arr2=[40,50,60]
        // ES5
        // arr1=arr1.concat(arr2)
        // console.log(arr1)

        // ES6
        arr1.push(...arr2)
        console.log(arr1)

        // 2.求数组最大值
        let arr=[11,22,44,88,99]
        let max=Math.max(...arr)
        console.log(max)

        // 3.连接对象
        let stu={
            score:80,
            className:'101'
        }
        let obj={
            name:'lin',
            age:18,
            ...stu
        }
        console.log(obj)

6.数据类型

1.数据类型Set：集合

            类似于数组，与数组最大的区别是：集合不能存储重复元素

2.应用：数组去重

let arr=[20,45,20,55,60,45,78,60]
       console.log(arr)

        // 1.创建Set
        let set=new Set(arr)
        console.log(set)
        // 2.Set转数组
        let newArr=[...set]

        // 上面步骤可以简写成一行(面试点，数组去重)
        let arr1=[...Set(arr)]

7.数组map遍历

1.map方法作用：根据某种规则映射数组，得到映射之后的新数组

            应用场景：（1）数组中所有元素 * 0.8  （2）将数组中的js对象映射成html字符串

2.map语法特点：

            （1）回调执行次数 === 数组长度

            （2)回调函数内部return

                return 新元素

                如果没有return，新元素是undefined

            （3）方法自身的返回值：

                映射后的新数组

let arr=[10,20,30,40]
        // 完整语法
        // let res=arr.map((item,index)=>{
        //     // console.log(item,index)
        //     return item*0.8
        // })

        // 熟练语法
        let res=arr.map(item=>item*0.8)
        console.log(res)

8.数组filter遍历

 1.filter方法作用：根据条件，筛选数组

            应用场景：（1）筛选数组中的偶数  （2）商品价格筛选

 2.filter语法特点：

            （1）回调执行次数 === 数组长度

            （2)回调函数内部return

                return true：满足条件 ，放入新数组

                return false：不满足条件

                如果没有return，新元素是undefined

            （3）方法自身的返回值：

                筛选之后的新数组

// 筛选数组中的偶数 
        let arr=[10,20,45,66,75,80]
        // 标准写法
        // let res=arr.filter((item,index)=>{
        //     if(item %2===0){
        //         return true
        //     }else{
        //         return false
        //     }
        // })
        // console.log(res)

        // 简洁写法
        let res=arr.filter(item=>item % 2 === 0)
        console.log(res)

9.数组forEach遍历

1.forEach方法作用：相当于for循环另一种写法

            应用场景：遍历数组

2.filter语法特点：

            （1）回调执行次数 === 数组长度

            （2)回调函数内部return

                无

            （3）方法自身的返回值：

                无

/ 遍历数组
        let arr=[10,20,45,66,75,80]
        arr.forEach((item,index)=>{
            console.log(item,index)
        })

10.数组some遍历

1.some方法作用：判断 数组中是否有满足条件的元素（逻辑或 || 有任意一个满足即可）

            应用场景：（1）判断数组中有没有奇数

                （2）非空判断：判断表单数组中，有没有元素value为空

2.some语法特点：

            （1）回调执行次数 !== 数组长度

            （2)回调函数内部return

                return true：循环结束。找到满足条件的元素，sam自身返回true

                return false：循环继续，没有找到满足条件的，如果所有元素都是返回false，最终some默认返回false

            （3）方法自身的返回值：

                true：有满足条件的元素

                false：没有满足条件的元素

// 判断数组中有没有奇数
            let arr=[10,20,30,40,50]

            // 标准写法
            // let res=arr.some((item,index)=>{
            //     if(item%2===1){
            //         return true
            //     }else{
            //         return false
            //     }
            // })

            // 简写语法
            let res=arr.some(item=>item%2===1)
            console.log(res)

11.数组every遍历

1.every方法作用：判断 数组中是否所有元素都满足条件（逻辑与 && ，全部满足）

            应用场景：（1）判断数组中是否所有元素都是偶数

                （2）开关思想：购物车是否全选

  2.every语法特点：

            （1）回调执行次数 !== 数组长度

            （2)回调函数内部return

                return true：循环继续。满足条件，如果所有元素都满足，最终every返回true

                return false：循环结束。不满足条件，此时every返回false

            （3）方法自身的返回值：

                true：所有元素都满足条件

                false：有元素不满足条件

// 判断数组中所有元素都是偶数
            let arr=[10,20,30,40,50]

            // 标准写法
            // let res=arr.every((item,index)=>{
            //     if(item%2===0){
            //         return true
            //     }else{
            //         return false
            //     }
            // })

            // 简写语法
            let res=arr.every(item=>item%2===0)
            console.log(res)

12.数组findIndex遍历

1.findIndex方法作用：找元素下标

            应用场景：（1）如果数组中是值类型，找元素下标，用arr.indexOf(元素)

                （2）如果数组中是引用类型，找元素下标，用arr.finedIndex(元素)

 2.findIndex语法特点：

            （1）回调执行次数 !== 数组长度

            （2)回调函数内部return

                return true：循环结束。找到元素，返回当前元素下标

                return false：循环继续。没有找到，如果全部都是false，最终返回固定值-1

            （3）方法自身的返回值：

                -1：没有元素

                下标：有元素

let arr=[
            {name:'张三',age:20},
            {name:'李四',age:25},
            {name:'王五',age:30}
        ]
        
        // 简洁写法
        let res=arr.findIndex(item=>item.name==='李四')
        console.log(res)

13.数组reduce遍历

1.数组reduce遍历：为每一个元素执行一次回调，返回最后一个回调的结果

2.reduce场景：求数组累加和

第一个参数：回调函数（sum，item，index）=>{}

            sum:上一次回调return返回值

            item：当前元素

            index:当前下标

第二个参数：sum初始值 ，一般给0，如果不给，遇到空数组，reduce就会报错

// 标准写法
        // let res=arr.reduce((sum,item,index)=>{
        //     console.log(sum,item,index)
        //     return sum+item
        // },0)
        // 简写语法
        let res =  arr.reduce( (sum,value)=>sum+value , 0 )
        console.log( res )

longfan_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
10-15
以下是一些ES6的常用小技巧，涵盖了去重、交换变量、合并数组、字符串反转、数组迭代、数值计算等多个方面。 1- **数组去重** 在ES6中，可以利用Set的数据结构来轻松实现数组的去重。Set是一个不包含重复元素的...
JavaScript ES6常用基础知识总结
12-07
- **剩余参数（Rest parameters）**：使用`...`运算符可以捕获函数调用时传入的额外参数，并将其存储为一个数组，例如`function print(value1, value2, ...values) { console.log(values.join('--')); }` 5. **...
箭头函数参数解构
weixin_30609287的博客
07-30 483
var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; elements.map(function(element) { return element.length; }); // 返回数组：[8, 6, 7, 9] // 上面的普通函数可以改写成如下的箭头函数...
ES6的箭头函数，参数扩展以及解构赋值
dou_xiaobao的博客
10-28 413
1、箭头函数，就是函数的简写 ①如果只有一个参数，() 可以省 ②如果只有一个return，{}可以省 // 普通函数 function name() { } // 箭头函数，去掉 function， 加上 => () => { } let show1 = function () { console.log('abc') } let show2 = () => { console.log('abc') } show1() // 调用函数 abc show2.
你看懂“箭头函数”了么？
weixin_34293059的博客
10-25 111
文章目录 1. 从改造开始 2. 关于解构 3. 说说案例 3.1. 回调函数 3.2. rest参数结合 ES6 允许使用“箭头”（=>）定义函数。如果了解 Java 的 Lambda 表达式，回过头来理解 ES6 的箭头函数，就非常好理解了。 参考之前分享的《Java8 特性详解（一） Lambda》的讲解流程，我们在看下 ES6 的内容吧。 从改造开始 首先，我们从一个例子开始，...
ES6展开运算符的使用（展开、合并数组，拷贝（copy）数组和对象）
小福气的博客
08-10 1633
1 展开数组 let arr1 = [1,3,5,7] console.log(...arr1);//1 3 5 7 2 合并数组 let arr1 = [1,3,5,7] let arr2 = [2,4,6,12] console.log(...arr1,...arr2,8,7);//1 3 5 7 2 4 6 12 8 7 3在函数中使用（用于计算输入的所有数字的总和） 该方法适用于输入的参数数量不确定的情况。无需理会传入的参数有多少，只需要调用即可。 function sum(..
ES6语法（2）—— 对象解构赋值、箭头函数使用和思考
我不是水哥
06-12 2807
    ES6的内容太过丰富，在学习的过程中，我选择取其精华，跳过非精华，个人觉得变量的解构赋值和箭头函数都是非常有实际使用价值的内容，就单独拿出来放一个章节分析和介绍。     关于变量的解构赋值，其实有很多种解构方式，包括数组，对象，字符串等都可以进行解构赋值，但个人认为对象的结构赋值是最常用，也是最有用的。     下面来看一个应用场景：现在有一个person对象，然后你通过引用（imp...
24个ES6方法解决JS实际开发问题(小结)
10-15
用 `...` 表示的扩展运算符可以在数组和对象中展开元素，如 `let arr1 = [1, 2, 3], arr2 = [...arr1, 4, 5];`。 13. **let 和 const** `let` 和 `const` 提供了块级作用域，`let` 可重新赋值，`const` 一旦赋值...
js代码-改造数组对象内部对象属性结构
07-16
7. **ES6新特性**：现代JavaScript（ES6及以上版本）提供了许多新特性，如箭头函数（`=>`）、解构赋值和展开运算符（`...`），这些都可以使代码更加简洁和易读。例如，`arr.map(obj => ({...obj, newProp: obj....
ES6函数参数解构
热门推荐
RUCwang的博客
10-10 1万+
ES6函数参数解构 常规的JavaScript若要给函数传递的参数是一个对象，需要像下面这样来实现： function sayName(person) { if(Object.prototype.toString.call(person) == '[object Object]') { console.log( `${person.firstName} ${person.lastNam...
箭头函数，函数默认参数，数组和对象的解构
weixin_33939380的博客
05-29 341
箭头函数 ES6更新引入了箭头函数，这是声明和使用函数的另一种方式。它带来的好处： 更简洁 函数式编程 隐式返回 示例代码: 简洁 function double(x) { return x * 2; } // Traditional way console.log(double(2)); // 4 复制代码 隐式返回 const double = x => x * 2; // S...
ES6数组解构,对象解构,箭头函数,剩余参数
清风的博客
09-25 1111
ES6赋值解构,箭头函数,剩余参数 1.赋值解构 1.1数组解构 数组解构就是按照一一对应的关系从数组中提取值然后将值赋值给变量 let arr = [10,20,30]; let [a,b,c,d] = arr; console.log(a,b,c,d);//10 20 30 undefined //a,b,c变量对应有值,变量d没有,为undefined 1.2对象解构 let obj = ...
箭头函数 与 forEach
weixin_30955341的博客
08-22 5398
array.forEach(function(item,index){ }.bind(this)); 同 array.forEach((item,index) =>{ }); 转载于:https://www.cnblogs.com/guomengkai/p/11392958.html
ES6 函数 （箭头函数、默认参数、函数展开）
keep moving
09-11 584
箭头函数 // 传统 let plus = function(a,b) { return a+b } // 箭头函数 let arrPlus = (a,b) => a+b // 传统 function plus1(a,b) { return a+b; } let a = plus(1,5) let b = plus1(1,6) let c = arrPlus(1,7) ...
JS高级 解构赋值, 箭头函数 数组迭代方法
weixin_68531033的博客
05-05 525
ES6语法
JAVA-WEB资源配置
caryeko的专栏
08-15 223
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 457
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
pywebview 入门
最新发布
小小宾的博客
08-18 543
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 351
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
ECMAScript6新特性详解：从指数运算符到数组扩展
- 箭头函数：更简洁的函数定义语法，注意this的指向变化。 以上内容详细介绍了ES6引入的新特性，涵盖了语言的多个方面，包括变量声明、字符串处理、正则表达式、数值运算、数组操作和函数定义等。这些特性极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值