forfrank / notes Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 27.6 MB

笔记整理

License: MIT License

HTML 29.69% JavaScript 10.12% Vue 60.19%

notes's People

Watchers

notes's Issues

防抖

参考链接

待整理

Flex弹性布局

传统的前端页面布局：基于盒模型，依赖于display、float、position属性，对于那些特殊的布局很不方便。现在有了flex，让布局变得更简单。目前，它得到所有浏览器的支持，使开发更简便！

基本概念

Flexible Box：弹性布局，为盒模型提供灵活布局；
flex容器中有几概念：
- flex项目：flex容器包裹flex项目
- 主轴：默认水平方向，从左到右
- 侧轴：默认垂直方向，从上到下
指定一个弹性布局盒子：

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex container容器属性

flex-direction：设置主轴方向，即项目的排列方向；

例：flex-direction: row | row-reverse | column | column-reverse;
- row（默认）：主轴为水平方向，从左向右；
- row-reverse：水平方向，从右向左；
- column：垂直方向，从上到下；
- column-reverse：垂直方向，从下到上。

flex-wrap：设置项目的换行方式；

例：flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap（默认）：如果项目一行排不下，不换行；
- wrap：换行，第二行在下方；
- wrap-reverse：换行，第二行在上方。

flex-flow：flex-direction+flex-wrap的简写；

默认：flex-flow: row nowrap;

justify-content：定义项目在主轴上的对齐方式

例：justify-content: flex-start | flex-end | center | space-between | space-around;

假设主轴row，水平从左到右：
- flex-start（默认）：左对齐；
- flex-end：右对齐；
- center：居中；
- space-between：两端对齐，项目之间间隔相等；
- space-around：每个项目两侧都有间隔且相等。

align-items：项目在侧轴上的对齐方式；

例：align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start：侧轴起点对齐；
- flex-end：侧轴终点对齐；
- center：居中；
- baseline：项目第一行文字的基线对齐；
- stretch：如果项目高度为auto，将其拉伸占满容器高度。

align-content：项目有多根轴线（多行）的对齐方式；

例：align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex item项目属性

order：默认0，设置item的排列顺序，数值越小越靠前；
flex-grow：默认0，设置item的放大比例；0：不伸缩，其他数字按比例伸缩；
flex-shrink：默认1，设置item缩小比例；0：不伸缩；
flex-basis：为项目设置宽度用到；
flex：flex-grow+flex-shrink+flex-basis的简写，默认：0 1 auto；
align-self：设置单个item与其他item不一样的侧轴对齐方式；

align-self: auto | flex-start | flex-end | center | baseline | stretch;

防抖

function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    }
}

截流

总结一下最近在vue中使用checkbox的心得

1、vue中可以直接使用v-model监听checkbox中的value值,实现效果如下：

//template
<p> 1:<input name="demo" v-model="checkValue" :value="1" type="checkbox" /></p>
<p>2:<input name="demo" v-model="checkValue" :value="2" type="checkbox" /></p>
<p> 3:<input name="demo" v-model="checkValue" :value="3" type="checkbox" /></p>
<p>数组：{{checkValue}}</p>

//data
data(){
  return{
    checkValue:[]
  }
},

checkValue是一个数组，当前checkbox被选中时，v-model会将value值push进checkValue数组，当前checkbox被取消时，会将当前的value值从checkValue数组中pop出去。
在checkbox中使用了v-model之后，checkbox自带的checkd属性会失效。

2、如果给checkbox绑定事件需要使用@change，而不是@click，具体细节可参考这篇文章:

vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解

安装步骤

1.安装anaconda
2.安装vscode
3.在vscode控制台中安装python插件
遇到的问题及解决方案：参考链接

filter

filter它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
```
  var arr = [1, 2, 4, 5, 6, 9, 10, 15];
  var r = arr.filter(function (x) {
      return x % 2 !== 0;
  });
  r; // [1, 5, 9, 15]
```

then

then()方法是异步执行。
意思是：就是当.then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题。

  fetch('http://example.com/movies.json')
  .then(function(response) {
      return response.json();
  })
  .then(function(myJson) {
      console.log(myJson);
  });

assign()

Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
```
  let targetObj1 = { a: 1 };
  let sourceObj1 = { b: 1 };
  let sourceObj11 = { c: 3 };
  Object.assign(targetObj1, sourceObj1, sourceObj11);
  console.log(targetObj1);
```
注：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

1、const和let

被 const 声明的变量不能被重新赋值或重新声明；当一个变量需要被重新赋值的话，应该使用 let 去声明它：

错误写法

 const helloWorld = 'Welcome to the Road to learn React';
 helloWorld = 'Bye Bye React';

正确写法

 let helloWorld = 'Welcome to the Road to learn React';
 helloWorld = 'Bye Bye React';

使用 const 声明的变量不能被改变，但是如果这个变量是数组或者对象的话，它里面持有的内容可以被更新。它里面持有的内容不是不可改变的。

允许的写法

  const helloWorld = {
  text: 'Welcome to the Road to learn React'
  };
  helloWorld.text = 'Bye Bye React';

2、箭头函数

   // function expression
   function () { ... }
   // arrow function expression
   () => { ... }

关于 this 对象的不同行为。一个普通的函数表达式总会定义它自己的 this 对象。但是箭头函数表达式仍然会使用包含它的语境关于箭头函数的括号还有一个值得关注的点。

如果函数只有一个参数，你就可以移除掉参数的括号，但是如果有多个参数，你就必须保留这个括号。

 Code Playground
 // allowed
 item => { ... }
 // allowed
 (item) => { ... }
 // not allowed
 item, key => { ... }
 // allowed
 (item, key) => { ... }

在 ES6 的箭头函数中，你可以用简洁函数体来替换块状函数体（用花括号包含的内
容），简洁函数体的返回不用显示声明。这样你就可以移除掉函数的 return 表达式。

繁体

     {list.map(item => {
     return (
     <div key={item.objectID}>
     <span>
     <a href={item.url}>{item.title}</a>
     </span>
     <span>{item.author}</span>
     <span>{item.num_comments}</span>
     <span>{item.points}</span>
     </div>
     );
     })}

简体

      {list.map(item =>
      <div key={item.objectID}>
      <span>
      <a href={item.url}>{item.title}</a>
      </span>
      <span>{item.author}</span>
      <span>{item.num_comments}</span>
      <span>{item.points}</span>
      </div>
      )}

3、类

4、对象初始化

在E6中可以通过间歇属性更加简介地初始化对象
- 繁写
```
const name= 'frank';
const user = {
       name: name,
};
```
当对心中的属性名与变量名相同时，可以简写如下：
- 简写
```
 const name = 'frank';
 const user = {
        name,
 };
```

另一个简洁的辅助办法是简写方法名。在 ES6 中，你能更简洁地初始化一个对象的方法。React 基础 33

ES5

    var userService = {
      getUserName: function (user) {
        return user.firstname + ' ' +user.lastname;
      },
    };

ES6

    const userService = {
      getUserName(user) {
        return user.firstname + ' ' + user.lastname;
      },
    };

5、function和class的联系和区别

includes()

实例：检测数组site是否包含runoob
let site = ['runoob', 'google', 'taobao'];
```
  site.includes('runoob'); 
  // true 
  
  site.includes('baidu'); 
  // false
```
语法

  arr.includes(searchElement)
  arr.includes(searchElement, fromIndex)

参数说明
- searchElement 必须。需要查找的元素值。
- fromIndex 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

ES6解构

   const user = {
   firstname: 'Robin',
   lastname: 'Wieruch',
   };
   // ES5
   var firstname = user.firstname;
   var lastname = user.lastname;
   console.log(firstname + ' ' + lastname);
   // output: Robin Wieruch
   // ES6
   const { firstname, lastname } = user;
   console.log(firstname + ' ' + lastname);
   // output: Robin Wieruch

扩展运算符

它只由三个点组成： ...。当使用它时，数组
或对象中的每一个值都会被拷贝到一个新的数组或对象。

 const userList = ['Robin', 'Andrew', 'Dan'];
 const additionalUser = 'Jordan';
 const allUsers = [ ...userList, additionalUser ];
 console.log(allUsers);
 // output: ['Robin', 'Andrew', 'Dan', 'Jordan']

这里 allUsers 是一个全新的数组变量，而变量 userList 和 additionalUser 还是和原来一
样。用这个运算符，你甚至可以合并两个数组到一个新的数组中。

 const oldUsers = ['Robin', 'Andrew'];
 const newUsers = ['Dan', 'Jordan'];
 const allUsers = [ ...oldUsers, ...newUsers ];
 console.log(allUsers);
 // output: ['Robin', 'Andrew', 'Dan', 'Jordan']

一、React库引用

react.min.js：React 的核心库
react-dom.min.js：提供与 DOM 相关的功能
babel.min.js：Babel将Rract需要的语法JSX，转码为浏览器认识的语法；可以将ES6代码转为ES5代码，这样我们就能在目前不支持ES6浏览器上执行React代码
如果我们需要使用 JSX，则 <script type="text/babel">……</script>。

二、常用函数语法

React 关键词：

Props
state
render
组件
属性传参：一般是父组件(state或者函数)---传参--->子组件props

父组件中的render() return时，通过属性赋值-->将组件中的state（或者函数）传递到子组件中，子组件通过this.props.属性名获取；

ReactDOM.render

将一个HTML标签渲染到真实的DOM节点：

var myDivElement = <div className="foo" />;
ReactDOM.render(
  myDivElement,
  document.getElementById('example')
);

React.createClass

创建React组件类：

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

类继承

ES6 语法：class MyComponent extends React.Component 创建React组件类；
表示自定义类MyComponent继承了基类React.Component的所有属性和方法：
render()：return自定义组件的输出样式
<MyComponent/>实例化自定义组件类。

class MyComponent extends React.Component {
  render(){
    return <h1>Hello World</h1>;
  }
  //或者：
  /*render:function(){
    return <h1>Hello World</h1>;
  }*/
};
ReactDOM.render(
  <MyComponent/>,
  document.getElementById('example')
);

Props

this.props：传参-->例如：属性name的值可以通过this.props.name获得。
getDefaultProps()：为 props 设置默认值

注意：在添加属性时，class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JavaScript的保留字。

state状态

getInitialState：设置初始state状态。
constructor：组件类构造函数，一旦实例化组件调用，可设置this.state的初始状态。
this.setState：重置this.state，一旦调用该方法，就会自动引发组件重新渲染。

示例：

<script type="text/babel">
  var LikeButton = React.createClass({
    getInitialState: function() {
      return {liked: false};
    },

   /*或者：
	constructor(...args) {
  	  super(...args);
  	  this.state = {
      liked: false
      };
    }*/


    handleClick: function(event) {
      this.setState({liked: !this.state.liked});
    },

    render: function() {
      var text = this.state.liked ? '喜欢' : '不喜欢';
      return (
        <p onClick={this.handleClick}>
          你<b>{text}</b>我。点我切换状态。
        </p>
      );
    }
  });

  ReactDOM.render(
    <LikeButton />,
    document.getElementById('example')
  );
</script>

React组件API

setState
replaceState
setProps
replaceProps
forceUpdate:强制更新，调用render()重新渲染组件
findDOMNode：返回DOM元素，可获取已经挂载到DOM中的组件
isMounted：判断组件挂载状态，返回bool值

组件生命周期

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

方法有：

componentWillMount：组件渲染前被调用
componentDidMount：组件第一次渲染后调用，只执行一次
componentWillUpdate：组件更新前被调用（收到新的props或者state但还没有render时）
componentDidUpdate：组件更新后调用
componentWillUnmount：组件从DOM中移除的时调用。
componentWillReceiveProps：组件接受新的参数时调用
shouldComponentUpdate：返回一个bool值，在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

ref属性

一般使用方法：在render()的返回值上绑定ref属性;

<input ref="myInput" />

示例：

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

通过绑定ref属性，可以获得组件的子组件或者原生DOM节点。

三、实例

实例1

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

这里创建了两个组件：Content和Button，其中Content是Button的子组件；
Button中的状态this.state.data通过onClick事件在不断加一
Button中，Content子组件通过属性myNumber = {this.state.data}传参给子组件中；
Content子组件通过this.props.myNumber调用；
关于生命周期：
- 初始化挂载组件：1.componentWillMount；2.componentDidMount
- 参数改变：1. componentWillReceiveProps；2.componentWillUpdate；3.componentDidUpdate

实例2

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} />
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

初始render时：将this.state.value的值给input和h4渲染显示；
当input里的内容发生改变时：调用handleChange函数，通过this.setState改变state的值，重新render

实例3

父组件中：state和函数通过属性，传参到子组件中：

var Content = React.createClass({
  render: function() {
    return  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
            <h4>{this.props.myDataProp}</h4>
            </div>;
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value}
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

四、JSX语法点

添加自定义属性需要使用 data- 前缀
JSX代码的引用：<script type="text/babel" src="helloworld_react.js"></script>
在 JSX 中使用 JavaScript 表达式，表达式写在花括号 {} 中
JSX中不能使用if else语句，但可以使用conditional (三元运算)表达式来替代。

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

React推荐使用内联样式
- 我们可以使用 camelCase 语法来设置内联样式.
- React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>……</h1>,
    document.getElementById('example')
);

标签内部注释(需要加大括号)：{/*注释...*/}；
标签外部：/*注释 */
JSX数组：var arr = [<h1>元素1</h1>,<h2>元素2</h2>,];
JSX语法的最外层，只能有一个节点包裹。
组件名不一定是用单标签，也可以是双标签：<HelloMessage /> == <HelloMessage></HelloMessage>
JSX中：onClick等事件，与原生HTML不同，on之后第一个字母是大写的，onClick={this.handleClick}
单标签：return <h3 style={style}>我是一个组件</h3>

标签有包裹： return(<div><h3 style={style}>我是一个组件</h3></div>) return加括号。

js正则表达式

直接量语法

/pattern/attributes

创建RegExp对象的语法
```
new RegExp(pattern, attributes);
```
参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

npm install报错，会出现如下提示：

解决方法：重新设置npm代理

step1、依次输入以下命令

1、npm config set proxy null
2、npm config set https-proxy null
3、npm --registry https://registry.npm.taobao.org info underscore

step2、在.npmrc文件中替换代理：registry = https://registry.npm.taobao.org/

备注：.npmrc文件的位置可以使用npm config ls -l命令查看

step3、再次npm install就可以了

The Road to learn React笔记

模块热替换（HMR）

用 create-react-app 创建的项目有一个优点，那就是可以让你在更改源代码的时候浏览器自
动刷新页面。试试改变 src/App.js 文件中的变量 helloWorld ，修改过后浏览器应该就会刷
新页面。但有一个更好的方式来实现这个功能。
模块热替换（HMR）是一个帮助你在浏览器中重新加载应用的工具，并且无需再让浏览
```
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import './index.css';
  ReactDOM.render(
  <App />,
  document.getElementById('root')
  );

  //开启热替换代码
  if (module.hot) {
  module.hot.accept();
  }
```

组件内部状态

组件内部状态也被称为局部状态，允许你保存、修改和删除存储在组件内部的属性。使
用 ES6 类组件可以在构造函数中初始化组件的状态。
构造函数只会在组件初始化时调用一次。

第一章、基础

1、真值和假值

undefined: false
null: false
boolean: true是true,false是fales
number: +0、-0和NaN都是false，其他都是true
string: 如果字符串是空的（长度是0）就是false，其他都是true
对象: true

三元符

eg:

if (num === 1) {
    num--;
} else {
    num++;
}
// 转换成三元符
（num === 1) ? num-- : num++;

ECMAScript6的功能

let和const

模板字面量：模板字面量用一对`包裹。要插入变量的值，只要把变量放在${}里就可以了，就像例子中的book.name。

eg：

//ES5：
var book = {name: '学习JavaScript数据结构与算法'};
console.log('你正在阅读' + book.name + '。 \n这是新的一行\n 这也是。 ');
//ES6
console.log(`你正在阅读${book.name}。
这是新的一行
这也是。 `);

解构
展开操作符
箭头函数

类

eg：

function Book(title, pages, isbn){ //{1}
  this.title = title;
  this.pages = pages;
  this.isbn = isbn;
}
Book.prototype.printTitle = function(){
  console.log(this.title);
};
//我们可以用ES6把语法简化如下：
class Book { //{2}
  constructor (title, pages, isbn) {
      this.title = title;
      this.pages = pages;
      this.isbn = isbn;
  }
  printIsbn(){
     console.log(this.isbn);
  }
}

第二章数组

添加和删除元素
- push：放到最后
- pop:取最后一个
- unshift：放到第一个
- shift：取第一个
- push和pop模拟栈
- unshift和pop模拟队列
- pop和shift可改变数组长度
- pop和shift不接受传参
- splice(index,length,...补充的元素)取出数组中间的元素，并返回
- splice改变原数组
数组常用方法
- 数组合并
  - concat: 可以合并多个数组
- 迭代
  -map: 遍历返回新数组, 每一项由新的组成, 不改变原数组
  - forEach: 遍历数组, 没有返回结果, 不改变数组. 但是可以通过参数进行改变
  - some: 一项返回true, 就是true
  - every: 每一项都返回true, 才是true
  - filter: 返回一个返回值true的值, 组成的新数组
  - reduce: (pre, cur, index, arr) 每一项的结果向后叠加, 并返回新的操作结果
- 排序
  - reverse: 反转
  - sort, (a, b) 接受一个函数参数. 根据函数返回的结果, 返回负数, a>b, a在前面
- 搜索
  - indexOf
  - lastIndexOf
- 数组输出为字符串
  - join: 按照指定的字符拼接数组的每一项, 返回. 如果什么都不传的话, 就是toString
  - toString
  - valueOf：类似toString

第三章栈

后进先出 push和pop模拟栈

实现栈

class Stack {
      constructor () {
          this.items = []
      }
      push(item) {
          return this.items.push(item)
      }
      pop() {
          return this.items.pop()
      }
      peek() {
          return this.items[this.items.length - 1]
      }
      isEmpty() {
          return this.items.length === 0
      }
      clear() {
          return this.items = []
      }
      size() {
          return this.items.length
      }
  }

function div2(dec){
       var remStack = new Stack(),
         rem,binaryString='';
       while (dec > 0) {
           rem = Math.floor(dec % 2);
           remStack.push(rem);
           dec = Math.floor(dec/2);
       }
       while (!remStack.isEmpty()) {
           binaryString += remStack.pop().toString();
       }
       return binaryString; 
   }
 console.log(div2(20));

第四章队列

先进先出 push、shift

实现基本队列

class Queue {
  constructor () {
      this.items = []
  }
  enqueue(item) {
      return this.items.push(item)
  }
  dequeque() {
      return this.items.shift()
  }
  font() {
      return this.items[0]
  }
  isEmpty() {
      return this.items.length === 0
  }
  clear() {
      return this.items = []
  }
  size() {
      return this.items.length
  }
}

第五章链表

class Node {
  constructor(element) {
    this.element = element
    this.next = null
  }
}
class LinkDist {
  constructor() {
    this.length = 0
    this.head = null
  }
  append(element) {
    return append.call(this, element)
  }
  search(postion, cb) {
    return search.call(this, postion, cb)
  }
  insert(position, element) {
    return insert.call(this, position, element)
  }
  removeAt(postion) {
    return removeAt.call(this, postion)
  }
  indexOf(element, cb) {
    var cur = this.head, pre = null
    while(cur.next) {
      if (cur.element === element) {
        cb.call(this, pre, cur)
      }
      pre = cur
      cur = cur.next
    }
    return null
  }
  remove(element) {
    this.indexOf(element, (pre, cur) => {
      if (pre && cur) {
        pre.next = cur.next
        this.length--
      } else if (cur) {
        this.head = cur.next
        this.length--
      }
    })
  }
  isEmpty() {
    return this.length === 0
  }
  size() {
    return this.length
  }
  toString() {
    var res = '', cur = this.head, index = 0
    while (index++ < this.length) {
      res += cur.element
      cur = cur.next
    }
    return res
  }
  getHead() {
    return this.head
  }
}
function append(element) {
  var node = new Node(element)
  var cur = null
  if (this.head === null) {
    this.head = node
  } else {
    cur = this.head // 先指向当前的第一个元素
    while(cur.next) { // 只要有next就往下迭代
      cur = cur.next
    }
    cur.next = node // 没有next的时候, 保存下next指向node
  }
  this.length++
}
function search(position, cb) {
  if (position > -1 && position < this.length) {
    var cur = this.head, pre = null, index = 0
    if (position === 0) {
      cb.call(this, null, cur)
    } else {
      while (index++ < position) {
        pre = cur
        cur = cur.next
      }
      cb.call(this, pre, cur)
    }
    return cur
  } else {
    cb.call(this, null, null)
    return null
  }
}
function removeAt(position) {
  return this.search(position, (pre, cur) => {
    if (pre) {
      pre.next = cur.next
      this.length--
    } else if (cur) {
      this.head = cur.next
      this.length--
    } else {
      throw new Error('未找到元素')
      return false
    }
  })
}
function insert(position, element) {
  this.search(position, (pre, cur) => {
    if (pre && cur) {
      // 除第一项以外的
      pre.next = new Node(element)
      pre.next.next = cur
    } else if (cur) {
      // 第一项
      this.head = new Node(element)
      this.head.next = cur
    } else {
      throw new Error('元素并不存在')
    }
    this.length++
  })
}
var list = new LinkDist
list.append(15)
list.append(10)
list.append(5)
list.insert(1, 9)
list.remove(10)
var res = list.toString()

第六章集合

集合（set）是一种包含不同元素的数据结构。集合中的元素称为成员。集合的两个最重要特性是：首先，集合中的成员是无序的；其次，集合中不允许相同成员存在。当你想要创建一个数据结构用来保存一些独一无二的元素时就可以用到集合。
基于数组的 Set 类的实现

function Set() {
　　this.dataStore = [];
　　this.add = add;
　　this.remove = remove;
　　this.size = size;
　　this.union = union;  //求并集
　　this.intersect = intersect;  //求交集
　　this.subset = subset;  //判断本集合是否是另一个集合的子集
　　this.difference = difference;  //求本集合相对于另一个集合的补集
　　this.show = show;
　　this.contains = contains;
}

function add(data) {
　　if (this.dataStore.indexOf(data) < 0) {  
　　　　this.dataStore.push(data);
　　　　return true;
　　}else {
　　　　return false;
　　}
}

参考链接
ES6中的Set
参考链接

第七章字典和散列表

字典

集合表示一组互不相同的元素(不重复的元素)。在字典中，存储的是[键，值] 对，其中键名是用来查询特定元素的。字典和集合很相似，集合以[值，值]的形式存储元素，字典则是以[键，值]的形式来存储元素，字典也称作映射。

function Dictionary() {
  let items = {}
  this.set = function (key, value) {
      items[key] = value
  }
  this.has = function (key) {
      return key in items
  }
  this.remove = function (key) {
      if (this.has(key)) {
          delete items[key]
          return true
      }
      return false
  }
  this.get = function (key) {
      return this.has(key) ? items[key] : undefined
  }
  this.values = function () {
      let values = []
      for (let k in items) {
          if (this.has(k)) {
              values.push(items[k])
          }
      }
      return values
  }
  this.clear = function () {
      items = []
  }
  this.size = function () {
      return Object.keys(items).length
  }
  this.keys = function () {
      return Object.keys(items)
  }
  this.getItems = function () {
      return items
  }
}
let dic = new Dictionary()
dic.set('name', 'hello')
dic.set('age', 22)
console.log(dic.has('name')) // true
dic.remove('age')
console.log(dic.values()) // [ 'hello' ]

散列表

function HashMap() {
  let items = []
  let loseloseHashCode = function (key) {
      let hash = 0
      for (let i = 0; i < key.length; i++) {
          hash += key.charCodeAt(i)
      }
      // 为了得到比较小的数值，我们会使用hash值和一个任意 数做除法的余数(mod)。
      return hash % 37
  }
  this.put = function (key, value) {
      let position = loseloseHashCode(key)
      console.log(position + '-' + key)
      items[position] = value
  }
  this.get = function (key) {
      return items[loseloseHashCode(key)]
  }
  this.remove = function (key) {
      // 对于HashMap类来说，我们不需要像ArrayList类一样从items数组中将位置也移除。
      // 由于元素分布于整个数组范围内，一些位置会没有任何元素占据，并默认为undefined值。
      // 我们也不能将位置本身从数组中移除(这会改变其他元素的位置)，否则，当下次需要获得或移除一个 元素的时候，这个元素会不在我们用散列函数求出的位置上。
      items[loseloseHashCode(key)] = undefined
  }
  }
  let map = new HashMap()
  map.put('name', 'hello') // 10-name
  map.put('age', 22) // 5-age
  console.log(map.get('name')) // hello
  map.remove('name')
  console.log(map.get('name')) // undefined
  console.log(map.get('age')) // 22

解决散列表冲突的方法
- 分离散列
- 线形查找
- 5381
参考链接

第八章树

参考链接

排序算法

1、冒泡排序

function bubbleSort(arr){
  for(var i=0;i<arr.length;i++){
      for(var j=0;j<arr.length-1-i;j++){
          if(arr[j+1]<arr[j]){   
              temp = arr[j+1];
              arr[j+1] = arr[j];
              arr[j] = temp;
          }
          console.log(j);
      }
  }
  return arr;
}
var array = [2,3,5,4,1]
console.log(bubbleSort(array));

2、选择排序

function quickSort(arr) {
  for (var i=0; i<arr.length; i++) {
      for(var j=i+1; j<arr.length; j++) {
          if (arr[j]<arr[i]) {
              var temp = arr[j];
              arr[j]=arr[i];
              arr[i]=temp;
          }
      }
  }
  return arr;

}
console.log('----选择排序----');
console.log(quickSort(array));

js中this的指向

1.this指的是直接调用当前方法（函数）的那个对象，也就是说函数在谁那被调用，this就指的是谁。

eg:

oBtn.onclick = function(){ 
        alert(this);   //oBtn
  }

 

 oBtn.onclick = fn1;

   function fn1(){ 

    alert(this); //oBtn
   }

很容易看出，函数是在按钮对象被点击的时候调用，所以this指的是obtn，这两种情况是等同的是，只是调用函数的写法不同。

2.当函数里面嵌套函数的时候，嵌套的那个函数里面的this指的是widows，这是JS的一个特性。

eg:

oBtn.onclick = function(){

     alert(this); //oBtn(记得这里还是oBtn)

     fn1(); 
   }

  function fn1(){ 
   alert(this);  // window
   }

对于上述情况，当我们需要fn1里面的this指向按钮的时候怎么办呢，这个时候有两种方法。

1、将this作为参数传到函数里去

eg:

oBtn.onclick = function(){

     alert(this); //oBtn

     fn1(this); 1 将上面的this作为参数传函数去
   }

  function fn1(obj){ 
    alert(obj);  // oBtn
  }

2、将this保存起来赋值给另一个变量

eg:

var that = null;
oBtn[i].onclick = function(){

   alert(this); //oBtn
   that = this ;// 将上面的this保存起来赋给另一个变量
   fn1();
}

function fn1(){ 
   alert(that);  // 指向oBtn
}

3.如果有new关键字，this指向new出来的那个对象

当用new去调用一个函数：这个时候this指的就是创建出来的对象而且函数的默认返回值就是this 即这个对象（隐式返回不用自己再写返回值）

eg:

function CreatePerson(name){   //函数名首字母大写
      //var this=new Object(); 系统会偷偷在这里声明一个对象赋给this替咱们做，不用写
     this.name = name; 
     this.showName = function(){ 
        alert(this.name); 
     } 
     //return this;  函数的默认返回值就是this即这个对象（隐式返回 不用自己再写返回值）

} 
var p1 =new CreatePerson('haha'); 
//当用new去调用一个函数：这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this即这个对象（隐式返回 不用自己再写返回值）
 p1.showName();

new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

4.在IE下，事件的绑定的第二种形式中，obj.attachEvent(事件名称,事件函数)，里面的this指的是window。

当然这不是我们想要的，所以让this指向触发事件的对象呢？这就需要提到一个方法call()；它可以改变this的指向;
call(this的指向，原来函数的参数列表)：它有两个参数，第一个指的是改变的this的指向，也就是你想要this指向谁就写谁，如果写的是null,this的指向就不会改变，还是指向原来的。从第二个参数开始，就代表的是函数里面的具体传入的参数了。具体用法我们来看个栗子：

eg:

 //有一个函数，两个参数。

function fn1(a,b){ 
    alert(this); //   本来默认是window,改变后为1
    alert(a+b);// 30
}

//三种调用方法
fn1(); //正常调用。弹出 this指向window, a+b为 undefined
fn1.call(); // 等同于上面 ,这两种调用是一样的
fn1.call(1,10,20);  //  弹出this指向 1，同时传入两个数，弹出30

待整理

1、Array.map()

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

  let arr = [1, 2, 3, 4, 5]
  let newArr = arr.map(x => x*2)
  //arr= [1, 2, 3, 4, 5]   原数组保持不变
  //newArr = [2, 4, 6, 8, 10] 返回新数组

2、Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分
```
 let arr = [1, 2, 3, 4, 5]
 num.forEach(x => x*2)
 // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分
```

3、Array.filter()

此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

let arr = [1, 2, 3, 4, 5]
const isBigEnough => value => value >= 3
let newArr = arr.filter(isBigEnough )
//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

4、Array.every()

此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：

let arr = [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value < 6
arr.every(isLessThan4 ) //false
arr.every(isLessThan6 ) //true

5、Array.some()

此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false：
```
let arr= [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value > 6
arr.some(isLessThan4 ) //true
arr.some(isLessThan6 ) //false
```

6、Array.reduce()

此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
//sum = 15  相当于累加的效果
与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

7、Array.push()

此方法是在数组的后面添加新加元素，此方法改变了数组的长度：

8、Array.pop()

此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：
```
let arr = [1, 2, 3, 4, 5]
arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
```

　　```

9、Array.shift()

此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：
```
let arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4 
```

10、Array.unshift()

此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：

let arr = [1, 2, 3, 4, 5]
arr.unshift(6, 7)
console.log(arr) //[6, 7, 2, 3, 4, 5]
console.log(arr.length) //7

11、Array.isArray()

判断一个对象是不是数组，返回的是布尔值

12、Array.concat()

此方法是一个可以将多个数组拼接成一个数组：

let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]

　　```

13、Array.toString()

此方法将数组转化为字符串：

let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str)// 1,2,3,4,5

　　```

14、Array.join()

此方法也是将数组转化为字符串：
　　

 let arr = [1, 2, 3, 4, 5];
 let str1 = arr.toString()
 let str2 = arr.toString(',')
 let str3 = arr.toString('##')
 console.log(str1)// 12345
 console.log(str2)// 1,2,3,4,5
 console.log(str3)

通过例子可以看出和toString的区别，可以设置元素之间的间隔~

15、Array.splice(开始位置，删除的个数，元素)

万能方法，可以实现增删改：

   let arr = [1, 2, 3, 4, 5];
   let arr1 = arr.splice(2, 0 'haha')
   let arr2 = arr.splice(2, 3)
   let arr1 = arr.splice(2, 1 'haha')
   console.log(arr1) //[1, 2, 'haha', 3, 4, 5]新增一个元素
   console.log(arr2) //[1, 2] 删除三个元素
   console.log(arr3) //[1, 2, 'haha', 4, 5] 替换一个元素

01

1、HTML data-* 属性

data-* 属性用于存储私有页面后应用的自定义数据。
data-* 属性可以在所有的 HTML 元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串

2、vh

说明：
相对于视口的高度。视口被均分为100单位的vh
示例代码：

h1 {
	font-size: 8vh;
}

如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100

3、rem

说明：
相对长度单位，相对于根元素(即html元素)font-size计算值的倍数

4、CSS的过度属性:https://www.cnblogs.com/xiaohuochai/p/5347930.html

5、CSS text-transform 属性

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

6、CSS letter-spacing 属性

normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间（允许使用负值）。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

7、ES6之Array.from()方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
1、将类数组对象转换为真正数组：

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

8、transitionend 事件

transitionend 事件在 CSS 完成过渡后触发。
语法
- object.addEventListener("webkitTransitionEnd", myScript); // Safari 3.1 到 6.0 代码
- object.addEventListener("transitionend", myScript); // Standard syntax
实例：点击查看

02

1、一个元素同时使用多个类选择器

https://www.cnblogs.com/guxin/p/css-multi-class-selector.html

2、transform-orgin

03

CSS中的:root和var

https://blog.csdn.net/qq_37595946/article/details/84531311
NodeList 和 Array 的区别

可以打开 proto 查看它的方法，其中有 forEach()、item()、keys() 等。而 Array 的 prototype 中有 map()、pop() 等数组才有的方法。
setProperty
- 定义和使用
  setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。
- 语法
  object.setProperty(propertyname, value, priority)
- 属性
  
  参数 | 描述
  -|:-:| -:
  propertyname | 必需。一个字符串，表示创建或修改的属性。
  value | 可选，新的属性值。
  priority| 可选。字符串，规定是否需要设置属性的优先级 important。
JavaScript 的 this 原理

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

04

sort()方法

说明
- 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进-行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
- array.sort()方法默认是升序排序，如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
  - 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  - 若 a 等于 b，则返回 0。
  - 若 a 大于 b，则返回一个大于 0 的值。
- 简单点：比较函数两个参数a和b，返回a-b升序，返回b-a降序

https://www.cnblogs.com/fnz0/p/7680297.html
2. reduce()方法

定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
这是一个归并数组的方法，它接受一个函数作为参数（这个函数可以理解成累加器），它会遍历数组的所有项，然后构建一个最终的返回值，这个值就是这个累加器的第一个参数。例子如下：

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

而此处我们需要统计一个给定数组中各个项的值，恰好可以用到这个方法，在累加器之中，将统计信息存入一个新的对象，最后返回统计值。

  const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
  const reduce = data.reduce( (obj, item) => {
	  if( !obj[item]  ) {
		  obj[item] = 0;
	  }
		  obj[item]++;
		  return obj;
  }, {});
  console.log(reduce);

05

:first-child伪类选择器

只要E元素是它的父级的第一个子元素，就选中。它需要同时满足两个条件，一个是“第一个子元素”，另一个是“这个子元素刚好是E”。参考链接

06

正则表达式(RegExp)

直接量语法
```
/pattern/attributes
```
创建RegExp对象的语法
```
new RegExp(pattern, attributes);
```
参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

replace()方法
replace()方法用于在字符串中用一些字符替换另外一些字符，后替换一个与正则表达式匹配的子串。
- 语法
```
stringObject.replace(regexp/substr,replacement)
```
参数|描述
-|:-:| -:
regexp/substr|必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
replacement|必需。一个字符串值。规定了替换文本或生成替换文本的函数。

07

some 和 every

两者的相同之处是，都接受一个函数作为参数，对数组元素都执行一次此函数，都不会改变原数组的值。不同之处在于返回条件不同：
some() 中直到某个数组元素使此函数为 true，就立即返回 true。所以可以用来判断一个数组中，是否存在某个符合条件的值。

const isAdult = people.some( person => {
      const currentYear = (new Date()).getFullYear();
      return currentYear - person.year >= 19;
});
console.log({isAdult});

而 every() 中除非所有值都使此函数为 true，才会返回 true 值，否则为 false。主要用处，即判断是否所有元素都符合条件。

const allAdult = people.every( person => new Date().getFullYear() - person.year >= 19);
console.log({allAdult});

与 some() 相对应的话，some() 像是或运算，而 every() 则是与运算了。

find 和 fineIndex

这两个 ES6 的新特性类似于 some() ，但对于符合条件的元素，返回值不是布尔类型。不一样的地方在于，find() 返回的是这个元素的值（或 undefined），而 findIndex() 返回的是这个元素的索引（或 -1）。

const comment = comments.find(comment => comment.id == 823423);
const index = comments.findIndex(comment => comment.id == 823423);

slice 和 splice

这两者比较相似的地方，大概只有：参数的第一个都是指的起始位置，且都接受负数，若是负数，代表倒数第几位。
而其他地方是需要区分清楚的：
slice()：不修改原数组，按照参数复制一个新数组，参数表述复制的起点和终点索引（省略则代表到末尾），但终点索引位置的元素不包含在内。
splice()：原数组会被修改。第二个参数代表要删掉的元素个数，之后可选的参数，表示要替补被删除位置的元素。
让我们来联想一下，看到一块纹着漂亮花纹的布料，slice 拿出相机拍了一张照，而 splice 拿出剪刀把这个花纹剪下来带走了，再用其他布料给缝回去。
所以想要删除一个元素，有两种实现思路，一是把出它之外的元素给复制下来再合在一起，二是直接把它删除。

// 删除方法一，splice()
// comments.splice(index, 1);

// 删除方法二，slice 拼接
const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
];

上面的三个点（...）是 ES6 中的扩展语法，可以展开这个数组并方便的拼接。

13 14 JS中的引用与复用

参考链接

Json的序列化和反序列化
参考链接

15 Localstorage

1.事件委托

16

text-shadow
text-shadow: h-shadow v-shadow blur color; none：无阴影 length，①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值 length，②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 length，③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 color：设置对象的阴影的颜色。

17

trim()方法
- 定义和用法
  - trim() 方法用于删除字符串的头尾空格。
  - trim() 方法不会改变原始字符串。
- 实例
  - 去除字符串的头尾空格:
```
var str = "       Runoob        ";
alert(str.trim());
```
  - 输出结果:
```
Runoob
```

18

split
- 定义和用法
  - split() 方法用于把一个字符串分割成字符串数组。
- 实例
  - 使用 limit 参数:
```
var str="How are you doing today?";
var n=str.split(" ",3);
```
  - n 将输出3个数组的值:
```
How,are,you 
```
Math.round()，Math.ceil()，Math.floor()的区别
- 参考链接

22

1.Element.getBoundingClientRect()
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
返回值是一个DOMRect对象，这个对象是由该元素的getClientRects()方法返回的一组矩形的集合, 即：是与该元素相关的CSS边框集合。DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
DOMRect相关属性:

Attribute	Type	Description
bottom	float	Y 轴，相对于视口原点（viewport origin）矩形盒子的底部。只读。
height	float	矩形盒子的高度（等同于 bottom 减 top）。只读。
left	float	X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。只读。
right	float	X 轴，相对于视口原点（viewport origin）矩形盒子的右侧。只读。
top	float	Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。只读。
width	float	矩形盒子的宽度（等同于 right 减 left）。只读。
x	float	X轴横坐标，矩形盒子左边相对于视口原点（viewport origin）的距离。只读。
y	float	Y轴纵坐标，矩形盒子顶部相对于视口原点（viewport origin）的距离。只读。

2.appendChild()

只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement('字符串'))代替】，返回追加的 Node 节点；

若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除；

例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b 元素会先被移除，然后再添加到 a 中。

25

在事件回调函数中调用e.stopPropagation()方法后，即可看到在该处监听到事件后不再继续传递事件

forfrank / notes Goto Github PK

notes's People

Watchers

notes's Issues

防抖

基本概念

flex container容器属性

flex item项目属性

防抖

截流

总结一下最近在vue中使用checkbox的心得

1、vue中可以直接使用v-model监听checkbox中的value值,实现效果如下：

2、如果给checkbox绑定事件需要使用@change，而不是@click，具体细节可参考这篇文章:

安装步骤

filter

then

assign()

1、const和let

被 const 声明的变量不能被重新赋值或重新声明；当一个变量需要被重新赋值的话，应该使用 let 去声明它：

使用 const 声明的变量不能被改变，但是如果这个变量是数组或者对象的话，它里面持有的内容可以被更新。它里面持有的内容不是不可改变的。

2、箭头函数

3、类

4、对象初始化

5、function和class的联系和区别

includes()

ES6解构

扩展运算符

目录

一、React库引用

二、常用函数语法

ReactDOM.render

React.createClass

类继承

Props

state状态

React组件API

组件生命周期

ref属性

三、实例

实例1

实例2

实例3

四、JSX语法点

npm install报错，会出现如下提示：

解决方法：重新设置npm代理

step1、依次输入以下命令

step2、在.npmrc文件中替换代理：registry = https://registry.npm.taobao.org/

step3、再次npm install就可以了

The Road to learn React笔记

模块热替换（HMR）

组件内部状态

学习JavaScript数据结构与算法(一)

第一章、基础

1、真值和假值

三元符

ECMAScript6的功能

第二章 数组

第三章 栈

第四章 队列

第五章 链表

第六章 集合

第七章 字典和散列表

第八章 树

排序算法

element-ui中table索取行号的问题

对于上述情况，当我们需要fn1里面的this指向按钮的时候怎么办呢，这个时候有两种方法。

待整理

1、Array.map()

2、Array.forEach()

3、Array.filter()

4、Array.every()

5、Array.some()

6、Array.reduce()

7、Array.push()

8、Array.pop()

9、Array.shift()

10、Array.unshift()

11、Array.isArray()

12、Array.concat()

13、Array.toString()

第二章数组

第三章栈

第四章队列

第五章链表

第六章集合

第七章字典和散列表

第八章树

15、Array.splice(开始位置，删除的个数，元素)