shanejix / shanejix.github.io Goto Github PK

//es6 class 名字不记得了，姑且就叫urlUtil吧
class urlUtil {

    constructor() {
        this.list = []//用于保存截取的字符串，初始化为空
    }
    consoleList() {
        console.log(this.list)
    }

    // 获取满足条件的第一项
    getOne(condition) {
        let list = this.list
        if (list && list.length) {
            let resultt = null
            for (let ele of list) {
                Object.keys(ele).forEach(key => {
                    //有重复的key会取后一个
                    if (condition === key) {
                        resultt = ele
                    }
                })
                //返回满足条件的第一项
                if (resultt) {
                    return resultt
                }
            }
        } else {
            return {}//没有匹配返回一个空对象
        }
    }

    // 获取满足条件的数组
    getList(condition) {
        let list = this.list
        if (list && list.length) {
            let resultt = []
            for (let ele of list) {
                Object.keys(ele).forEach(key => {
                    if (condition === key) {
                        resultt = push(ele)
                    }
                    //forEach中不能continue，这里找到了就应该进入下轮循环，可以改为for-of
                })
            }
            // 循环结束找到满足条件的数组
            return resultt
        } else {
            return []//没有匹配返回一个空数组
        }
    }

    //将url转化为对象键值对的形式存储
    querry(url) {
        //类型校验
        if (!typeof url === 'string') {
            return null
        }
        //截取url参数？后面和#前面的部分
        let querrySring = url.split('?')[1].split('#')[0]
        //用&分组
        let querryList = querrySring.split('&')

        //对象存储
        let temp = {}

        querryList.forEach(item => {
            let key = item.split('=')[0]
            let val = item.split('=')[1]

            //处理key，统一大小写
            if (typeof key === 'string') key = key.toLowerCase()
            // 处理value，val肯能的出现的情况很多，比如
            // 1索引数组
            // 2非索引数组
            // 3没有值
            // 4字符串
            // 5已经存在
            // 这里只实现重复出现的key转化为数组的处理
            if (!temp.key) {
                temp[key] = val
            } else {
                temp[key] = [...temp.key, val]
            }
        })
        this.list.push(temp)
    }
}

let url = new urlUtil();

url.querry('http://hahah/?id=1000&name=a&color=f&idx=5')
url.querry('http://hahah/?id=10500&name=b&color=d&idx=8')
url.querry('http://hahah/?id=10100&name=c&color=d&idx=6')
url.querry('http://hahah/?id=18000&name=d&color=r&idx=2')
url.querry('http://hahah/?id=10030&name=e&color=y&idx=1')

url.consoleList();

// 现在才想起来当时这道题完全想错了，还在那儿搞了半天，原因找到了就是array.sort()没咋用过，不熟
sort(played) {

    // 权重id>name>idx>color 权重高的后计算保证顺序
    this.sortList('color', played)
    this.sortList('idx', played)
    this.sortList('name', played)
    this.sortList('id', played)

}

sortList(key, played) {
    this.list.sort(function (a, b) {
        if (played === 1 && a[key] < b[key]) {
            return 1
        }
        if (played === -1 && a[key] > b[key]) {
            return -1
        }
    })
}

arr = [15, 546, 8, 6, 5, 49, 54, 13, 0]

function bubbleSort(arr) {
    let len = arr.length
    for (let i = 0; i < len; i++) {//i循环的轮数
        for (let j = 0; j < len - i - 1; j++) {//考虑到比较交换的位置，需要-1
            //比较交换,可以将最大的放右边实现降序，反之升序
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j + 1]
                arr[j + 1] = arr[j]
                arr[j] = temp
            }
        }
    }

    return arr
}

console.log(bubbleSort(arr))

function bubbleSort1(arr) {
    let i = arr.length - 1//初始终点位置

    while (i > 0) {
        let pos = 0;
        for (let j = 0; j < i; j++) {
            if (arr[j] > arr[j + 1]) {
                pos = j//记录交换的位置
                let temp = arr[j + 1]
                arr[j + 1] = arr[j]
                arr[j] = temp
            }
        }
        i = pos//更新下一轮循环的终点
    }

    return arr
}

console.log(bubbleSort1(arr))

function bubbleSort2(arr) {
    let low = 0;//正向遍历的起点
    let high = arr.length - 1;//负向遍历起点

    while (low < high) {
        //正向遍历
        for (let i = low; i < high; i++) {
            if (arr[i] > arr[i + 1]) {
                let temp = arr[i + 1]
                arr[i + 1] = arr[i]
                arr[i] = temp
            }
        }
        high--

        //反向遍历
        for (let j = high; j > low; j--) {
            if (arr[j] < arr[j - 1]) {
                let temp = arr[j - 1]
                arr[j - 1] = arr[j]
                arr[j] = temp
            }
        }
        low++

    }
    return arr
}

console.log(bubbleSort2(arr))

function insertSort(arr) {

    for (let i = 1; i < arr.length; i++) {//循环的轮次
        for (let j = i; j > 0; j--) {//每一轮中，这里实现逆序比较，升序排列
            if (arr[j] < arr[j - 1]) {
                let temp = arr[j]
                arr[j] = arr[j - 1]
                arr[j - 1] = temp
            } else {
                break
            }
        }
    }

    return arr
}

console.log(insertSort(arr))

function selectionSort(arr) {

    for (let i = 0; i < arr.length; i++) {//轮次
        //求出最值
        let min = arr[i]//每轮循环的第一个值
        let idx = null
        for (let j = i; j < arr.length; j++) {
            if (arr[j] < min) {
                min = arr[j]
                idx = j
            }
        }

        //交换
        if (!idx) {//idx为null时，表示当前轮的第一个值就是最小值，不用交换
            continue
        } else {
            arr[idx] = arr[i]
            arr[i] = min
        }
    }

    return arr
}

console.log(selectionSort(arr))

function mergeSort(arr) {
    //怎么分？
    let len = arr.length

    //递归结束的条件
    if (len < 2) {
        return arr
    }
    let mid = Math.floor(len / 2)
    let left = arr.slice(0, mid)
    let right = arr.slice(mid)

    return merge(mergeSort(left), mergeSort(right))//这里是关键

}

function merge(left, right) {//怎么合并，

    let res = []

    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            res.push(left.shift())
        } else {
            res.push(right.shift())
        }
    }

    while (left.length) {
        res.push(left.shift())
    }

    while (right.length) {
        res.push(right.shift())
    }

    return res
}

console.log(mergeSort(arr))

function quickSort(arr) {
    //递归结束的条件
    if (arr.length <= 1) {
        return arr
    }

    //确定轴心点,这里去数去最后一项
    let pivot = arr.pop()
    let left = []
    let right = []

    //分区，left和right
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i])
        } else {
            right.push(arr[i])
        }
    }
    
	//合并，这里是关键
    return quickSort(left).concat([pivot], quickSort(right))
}

console.log(quickSort(arr))

function binarySearch(arr,tar){
    let left =0
    let right= arr.length-1

    while(left <= right){
        let mid = Math.floor(left+(right-left)/2)
        if(tar<arr[mid]){
            right=mid-1
        }else if(tar>arr[mid]){
            left=mid+1
        }else{
            return mid
        }
    }

    return -1
}

console.log(binarySearch(arr,154))

function fib(n) {
    if (n === 1 || n === 2) {
        return n
    }

    return fib(n - 1) + fib(n - 2)
}

function fib1(n) {
    let res = 0;
    let pre1 = 1;
    let pre2 = 2;

    if (n <= 2) {
        return n
    }

    for (let i = 3; i <= n; i++) {
        res = pre1 + pre2;
        pre1 = pre2
        pre2 = res
    }

    return res
}

function BobbleSort(arr) {
  for(let i = 0;<arr.length;i++){//循环的轮次

        for(let j=i;i<arr.length-i-1;j++){//每一轮的循环
            if(arr[j+1]>arr[j]){
                //实现升序排列

                //交换变量
                [arr[j+1],arr[j]] = [arr[j+1],arr[j]]

            }
        }
    }

    return arr
}

function BobbleSsort(arr) {
  //记录左右区间最值位置标识
  let low = 0;
  let high = arr.length - 1;

  while (low < high) {
    //正向遍历，得到遍历区间的最大（小）值
    for (let i = low; i < high; i++) {
      if (arr[i] > arr[i + 1]) {
        //交换
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
      }
    }
    //修正指针
    high--;

    //负向遍历，同上
    for (let j = high; j > low; j--) {
      if (arr[j] < arr[j - 1]) {
        //交换
        [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]];
      }
    }
    //修复指针
    low++;
  }

  return arr;
}

function mergeSort(arr) {
  //递归结束的的条件
  if (arr.length < 2) {
    return arr;
  }

  //怎么分？一分为二
  let left = arr.slice(0, arr.length / 2);
  let right = arr.slice(arr.length / 2);

  //怎么合并？
  return merge(mergeSort(left), mergeSort(right));
}

function merge(arr1, arr2) {
  let res = [];

  while (arr1.length && arr2.length) {
    if (arr1[0] < arr2[0]) {
      res.push(arr1[0]);
      arr1.shift();
    } else {
      res.push(arr2[0]);
      arr2.shift();
    }
  }

  while (arr1.length) {
    res.push(arr1.shift());
  }

  while (arr2.length) {
    res.push(arr2.shift());
  }

  return res;
}

function QuickSort(arr){
    //递归结束的条件
    fi(arr.length<=1){
        return arr
    }

    //确定privot
    let privot = arr.pop()
    //小于privot区间
    let left = []
    //大于privot区间
    let right = []

    //遍历数组
    for(let i = 0; i<arr.length;i++){
        if(arr[i]>privot){
            right.push(arr[i])
        }else{
            left.push(arr[i])
        }
    }

    //返回当前序列:拼接左右部分
    return [...QuickSort(left),privot,...QuickSort(right)]
}

问一下这些结果吧，能说对两个以上就行：
[]+[]

[]+{}

{}+[]

{}+{}

如果能解释清楚前因后果可以做高级前端了。

沟通能力

js 的语言糟粕（这个必须的）

平常用的 eslint 有哪些规则

移动端开发的时候常见的问题（ 1px、点击穿透、点击延迟、三倍图、svg or png 的选择）

css 方便会不会几个基础布局（圣杯）

对 display、position 的几个属性掌握情况

了解不了解一些新特性（比如 flex ）

框架方面 jq 的基本原理（比如怎么实现的选择器，不用太深）

vue 的常见问题（ watch 和 computed 区别）

react 的几个生命周期，组件传值

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ……当我们需要选择一个颜色
let color = COLOR_ORANGE;
alert(color); // #FF7F00

const pageLoadTime = /* 网页加载所需的时间 */;


// **`pageLoadTime` 的值在页面加载之前是未知的，所以采用常规命名,但是它仍然是个常量，因为赋值之后不会改变**

// 换句话说，**大写命名的常量仅用作“硬编码（hard-coded）”值的别名**。**当值在执行之前或在被写入代码的时候，就知道值是什么了**。

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert(a); // 3
alert(c); // 0

// 上面这个例子，(a = b + 1) 的结果是赋给 a 的值（也就是 3）。然后该值被用于进一步的运算。

// 有时会在 JavaScript 库中看到它。不过，请不要写这样的代码。这样的技巧绝对不会使代码变得更清晰或可读。

alert("Z" > "A"); // true
alert("Glow" > "Glee"); // true
alert("Bee" > "Be"); // true

// 例如，有变量 firstName、lastName 和 nickName，都是可选的（即可以是 undefined，也可以是假值）。

// 用或运算 || 来选择有数据的那一个，并显示出来（如果没有设置，则用 "Anonymous"）：

let firstName = "";
let lastName = "";
let nickName = "SuperCoder";

alert(firstName || lastName || nickName || "Anonymous"); // SuperCoder

// 如果所有变量的值都为假，结果就是 "Anonymous"。

// 或运算符 || 的另一个用途是所谓的“短路求值”。

// 这指的是，|| 对其参数进行处理，直到达到第一个真值，然后立即返回该值，而无需处理其他参数。

//如果操作数不仅仅是一个值，而是一个有副作用的表达式，例如变量赋值或函数调用，那么这一特性的重要性就变得显而易见了。

//在下面这个例子中，只会打印第二条信息：

true || alert("not printed");
false || alert("printed");

// 在第一行中，或运算符 || 在遇到 true 时立即停止运算，所以 alert 没有运行。

// 有时，人们利用这个特性，只在左侧的条件为假时才执行命令。

alert(1 && 2 && null && 3); // null

alert(1 && 2 && 3); // 3，最后一个值

result = a ?? b;

// 等价于

result = a !== null && a !== undefined ? a : b;

// 1. 为可能是未定义的变量提供一个默认值

let user;

alert(user ?? "Anonymous"); // Anonymous

// 2. 可以使用 ?? 序列从一系列的值中选择出第一个非 null/undefined 的值

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个已定义的值：
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

// 被比较的值必须是相同的类型才能进行匹配

let arg = prompt("Enter a value?");
switch (arg) {
  case "0":
  case "1":
    alert("One or zero");
    break;

  case "2":
    alert("Two");
    break;

  case 3:
    alert("Never executes!");
    break;
  default:
    alert("An unknown value");
}

// 输入 3，因为 prompt 的结果是字符串类型的 "3"，不严格相等 === 于数字类型的 3，所以 case 3 不会执行！因此 case 3 部分是一段无效代码。所以会执行 default 分支。

return;
some + long + expression + or + whatever * f(a) + f(b);

return;
some + long + expression + or + whatever * f(a) + f(b);

function sayHi() {
  // ...
}

let sayHi = function () {
  // ...
};

let user = {
  name: "John",
  age: 30,
};

// 这将提示有语法错误
user.likes birds = true

// JavaScript 理解不了。它认为我们在处理 user.likes，然后在遇到意外的 birds 时给出了语法错误。

let user = {};

// 设置
user["likes birds"] = true;

// 读取
alert(user["likes birds"]); // true

// 删除
delete user["likes birds"];

// 请注意方括号中的字符串要放在引号中，单引号或双引号都可以

let key = "likes birds";

// 跟 user["likes birds"] = true; 一样
user[key] = true;

let user = {
  name: "John",
  age: 30,
};

let key = prompt("What do you want to know about the user?", "name");

// 访问变量
alert(user[key]); // John（如果输入 "name"）

let user = {
  name: "John",
  age: 30,
};

let key = "name";
alert(user.key); // undefined

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

alert(bag.apple); // 5 如果 fruit="apple"

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// 从 fruit 变量中获取值
bag[fruit] = 5;

// 这些属性都没问题
let obj = {
  for: 1,
  let: 2,
  return: 3,
};

alert(obj.for + obj.let + obj.return); // 6

let obj = {};
obj.__proto__ = 5; // 分配一个数字
alert(obj.__proto__); // [object Object] — 值为对象，与预期结果不同

let codes = {
  49: "Germany",
  41: "Switzerland",
  44: "Great Britain",
  // ..,
  1: "USA",
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}

let user = {
  name: "John",
  surname: "Smith",
};
user.age = 25; // 增加一个

// 非整数属性是按照创建的顺序来排列的
for (let prop in user) {
  alert(prop); // name, surname, age
}

let codes = {
  "+49": "Germany",
  "+41": "Switzerland",
  "+44": "Great Britain",
  // ..,
  "+1": "USA",
};

for (let code in codes) {
  alert(+code); // 49, 41, 44, 1
}

// `new User(...)` 做的就是类似的事情
function User(name) {
  // this = {};（隐式创建）

  // 添加属性到 this
  this.name = name;
  this.isAdmin = false;

  // return this;（隐式返回）
}

function A() { ... }
function B() { ... }

let a = new A;
let b = new B;

alert( a == b ); // true

function User() {
  alert(new.target);
}

// 不带 "new"：
User(); // undefined

// 带 "new"：
new User(); // function User { ... }

function User(name) {
  if (!new.target) {
    // 如果你没有通过 new 运行我
    return new User(name); // ……我会给你添加 new
  }

  this.name = name;
}

let john = User("John"); // 将调用重定向到新用户
alert(john.name); // John

// 获取 user.address.street，而该用户恰好没提供地址信息，会收到一个错误：

let user = {}; // 一个没有 "address" 属性的 user 对象

alert(user.address.street); // Error!

let user = {};

alert(user.address ? user.address.street : undefined);

// 例如，让我们尝试获取 user.address.street.name。既需要检查 user.address，又需要检查 user.address.street：

let user = {}; // user 没有 address 属性

alert(
  user.address ? (user.address.street ? user.address.street.name : null) : null
);

let user = {}; // user 没有 address 属性

alert(user.address && user.address.street && user.address.street.name); // undefined（不报错

// id1 id2 是 symbol 的一个实例化对象, 描述都为"id"
let id1 = Symbol("id");
let id2 = Symbol("id");

// 描述相同的 Symbol —— 它们不相等
alert(id1 == id2); // false

alert(id1); // 类型错误：无法将 Symbol 值自动转换为字符串。

alert(id1.toString()); // 通过 toString 显示转化，现在它有效了

alert(id.description); // 或者获取 symbol.description 属性，只显示描述（description）

// 属于另一个代码
let user = {
  name: "John",
};

// 使用 Symbol("id") 作为键
let id = Symbol("id");

user[id] = 1;

// 使用 Symbol 作为键来访问数据
alert(user[id]);

// ...
let id = Symbol("id");

user[id] = "Their id value";

let user = { name: "John" };

// 我们的脚本使用了 "id" 属性。
user.id = "Our id value";

// ……另一个脚本也想将 "id" 用于它的目的……
user.id = "Their id value";

// 砰！无意中被另一个脚本重写了 id！

let id = Symbol("id");
let user = {
  name: "John",
  age: 30,
  [id]: 123,
};

for (let key in user) alert(key); // name, age (no symbols)

// 使用 Symbol 任务直接访问
alert("Direct: " + user[id]);

// 从全局注册表中读取
let id = Symbol.for("id"); // 如果该 Symbol 不存在，则创建它

// 再次读取（可能是在代码中的另一个位置）
let idAgain = Symbol.for("id");

// 相同的 Symbol
alert(id === idAgain); // true

alert((123456).toString(36)); // 2n9c

alert(0.1 + 0.2 == 0.3); // false

alert(0.1 + 0.2); // 0.30000000000000004

- 不仅仅是 JavaScript
许多其他编程语言也存在同样的问题

- PHP，Java，C，Perl，Ruby 给出的也是完全相同的结果，因为它们基于的是相同的数字格式

alert(isNaN(NaN)); // true
alert(isNaN("str")); // true

alert(NaN === NaN); // false

alert(isFinite("15")); // true
alert(isFinite("str")); // false，因为是一个特殊的值：NaN
alert(isFinite(Infinity)); // false，因为是一个特殊的值：Infinity

let num = +prompt("Enter a number", "");

// 结果会是 true，除非你输入的是 Infinity、-Infinity 或不是数字
alert(isFinite(num));

isFinite(""); // true
isFinite("    "); // true

Number(""); // 0
Number("    "); //0

+""; //0
+"    "; //0

// 将区间 0…1 中的所有值“映射”为范围在 min 到 max 中的值
// 1.将 0…1 的随机数乘以 max-min，则随机数的范围将从 0…1 增加到 0..max-min
// 2.将随机数与 min 相加，则随机数的范围将为 min 到 max

function random(min, max) {
  return min + Math.random() * (max - min);
}

alert(random(1, 5));
alert(random(1, 5));
alert(random(1, 5));

function randomInteger(min, max) {
  let rand = min + Math.random() * (max - min);
  return Math.round(rand);
}

alert(randomInteger(1, 3));

values from 1    ... to 1.4999999999  become 1
values from 1.5  ... to 2.4999999999  become 2
values from 2.5  ... to 2.9999999999  become 3

//为了确保相同的取值范围，我们可以生成从 0.5 到 3.5 的值，从而将所需的概率添加到取值范围的边界

function randomInteger(min, max) {
  // 现在范围是从  (min-0.5) 到 (max+0.5)
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

alert(randomInteger(1, 3));

function randomInteger(min, max) {
  // here rand is from min to (max+1)
  let rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

alert(randomInteger(1, 3));

values from 1  ... to 1.9999999999  become 1
values from 2  ... to 2.9999999999  become 2
values from 3  ... to 3.9999999999  become 3

alert("𝒳".length); // 2，大写数学符号 X
alert("😂".length); // 2，笑哭表情
alert("𩷶".length); // 2，罕见的**象形文字

// 1. 添加一个非数字的属性，比如 :
arr.test = 5。


// 2. 制造空洞，比如：添加 arr[0]，然后添加 arr[1000] (它们中间什么都没有)。

arr[0] = 'first';
arr[1000] = 'last';


// 3. 以倒序填充数组，比如 arr[1000]，arr[999] 等等。

arr[1000] = 1000;
arr[999] = 999;

let fruits = [];
fruits[123] = "Apple";

alert(fruits.length); // 124

// 如果手动增加它，则不会发生任何有趣的事儿。但是如果减少它，数组就会被截断。该过程是不可逆的，下面是例子：

let arr = [1, 2, 3, 4, 5];

arr.length = 2; // 截断到只剩 2 个元素
alert(arr); // [1, 2]

arr.length = 5; // 又把 length 加回来
alert(arr[3]); // undefined：被截断的那些数值并没有回来

let str = "Hello";

// 和 for..of 做相同的事
// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  alert(result.value); // 一个接一个地输出字符
}

let range = {
  from: 1,
  to: 5,
};

for(let num of range) ... num=1,2,3,4,5

let range = {
  from: 1,
  to: 5,
};

// 1. for..of 调用首先会调用这个：
range[Symbol.iterator] = function () {
  // ……它返回迭代器对象（iterator object）：
  // 2. 接下来，for..of 仅与此迭代器一起工作，要求它提供下一个值
  return {
    current: this.from,
    last: this.to,

    // 3. next() 在 for..of 的每一轮循环迭代中被调用
    next() {
      // 4. 它将会返回 {done:.., value :...} 格式的对象
      if (this.current <= this.last) {
        return { done: false, value: this.current++ };
      } else {
        return { done: true };
      }
    },
  };
};

// 现在它可以运行了！
for (let num of range) {
  alert(num); // 1, 然后是 2, 3, 4, 5
}

let john = { name: "John" };

// 存储每个用户的来访次数
let visitsCountMap = new Map();

// john 是 Map 中的键
visitsCountMap.set(john, 123);

alert(visitsCountMap.get(john)); // 123

let john = { name: "John" };

let visitsCountObj = {}; // 尝试使用对象

visitsCountObj[john] = 123; // 尝试将 john 对象作为键

// 是写成了这样!
alert(visitsCountObj["[object Object]"]); // 123

// 因为 `visitsCountObj` 是一个对象，它会将所有的键如 john 转换为字符串，所以得到字符串键 `"[object Object]"`

map.set("1", "str1").set(1, "num1").set(true, "bool1");

map.keys() —— 遍历并返回所有的键（returns an iterable for keys）

map.entries() —— 遍历并返回所有的实体（returns an iterable for entries）

[key, value]，for..of 在默认情况下使用的就是这个

let recipeMap = new Map([
  ["cucumber", 500],
  ["tomatoes", 350],
  ["onion", 50],
]);

// 对每个键值对 (key, value) 运行 forEach 函数
recipeMap.forEach((value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});

let obj = {
  name: "John",
  age: 30,
};

let map = new Map(Object.entries(obj));

alert(map.get("name")); // John

let prices = Object.fromEntries([
  ["banana", 1],
  ["orange", 2],
  ["meat", 4],
]);

// 现在 prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) {
  alert(value);
}

let set = new Set(["oranges", "apples", "bananas"]);

// 于数组 forEach 类似 ，与  Map forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value);
});

let weakMap = new WeakMap();

let obj = {};

weakMap.set(obj, "ok"); // 正常工作（以对象作为键）

// 不能使用字符串作为键
weakMap.set("test", "Whoops"); // Error，因为 "test" 不是一个对象

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // 覆盖引用

// john 被从内存中删除了！

let john = { name: "John" };

// 该对象能被访问，john 是它的引用

// 覆盖引用
john = null;

// 该对象将会被从内存中清除

let john = { name: "John" };

let array = [john];

john = null; // 覆盖引用

// 前面由 john 所引用的那个对象被存储在了 array 中

// 所以它不会被垃圾回收机制回收

let john = { name: "John" };

let map = new Map();
map.set(john, "...");

john = null; // 覆盖引用

// john 被存储在了 map 中，
// 我们可以使用 map.keys() 来获取它

WeakMap 只有以下的方法：

- weakMap.get(key)

- weakMap.set(key, value)

- weakMap.delete(key)

- weakMap.has(key)

weakMap.set(john, "secret documents");
// 如果 john 消失，secret documents 将会被自动清除

// 📁 visitsCount.js
let visitsCountMap = new Map(); // map: user => visits count

// 递增用户来访次数
function countUser(user) {
  let count = visitsCountMap.get(user) || 0;
  visitsCountMap.set(user, count + 1);
}

/** 其他部分的代码，可能是使用它的其它代码 **/

// 📁 main.js
let john = { name: "John" };

countUser(john); // count his visits

// 不久之后，john 离开了
john = null;

/**

现在 john 这个对象应该被垃圾回收，但他仍在内存中，因为它是 visitsCountMap 中的一个键

当移除用户时，需要清理 visitsCountMap，否则它将在内存中无限增大。在复杂的架构中，这种清理会成为一项繁重的任务

**/

// 📁 visitsCount.js
let visitsCountMap = new WeakMap(); // weakmap: user => visits count

// 递增用户来访次数
function countUser(user) {
  let count = visitsCountMap.get(user) || 0;
  visitsCountMap.set(user, count + 1);
}

/** 
现在不需要去清理 visitsCountMap 了。当 john 对象变成不可访问时，即便它是 WeakMap 里的一个键，它也会连同它作为 WeakMap 里的键所对应的信息一同被从内存中删除
**/

/ 📁 cache.js
let cache = new Map();

// 计算并记住结果
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* calculations of the result for */ obj;

    cache.set(obj, result);
  }

  return cache.get(obj);
}

// 现在我们在其它文件中使用 process()

// 📁 main.js
let obj = {/* 假设我们有个对象 */};

let result1 = process(obj); // 计算完成

// ……稍后，来自代码的另外一个地方……
let result2 = process(obj); // 取自缓存的被记忆的结果

// ……稍后，我们不再需要这个对象时：
obj = null;

alert(cache.size); // 1（啊！该对象依然在 cache 中，并占据着内存！）


/**
对于多次调用同一个对象，它只需在第一次调用时计算出结果，之后的调用可以直接从 cache 中获取。这样做的缺点是，当不再需要这个对象的时候需要清理 cache
**/

// 📁 cache.js
let cache = new WeakMap();

// 计算并记结果
function process(obj) {
  if (!cache.has(obj)) {
    let result = /* calculate the result for */ obj;

    cache.set(obj, result);
  }

  return cache.get(obj);
}

// 📁 main.js
let obj = {
  /* some object */
};

let result1 = process(obj);
let result2 = process(obj);

// ……稍后，我们不再需要这个对象时：
obj = null;

// 无法获取 cache.size，因为它是一个 WeakMap，
// 要么是 0，或即将变为 0
// 当 obj 被垃圾回收，缓存的数据也会被清除

主要原因是''灵活性''

- ''在 JavaScript 中，对象是所有复杂结构的基础''

- 因此，可能有一个自己创建的对象，比如 data，并实现了它自己的 data.values() 方法

- 同时，依然可以对它调用 Object.values(data) 方法

这主要是历史原因;

let [item1 = default, item2, ...rest] = array

let [firstName, surname] = "Ilya Kantor".split(" ");

// 这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

// 这只是下面这些代码的更精简的写法而已：

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

// 数组中不想要的元素也可以通过添加额外的逗号来把它丢弃

// 不需要第二个元素
let [firstName, , title] = [
  "Julius",
  "Caesar",
  "Consul",
  "of the Roman Republic",
];

alert(title); // Consul

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

// 可以在等号左侧使用任何“可以被赋值的”东西。

// 例如，一个对象的属性：

let user = {};
[user.name, user.surname] = "Ilya Kantor".split(" ");

let user = {
  name: "John",
  age: 30,
};

// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

let user = new Map();
user.set("name", "John");
user.set("age", "30");

for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

let guest = "Jane";
let admin = "Pete";

// 交换值：让 guest=Pete, admin=Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane（成功交换！）

let [name1, name2, ...rest] = [
  "Julius",
  "Caesar",
  "Consul",
  "of the Roman Republic",
];

alert(name1); // Julius
alert(name2); // Caesar

// 请注意，`rest` 的类型是数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name); // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）

let {prop : varName = default, ...rest} = object

// 在简单的情况下，等号左侧的就是 被解构对象 中的变量名列表

let options = {
  title: "Menu",
  width: 100,
  height: 200,
};

let { title, width, height } = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200

let options = {
  title: "Menu",
  height: 200,
  width: 100,
};

// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let { title, ...rest } = options;

// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height); // 200
alert(rest.width); // 100

let options = {
  size: {
    width: 100,
    height: 200,
  },
  items: ["Cake", "Donut"],
  extra: true,
};

// 为了清晰起见，解构赋值语句被写成多行的形式
let {
  size: {
    // 把 size 赋值到这里
    width,
    height,
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu", // 在对象中不存在（使用默认值）
} = options;

alert(title); // Menu
alert(width); // 100
alert(height); // 200
alert(item1); // Cake
alert(item2); // Donut

// 实现这种函数的一个很不好的写法

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

// 缺点一：参数的顺序

// 缺点二：可读性会变得很差

// 传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"],
};

// ……然后函数马上把对象展开成变量
function showMenu({
  title = "Untitled",
  width = 200,
  height = 100,
  items = [],
}) {
  // title, items – 提取于 options，
  // width, height – 使用默认值
  alert(`${title} ${width} ${height}`); // My Menu 200 100
  alert(items); // Item1, Item2
}

showMenu(options);

showMenu({}); // 不错，所有值都取默认值

showMenu(); // 这样会导致错误

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert(`${title} ${width} ${height}`);
}

showMenu(); // Menu 100 200

let title, width, height;

// 这一行发生了错误
{title, width, height} = {title: "Menu", width: 200, height: 100};

{
  // 一个代码块
  let message = "Hello";
  // ...
  alert(message);
}

let title, width, height;

// 现在就可以了
({ title, width, height } = { title: "Menu", width: 200, height: 100 });

alert(title); // Menu

let user = {
  sayHi() {
    // 被忽略
    alert("Hello");
  },
  [Symbol("id")]: 123, // 被忽略
  something: undefined, // 被忽略
};

alert(JSON.stringify(user)); // {}（空对象）

let json = JSON.stringify(value[, replacer, space])

let str = "Hello";

alert([...str]); // H,e,l,l,o

// 对于一个字符串，for..of 会逐个返回该字符串中的字符，...str 也同理会得到 "H","e","l","l","o" 这样的结果。随后，字符列表被传递给数组初始化器 [...str]

// 还可以使用 Array.from 来实现，运行结果与 [...str] 相同

let str = "Hello";

// Array.from 将可迭代对象转换为数组
alert(Array.from(str)); // H,e,l,l,o

Array.from 适用于类数组对象也适用于可迭代对象


Spread 语法只适用于可迭代对象

// 创建 IIFE 的方法

(function () {
  alert("Parentheses around the function");
})();

(function () {
  alert("Parentheses around the whole thing");
})();

!(function () {
  alert("Bitwise NOT operator starts the expression");
})();

+(function () {
  alert("Unary plus starts the expression");
})();

void (function () {
  alert("Unary plus starts the expression");
})();

let func = new Function([arg1, arg2, ...argN], functionBody);

function getFunc() {
  let value = "test";

  let func = new Function("alert(value)");

  return func;
}

getFunc()(); // error: value is not defined

function getFunc() {
  let value = "test";

  let func = function () {
    alert(value);
  };

  return func;
}

getFunc()(); // "test"，从 getFunc 的词法环境中获取的

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

// 当一个函数传入 setInterval/setTimeout 时，将为其创建一个内部引用，并保存在调度程序中。这样，即使这个函数没有其他引用，也能防止垃圾回收器（GC）将其回收


// 在调度程序调用这个函数之前，这个函数将一直存在于内存中
setTimeout(function() {...}, 100);


// 一个副作用：

// 如果函数引用了外部变量（译注：闭包），那么只要这个函数还存在，外部变量也会随之存在。它们可能比函数本身占用更多的内存

// 💡因此，当不再需要调度函数时，最好通过''定时器标识符（timer identifier）'取消它，即使这是个（占用内存）很小的函数。

嵌套的 setTimeout 能够精确地设置两次执行之间的延时，而 setInterval 却不能

// setInterval

let i = 1;
setInterval(function () {
  // 使用 setInterval 时，func 函数的实际调用间隔要比代码中设定的时间间隔要短！
  func(i++); // 这也是正常的，因为 func 的执行所花费的时间“消耗”了一部分间隔时间
}, 100);

//setTimeout

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100);
}, 100);

let start = Date.now();
let times = [];

setTimeout(function run() {
  times.push(Date.now() - start); // 保存前一个调用的延时

  if (start + 100 < Date.now()) alert(times);
  // 100 毫秒之后，显示延时信息
  else setTimeout(run); // 否则重新调度
});

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

let user = {
  name: "John",
};

let descriptor = Object.getOwnPropertyDescriptor(user, "name");

alert(JSON.stringify(descriptor, null, 2));
/* 属性描述符：
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

Object.defineProperty(obj, propertyName, descriptor);

let user = {};

Object.defineProperty(user, "name", {
  value: "John",
});

let descriptor = Object.getOwnPropertyDescriptor(user, "name");

alert(JSON.stringify(descriptor, null, 2));
/*
{
  "value": "John",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
 */

let user = {
  name: "John",
};

Object.defineProperty(user, "name", {
  configurable: false,
});

user.name = "Pete"; // 正常工作
delete user.name; // Error

// 一起使用可以用作克隆对象的标志属性

let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));

- Object.preventExtensions(obj)

- Object.seal(obj)

- Object.freeze(obj)

...

let obj = {
  get propName() {
    // 当读取 obj.propName 时，getter 起作用
  },

  set propName(value) {
    // 当执行 obj.propName = value 操作时，setter 起作用
  },
};

对于访问器属性

- 没有 value 和 writable

- get 一个没有参数的函数，在读取属性时工作

- set 带有一个参数的函数，在设置属性时工作

- enumerable —— 与数据属性的相同

- configurable —— 与数据属性的相同

// 在同一个描述符中同时提供 get 和 value，则会出现错误

// Error: Invalid property descriptor.
Object.defineProperty({}, "prop", {
  get() {
    return 1;
  },

  value: 2,
});

// 始使用数据属性 name 和 age 来实现 user 对象

function User(name, age) {
  this.name = name;
  this.age = age;
}

let john = new User("John", 25);

alert(john.age); // 25

// ...

// ……但迟早，情况可能会发生变化,可能会决定存储 birthday，而不是 age，因为它更精确，更方便

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

// ...

// 💡现在应该如何处理仍使用 age 属性的旧代码呢？

// 可以尝试找到所有这些地方并修改它们，但这会花费很多时间

// 而且如果其他很多人都在使用该代码，那么可能很难完成所有修改

// ...

// 为 age 添加一个 getter 来解决这个问题

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // 年龄是根据当前日期和生日计算得出的
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    },
  });
}

let john = new User("John", new Date(1992, 6, 1));

alert(john.birthday); // birthday 是可访问的
alert(john.age); // ……age 也是可访问的