首页 > 代码库 > 平时笔记总结(2)

平时笔记总结(2)

  Es6 箭头函数是对函数的表现形式作为简化,如果我们需要一个简单函数,就可以用箭头函数,语法: 标识符=>表达式;以函数表达式为例, 可以看到 你无需再输入functionreturn,一些小括号、大括号以及分号也可以省略。

// 普通写法
let sum = function(a,b) { return a + b; }

// 箭头函数写法
let sum = (a,b) => a+b; 

   1, 箭头函数左边 是函数运行时所需要的参数列表。

    如果函数不需要参数,直接() 如: let hello = () => console.log(“hello”);

    如果函数接受一个参数,()可以省略,如: let add10 = num => num +10;

    如果函数接受多个参数,所有参数依次列出放在括号中,let sum = (a,b) => a+b;

  2, 箭头函数右侧是函数体,它默认是返回值,因此,如果箭头右侧是一句表达式,return 可以省略,像上面的函数一样。如果箭头函数返回的是一个对象的话,需要把对象用()括起来, let obj = name =>({name:name})

    如果箭头函数右侧不是返回值,而是一段可以执行的语名块,那么需要用{}把语名块包起来,如果语句块执行完毕,还要返回值,那就需要在语句块的末尾显示调用return, 如下:

let amount = n => {
    let sum =0;
    for(let i=0; i<=n; i++){
        sum = sum + i;
    }
    return sum;
}

  3, 箭头函数没有自己的this 值,箭头函数内部的this 值继承自外围作用域。箭头函数内部可以使用this , 只不过它不是指向箭头函数调用时的执行环境,而是包围箭头函数的外部函数调用时的 执行环境,这样我们内部的this值和外部的this 值就统一了,

再也不用 let that = this , 用that 去代替this了。

  4, 箭头函数的主要作用是简化回调函数的。比如 数组排序。

var arr =[3, 7, 9, 5];
arr.sort(function(value1, value2){
    return value1 – value2 
})

// 箭头函数
arr.sort((value1, value2) => value1 –value2);

  React 组件很简单,你可以把他看做是一个函数,接收props 和state 两个参数,返回一个虚拟dom.

  React 中使用子节点, 当我们渲染组件的时候,ReactDom.render(<div> apple</div>), 在组件中,this.props.children = [“apple”], children 是一个数组。

    React 对es6 中的扩展运算符(…)进行扩展,它能运用到对象上,对对象进行分割。{…this.props}; var obj = {name:”sam”, age: “28”}  {…obj}  => name=”sam” , age=”28”, 正好对应父组件向子组件传递数据。

  React 组件内部的render() 方法,返回(就是创建)一个虚拟dom, 随后react 会拿它和真实的dom 作对比,看看哪些地方修改。componentDidMount: 真实的dom渲染结束,在这里可以用来访问原始dom.

   Es5中增加了一个bind 方法,对函数中的this 进行硬绑定,它返回就是this 被硬绑定后的函数, 记住,它返回的是一个函数,只不过里面的this被绑定死了,以后这个函数运行时,this 不会变化。 Apply 和 call 方法,是函数调用时,动态指定里面的this. 调用这两个方法,函数已经执行了。

  在web 中,不论我们使用的是什么框架,最终都要转化成html, css 和js, 否则浏览器不知道要做什么。React 应用jsx 语法,所以浏览器压根不懂是什么东西,我们所有的react 应用,最终都会转化成为html, css, js. 围绕node 及一些构建工具(webpack, gulp)来设置开发环境,这是现代web 开发方式,同时还可以应用模块化,创建更复杂的应用。

平时笔记总结(2)