Xiang Wang @ 2015-11-23 18:56:23

火狐官方文档
对象基础

typescript

Guide

Promise

// test/promise_wait.js
function test() {
  return axios.get(
    "https://httpbin.org/get"
  ).then(res=>{
    console.info("返回了数据")
    console.info(res.data)
    return res.data
  })
}
async function await_promise() {
  let prom = test()
  await prom
  console.info("请求执行完毕, 我才会输出, 但是需要用在async的函数里")
}
function main() {
  test().then(res=>{
    console.info("来了")
  })
  console.info("请求没执行完毕, 我会先输出")
}

内置对象

Standard built-in objects

Array数组

  • Boolean 返回一个数的布尔值 0, -0, null, false, Nan, undefined, ""会变成false, 其他都是true(包括{}和[])

  • Date

Math

  • Math.floor
    返回的是小于等于这个数字的最大整数

Math.floor(null) = 0;
Math.floor(-5.05) = -6;

返回一个数字的divmod, 不支持负数

var quotient = Math.floor(y/x);
var remainder = y % x;

  • Math.round
    只能返回一个整数,和python不同

Number

  • isInteger 返回一个数字是不是整数

Number.isInteger(0.1)  // false
Number.isInteger("10")  // false
Number.isInteger([1])  // false
Number.isInteger(0)  // true

  • 转化成大写数字
    官网


// 通过编号系统中的 nu 扩展键请求，例如：中文十进制数字
console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(number));
// → 一二三,四五六.七八九

操作符号，表达式

Expressions and operators

  • in
    you must use index instead of value for a list, so the in operator means has property or not, it doesn't means the object contains the item

    obj = {'key': 'value'}
'key' in obj  // true
list = ['a', 'b', 'c']
1 in list  // true
3 in list  // false
'a' in list  // false

... spread syntax 展开语法

用在列表上

function sum(x, y, z) {
    return x + y + z
}
numbers = [1,2,3]
sum(...numbers)
[0, ...numbers, 4]

用在字典上, 后面的会替换掉前面的

const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const mergedObj = { x: 41, ...obj1, ...obj2, y: 9 }; // { x: 42, foo: "baz", y: 9 }

逻辑操作

Logical Operators

  • && and

  • || or

  • ! not

执行顺序 Operator precedence

    1. (...)

    1. ! ...

    1. ... < ...

    1. != !== == ===

    1. ... && ...

    1. ... || ...

语法

Statements & declarations

  • do...while 这个和while相比, 能保证执行一次.

    do {
    } whilte (condition);

  • const

  • continue

  • for

  • for of

  • for in

  • function

  • switch

  • try...catch

Functions函数

Misc

待处理

webapi

atob, btoa

Element

GlobalEventHandlers

  • onkeydown

WebSocket API

console

Window

  • properties

    • localStorage: 返回本地存储只能保存字符串。不存在返回null

    localStorage.setItem("myCat", "Tom");
localStorage.getItem("myCat")  //

    • location 返回一个Location对象

      • 访问新的页面: location = "https://www.mozilla.org";

      • 刷新页面 location.reload(true);

  • Methods

    result = window.confirm(message);
if (result) {
    ...
}

  • Events

其他

  • WindowOrWorkerGlobalScope

    • [ ] caches

    • [ ] indexedDB

    • [ ] isSecureContext

    • [ ] origin

    • [ ] clearInterval: scope.clearInterval(intervalID)

    • [ ] clearTimeout

    • [ ] createImageBitmap()

    • [ ] fetch()

    • setInterval

      function happy() {
    console.log("");
}
var intervalID = window.setInterval(happy, 500)

    • setTimeout
      setTimeout return an timeoutId(integer), it share the same id with setInterval. The clearTimeout() and clearInterval() can technicaly be used interchangebaly.

      • Syntax: var timeoutId = scope.setTimeout(function, delay, param1, param2, ...)

      • Example: timeoutId = window.setTimeout(window.alert, 2000, 'That was relly slow!');

  • scroll滚动

    • 滚动到页面底部后更新

        $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() +1 >= $(document).height()) {
           user_list_vm.show_more();
       }
    });

第三方包

Axios

异步await

const axios = require('axios');
axios.get(
  '/user', {
    params: {
      staff: true
    }
  })
  .then(function(response) {
  })
axios.post('/user', data)
    .then(function(response) {
    })
    .catch(function(error) {
    })

eslint

格式化代码，我自己的规则

rules: {
  "indent": [
    "error", 2,  // 2缩进
    {
      "SwitchCase": 1  // switch内部也要缩进
    }
  ],
  "comma-dangle": ["error", "always-multiline"],  // 多行时最后要加逗号
  "no-debugger": "off",
  "no-unused-vars": "off",  // 开发时关闭，开发结束后打开
  "semi": "never",
}

get-fqdn

const getFQDN = require('get-fqdn');
const fqdn = await getFQDN()
console.log(fqdn)  // windows.ramwin.com

Lodash

一致性、模块化、高性能的 JavaScript 实用工具库。

Moment

const moment = require("moment")
var m = moment(new Date())
m.format("YYYY-MM-DD")  // 生成的是m的时区的日期. 通过m.utcOffset(0)可以修改时区. 默认为当前时区

Parse, validate, manipulate, and display dates and times in JavaScript.

Document

  • example

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script>
  var now = moment(new Date())
  console.log(now.format("YYYY-MM-DD"))
  console.log(now.add(12, 'days').calendar());
  moment("20111031", "YYYYMMDD")
</script>

Get and Set time

let now = moment()
noe.hours(12).minutes(0).seconds(0)

  • manipulating
    It should be noted that moments are mutable. Calling any of the manipulation methods will change the original moment.

    • add: moment().add(7, 'days|d|weeks|w|months|M|years|y')

计算时间

moment().add(7, 'days')
moment().subtract(7, 'days')

展示时间

moment().format()  //  "2014-09-08T08:02:17-05:00"
moment().format("YYYY-MM-DD HH:mm:ss")

durations

moment(moment.now() - moment.duration(2, 'hours'))
moment.substract(2, 'hours')  // 但是这样原来的时间就丢失了

Papaparse

解析csv文件

import Papa from "papaparse"
Papa.parse(file|csvString|url, config: {}, complete: function(results) {})

  • config

{
  header: true,
}

qs

解析和格式化请求参数

const qs = require('qs')
qs.parse('a=c') == { a: 'c'}
qs.stringify({a: [1,2,3]}, {indices: false}) == 'a=1&a=2&a=3'

node

modules

// animal.js
class Cat {
    constructor(name) {
        this.name = name
    }
    function say() {
        console.info(`miao: ${this.name}`)
    }
}
module.exports = {
    Cat
}
exports.Cat = Cat
exports.Cat = class Cat {...}
// run.js
const animal = require('./animal.js')
var cat =animal.Cat('kitty')
cat.say()

vue的模块或者组件

Cat.vue
export default {
}
import Cat from "./Cat"

npm

npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmjs.org/

命令

npm install --save  // 以前的npm需要用save来自动修改package.json. 现在不需要这个参数了
npm install ramwin@latest // 升级
npm install -P|--save-prod  # 添加到dependencies
npm install -D|--save-dev  # 添加到devDependencies
npm install webpack@^5
npm uninstall <package>

  • publish

npm publich  # 发布版本