ECMAScript

JavaScript 官方名称是 ECMAScript 是一种属于网络的脚本语言，已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

编辑器

VS code一款微软出品的强大前端编辑器，具有很强的拓展性，常用插件有如下类型：

1. live server，服务器形式运行代码，ctrl+s保存自动刷新代码；
2. auto rename tag，标签更改后自动补全；
3. Bracket Pair Colorizer 2，代码语法高亮；
4. Prettier - Code formatter，代码格式化，需要进入vscode设置，搜索save关键词，勾选format on save选项；
5. vue，代码高亮；

代码执行顺序

由于程序由上往下执行，避免程序页面延迟，将js代码放入body的尾部。 script标签按顺序执行，引入模块代码延后执行。

命名规则

数字、字母、下划线、$符号均可以作为变量名，但是要注意不能以数字开头和关键名命名，例如while、class等关键词均不可以使用。

声明关键字

var

1. var声明的变量没有块级作用域，仅有函数作用域，重复命名会覆盖；

if (1) {
  var a = 6;
  let b = 9;
}
console.log(a); // 6
console.log(b); // b is not defined

2. 造成可以先使用后申明的现象（变量提升），环境在执行代码之前优先将解析变量并放入堆中，未定义的变量优先定义为undefined，不会发生报错的现象，打开严格模式也不会进行报错。

a = 3;
alert(a);
var a;

// 真实的执行顺序
1.var a;
2.a = 3;
3.alert(a);

let

1. 先声明后使用会造成TDC暂时性死区（报错）；
2. 存在块级作用域；
3. 同一作用域下不可以重复声明；

const

1. 定义后的变量不可改变;
2. 声明的同时必须赋值；
3. 当const是对象等引用类型变量时只要地址不变即可；
4. 拥有块、函数、全局作用域；

无关键词

无关键词定义全局变量会造成全域污染，导致变量冲突难以调试的问题。

object.freeze变量冻结

非严格模式下变量被冻结后再次被使用不会报错，开启严格模式后控制台会进行报错。

"use strict"
const INFO = {
  url: 'https://n.huasenjio.top/',
  port: '8080'
};
Object.freeze(INFO);
INFO.port = '443'; //Cannot assign to read only property
console.log(INFO);

作用域

1.块级作用域

if、while、for语句形成块级作用域，var声明的变量是没有块级作用域。

<script>
  if (1) {
    var a = 9;
    console.log("1是逻辑值为真");
  }
console.log(a); // 输出9
</script>

2.函数作用域

当声明函数时会在函数的内部形成一个函数的作用域，let和const声明的变量有块级作用域和函数作用域，var也不能穿透。所以可以用函数作用域来解决var无块级作用域的缺点。

<script>
  function b() {
  var a = 9;
}
console.log(a); // a is not defined
</script>

传值与传址

1.传值

函数传递参数时，基本数据类型的赋值是直接传递值。

2.传址

引用类型的复合对象的赋值是传递地址

严格模式

1. 先声明再使用；
2. 必须使用关键词声明变量；
3. 匿名函数的this不再指向window对象而是undefined；

运算符

1.数学运算符

let a = 4;
let b = 5
console.log(3 % 2); // 1，取余；
console.log(3 / 2); // 1.5，除法；
console.log(a++); // 5，自加运算符，此时a=4，但这条指令执行完成后a+1；
console.log(--b); // 6，自减运算符，此时a=6，执行这段代码前b+1；

2.比较运算符

比较运算符分为两个，“==”和``“===”`，双等号的运算符比较时会将等式两边的数据变成相同的数据类型再比较，这个特点叫隐式转换；三等号运算符称为严格比较，不会转变为相同的数据类型来比较，数据类型不同就返回false。

<script>
  // undefined仅与null和本身相等
  console.log(0 == undefined); //false;
	console.log("" == undefined); //false;
	console.log([] == undefined); //false;
	console.log({} == undefined); //false;
	console.log(undefined == null); //true
</script>

3.三目运算符

表达式 ? 表达式为真时 ：表达式为假时，可以嵌套使用。

循环控制

1.if

if (1) {
  // 表达式为真的代码块
} else {
  // 表达式为假的代码块
}

2.for

for (let i = 0; i < 10; i++) {
  // 执行代码块
}

3.for-in

for-in遍历数组时，根据下标遍历，遍历对象时是根据属性名遍历。

let arr = ["森", "酱", "与", "猪"];
let obj = {
  name: "花森",
  sex: "男",
};
// 遍历数组
for (const key in arr) {
  console.log(key); //下标
  console.log(arr[key]);
}

// 遍历对象
for (const key in obj) {
  console.log(key); // name sex
  console.log(obj[key]); // 花森 男
}

4.for-of

for-of是根据数组内的元素进行遍历，可以遍历迭代器对象。

let arr = ["森", "酱", "与", "猪"]

for (const item of arr) {
  console.log(item); // 森 酱...
}

5.forEach

let arr = ["森", "酱", "与", "猪"];
arr.forEach((item, index, arr) => {
  console.log(item); // 元素
  console.log(index); // 下标
  console.log(arr); // 原数组
});

6.while

var a = 0;
while (1) {
  a++;
  if (a == 10) {
    continue; // 跳过a = 10并直接进入a=11循环
  }
  console.log(a);

  if (a == 20) {
    break; // 跳出结束循环
  }
}

7.switch

不设置break会造成穿透效果

let name = '视频';
switch (name) {
    case '产品':
        console.log('huasen');
        break;
    case '视频':
        console.log('zhuqi');
        break;
    default:
        console.log('hs');
}

8.break和continue

1. break跳出当前循环体；
2. continue跳过本次循环；
3. 通过label跳出父级循环;

var a = 0;
while (1) {
  a++;
  if (a == 10) {
    continue; // 跳过a = 10并直接进入a=11循环
  }
  console.log(a);

  if (a == 20) {
    break; // 跳出结束循环
  }
}

this指向

匿名函数中的this指向的是window对象（严格模式下指向undefined），可以通过作用域链的方式获取到外部的this，同样也可以通过ES6箭头函数取到父级作用域的this指针。

<script>
  let huasen = {
    names: "花森",
    sex: "男",
    showSex: function () {
      let that = this;
      function getName() {
        console.log(this.names); //this指向window，输出 undefined。
        console.log(that.names); //that指向huasen，作用域链向上查找。
      }
      getName(); //调用getName是一个函数getName，它没有没有依靠，因为匿名函数中的this是指向window，所以调用者就是window，所以this就指向window。
    },

    showName: () => {
      // 箭头函数默然会指向父级作用域，此处调用showName方法的是huasen，它的父级作用域就是window，this指向window。
      console.log("方法是箭头函数", this);
    },
  };
huasen.showSex(); // 男
huasen.showName();
</script>

Call与Apply

函数a.call(对象b，参数1，参数2...)，函数a将它的this指针指向对象b，同时传递参数的形式是一个一个传递；函数a.apply(对象b，[参数1，参数2...])，函数a将它的this指针指向对象b，传递参数的形式是数组，两者更改this指向后不会立刻执行函数，bind的方式绑定this会立即执行该函数。

function User(name, type = "人类") {
  this.name = name;
  this.type = type;
  showType = function () {
    console.log(this.name);
  };
  // 默认会返回一个生成后的实例
  return this;
}
function Pig(name, type = "猪") {
  this.name = name;
  this.type = type;
  showType = function () {
    console.log(this.name);
  };
}
console.log(new User("花森", "人类"));
let zhuqi = {
  name: "李琦",
  sex: "女",
};
// User.call(zhuqi, "猪琦", "猪"); // 通过call将User函数的this指向zhuqi对象，call通过一个一个参数传入，最后返回this再次指向zhuqi，相同属性名会遭到覆盖。
User.apply(zhuqi, ["猪琦", "猪"]); // apply的不同点是通过数组直接传入参数，其他效果一致。
console.log(zhuqi); //{sex: "女", name: "猪琦", type: "猪"}

Bind

bind()是将函数绑定到某个对象，比如 a.bind(hd) 可以理解为将a函数绑定到hd对象上即 hd.a()。绑定后会立即执行函数，bind是赋值函数行为会返回一个新的函数。

function hs(a, b) {
  console.log(this);
  return this.f + a + b;
}

//使用bind会生成新函数
let newFunc = hs.bind({ f: 1 }, 3); // 将函数hs绑定给了对象{f:1}

//1+3+2 参数2赋值给b即 a=3 b=2
console.log(newFunc(2));

数据类型检测

1.typeof

基本数据类型检测，无法辨别数组和对象，合适基本的数据类型辨别，具体可以辨别如下类型：

1. number/string/boolean；
2. function；
3. object；
4. undefined；

let a = 1;
console.log(typeof a); //number

let b = "1";
console.log(typeof b); //string

//未赋值或不存在的变量返回undefined
var huasen;
console.log(typeof huasen);

function run() {}
console.log(typeof run); //function

let c = [1, 2, 3];
console.log(typeof c); //object

let d = { name: "n.huasenjio.top" };
console.log(typeof d); //object

2.instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，就是它是否存于某一个继承的链，如果是数组，那么他的祖先就必定存在Array构造函数，如此进行精准判断数据类型；

let hs = [];
let huasen = {};
console.log(hs instanceof Array); //true
console.log(huasen instanceof Array); //false

let c = [1, 2, 3];
console.log(c instanceof Array); //true

let d = { name: "n.huasenjio.top" };
console.log(d instanceof Object); //true

function User() {}
let hd = new User();
console.log(hd instanceof User); //true

字面量与对象

当我们声明一个数组let a =[]时，同样可以使用a.push()方法，据我的了解，只有对象才可以调用方法而Array构造函数的prototype原型上面拥有这个push方法，所以推论内部将[]转换成为对象。

let hd = "huasen"; // 字面量形式
let h = new String("hs"); // 对象的形式
console.log(huasen.length); //6个字符
console.log(h.length); //2个字符

Number

Number用于表示整数和浮点数，数字是 Number实例化的对象，可以使用对象原型上提供的丰富方法。

1.数字变量的命名

let huasen = 3; //字面量形式
let h = new Number(3); //对象的形式
console.log(h+3); //6

2.判断书否是整数

console.log(Number.isInteger(1.2));

3.NaN无效数值

console.log(Number("huasen")); //声明传参传递数字无效产生NaN
console.log(2 / 'huasen'); //无效的数值计算会产生NaN
Number.isNaN(变量) // 判断是否是NaN
Object.is(对象1,对象2) // 判断两个对象是否相等

4.类型转换

使用Number构造函数基本上可以转换所有类型

console.log(Number('huasen')); //NaN
console.log(Number(true)); //1
console.log(Number(false));	//0
console.log(Number('9')); //9
console.log(Number([])); //0
console.log(Number([5]));	//5
console.log(Number([5, 2])); //NaN
console.log(Number({})); //NaN

5.常用方法

1）字符串转数字parseInt：

提取的字符串并去除空白数字字串转变为整数

console.log(parseInt('1' * 1));	//1 隐式转换
console.log(parseInt('  99huasen'));	//99
console.log(parseInt('18.55'));	//18 小数点被忽略

2）字符串转为浮点数parseFloat：

console.log(parseFloat('  99huasen'));	//99
console.log(parseFloat('18.55'));	//18.55且不会忽略小数点

3）浮点数四舍五入toFixed：

console.log(1.55667.toFixed(2)); //1.56

String

字符串类型是使用非常多的数据类型

1.字符串变量的声明

let hs = new String('huasen');
// 获取字符串长度
console.log(hs.length);
// 获取字符串
console.log(hs.toString());

2.转义符号

有些字符有双层含义，需要使用 \ 转义符号进行含义转换，下例中引号为字符串边界符，如果输出引号时需要使用转义符号。

let content = '花森 \'huasenjio.top\''; // 内部两个'是需要转义
console.log(content); // 花森 'huasenjio,top'

常见转义符号表：

3.连接运算符

let year = 2019,
name = '花森导航';
console.log(name + '成立于' + year + '年');

4.模板字面量

使用 ` …` 符号包裹的字符串中可以写入引入变量与表达式，变量使用${}放入，并且可以换行而不产生错误。

let url = 'huasenjio.top';
console.log(`花森导航网址是${url}`); //花森导航网址是huasenjio.top

5.标签模板

通过tag方法将字符串和变量分离到两个数组中

let lesson = 'css';
let web = '花森';
tag `访问${web}学习${lesson}前端知识`;

function tag(strings, ...values) {
    console.log(strings); //["访问", "学习", "前端知识"]
    console.log(values); // ["花森", "css"]
}

6.常用方法

1）使用length属性可以获取字符串长度：

console.log("huasenjio.top".length)

2）字母大小写转换（toLowerCase和toLowerCase）：

console.log('HUASENJIO.top'.toLowerCase()); //huasenjio.top 转小写
console.log('huasenjio.top'.toLowerCase()); //HUASENJIO.TOP 转小写

3）移除字符空白trim：

let str = '   huasenjio.top  ';
console.log(str.length);
console.log(str.trim().length);

console.log(name.trimLeft()); // 删除左空白
console.log(name.trimRight()); // 删除又空白

4）抓取单个字符chatAt：

console.log('huasenjio'.charAt(3)) // s 通过下标（0开始）获取到对于的字符

5）数组形式获取字符：

console.log('huasenjio'[3]) // 3 数字索引获取字符串

7.字符串的截取

slice

• 截掉

let hs = "12345678";
console.log(hs.slice(3)); //45678 slice(截掉的个数)

• 截取

// 参数为正数情况
let hs = "12345678";
console.log(hs.slice(3, 6)); //456 [开始下标,结束下标）

// 参数为负数情况
console.log(hs.slice(-2)); //78 末尾取两个
console.log(hs.slice(1, -2)); //23456 [开始下标，-2(倒数第二个开始)) 第二个参数是负数说明从尾部数

substring

• 截掉

let hs = "12345678";
console.log(hs.substring(3));  //45678 substring(截掉的个数)

• 截取

let hs = "12345678";
console.log(hs.substring(3, 6)); //456 [开始下标,结束下标）
console.log(hs.substring(3, 0)); //123 参数中选最小值作为开始下标进行截取
console.log(hs.substring(3, -9)); //123 负数转为0再按最小值作为开始下标进行截取

substr

• 截掉

let hs = "12345678";
console.log(hs.substr(3));  //45678 substr(截掉的个数)

• 截取

let hs = "12345678";
console.log(hs.substr(3, 4)); //4567 [开始下标，截取个数]

console.log(hs.substr(-3, 2)); //78 [-3,个数]

8.查找字符串

indexOf检索

从开始（下标为零）进行查找，若查找到返回第一个目标的下标，查找不到返回-1，可以指定开始查找的位置。

console.log("12345678".indexOf("3")); //1
console.log("12345678".indexOf("5", 3)); //4 从第3个字符向后搜索

search检索

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索进行搜索，返回子串的开始下标。

let str = "huasenjio.top";
console.log(str.search("top"));
console.log(str.search(/top/i));

9.字符串替换

replace

replace方法用于字符串的替换操作，默认替换第一个匹配的字符串，如果想要通过全局替换需要配合正则表达式使用。

let name = "1122331122";
web = name.replace("22", "**");
console.log(web);

// 配合正则完成替换
let str = "2023/02/12";
console.log(str.replace(/\//g, "-"));

10.重复生成repeat

通过已有的字符串生成重复的字符串

function star(num = 3) {
	return '*'.repeat(num);
}
console.log(star());

11.字符串分割split

通过某一个符号对字符串进行分割并返回分割后的数组

console.log("1,2,3".split(",")); //[1,2,3]

12.类型转换

let hs = 99;
console.log(hs.toString()); //99 String类型

let arr = ["1", "2", "3"];
console.log(arr.toString()); //1,2,3 String类型

let a = {
  name: "huasen",
};
console.log(a.toString()); //[object Object] String类型

Math

math数学对象，提供了很多数学相关的计算方法。

1.最大值最小值

console.log(Math.min(1, 2, 3)); // 1
console.log(Math.max(1, 2, 3)); // 3

2.向上取整ceil

console.log(Math.ceil(1.111)); // 2

3.向下整数floor

console.log(Math.floor(1.555)); // 1

4.四舍五入处理round

console.log(Math.round(1.5)); //2

5.生成随机数random

random 方法用于返回 >=0 且 <1 的随机数（包括0但不包括1）

const number = Math.floor(Math.random() * 5); // [0,5)
console.log(number);

const number = Math.floor(Math.random() * (5+1)); // [0,5]
console.log(number);

const number = Math.floor(Math.random() * (5 - 2)) + 2; // [2,5)
console.log(number);

const number = Math.floor(Math.random() * (5 - 2+1)) + 2; // [2,5]
console.log(number);

X+Math.floor(Math.random()*(Y-X)) // [X,Y)
X+Math.floor(Math.random()*(Y-X+1)) // [X,Y]

Date

处理日期的方法，通过 Date 类型提供的丰富功能可以非常方便的操作。

1.时间戳

定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数

2.获取当前日期

let now = new Date();
console.log(now); // Mon Oct 19 2020 21:15:23 GMT+0800 (中国标准时间)
console.log(typeof now); //object
console.log(now * 1); //获取时间戳

//直接使用函数获取当前时间
console.log(Date());
console.log(typeof Date()); //string

//获取当前时间戳单位毫秒
console.log(Date.now());

3.时间格式的封装

function dateFormat(date, format = "YYYY-MM-DD HH:mm:ss") {
  const config = {
    YYYY: date.getFullYear(),
    MM: date.getMonth() + 1,
    DD: date.getDate(),
    HH: date.getHours(),
    mm: date.getMinutes(),
    ss: date.getSeconds(),
  };
  for (const key in config) {
    format = format.replace(key, config[key]);
  }
  return format;
}
console.log(dateFormat(new Date(), "YYYY年MM月DD日HH时mm分ss秒"));

Boolean

布尔类型包括 true 与 false 两个值

1.声明定义

console.log(new Boolean(true)); //true 对象形式
let hs =true; // true 字面量形式

2.隐式转换

逻辑运算符"=="进行两个是比较是否相等时，不同的数据类型会造成隐式转换后再比较，属于js中比较难的部分，具体情况如下：

1. 数组和布尔值比较，[] == true;//false，空数组转为""再转为0，逻辑值true直接转为1；
2. 数组符串比较，[1,2,3] == '1,2,3' // true，[1,2,3]转换成字符串"1,2,3"最后跟字符串比较；
3. 字符串和数字进行比较，'1' == 1 // true，字符串转为数字后与数字1比较；
4. 字符串和布尔值进行比较，'1' == true; // true，字符串转为数字1，布尔值转为数字1，比较相等；
5. 布尔值和数字比较，true == 1;/ true，布尔值转为数字1再比较；

有趣的事情是[] == false和![] == false的结果都是true，第一个[]数组转为""再转成0，false直接转为0，比较相等；第二个同理，!符号优先级高所以先执行，所以式子就变成(![]) == false，估计就能理解了！另外有几个比较的特殊undefined == null // true、NaN == XXX //NaN和任意类型都不等（包括自己）。

3.显示转换

使用 !! 转换布尔类型

let hs = "";
console.log(!!hs); //false
hs = 0;
console.log(!!hs); //false
hs = null;
console.log(!!hs); //false
hs = new Date("2020-2-22 10:33");
console.log(!!hs); //true
hs = [];
console.log(!!hs); //false
hs = {};
console.log(!!hs); //false

Array

数组是多个变量值的集合，数组是Array 对象的实例，Array原型上系统预设很多方式可以供我们调用。

1.数组的声明

console.log(new Array(1, '花森', 'hs')); //[1, "花森", "hs"]
const array = ["花森", "huasen"];
const array = [["花森","hs"], ["猪琦","zhuqi"]];
console.log(array[1][0]); // 猪琦

let hs = Array.of(3);
console.log(hs); // [3]
hs = new Array(3); // 创建长度为3的空数组
console.log(hs);

hs = Array.of(1, 2, 3);
console.log(hs); //[1, 2, 3]

2.类型检测isArray

console.log(Array.isArray([1, "花森", "hs"])); //true
console.log(Array.isArray(9)); //false

3.类型转换

数组2字符串

大部分数据类型都可以使用.toString() 函数转换为字符串

console.log(([1, 2, 3]).toString()); // 1,2,3 toSring()

console.log(String([1, 2, 3])); //1,2,3 构造函数

console.log([1, 2, 3].join("-"));//1-2-3 join()

伪数组2数组

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象，伪数组不具备数组中的某一个方法，一般使用时都要转为数组再进行使用。

let str = '花森酱';
console.log(Array.from(str)); //["花", "森", "酱"]

let user = {
  0: '花森酱',
  '1': 18,
  length: 2
};
console.log(Array.from(user)); //["花森酱", 18]

let divs = document.querySelectorAll("div");
let hs = [...divs]

字符串2数组

使用join，将数组中的元素连接成字符串。

let price = "99,78,68";
console.log(price.split(",")); //["99", "78", "68"]

4.数组合并拆分

展开语法

使用展开语法来合并数组相比 concat 要更简单，使用... 可将数组展开为多个值。

et a = [1, 2, 3];
let b = ['a', '花森', ...a];
console.log(b); //["a", "花森", 1, 2, 3]

concat

concat方法用于连接两个或多个数组，返回是一个数组，元素是值类型的是复制操作，如果元素是引用类型还是指向同一对象，属于浅拷贝的操作。

let arr = ["hs", "花森"];
let hs = [1, 2];
let cms = [3, 4];
console.log(arr.concat(hs, cms)); //["hs", "花森", 1, 2, 3, 4]

copyWithin

使用 copyWithin 从数组中复制一部分到同数组中的另外位置，语法说明array.copyWithin(target, start, end)，target复制到的索引地址位置，start元素复制的开始索引，end结束的索引。

const arr = [1, 2, 3, 4,5];
console.log(arr.copyWithin(2, 0, 2)); //[1, 2, 1, 2, 5]

5.解构赋值

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构。

//数组使用
let [name, url] = ['花森', 'hs'];
console.log(name);

// 解构函数返回值
function huasen() {
	return ['hs', '花森'];
}
let [a, b] = huasen();
console.log(a); //hs

// 函数参数解构
function hs([a, b], c) {
  console.log(a, b);
  console.log(c);
}
hs(["花森", "hs"], "猪琦");

// 解构数组
let [a, ...b] = ['花森', 'hs', '猪琦'];
console.log(b);  // ['hs', '猪琦'];

// 解构字符串
"use strict";
const [...a] = "huasenjio";
console.log(a); //Array(9)

// 解构单个变量
let [,url]=['花森','huasenjio'];
console.log(url);//huasenjio

6.操作元素

// 数组追回元素
let arr = [1, "花森", "hs"];
arr[arr.length] = "huasenjio";
console.log(arr); //[1, "花森", "hs", "huasenjio"]

// push批量压入元素，改变数组长度，返回值是元素的数量。
let arr = [1, "花森", "hs"];
arr.push("huasenjio","zhuqi");
console.log(arr); //[1, "花森", "hs", "huasenjio","zhuqi"]

// pop尾弹一个元素，改变数组长度，返回被弹出的元素。
let arr = [1, "花森", "hs"];
arr.pop();
console.log(arr); //[1, "花森"]

// shift头弹一个元素，改变数组长度，返回头弹出的元素。
let arr = [1, "花森", "hs"];
console.log(arr.shift());
console.log(arr); //["花森","hs"]

// unshift头插一个元素，改变数组长度，返回值是元素的数量。
let arr = [1, "花森", "hs"];
console.log(arr.unshift("爱"));
console.log(arr); //["花森","hs"]

// fill填充数组，返回填充完成的数组。
console.log(new Array(4).fill("hs")); //["hs", "hs", "hs", "hs"]

7.数组截取

slice截取

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。不设置参数默认截取整个数组。

let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 3)); // [1,2] [开始下标，结束下标]

let str = "0123456";
console.log(str.slice(1, 3)); // 12 [开始下标，结束下标）

splice截掉

使用 splice 方法可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。

// [开始下标,删除数量]
let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 3)); //返回删除的元素 [1, 2, 3] 
console.log(arr); //删除数据后的原数组 [0, 4, 5, 6]

// 通过修改length删除最后一个元素
let arr = ["1", "2"，"3"，"4"，"5"];
arr.length = arr.length - 1;
console.log(arr);

// [开始下标，删除参数，删除位置的新元素]
let arr = [0, 1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 3, 8)); //返回删除的元素 [1, 2, 3]
console.log(arr); //删除数据后的原数组 [0, 4, 5, 6]

// 两个交换位置小案例
function move(array, before, to) {
  if (before < 0 || to >= array.length) {
    console.error("指定位置错误");
    return;
  }
  const newArray = [...array];
  const elem = newArray.splice(before, 1);
  newArray.splice(to, 0, ...elem);
  return newArray;
}
const array = [1, 2, 3, 4];
console.table(move(array, 0, 3));

8.数组清空

// 更改指针法
let user = [{ name: "hs" }, { name: "花森" }];
let cms = user;
user = [];
console.log(user); // []
console.log(cms); // [{...},{...}]

// 修改长度法
let user = [{ name: "hs" }, { name: "花森" }];
user.length = 0;
console.log(user);

// splice方法删除所有数组元素
let user = [{ name: "hs" }, { name: "花森" }];
user.splice(0, user.length);
console.log(user);

9.元素查找

indexOf

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1，indexOf使用严格模式去匹配，找到则返回第一次出现的下标。

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.indexOf(2)); // 2 从前往后查找第一个出现2的下标

// 指定索引向后进行查找
let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.indexOf(2, 3)); //4 从第二个元素开始向后查找

lastIndexOf

使用 lastIndexOf 从后向前查找元素出现的位置，具体使用参考indexOf方法使用。

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.lastIndexOf(2)); // 4 从后查找2出现的位置

includes

使用 includes 查找字符串返回值是布尔类型更方便判断

let arr = [7, 3, 2, 6];
console.log(arr.includes(8)); //true

find

find 方法找到后会把值返回出来，找不到则返回值为undefined，返回第一次查找到的词就停止查找。

let arr = [
  { name: "猪琦", sex: "女" },
  { name: "花森", sex: "男" },
  { name: "皮卡丘", sex: "动物" },
];

let find = arr.find(function (item) {
  return item.name == "花森";
});

console.log(find); // {name: "花森", sex: "男"}

10.数组顺序

reverse

对数组进行反转输出

let arr = [1, 4, 2, 9];
console.log(arr.reverse()); //[9, 2, 4, 1]

sort

sort方法每次使用两个值进行比较，Array.sort((a,b) => a-b)，返回负数a排在b的前，从小到大排序；返回正数则b排在a的前面，返回0时不动。

// 默认从小到大排序
let arr = [1, 4, 2, 9];
console.log(arr.sort()); //[1, 2, 4, 9]

// 按某值进行排序
console.log(arr.sort(function (v1, v2) {
	return v2 - v1;
})); //[9, 4, 2, 1]

11.数组拓展函数

every一假则假

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真，遇到一个不满足条件就立即退出，不再继续遍历下去，最终返回布尔值。

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 },
];
const resust = user.every((item, index, arr) => {
  console.log(item); // 元素
  console.log(index); // 下标
  console.log(arr); // 原数组
  item.js >= 60;
});
console.log(resust);

some一真则真

使用 some 函数可以递归的检测元素，如果有一个返回true。

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 },
];
const resust = user.some((item, index, arr) => {
  console.log(item); // 元素
  console.log(index); // 下标
  console.log(arr); // 原数组
  item.js >= 60;
});
console.log(resust);

filter

按一定条件筛选元素并组成新数组返回

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 },
];
const resust = user.filter((item, index, arr) => {
  console.log(item); // 元素
  console.log(index); // 下标
  console.log(arr); // 原数组
  return item.js > 60; // 过滤取到js成绩大于60的元素并返回一个新的数组
});
console.log(resust);

map

将遍历数组，遍历过程中执行代码，最后返回一个元素添加到新数组中并返回。

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 },
];
const resust = user.map((item, index, arr) => {
  console.log(item); // 元素
  console.log(index); // 下标
  console.log(arr); // 原数组
  item.js > 60;
  return item.js + "分数";
});
console.log(resust);

reduce

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始，存在如下参数。

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 },
];
const resust = user.reduce((pre, cur, index, arr) => {
  console.log(cur); // 当前元素
  console.log(index); // 下标
  console.log(pre); // 上一个遍历的元素
  return "返回值"; // 返回值将作为pre参数
}, 0); // 0指定pre的初始值

//计算所有js成绩的和
const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 },
];
let t = 0;
const resust = user.reduce((pre, cur, index, arr) => {
  console.log(cur); // 当前元素
  console.log(index); // 下标
  console.log("pre", pre); // 上一个遍历的元素

  return (pre += cur.js); // 返回值将作为pre参数
}, 89);

迭代器

数组中可以使用多种迭代器方法

keys

通过迭代对象获取索引，可通过next()一步一步向下拿到全部索引并执行操作。

const hs = ["花森", "huasen"，"猪琦"];
const keys = hs.keys(); // 获得迭代器对象
console.log(keys.next()); // {value: 0, done: false}
console.log(keys.next()); // {value: 1, done: false}

// 需要把上面两行console.log去掉，因为上面两行迭代器就已经遍历到最后了，所以影响输出效果。
for (const key of keys) {
  console.log(key);
}

values

通过迭代对象获取值，可通过next()一步一步向下拿到全部索引并执行操作。

entries

返回数组所有键值对的迭代器，可以使用解构加for-of循环获取数据。

const arr = ["a", "b", "c", "花森"];
for (const [key, value] of arr.entries()) {
  console.log(key, value);
}

Symbol

Symbol 的值是唯一的数据类型，防止使用属性名冲突而产生，比如向第三方对象中添加属性就有可能产生变量名冲突，而且Symbol不可以添加属性。

1.变量声明

let hs = Symbol();
let edu = Symbol("传入描述Symbol的字符串，有利于分辨Symbol！");
console.log(hs); // symbol
console.log(edu); // Symbol(传入描述Symbol的字符串，有利于分辨Symbol！)
console.log(edu.description) // 获取描述
console.log(hs == edu); //false

2.查找Symbol.for

根据描述获取到唯一Symbol变量，如果不存则新建一个Symbol对象，使用Symbol会被系统登记，而使用Symbol不会被系统登记。

let hs = Symbol.for("传入描述Symbol的字符串，有利于分辨Symbol！");
let edu = Symbol.for("传入描述Symbol的字符串，有利于分辨Symbol！");
console.log(hs == edu); // true

3.登记记录Symbol.keyFor

返回Symbol登记的描述，如果没有找到则返回undefined

let hs = Symbol.for("花森");
console.log(Symbol.keyFor(hs)); //花森

4.操作要点

Symbol可以保证对象属性的唯一，Symbol的声明和访问使用[]的形式进行操作，不能使用.，因为点是操作字符串属性的写法。

let symbol = Symbol("花森");
let obj = {
  [symbol]: "huasenjio"
};
console.log(obj[symbol]); //huasenjio

5.实例操作

覆盖耦合

通过Symbol作为键值，每一个Symbol均是唯一，所以存入数据不会因为key值相同造成覆盖的可能。

class Cache {
  static data = {};
  static set(name, value) {
    this.data[name] = value;
  }
  static get(name) {
    return this.data[name];
  }
  }

  let user = {
    name: "花森",
    key: Symbol("343434"),
  };

  let cart = {
    name: "猪琦",
    key: Symbol("121212"),
  };
  Cache.set(user.key, user);
  Cache.set(cart.key, cart);
  console.log(Cache.get(user.key));
  console.log(Cache.data);

遍历属性

Symbol 不能使用 for/in和for/of 遍历操作，遍历时Symbol属性默认被忽略，但是可以通过Object.getOwnPropertySymbols，遍历到对象中的所有Symbol属性。

let symbol = Symbol("导航");
let user = {
  name: "花森",
  [symbol]: "huasenjio",
};

for (const key of Object.getOwnPropertySymbols(user)) {
  console.log(key);
}
let symbol = Symbol("导航");
let user = {
  name: "花森",
  [symbol]: "huasenjio",
};

for (const key of Object.getOwnPropertySymbols(user)) {
  console.log(key);
}

变量保护

使用symbol作为属性名，起到变量保护的作用，无法被遍历访问到，可以通过对外函数返回的方式去访问。

const site = Symbol("网站名称");
class User {
  constructor(name) {
    this[site] = "森酱";
    this[name] = name;
  }
  getName() {
    return `${this[site]}-${this.name}`;
  }
}
const hs = new User("hs");
console.log(hs.getName());
console.log(hs.site); // 无法访问到森酱
for (const key in hs) {
  console.log(key);
}

Set

无论是基本类型还是对象引用，都不能存入重复的元素，只可以保存值而没有键名；严格类型检测入字符串不等于数值型数字；元素唯一。

1.变量声明

使用数组作为初始化的数据，如果存在多个相同值则仅会保存第一个值，其余的全部忽略。

let hs = new Set(["花森", "hs", "1", 1]); 
console.log(hs.values()); //{"花森", "hs", "1" ,1}

2.常用操作

add添加元素

let hs = new Set();

hs.add('huasen');

size获取数量

let hs = new Set(['huasen', '花森']);
console.log(hs.size); //2

has检测元素

let hs = new Set(['huasen', '花森']);
console.log(hs.has("花森")); // true

delete删除

console.log(hs.delete("hdcms")); //true

clear清空元素

hs.clear();

3.数组转换

const set = new Set(["hs", "花森"]);
console.log([...set]) // 点语法
console.log(Array.from(set)); // array.from

4.数组去重

console.log([...new Set("hhssjjoo")].join(""));//hsjo

5.遍历数据

let arr = [7, 6, 2, 8, 2, 6];
let set = new Set(arr);
//使用forEach遍历
set.forEach((item,key) => console.log(item,key)); // item 和 value一致

//使用for-of
for (const iterator of set) {
	console.log(iterator);
}

6.交集

通过数组的过滤函数filter和has查询，

let hs = new Set(["1", "8"]);
let zhuqi = new Set(["2", "8"]);
let newSet = new Set([...hs].filter((item) => zhuqi.has(item))); // 返回zhuqi数据中也有的数
console.log(newSet); //{"8"}

7.差集

let hs = new Set(["1", "8"]);
let zhuqi = new Set(["2", "8"]);
let newSet = new Set([...hs].filter((item) => !zhuqi.has(item))); // 返回zhuqi数据中没有的数
console.log(newSet); 

8.交集

let hs = new Set(["1", "8"]);
let zhuqi = new Set(["2", "8"]);
let newSet = new Set([...hs,...zhuqi]); // 返回zhuqi数据中没有的数
console.log(newSet); 

9.WeakSet

WeakSet结构同样不会存储重复的值，储存的元素必须是对象类型，垃圾回收机制不考虑WeakSet，当一个变量被引用时，内存中会有一个引用计数器会进行加一，但对于weakset引用，计数器不会加一，所以weakset不管是否在使用变量都均会被删除，是属于弱引用的范畴，weakset没有keys（），values（），entries（）和size等方法，且不能被遍历！

声明

new WeakSet(["hs", "zhuqi"]); //Invalid value used in weak set

new WeakSet("hdcms"); //Invalid value used in weak set 

new WeakSet([{ name: "huasen" }]); //正确

基本操作

const hs = new WeakSet();
const arr = ["hdcms"];

//添加操作
hd.add(arr);
console.log(hs.has(arr));

//删除操作
hd.delete(arr);

//检索判断
console.log(hs.has(arr));

Map

Map是一组键值对的结构，用于解决以往不能用对象做为键的问题，具有极快的查找速度，函数、对象、基本数据类型均可以作为键和值。其中键是对象则保存的是内存地址，如果值相同但内存地址不同也会被视为两个键值对。

1.声明定义

可以接受数组作为参数，该数组的成员是一个表示键值对的数组。

let m = new Map([
  ["h", "花"],
  ["s", "森"],
]);

console.log(m.get("h")); //花

2.基本操作

let m = new Map([
  ["h", "花"],
  ["s", "森"],
]);
// 获取键值对的数量
console.log(m.size);

// 读取元素
console.log(m.get("h")); //花

// 删除元素
console.log(m.delete("h")); //花

// 清空map
console.log(map.clear());

3.遍历数据

可以使用keys/values 函数遍历键与值

let hs = new Map([["h", "花"], ["s", "森"]]);
for (const key of hs.keys()) {
  console.log(key);
}
for (const value of hs.values()) {
  console.log(value);
}

4.数组转换

1. […map];
2. Array.from(map);

5.WeabMap

详细请参考WeabSet的用法

函数进阶

函数是将复用的代码块封装起来的模块，js中的函数也是对象，可以通过构造函数Function创建实例，全域定义的函数是属于window对象中，容易造成覆盖的问题，使用let/const定义的参数时不会压入window对象中。标准声明的函数优先级更高，解析器会优先执行提取放在代码树的顶端，所以同意作用域下函数声明的位置顺序不限制。

1.声明定义

// 构造函数的方式
let hs = new Function("title", "console.log(title)");
hd('花森酱');

// 标准语法的方式
function hs(num) {
	return ++num;
}
console.log(hs(3));

// es6的箭头函数
let huasen = () => {
  
}

// 简写形式
user = {
  setName() {
    
  }
}

2.匿名函数

匿名函数需要赋值给某一个变量，而且一定需要以;结尾，匿名函数的执行者是window对象即内部的this是指向window对象，严格模式下this指向undefined而不是window对象。

let hs = function () {
  console.log(this); // window对象
};
hs();

[].map(()=>{})

3.立即执行函数

立即执行函数指函数定义时立即执行，可以定义私有作用域防止污染全局作用域。

"use strict";
(function () {
    var web = 'hs';
})();
console.log(web); //web is not defined

4.函数参数

形参实参

调用函数时传入的变量叫做实参，定义函数参数是的变量叫做形参。当形参的数量大于实参时，没有被赋值的形参就被定义为undefined；实参的数量大于形参时，多余的实参将被忽略并且不会报错。

// n1,n2 为形参
function sum(n1, n2) {
	return n1+n2;
}

// 参数 2,3 为实参
console.log(sum(2, 3)); //5

默认参数

通常为形参设置默认值

// 无序考虑兼容
function avg(total, year) {
  year = year || 1; // 赋值
  return Math.round(total / year);
}
console.log(avg(2000, 3));

//es6写法需要考虑兼容性
function avg(total, year = 1) {
  return Math.round(total / year);
}
console.log(avg(2000, 3));

回调函数

函数调用时可以传递函数参数，一般用于回调函数，执行调用的函数a时，默认执行传入的函数，这个场景叫做回调函数。

// 箭头函数演示
[].filter(()=> {})
// 普通函数
[].filter(function(){})

argument

arguments 是函数获得到所有参数集合，获得传入参数的集合。

// 普通参数
let hs = function () {
  console.log(arguments); // 函数参数
};
hs(1, 2, 3, 4);

// 对参数进行求和
function sum() {
  return [...arguments].reduce((total, num) => {
    return (total += num);
  }, 0);
}
console.log(sum(2, 3, 4, 2, 6)); //17

5.递归调用

递归指函数内部调用自身的方式，主要用于数量不确定的循环操作，必须有要结束循环的条件否则会陷入死循环，一般慎用递归调用，容易造成内存泄露的风险。

function factorial(sum) {
  if (sum <= 1) {
    return sum;
  } else {
    return sum * factorial(--sum);
  }
}
console.log(factorial(4));

6.标签函数

function hd(str, ...values) {
  console.log(str); //["站点", "-", "", raw: Array(3)]
  console.log(values); //["花森", "huasenjio.top]
}
let name = "花森",
    url = "huasenjio.top";
hd`站点${name}-${url}`;

作用域

作用域链只向上查找，找到全局window即终止。当在每一个对象中引用了一个变量是，如果挡墙作用域不存在就往上级作用域查找，[].toString()，可以调用输出字符串，细心的小伙伴可能发现，数组的原型根本没有toString方法，但是Object上面存在toString方法。所以查找toString变量的顺序是先去找数组的原型，再去找在Object上的原型，直到window全局，如果还没有找到则报错。

console.log(name); // 直接这样输出并不会报错因为window上默认存在name属性且为空
console.log(n); // n is not defined 因为window上面没有n属性

对象

面向对象程序设计成为OOP，对象是属性和方法的集合体，内部的复杂逻辑代码被隐藏，仅仅暴露少量代码给外界，更改对象内部的复杂逻辑不会对外部造成影响和抽象，继承是通过代码复用减少冗余，根据不同形态的对象产生不同的结果称之为多态。

1.声明定义

let obj = {
  name: 'huasen',
  get:function() {
  	return this.name;
  }
}
console.log(obj.get()); //huasen

2.属性管理

基本操作

let user = {
  name: "huasen",
  ["my-title"]: "花森导航",
};
console.log(user.name); // 使用点语法
console.log(user["name"]); // 使用数组形式
console.log(user["my-title"]); // 如果属性名不是合法变量就必须使用括号的形式

// 添加属性
user.a = "A" // 使用点语法
user["b"] = "B" // 使用数组形式

// 删除属性
delete user.name;

检测属性

1）hasOwnProperty检测对象自身是否包含指定的属性，不检测原型链上继承的属性。

let obj = { name: '花森'};
console.log(obj.hasOwnProperty('name')); //true

2）使用 in 可以在原型对象上检测。

let obj = {name: "花森"};
let hs = {
  web: "huasenjio"
};

//设置hs为obj的新原型
Object.setPrototypeOf(obj, hs);
console.log(obj);

console.log("web" in obj); //true 说明web属性在obj的原型链上
console.log(obj.hasOwnProperty("web")); //false

assign属性合并

使用Object.assign静态方法进行从一个或多个对象复制属性，并将属性合并，但是是浅拷贝。

"use strict";
let hs = { a: 1, b: 2 };
hd = Object.assign(hs, { f: 1 }, { m: 9 });
console.log(hs); //{a: 1, b: 2, f: 1, m: 9}

动态属性

对象属性可以通过表达式计算定义，动态设置属性或者执行方法时很美妙。

let id = 0;
const user = {
  [`id-${id++}`]: id,
  [`id-${id++}`]: id,
  [`id-${id++}`]: id
};
console.log(user);

3.引用特性

对象和函数一样是引用数据类型，赋值操作相当于复制并赋予地址，其实还是引用同一块内存地址。

let user = {
  name: "huasen",
  ["tit-le"]: "花森导航",
};
let per = user;
console.log(per);
per.name = "猪琦";
console.log(user); // user中也被修改了

// 函数参数同样也是赋值地址
(function () {
  arguments[0]["tit-le"] = "笔录";
})(user);

4.对象转换

对象直接参与计算时，系统根据计算的场景在string、number、default之间转换。如果场景需要字符串类型，则对象执行toString()后执行valueOf获取到字符串，如果需要字符串型，先执行valueOf获得数值后执行toString获得字符串。

let hs = {
  name: "花森",
  num: 1,
  valueOf: function () {
    console.log("valueOf");
    return this.num;
  },
  toString: function () {
    console.log("toString");
    return this.name;
  },
};
console.log(hs + 3); //valueOf 4
console.log(`${hs}导航`); //toString 花森导航

5.解构赋值

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构，用法与数组的解构相似，建议解构使用var/let/const声明，否则严格模式下会报错。

// 对象的解构
let info = {name:'花森',url:'huasenjio'};
let {name:n,url:u} = info // 重新定义变量名为n u
console.log(n); 

// 如果属性名与变量相同可以省略属性定义
let {name:n,url:u} = {name:'花森',url:'huasenjio'};

// 函数返回值解构到变量
function hs() {
  return {
    name: '花森',
    url: 'huasenjio'
  };
}
let {name: n,url: u} = hs();
console.log(n);

// 函数传参
"use strict";
function hd({ name, age }) {
  console.log(name, age); //花森 18
}
hd({ name: "花森", age: 18 });

6.默认值

let [name, site = '花森'] = ['hs'];
console.log(site); //花森

7.遍历对象

keys/values/entries

const hs = {
  name: "花森",
  age: 10
};
console.log(Object.keys(hs)); //["name", "age"] 获取对象属性名组成的迭代器
console.log(Object.values(hs)); //["花森", 10] 获取对象属性组成的迭代器
console.table(Object.entries(hs)); //[["name","花森"],["age",10]] 两个迭代器

for/of遍历迭代器

For-of是不可以直接遍历对象，它是用于遍历迭代对象。

const hd = {
  name: "后盾人",
  age: 10
};
for (const key of Object.keys(hd)) {
  console.log(key);
}

8.对象的拷贝

浅拷贝

// for-in的方式遍历对象进行浅拷贝
let obj = {name: "花森"};

let hs = {};
for (const key in obj) {
  hs[key] = obj[key];
}
hs.name = "huasen";
console.log(hs);
console.log(obj);

// Object.assign进行简单的浅拷贝但同名属性将会被覆盖
Object.assign(hs, obj);
hs.name = "huasen";
console.log(hs);
console.log(obj);

// 展开语法
let hs = { ...obj };

深拷贝

浅拷贝不会将深层的数据复制，深拷贝完全就是复制出一个新的对象，两个对象完全独立。

let obj = {
  name: "花森",
  user: {
    name: "hs",
  },
  data: [],
};

function copy(object) {
  let obj = object instanceof Array ? [] : {}; // 判断是数组或者对象进行声明变量
  // 解构获得键值对
  for (const [k, v] of Object.entries(object)) {
    obj[k] = typeof v == "object" ? copy(v) : v; // 如果当前属性是引用类型则递归调用，基础数据类型则直接赋值。
  }
  return obj; // 返还对象
}

let huasen = copy(obj);
huasen.data.push("zhuqi");
console.log(JSON.stringify(huasen, null, 2));
console.log(JSON.stringify(obj, null, 2));

9.构造函数

工厂模式

普通函数中返还一个相同结构的对象，修改工厂模式的方法会影响所有的同类对象，且声明不需要new关键词。

function stu(name) {
  return {
    name,
    show() {
      console.log(this.name); // this代表函数调用者
    }
  };
}
const lisi = stu("李四");
lisi.show();
const hs = stu("huasen");
hs.show();

构造函数

构造函数的函数名首字母需要大写的命名规范，this指向当前创建的对象，系统会自动返回this关键词，但也可以收到return返回，手动返回必须是对象，不然setter方法会屏蔽且需要new关键词生成对象。

function Student(name) {
  this.name = name;
  this.show = function() {
    console.log(this.name);
  };
  // return this; // 系统会自动返回
}
const lisi = new Student("李四");
lisi.show();
const xj = new Student("王五");
wangwu.show();

10.属性特征

查看特征

使用 Object.getOwnPropertyDescriptor查看对象属性的描述

let obj = {
  name: "花森",
  user: {
    name: "hs",
  },
  data: [],
};
console.log(
  JSON.stringify(Object.getOwnPropertyDescriptor(obj, "name"), null, 2)
);
// {
//   "value": "花森",
//   "writable": true,
//   "enumerable": true,
//   "configurable": true

设置属性

使用Object.defineProperty 方法修改属性特性

// 禁止遍历修改删除
"use strict";
const user = {
  name: "花森",
  age: 18
};
Object.defineProperty(user, "name", {
  value: "花森",
  writable: false,
  enumerable: false,
  configurable: false
});

// 一次性修改多个属性
Object.defineProperty(user, {
  name: {value: "花森", writable: false},
  age: {value: 18,enumerable: false}
});

禁止添加

Object.preventExtensions 禁止向对象添加属性，Object.isExtensible(user)可以判断是否可以向属性中添加属性。

"use strict";
const user = {
  name: "花森"
};
Object.preventExtensions(user);
user.age = 18; //Error

封闭对象

Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为configurable: false，可以通过isSealed检测是否发生封闭。

冻结对象

Object.freeza 冻结的对象不允许添加、删除、修改、writable、configurable都会被标记为false。

"use strict";
const user = {
  name: "花森"
};
Object.freeze(user);
user.name = "花森"; //Error

12.属性访问器

getter方法用于获得属性值，setter方法用于设置属性，这是JS提供的存取器特性即使用函数来管理属性。用于避免错误的赋值，需要动态检测值的改变。属性只能在访问器和普通属性选择一个，不能共同存在。

getter/setter

"use strict";
const user = {
  data: { name: "花森", age: null },
  set age(value) {
    if (typeof value != "number" || value > 100 || value < 10) {
      throw new Error("年龄格式错误");
    }
    this.data.age = value;
  },
  get age() {
    return `年龄: ${this.data.age}`;
  },
};
user.age = 18; // 不能随便赋值
console.log(user.age);

内部私有属性

"use strict";
const user = {
  get name() {
    return this._name;
  },
  set name(value) {
    if (value.length <= 3) {
      throw new Error("用户名不能小于三位");
    }
    this._name = value;
  },
};
user.name = "花森酱酱";
console.log(user.name);

访问器描述符

使用 defineProperty 定义私有属性

// 函数写法
function User(name, age) {
  let data = { name, age };
  Object.defineProperties(this, {
    name: {
      get() {
        return data.name;
      },
      set(value) {
        if (value.trim() == "") throw new Error("无效的用户名");
        data.name = value;
      }
    },
    age: {
      get() {
        return data.name;
      },
      set(value) {
        if (value.trim() == "") throw new Error("无效的用户名");
        data.name = value;
      }
    }
  });
}

// class语法糖写法
"use strict";
const DATA = Symbol();
class User {
  constructor(name, age) {
    this[DATA] = { name, age };
  }
  get name() {
    return this[DATA].name;
  }
  set name(value) {
    if (value.trim() == "") throw new Error("无效的用户名");
    this[DATA].name = value;
  }
  get age() {
    return this[DATA].name;
  }
  set age(value) {
    if (value.trim() == "") throw new Error("无效的用户名");
    this[DATA].name = value;
  }
}

// 测试代码
let hs = new User("花森", 18);
console.log(hs.name);
hs.name = "huasen";
console.log(hs.name);
console.log(hs);

13.代理拦截

代理（拦截器）是整个对象的访问控制，setter/getter 是对单个对象属性的控制，而代理是对整个对象的控制。

1. 读写属性时代码更简洁；
2. 对象的多个属性控制统一交给代理完成；
3. 严格模式下set必须返回布尔值；

let user = {
  data: { name: "花森", sex: 18 },
  title: "函数代理",
};

("use strict");
// 为对象建立代理
const proxy = new Proxy(user, {
  get(obj, property) {
    console.log("getter方法执行了");
    return obj[property];
  },
  set(obj, property, value) {
    console.log("setter方法执行了");
    obj[property] = value;
    return true;
  },
});
// 使用代理修改属性
proxy.age = 10;
// 使用代理获得属性
console.log(proxy.name);

14.JSON

json是广泛运用前后端数据交换的格式，具有轻量级且易于阅读和编写的特点。

1. json是数据格式替换xml的最佳方式
2. 前后端交互数据的主要格式；
3. json标准中要求双引号包裹属性；

let lessons = [
  {
    "title": '媒体查询',
    "category": 'css',
    "click": 199
  },
  {
    "title": 'FLEX',
    "category": 'css',
    "click": 12
  },
  {
    "title": 'MYSQL',
    "category": 'mysql',
    "click": 89
  }
];

console.log(lessons[0].title);

序列化

序列化是将 json 转换为字符串，一般用来向其他语言传输使用。

let lessons = [
  {
    "title": '媒体查询',
    "category": 'css',
    "click": 199
  },
  {
    "title": 'FLEX',
    "category": 'css',
    "click": 12
  },
  {
    "title": 'MYSQL',
    "category": 'mysql',
    "click": 89
  }
];
// 使用JSON字符串序列化
console.log(JSON.stringify(lessons)); // 值 属性 tab数

反序列化

使用 JSON.parse 将字符串 json 解析成对象

console.log(JSON.parse(jsonStr));

事件

文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件，JS为不同的事件定义的类型，事件目标是指产生时间的对象，事件具有冒泡捕获的特性，一个行为可能会造成多个事件的触发，处理事件的一段代码称为处理程序。

1.事件绑定

html中绑定

可以在html元素上设置事件处理程序，浏览器解析后会绑定到DOM属性中。

<button onclick="alert(`huasen`)">huasen</button>

dom绑定

可以将事件处理程序绑定到DOM属性中，使用setAttribute方法设置事件处理程序无效，属性名称区分大小写。

<div id="app">huasen</div>
<script>
  const app = document.querySelector('#app')
  app.onclick = function () {
    this.style.color = 'red'
  }
</script>

事件监听

建议使用新的事件监听绑定方式，transtionend / DOMContentLoaded 等事件类型只能使用事件监听addEventListener 处理，同一个事件类型设置多个事件处理程序则会按顺序先后执行，同样可以给为添加元素添加事件。具有以下参数方法：

1）参数一，事件类型；

2）参数二，事件处理程序；

3）参数三，制定的选项，once仅执行一次，capture：true/false捕获阶段，passive：true永远不调用preventDefault()阻值默认行为；

2.事件对象

执行事件处理程序时，会产生当前事件相关信息的对象，即为事件对事。系统会自动做为参数传递给事件处理程序，事件对象常用属性如下：

3.冒泡捕获

冒泡行为

标签元素是嵌套的，在一个元素上触发的事件，同时也会向上执行父级元素的事件处理程序，一直到HTML标签元素。大部分事件都有冒泡特性，但像focus事件则不会发生冒泡。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
    <style>
      #app {
        background: #34495e;
        width: 300px;
        padding: 30px;
      }
      #app h2 {
        background-color: #f1c40f;
        margin-right: -100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>花森酱</h2>
    </div>
    <script>
      const app = document.querySelector("#app");
      const h2 = document.querySelector("h2");
      app.addEventListener("click", (event) => {
        console.log(`执行事件的节点:${event.currentTarget.nodeName}`);
        console.log(`触发节点:${event.target.nodeName}`);
      });
      h2.addEventListener("click", () => {
        console.log(`执行事件的节点:${event.currentTarget.nodeName}`);
        console.log(`触发节点:${event.target.nodeName}`);
      });
    </script>
  </body>
</html>

阻止冒泡

冒泡过程中的任何事件处理程序中，都可以执行 event.stopPropagation() 方法阻止继续进行冒泡传递，仅会阻止当前代码段的程序，但可以通过event.stopImmediatePropagation()阻止相同事件的冒泡行为。

事件捕获

事件执行顺序为 捕获 > 事件目标 > 冒泡阶段执行，在向下传递到目标对象的过程即为事件捕获，通过设置第三个参数为true或{ capture: true } 在捕获阶段执行事件处理程序。

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
    <style>
      #app {
        background: #34495e;
        width: 300px;
        padding: 30px;
      }
      #app h2 {
        background-color: #f1c40f;
        margin-right: -100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>
        huasenjio
        <span>花森</span>
      </h2>
    </div>
    <script>
      const app = document.querySelector("#app");
      const h2 = document.querySelector("h2");
      const span = document.querySelector("span");
      app.addEventListener(
        "click",
        (event) => {
          console.log("底部  事件");
        },
        { capture: true }
      );
      h2.addEventListener("click", (event) => {
        console.log("中间  事件");
      });
      span.addEventListener("click", (event) => {
        console.log("上面  事件");
      });
    </script>
  </body>
</html>