Javascript 进阶语法

阅读量：

各种集合

• 对象：无序集合
• 数组：有序集合
• Map映射： 是一个带键的数据项的集合
• Set集合 ： 是一组唯一值的集合
• WeakMap and WeakSet（弱映射和弱集合）

数组方法

• 添加元素：

  • arr.push(...items) —— 从尾端添加元素，
  • arr.pop() —— 从尾端提取元素，
  • arr.shift() —— 从首端提取元素，
  • arr.unshift(...items) —— 从首端添加元素。

• 添加或/和 删除： arr.splice(start, deleteCount, elem1, ..., elemN)

• 连接数组： arr.concat(arg1, arg2...)

• 遍历 arr.forEach 方法允许为数组的每个元素都运行一个函数。

• 查找

let result = arr.find(function(item, index, array) {
  // 如果返回 true，则返回 item 并停止迭代
  // 对于假值（falsy）的情况，则返回 undefined
});

字符串方法

菜鸟教程链接 (opens new window)

let 和 var 的区别

let的作用域小。只在本函数可读.

深拷贝 浅拷贝 引用拷贝

• 引用拷贝 只是复制对象的地址，并不会创建一个新对象。
• 浅拷贝 会创建一个新对象，并进行属性的复制。但是对引用类型的属性，只会复制其地址。
• 深拷贝 完全复制整个对象，包括引用类型的对象。

JS中，赋值与深拷贝 浅拷贝

• 基本数据类型：，当我们进行赋值操作（=）时，实际上是在内存中新开一段栈内存，然后再将值赋值到新的栈中。类似与深拷贝 举个例子：

let a = 1
let b = a
a = 5
console.log(a) // 5
console.log(b) // 1

• 引用数据类型：在进行赋值操作时，实际上是把变量的地址传给了另一个变量，所以称为传址。传址之后，两个变量就指向同一个地址，两者的操作是互有影响的。浅拷贝 例：

let a = { age: 12 }
let b = a

a.age = 13
console.log(a.age) // 13
console.log(b.age) // 13

b.age = 14
console.log(a.age) // 14
console.log(b.age) // 14

展开语法(Spread syntax) …

mozilla文档 (opens new window)

构造字面量对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）： let objClone = { ...obj };

=> 箭头函数lambda

语法：函数名 = (形参)=>{执行语句}

箭头函数的渊源可以追溯到上古时期一个叫lambda演算的东西。lambda演算是数学家提出来的，用于自动推导。

箭头函数和普通的函数对比：

• 以函数形式调用时，this永远都是window
• =>箭头函数，this总是指向词法作用域，也就是外层调用者obj

function 函数

let saveTool = function (data) {}

f()()

• f()意思是执行f函数，返回子函数
• f()()执行子函数，返回孙函数

回调函数 callback

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。

知乎文档 (opens new window)

异步

JS是异步编程语言。 简单地说JS代码的执行顺序并不完全是从上至下按部就班完成的。

大多数语言都是同步编程语言，比如现在我们有3行代码，那么系统一定是一行一行按顺序向下执行的，第一行执行完了，执行第二行，紧跟着最后执行第三行。

在JS里，当然也并非所有操作都是异步的，比如for循环，无论这个for循环需要耗时多长，系统也一定会等它转完之后才会执行下面的语句，这一点跟其他大部分同步语言是一致的。我所了解的会产生异步执行的操作大概有以下几种：

• 定时器 -建立网络连接
• 读取网络流数据
• 向文件写入数据
• Ajax提交
• 请求数据库服务

异步函数声明

• 异步函数声明： async function foo() {}
• 异步函数表达式： const foo = async function () {};
• 异步函数定义：let obj = { async foo() {} }
• 异步箭头函数： const foo = async () => {};

Promise

mozilla文档 (opens new window)

一个 Promise 必然处于以下几种状态之一：

• 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）：意味着操作成功完成。
• 已拒绝（rejected）：意味着操作失败。

Promise 特殊用法

• 将Promise的resolve,reject状态放进一个函数的参数中，作为回调函数

作用： 在functionOne执行的时候promise是pending，执行回调函数，然后promise才返回rejected或fulfilled。

    let resolveOut = undefined;
    let rejectOut = undefined;

    let promise = new Promise(function(resolve, reject) {
        resolveOut = resolve;
        rejectOut = reject;
    });

functionOne(
  //回调函数做参数
  function (response) {
      if(response.status !== "SUCCESS")
      {
          rejectOut && rejectOut(response));
          return;
      }

      resolveOut && resolveOut(response);
  }
);

return promise;

Keydown按键响应

监听键盘按下事件（keydown event）

document.addEventListener( 'pointermove', onPointerMove );
document.addEventListener( 'pointerdown', onPointerDown );
document.addEventListener( 'keydown', onDocumentKeyDown );
document.addEventListener( 'keyup', onDocumentKeyUp );

测试按键对应的keycode (opens new window)

A 是 65， 数字0是96

DOM

文档对象模型（Document Object Model），简称 DOM document 对象是页面的主要“入口点”。我们可以使用它来更改或创建页面上的任何内容.

HTML 中的所有内容，甚至注释，都会成为 DOM 的一部分。

小工具（查看DOM和innerHTML） (opens new window)

BOM

浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（主机环境）提供的用于处理文档（document）之外的所有内容的其他对象，

例如

• navigator 对象提供了有关浏览器和操作系统的背景信息。 navigator 有许多属性，但是最广为人知的两个属性是：navigator.userAgent — 关于当前浏览器，navigator.platform — 关于平台
• location 对象允许我们读取当前 URL，并且可以将浏览器重定向到新的 URL。

JS保护变量不被修改

https://juejin.cn/post/6844904142993883143

• Object.defineProperty()
• Object.freeze() 只是保护了obj的直系属性
• Object.seal() 和 Object.preventExtensions()
• Shallow Freeze & Deep freexe

error 管理

• console.error 和throw Error(“XXX”)类似，多了文字自定义输出
• throw new Error(“XXX”) 创建了一个新的错误类型

console.error("error XXX console", error);
throw Error(error);
throw new Error("new error type XXX");

Hammer.js 手势操作

手势英文	中文
Pan	平移
Pinch	放大缩小
Press	长按
Rotate	双指旋转
Swipe	轻扫
Tap	轻点

各浏览器支持情况 (opens new window)

JSON文件

JSON: JavaScript Object Notation(JavaScript 对象表示法) JSON 是存储和交换文本信息的语法，类似 XML。

• JSON 比 XML 更小、更快，更易解析。
• 语法：”键名” ：”键值”
  • 多个键名用逗号隔开
  • 优点：传输时，节省内存，节省网络带宽

  {
    "key":"value",
    "key2":"value"
  }
  

• 数据类型：字符串、数值、对象、数组、null 等

  {
    "key":"value",
    "key2":123.456,
    "key3":{
        "name":"孙悟空",
        "age":18
    },
    "key4":[1,2,3,4],
    "key5":["a","b","c"],
    "key6":[{
                "name":"孙悟空",
                "age":18
            },
            {
                "name":"唐三藏",
                "age":18
            },
            {
                "name":"猪八戒",
                "age":18
            },
            {
                "name":"沙和尚",
                "age":18
            }],
    "key7":null
  }
  

JSON和JS对象的互转

JSON是js对象的字符串表示 前后端分离：数据交互变得很重要，JSON很重要

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type = "text/javascript">

    var obj = { name: "孙悟空", age:18} //对象
    var json = '{ "name": "孙悟空", "age":18}' //json字符串
    console.log(typeof obj);
    console.log(typeof json);

    //JSON转换为js对象
    obj2 = JSON.parse(json);
    console.log(obj2);

    //js对象转换为JSON
    json2 = JSON.stringify(obj);
    console.log(json2);

    </script>
</head>
<body>
    
</body>
</html>

JS精度问题

掘金解释文档 (opens new window)

试验：

const value = 0.1;
console.log(value);//0.1
console.log(value.toPrecision(16));//0.1000000000000000
console.log(value.toPrecision(21));//0.100000000000000005551
console.log(typeof(value));//number
console.log(typeof(value.toPrecision(16)));//string

舍入方法：

• 四舍五入取整：Math.round()得到整数
• 取小数点后n位：

function round(number, precision) {
    return Math.round(+number + "e" + precision) / Math.pow(10, precision);
    //same as:
    //return Number(Math.round(+number + 'e' + precision) + 'e-' + precision);
}