ARTS第六周

Algorithm

// 原题https://leetcode.com/problems/valid-parentheses/description
/**
	给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。

  有效字符串需满足:

  左括号必须用相同类型的右括号闭合。
  左括号必须以正确的顺序闭合。
  注意空字符串可被认为是有效字符串。
  
  
  Example 1:

  Input: "()"
  Output: true

  Input: "()[]{}"
  Output: true

  Input: "(]"
  Output: false

  Input: "([)]"
  Output: false

  Input: "{[]}"
  Output: true
  
  这个题可以用栈来解决,其实这个东西如果在复杂一点,就是html解析的过程,
  遍历输入的字符串,如果当前字符为左半边括号时,则将其压入栈中,
  当遇到右边括号的时候,栈为空或者不匹配的时候,就是false,否则继续循环
*/
/**
 * @param {string} s
 * @return {boolean}
*/
export default function isValid (s) {
  let valid = true;
  const stack = [];
  const mapper = {
    '{':'}',
    '[':']',
    '(':')'
  }
  for(let i in s) {
    const v = s[i]
    if(['[','(','{'].indexOf(v) > -1) {
      stack.push(v)
    } else {
      const peek = stack.pop()
      if(v !== mapper[peek]){
        return false
      }
    }
    
    if(stack.lennth > 0) return false
    
    return valid;
  }
}



review

https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

在HTML中,标签、、的值的改变通常是根据用户输入进行更新。在React中,可变状态通常保存在组件的状态属性中,并且只能使用 setState() 更新,而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况,以这种由React控制的输入表单元素而改变其值的方式,称为:“受控组件”。广义就是说,组件本身自己控制组件,

class InputDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: ''};
        this.handleNameChange = this.handleNameChange.bind(this);
    }

    handleChange(event) {
        this.setState({ name: event.target.value });
    };

    render() {
        return (
            <div>
                <input type="text" value={this.state.name} onChange={this.handleChange}/>
            </div>
        );
    }
}

表单数据由DOM本身处理。即不受setState()的控制,与传统的HTML表单输入相似,input输入值即显示最新值(使用 ref从DOM获取表单值)广义上就是说,组件本身不控制状态,由用户自己控制。

特征 非受控制 受控
一次性检索(例如表单提交) yes yes
及时验证 no yes
有条件的禁用提交按钮 no yes
执行输入格式 no yes
一个数据的几个输入 no yes
动态输入 no yes

tip

一个ES7的小语法知识,

求幂运算符(**)

一个很简单的语法糖替代Math.pow

Math.pow(2,3)等同于2 ** 3

share

分享一个库,https://github.com/localForage/localForage

对不同浏览器 使用不同的缓存策略 , 大大提高了性能 ,IndexedDB,WebSQL 和 localStorage 三种存储模式。

  • 支持回调的异步 API;
  • 支持 IndexedDB,WebSQL 和 localStorage 三种存储模式(自动为你加载最佳的驱动程序);
  • 支持 BLOB 和任意类型的数据,让您可以存储图片,文件等等。
  • 支持 ES6 Promises;

对 IndexedDB 和 WebSQL 的支持使您可以为你的 Web应用程序存储更多的数据,要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快,不会因为 Get/Set 调用而挂起主线程。

你可能感兴趣的:(js开发)