声明式编程 命令式编程

本文深入探讨声明式编程与命令式编程的区别,通过正则表达式和数组操作的示例,展示了声明式编程如何关注结果而忽略实现细节。同时,介绍了函数式编程的核心特点,如纯函数、不可变性和数据转换,并以React组件为例说明其在实际应用中的体现。此外,还简要提到了命令式编程强调的执行步骤和效率问题。
摘要由CSDN通过智能技术生成

声明式编程

声明式编程关注点由如何做转变为做什么,避免了各种副作用(常说的副作用是指方法为纯函数,内部状态的变化不会对外部的变量造成影响)。声明式编程不关注对象的实现细节,只关注在执行过程中计算机应该做什么,当我们使用正则表达式进行正则匹配的过程中,声明式编程方式让我们关注正则表达式要做什么以及所匹配的内容,但并不关注正则表达式底层具体所做了哪些事情。同理html标签也是声明式编程的一种,只需要告知计算机我们声明了什么,无需关注他内部到底如何实现。典型的声明式编程如数据库查询语言、正则表达式等。

//声明式编程 告知机器做什么,隐藏具体的实现细节
let arr = [1, 2, 3, 4, 5];
 
arr.filter((item) => item % 2 == 0);
 
//命令式编程,关注实现过程
let arr = [1, 2, 3, 4, 5];
let result = [];
 
for(let i=0, len = arr.length; i < len; i++) {
    let cacheItem = arr[i];
    if( cacheItem  % 2 == 0 ) {
        result.push(cacheItem); 
    }    
}
 
//函数式编程,纯函数实现
let arr = [1, 2, 3, 4, 5];
 
function findOddNumber(resource) {
   let result = [];
   for(let i=0, len = arr.length; i < len; i++) {
        let cacheItem = arr[i];
        if( cacheItem  % 2 == 0 ) {
            result.push(cacheItem); 
        }
    }    
    return result;
}
 
findOddNumber(arr);

 <div id="root">
    <script type="text/babel">
    function Message(){//声明函数
        let [messageData,setData]=React.useState([{
            id:1,
            message:"西安"

        },
        {
            id:2,
            massage:"疫情"
        }
        ])
        return (
            <div>
                <button id="btn" 
              onClick={()=>{
                messageData.push({
                    id:Date.now(),
                    message:'新的留言'
                });
                setData([...messageData])
            }}
            >添加一条信息</button>
            <br>
            <ul id="list">
            {
                messageData.map((item)=>{
                    return (<li key={ item.id}>{item.message}</li>)
                    })
                }
            
            </ul>
            </div>

命令式编程

命令式编程关注点与声明式编程的关注点正好相反,其更关注实现的细节,主要思想是关注计算机执行的步骤,即一步一步告诉计算机先做什么再做什么。所谓命令式编程,是以命令为主的,给机器提供一条又一条的命令序列让其原封不动的执行。程序执行的效率取决于执行命令的数量。因此才会出现大O表示法等等表示时间空间复杂度的符号。

 <button id="btn">添加一条信息</button>
    <br>
    <ul id="list">
        <li>西安</li>
        <li>
            疫情
        </li>
    </ul> 
    <script>
        let btn=document.querySelector('#btn')
        let list=document.querySelector("#list")
        btn.onclick=function(){
            let newMessage="新的信息"
            let newLi=document.createElement("li");
            newLi.innerHTML=newMessage
            list.appendChild(newLi)
        }
    </script> 

 函数式编程

函数式编程是声明式编程的一部分,因为他们思想是一致的:即只关注做什么而不是怎么做。但函数式编程除了对声明式编程的相似处之外,同时他也利用了js函数能够作为参数传递的特点。函数式编程最重要的特点是“函数第一位”,即函数可以出现在任何地方。

函数式编程的特性:

(a)、不可变性(Immutability):不可变性是指函数不存在副作用,如果需要修改,需要克隆新的备份数据进行处理

(b)、纯函数(Pure Functions):纯函数是始终接受一个或多个参数并计算参数并返回数据或函数的函数

(c)、数据转换(Data Transformations):对传递的数据克隆备份后,进行数据的处理,最终返回新的对象,避免副作用

(d)、闭包以及高阶函数 (Higher-Order Functions):高阶函数是将函数作为参数或返回函数的函数,闭包不做解释

(e)、递归:递归是一种函数在满足一定条件之前调用自身的技术。

(f)、组合:常用的混合函数,将多个对象混合为一个新的对象。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值