javascript

关键字

typeof
null
undefined
var
let     //块级作用域
const   //块级作用域
function
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
"use strict";

arr instanceof Array
typeof o == 'object'

变量和内置对象

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值 
var bol = true                                    // Bool   变量
var lastName = "Johnson";                         // String 通过字符串字面量赋值 
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值 
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

var lastname="Doe", age=30, job="carpenter";

//类型转换

String(x)
String(Date()) 

Number(x)
Number.toString()
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

//字符串
var string1 = "John";
var string2 = new String("John");
typeof string1 // returns String
typeof string2 // returns Object

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

方法
length
concat()  拼接
string1 + string2
ES6
`${string1}${string2}`

trim()  //去除空格
indexOf(str)  //返回 首次出现索引位置  没找到-1
toLowerCase()，
toUpperCase()

slice方法用于从原字符串取出子字符串并返回，不改变原字符串
'JavaScript'.slice(0, 4) // "Java"

'aaa'.replace('a', 'b')
'a|b|c'.split('|') // ["a", "b", "c"]

match方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null
'cat, bat, sat, fat'.match('at') // ["at"]
'cat, bat, sat, fat'.match('xt') // null

search方法的用法等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。
'cat, bat, sat, fat'.search('at') // 1

//方法
方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()	从后向前搜索字符串。
match()	查找找到一个或多个正则表达式的匹配。
replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
valueOf()	返回某个字符串对象的原始值。

//Number
方法	描述
toExponential(x)	把对象的值转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision(x)	把数字格式化为指定的长度。
toString()	把数字转换为字符串，使用指定的基数。
valueOf()	返回一个 Number 对象的基本数字值。

//Math
方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

全局属性和函数

属性	    描述
Infinity	    代表正的无穷大的数值。
NaN	            指示某个值是不是数字值。
undefined     	指示未定义的值。

函数	     描述
decodeURI()	            解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	            把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	            对字符串进行编码。
eval()	                计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite()	            检查某个值是否为有穷大的数。
isNaN()	                检查某个值是否是数字。
Number()	            把对象的值转换为数字。
parseFloat()	        解析一个字符串并返回一个浮点数。
parseInt()	            解析一个字符串并返回一个整数。
String()	            把对象的值转换为字符串。
unescape()	            对由 escape() 编码的字符串进行解码。

函数

function myFunction(a,b)
{
    return a*b;
}

(function () { 
    var x = "Hello!!";      // 我将调用自己 
})();

//默认参数
function myFunction(x = 0, y = 0) {
}

//变长参数
ES6
function log(first, ...rest) {
    console.log(rest)
}


function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20
function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");

//闭包  类似 c静态变量
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();
// 计数器为 3

数组

定义
var array1 = new Array()  空数组
var array2 = new Array(size)
var array3 = new Array(1, 2, 3)
var array4 = [1, 2, 3]
var array5 = new Array([], [], [])
var array6 = [[1, 2, 3], [1, 2, 3]];

使用

var a = array3[0]      //1
var b = array4[2]      //3
var c = array6[0][1]   //2

添加
obj[3] = 7   中间没有的自动生成undefined

for(var key in array4) {
    var a = array4[key]
}
//ES6
for(var value of array4) {
    var a = value
}

array4.length 
//操作
array4.push(5)  //末尾添加元素
array4.pop()    //末尾弹出元素
array4.unshift(5)  //头部添加元素
array4.shift()     //头部弹出元素
array4.concat(array5)//合并

delete array4[4]   
//添加删除数组
开始索引   删除个数 0不删除  要添加的元素
array4.splice(2,1,"Lemon","Kiwi")
//截取数组
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(1, 3);

array.reverse()  倒置
array.sort()    默认字母升序

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
回调函数 返回值  0 <0  >0

array.toString()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
//输出 Banana and Orange and Apple and Mango

indexOf
lastIndexOf

every

 流程语句

while(true)
{
}

do {

} while(true)

for(let a = 0; a < 10; a++) {
}

for(let key in array) {
}
//ES6
for(let value of obj) {
}

switch(a) {
    case 'a':
    break;
    default:
    bradk;
}

// 抛出一个字符串
throw "Error！";

// 抛出一个数值
throw 42;

// 抛出一个布尔值
throw true;

// 抛出一个对象
throw {toString: function() { return "Error!"; } };
function throwit() {
  throw new Error('');  //抛出错误
}

function catchit() {
  try {
    throwit();
  } catch(e) {
    console.log(e.stack); // print stack trace
  } fifinally {
  }
}

return
break
continue

正则表达式

/pattern/modifiers;
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。

var str = "Visit w3cschool"; 
var n = str.search(/w3cschool/i);


修饰符 可以在全局搜索中不区分大小写:
修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号用于查找某个范围内的字符：
表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

元字符	描述
元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。
量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。


使用 RegExp 对象
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

var patt = /e/; 
patt.test("The best things in life are free!");  //true

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
/e/.exec("The best things in life are free!");

.*?非贪婪匹配

JSON

JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

ES6

let const 块级作用域
//数组解构赋值

let [a, b, c] = [1, 2, 3]
let [foo, [[bar], baz]] = [1, [[2], 3]];
let [ , , third] = ["foo", "bar", "baz"];
let [head, ...tail] = [1, 2, 3, 4];

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

//对象解构赋值

let { foo, bar } = {foo: 'aaa', bar: 'bbb'}

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
var {x, y = 5} = {x: 1};

因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题
({x} = {x: 1});

const [a, b, c, d, e] = 'hello';
let {length : len} = 'hello';

//模板字符串

`hell-${a}`

//新增字符串方法
let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"

//数值扩展
// ES5的写法
parseInt('12.34') // 12
parseFloat('123.45#') // 123.45

// ES6的写法
Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

Math.trunc方法用于去除一个数的小数部分，返回整数部分
Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转
它会返回五种值。

参数为正数，返回+1；
参数为负数，返回-1；
参数为 0，返回0；
参数为-0，返回-0;
其他值，返回NaN。

Math.cbrt方法用于计算一个数的立方根
ES2016 新增了一个指数运算符（**）。

2 ** 2 // 4
2 ** 3 // 8

//数组扩展
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// ES6
[a, ...rest] = list
[...'hello']
// [ "h", "e", "l", "l", "o" ]

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

//对象扩展
let z = { a: 3, b: 4 };
let n = { ...z };
Object.assign(target, source1, source2);

//Set Map
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// 去除数组的重复成员
[...new Set(array)]

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

//遍历器
const obj = {
  [Symbol.iterator] : function () {
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};
let myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
}
[...myIterable] // [1, 2, 3]

// 或者采用下面的简洁写法

let obj = {
  * [Symbol.iterator]() {
    yield 'hello';
    yield 'world';
  }
};

for (let x of obj) {
  console.log(x);
}
//异步操作
async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}

//Class
class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

class foo {
  bar = 'hello';
  baz = 'world';

  constructor() {
    // ...
  }
}
class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}


var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };
export function multiply(x, y) {
  return x * y;
};
import { firstName, lastName, year } from './profile.js';

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者写成

function foo() {
  console.log('foo');
}

export default foo;

export * from 'circle';
import * as math from 'circleplus';


//函数默认参数
function log(x = 1, y = 2) {
    return x + y;
}
//解构传值
function foo({x, y = 5}) {
    console.log(x, y)
}
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

//默认参数解构传值
// 写法一  
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}
// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

//箭头函数
var f = v => v;
var f = () => 5;
var sum = (a, b) => a + b;
var sum = (a, b) => { return a + b; }

//Primise

const promise = new Promise( (resolve, reject) => {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});


promise.then(
    (resolved)=>{}, 
    (rejected)=>{}
).catch((error)=>{

})

//ArrayBuffer
（1）ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。

（2）TypedArray视图：共包括 9 种类型的视图，比如Uint8Array（无符号 8 位整数）数组视图, Int16Array（16 位整数）数组视图, Float32Array（32 位浮点数）数组视图等等。

（3）DataView视图：可以自定义复合格式的视图，比如第一个字节是 Uint8（无符号 8 位整数）、第二、三个字节是 Int16（16 位整数）、第四个字节开始是 Float32（32 位浮点数）等等，此外还可以自定义字节序。

简单说，ArrayBuffer对象代表原始的二进制数据，TypedArray视图用来读写简单类型的二进制数据，DataView视图用来读写复杂类型的二进制数据。
TypedArray视图支持的数据类型一共有 9 种（DataView视图支持除Uint8C以外的其他 8 种）。

数据类型	字节长度	含义	对应的 C 语言类型
Int8	1	8 位带符号整数	signed char
Uint8	1	8 位不带符号整数	unsigned char
Uint8C	1	8 位不带符号整数（自动过滤溢出）	unsigned char
Int16	2	16 位带符号整数	short
Uint16	2	16 位不带符号整数	unsigned short
Int32	4	32 位带符号整数	int
Uint32	4	32 位不带符号的整数	unsigned int
Float32	4	32 位浮点数	float
Float64	8	64 位浮点数	double
注意，二进制数组并不是真正的数组，而是类似数组的对象

const buffer = new ArrayBuffer(24);
const dv = new DataView(buffer);

// 从第1个字节读取一个8位无符号整数
const v1 = dv.getUint8(0);

// 从第2个字节读取一个16位无符号整数
const v2 = dv.getUint16(1);

// 从第4个字节读取一个16位无符号整数
const v3 = dv.getUint16(3);

// 在第1个字节，以大端字节序写入值为25的32位整数
dv.setInt32(0, 25, false);

// 在第5个字节，以大端字节序写入值为25的32位整数
dv.setInt32(4, 25);

// 在第9个字节，以小端字节序写入值为2.5的32位浮点数
dv.setFloat32(8, 2.5, true);

//uint8 -> uint16
var data = new Uint16Array(message.buffer, message.offset)
console.log(message, data)

CryptoJS 

API https://cryptojs.gitbook.io/docs/
npm install crypto-js --save

let CryptoJS = require("crypto-js");

let encryptData = new Uint8Array(4)
encryptData[0] = 1
encryptData[1] = 0
encryptData[2] = 0
encryptData[3] = 1


var input = CryptoJS.lib.WordArray.create(encryptData);

var ciphertext = CryptoJS.AES.encrypt(input, 'secret key 123').toString();

// Decrypt
var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');

var hex2ab = function(hex){
    var typedArray = new Uint8Array(hex.match(/[\da-f]{2}/gi).map(function (h) {
        return parseInt(h, 16)
    }))

    return typedArray
}

let retData = hex2ab(bytes.toString(CryptoJS.enc.Hex))
console.log(new Uint16Array(retData.buffer, retData.offset))

mqtt.js使用

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js" type="text/javascript"></script>


//浏览器采用websocket协议，host主机地址为mqtt.huikezk.com，端口为8083，路径为/mqtt
    var client = mqtt.connect("ws://mqtt.huikezk.com:8083/mqtt", {username:'admin', password:'******'}) // you add a ws:// url here

    console.log('lianjie')
    //建立连接
    client.on('connect', function () {
        console.log("connect success!")
        //订阅主题 presence
        client.subscribe('presence', function (err) {
            if (!err) {
                console.log("subscribe success!")
                //发布主题presence,消息内容为Hello mqtt
                client.publish('presence', 'Hello mqtt')
            }else{
                //打印错误
                console.log(err)
            }
        })
    })

    //如果连接错误，打印错误
    client.on('error', function (err) {
        console.log(err)
        client.end()
    })

    //如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
    client.on('message', function (topic, message) {
        // message is Buffer,此处就是打印消息的具体内容
        console.log('-> ' + message.toString())
    })