Web前端之路

js零碎点

2020-04-18  本文已影响0人  哭不是罪

1.关于[ ]
[ ] 最常用于创建数组,但是除了这个,它还具有“解析变量”的作用
例如我们看一段关于react的代码片段

import React from "react"

class Index extends React.Component {
    constructor() {
        super();
        this.state = {
            name: "",
            mobile: "",
        }

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onChange (e) {
        let type = e.target.getAttribute("data-type");
        let value = e.target.value;
        this.setState({
            [type]: value
        });
    }
    onSubmit () {
        console.log("name is", this.state.name);
        console.log("mobile is", this.state.mobile);
    }
    render () {
        return (
            <div>
                <div>
                    <label htmlFor="name">姓名:</label>
                    <input id="name" type="text" data-type="name" placeholder="请输入姓名" onChange={this.onChange} />
                </div>
                <div>
                    <label htmlFor="mobile">手机号:</label>
                    <input id="mobile" type="number" data-type="mobile" placeholder="请输入手机号" onChange={this.onChange} />
                </div>
                <button onClick={this.onSubmit}>提交</button>
            </div>
        )
    }
}

export default Index;

在name和mobile两个输入框中我使用了同一个onChange函数,按照一般写法,会使用判断去处理当前操作的是哪个输入域,应该给哪个state数据赋值。
这种情况下我们直接使用[ ]去解析type的类型,会得到相应的字符串,从而自动处理赋值。
如果不加[ ],而是this.setState({ type:value }),那么name和mobile两个属性都不会被赋值,而是给state下面的type属性赋值了。

2.关于if
可能有些粗心的情况下,在if判断中只使用了一个等号。

其实本身这种写法并没有任何语法错误,所以语法提示也不会告诉你这句话错了,从而程序运行结果跟预期不一样很难排查错误,等找了半天发现少写了等号,自己都想抽自己耳光了。

虽然这个点很小,但是难免也会发生,所以还是要知其所以然。
如 if( a = b ) ....
这个判断不一定能走进去,也不一定不能走进去,关键是括号中的返回结果。
= 含义是赋值运算符,它会将等号右边的运算结果返回给前面
例如:

var a = 0;
if (b = a) {
   console.log('exec');
}
//这种情况下不会走进判断,因为b=a,小括号内的执行结果为0,if(0) ,js隐式转换为false,自然不会走进判断。
var a = 1;
if (b = a) {
   console.log('exec');
}
//这种情况下不会走进判断,因为b=a,小括号内的执行结果为1,if(1) ,js隐式转换为true,自然会走进判断。

3.关于( )
在表达式中常见的()用法是提升优先级,其实它也是运算符,并且有返回值。
如果()中有多个以逗号分隔的元素,它总是会返回最后一个元素的运算结果。
例如:

(2, 3);//3
(true, false); //3
(function a() { }, function b() { }); // function b(){}

//结合刚才的if语句
if(true,0){
  console.log('exec')
}
//这个判断是永远也进不去了

js是一个很随意的出现,其中的很多语法也很随意,研究这些随意也是一件快乐的事。

个人总结,如有错误,望请指正。

上一篇下一篇

猜你喜欢

热点阅读