tan-ln的博客

稳住，我们能赢

0%

发表于

Array.prototype.reduce((total, curVal, curIdx, arr) => {}, initVal)

reduce() 方法接收一个函数作为累加器，数组中的每个值 (从左到右)开始缩减，最终为一个值，是ES5中新增的又一个数组逐项处理方法

参数：

  • callback (一个在数组中每一项上调用的函数，接受四个函数：)

    • total (上一次调用回调函数时的返回值，或者初始值)

    • curVal (当前正在处理的数组元素)

    • curIdx (当前正在处理的数组元素下标)

    • arr (调用 reduce() 方法的数组)

  • initialValue (可选的初始值。作为第一次调用回调函数时传给 total 的值)

原方法

阅读全文 »

发表于

map() 方法

  • map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

  • 语法：array.map(function(currentValue,index,arr), thisValue)

  • callback 为数组中每个元素执行的函数，该函数可接受1-3个参数

    • currentvalue 参数表示数组的当前元素项，必须的参数

    • index 参数表示的当前元素下标，可选参数

    • arr 参数表示当前元素所属的数组，可选参数

  • thisValue 表示执行回调函数 callback() 时的 this 指向。可选参数。当不写时，则默认是指向 window 全局

手写 map

简单版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Array.prototype._map = function (fn) {
  if (typeof fn !== 'function') return 'fn is not a function'
  let temp = []
  const arr = this
  for(let val of arr) {
    temp.push(fn(val))
  }
  return temp
}

const arr = [1, 2, 3, 4]

const res = arr._map(item => {
  return '_' + item + '_'
})

console.log(res)  // [ '_1_', '_2_', '_3_', '_4_' ]
阅读全文 »

发表于

instanceof 用于判断在某个对象的原型链上查找是否存在一个构造函数的 prototype 属性

1
2
3
4
5
6
7
8
const obj = {
  name: 'tan'
}

const arr = [1, 2, 3]

console.log(obj instanceof Object)          // true
console.log(arr instanceof Array)           // true

判断内容必须为对象

1
2
3
4
5
6
7
8
9
let a = 10
let b = new Number(10)
console.log(a instanceof Number)                  // false    检测的一定要是对象才行
console.log(b instanceof Number)                  // true

console.log(a.__proto__ === Number.prototype)     // true

const arr = [1, 2, 3]
console.log(arr instanceof Object)                // true

手写 instanceof

阅读全文 »

发表于

使用 webpack 手动搭建 vue 环境

准备

  • 全局安装 webpack webpack-cli

  • 项目安装 yarn add webpack webpack-cli webpack-dev-server -D

  • yarn add vue@2.6 -S

  • 文件创建

    • webpack.config.js webpack 配置文件

    • index.html 模板挂载页面

      1
      <div id="app"></div>

    • src/index.js 入口文件

      1
      2
      3
      4
      5
      6
      7
      import Vue from 'vue'
      import App from './App.js'

      new Vue({
        el: '#app',
        render: h => h(App)
      })

    • src/App.vue 根组件

webpack.config.js

  1. 安装 vue-loader (必须)、 html-webpack-plugin (必须) 、 vue-template-compiler
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    module.exports = {
      entry: './src/index.js',
      mode: 'product',
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      },
      plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
          template: './index.html'
        })
      ],
      devServer: {
        port: 3000
      }
    }
阅读全文 »

发表于
  • javascript是单线程的解释性语言，
  • 单线程就是先执行完一个，再执行另一个；
  • 解释性语言就是先翻译一行，再执行一行，先翻译一行，再执行一行

语法分析

扫描一遍是否有低级语法错误

词法分析（预编译阶段）

例子

阅读全文 »

发表于 更新于

Hexo&NexT 博客骚操作-个性化主题设置

最简单的 hexo&next 主题个性化设置

前提须知：
站点配置文件: 根目录下的 _config.yml
主题配置文件: 主题文件夹内的 _config.yml

站内搜索功能

推荐使用 Hexo 提供的 Local Search，通过安装 hexo-generator-search 插件，在本地生成一个 search.xml 文件，搜索的时候从这个文件中根据关键字检索出相应的链接

  • 安装 hexo-generator-search 和 hexo-generator-searchdb

    站点根目录下命令行输入 

    1
    2
    3
    4
    $ npm install hexo-generator-search --save
    ```     
    ```bash
    $ npm install hexo-generator-searchdb --save

  • 配置站点

    编辑 站点配置文件 _config.yml ，新增以下内容:

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 10000

  • 启用本地搜索功能

    打开主题配置文件 _config.yml ，设为 true 

    1
    2
    3
    # Local search
    local_search:
    enable: true

    代码块自定义样式

    打开\themes\next\source\css_custom\custom.styl
    向里面加入：(颜色可以自己定义) 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Custom styles.
    code
        color #ff7600
        background #fbf7f8
        margin 2px

    // 大代码块的自定义样式
    .highlight, pre
        margin 5px 0
        padding 5px
        border-radius 3px

    .highlight, code, pre
        border 1px solid #d6d6d6
阅读全文 »

发表于 更新于

对象解构

  • 对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量
    1
    2
    3
    4
    5
    6
    7
    let node = {
        type: "Identifier",
        name: "foo"
    }
    let { type, name } = node
    console.log(type) // "Identifier"
    console.log(name) // "foo"
  • 如果已经存在type、name，重新赋值 使用解构的话则需要在表达式两侧加小括号
    1
    2
    3
    4
    5
    6
    7
    8
    let node = {
      type: 'Identifier',
      name: 'angela'
    },
      type = 'demo',
      name = 1;
    //添加小括号可以将块语句转化为一个表达式，从而实现整个解构赋值的过程
    ({ type, name } = node)
  • 如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为undefined，也可以自己设置一个默认值 
    1
    2
    3
    4
    5
    6
    7
    8
    let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name, value = true } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    console.log(value); // true
  • 嵌套对象解构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
        end: {
            line: 1,
            column: 4
        }
    }
    };
    let { loc: { start }} = node;
    console.log(start.line); // 1
    console.log(start.column); // 1

    数组解构

    先来看几个简单明了的例子
    1
    2
    3
    let colors = ['red', 'green', 'blue']
    let [, , thirdColor] = colors
    console.log(thirdColor)         // blue
    1
    2
    3
    4
    5
    let colors = ['red', 'green', 'blue'],
      firstColor = 'black',
      secondColor = 'purple';
    [firstColor, secondColor] = colors
    console.log(firstColor, secondColor)    // red green
  • 变量交换
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 传统做法
    let a = 1,
    　　b = 2,
    　　tmp;
    tmp = a;
    a = b;
    b = tmp;
    console.log(a); // 2
    console.log(b); // 1
    1
    2
    3
    4
    5
    // 使用解构赋值
    let a = 1,
      b = 2;
    [a, b] = [b, a]
    console.log(a, b)  // 2 1
  • 数组解构中有一个不定元素的概念，可以通过…语法将数组中的其余元素赋值给一个特定的变量
    1
    2
    let colors = ['red', 'green', 'blue'];
    let [firstColor, ...restColors] = colors//restColors包含两个元素green和blue
  • 最好的办法是既使用默认值，又使用解构
    1
    2
    3
    4
    5
    6
    7
    8
    const DEFAULT_REQUEST_OPTIONS = {
        url: '',
        data: {},
        header: {'Content-Type': 'application/json'},
        method: 'GET',
        dataType: 'json'
    }
    let {url, data, header, method, dataType, mock=false} = options

发表于

语法

1
Object.assign(target, ...sources)

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

拷贝一份 assign 用于(指向)生成新对象.可以用来合并对象

1
2
3
4
5
6
7
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
阅读全文 »