前端程序员需要了解的JavaScript，中卷，JavaScript

前言：这一卷主要讲js基本类型以及如何使用

目录

基本类型：

一：判断类型

二：字符串

模板字符串实例：

模板字符串之标签模板函数 ：

 字符串身上的函数方法：

字符串类型转换：

三：布尔类型

隐式转换

四：Number

数值类型方法：

 五：Math

数学方法： 

六：Date

七：数组*****

数组的基础方法：

数组展开运算符：

 数组查找元素功能

数组的排序功能：

数组的遍历功能：

数组的检索，过滤和叠加功能：

 数组的去重功能：

八：对象******

对象的基本功能：

数组和对象的解构赋值对比：

数组的解构赋值：

对象的解构赋值：

对象的属性判断是否存在

对象的复杂功能：

对象的计算属性，拷贝：

对象转数组：

 对象的深浅拷贝：

对象的高级使用：

1：创建对象：

2：属性的特性：

3：属性的访问器，是对象身上的功能

4：代理

JSON：一种通用的便于阅读的代码格式

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

 反序列化：使用 JSON.parse 将字符串 json 解析成对象

简短总结：

数组总结：

对象总结;

---

欢迎阅读~

---

基本类型：

一：判断类型

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

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

需要声明的是 typeof判断数组的时候会是object，

需要判断是不是数组可以使用

console.log( a  instanceof  Array)  结果是布尔值

二：字符串

字符串定义：let content = ''

字符串拼接：建议使用模板字符串，${}里面放变量名，也可以放函数，js运算表达式

let year= '2022';
console.log(`今年是${url}年`);

模板字符串实例：

模板字符串里面的变量可以执行js函数

let lessons = [
	{title: '媒体查询响应式布局'},{title: 'FLEX 弹性盒模型'},{title: 'GRID 栅格系统'}
];

function template() {
  return `

      ${lessons.map((item)=>`
          
${item.title}
      `).join('')}
  
`;
}
document.body.innerHTML = template();

模板字符串之标签模板函数 ：

标签模板是提取出普通字符串与变量，交由标签函数处理

let lesson = 'css';
let web = 'ayi';
tag `访问${web}学习${lesson}前端知识`;    //调用了tag函数，传入了模板字符串参数，tag函数将参数分为了两种

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

 字符串身上的函数方法：

console.log("houdunren.com".length)    使用length属性可以获取字符串长度

a.toUpperCase()  将字符转换成大写格式
a.trim()  去掉空格
a.charAt(3)   获取索引为3的字符串值  也可以用【3】
a.slice()  这个截取最好用，含头不含尾，如果没有第二个参数，则直接截取到最后，-1是倒数的第一个
a.substr（） 这个截取方法，第二个参数指定获取字符数量
a.indexOf('o', 3);   从第3个字符向后搜索，查索引
a.lastIndexOf('o', 7)  从第7个字符向前搜索，反着来
a.includes('h', 11)  includes 字符串中是否包含指定的值，第二个参数指查找开始位置，返回布尔值
a.startsWith('o', 1)  是否是指定位置开始，第二个参数为查找的索引开始位置。返回布尔值
a.replace("houdunren", "hdcms")   字符串的替换操作，第一个可以使用正则匹配，第二个替换的可以写箭头函数

查找关键词实例：

const words = ["php", "css"];
const title = "我爱在后盾人学习php与css知识";
const status = words.some(word => {
  return title.includes(word);
});
console.log(status);

 模糊电话号码案例：

let phone = "98765432101";
console.log(phone.slice(0, -3) + "*".repeat(3));

字符串删除：

之前的方法想的是转为数组之后再过滤，现在可以将要删除的值通过replace替换成空，需要用到正则匹配 

字符串类型转换：

类型转换方法：

String（a）：转字符串
a.toString（):  转字符串
a.split("")  转为数组，以什么为分隔符，比如逗号啥的

 json字符串方法：

JSON.stringify(obj)：对象转字符串形式的对象，这个专门用来针对对象的

 JSON.parse(str)：   json字符串对象转 对象 形式

三：布尔类型

 let a = true

隐式转换

数据类型	true	false
String	非空字符串	空字符串
Number	非0的数值	0 、NaN
Array	数组不参与比较时	参与比较的空数组
Object	所有对象
undefined	无	undefined
null	无	null
NaN	无	NaN

当其他类型与boolean类型比较时，会将两边类型统一为数字1或0。 

如果使用Boolean与数值比较时，会进行隐式类型转换 true转为1，false 转为0。

不比较的时候，则遵循隐式规则，尽量不要去与布尔值比对。

console.log(3 == true); //false
console.log(0 == false); //true

 字符串在与Boolean比较时，两边都为转换为数值类型后再进行比较。

console.log(Number("houdunren")); //NaN
console.log(Boolean("houdunren")); //true
console.log("houdunren" == true); //false
console.log("1" == true); //true

四：Number

let a = 99 

数值类型方法：

Number（a）：将参数转换为表示对象值的数字。如果该值无法转换为合法数字，则返回 NaN。
Number.isInteger(1.2)  判断是否为整数
a.toFixed()：指定返回的小数位数可以四舍五入，参数可传0，1，2，参数为指定保存的小数位
parseFloat（参数）：提取参数开始位置的浮点数
parseInt（a）： 解析字符串，只有字符串中的第一个数字会被返回,不符合返回nan

 NaN值不可以进行比较，可以使用 Object.is 方法判断两个值是否完全相同

var res = 2 / 'houdunren';
console.log(Object.is(res, NaN));

 五：Math

Math 对象提供了众多方法用来进行数学计算 

数学方法： 

Math.max(1, 2, 3)   取最大值
Math.min(1, 2, 3)   取最小值
Math.ceil(1.111); //2   向上整数
Math.floor(1.555); //1  向下整数
Math.round(1.5); //2   四舍五入
Math.random()    返回 0-1 的随机数（包括0但不包括1）

返回0~n的随机整数，不包括n

const number = Math.floor(Math.random() * n);

返回0~n的随机整数，包括n

const number = Math.floor(Math.random() * (n+1));

 返回一段范围m-n内的随机整数，不包括n，公式min+Math.floor(Math.random()*(Max-min))

const number = Math.floor(Math.random() * (n - m)) + m;
console.log(number);

const number = Math.floor(Math.random() * (n - m + 1)) + m;
console.log(number);    这个是包含n的

 上面这些可应用于随机点名，只要拿到数组的长度就好了

let stus = ['小明', '张三', '王五', '爱情'];
let pos = Math.floor(Math.random() * stus.length);
console.log(stus[pos]);

封装随机取值的函数：

 //在一个数组里随机取值
  function radomValue(Array, start = 1, end = Array.length) {
    start--;
    const index = start + Math.floor(Math.random() * (end - start));
    return Array[index]
  }
  console.log(radomValue([1, 2, 3])); //在这个数组里随机取值
  console.log(radomValue([1, 2, 3], 1, 2)); //第一个到第二个中间随机取值

求数组最大值，最简单的方法

let arr = [1,34,55,7]

const max = Math.max(...arr）

把数组解构就好了

六：Date

网站中处理日期时间是很常用的功能

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。

 获取当前年月日星期几几点几分几秒并打印//获取自定义格式的时间戳

 //获取当前年月日星期几几点几分几秒并打印
  function getTimer() {
    var date = new Date()
    var week = ['星期日', '星期一', '星期二', '星期三', '星	期四', '星期五', '星期六']
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var datee = date.getDate()
    var day = date.getDay()
    var time = year + '年' + month + '月' + datee + '日 	' + week[day]

    function getTimerr() {
      var time = new Date()
      var hour = time.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var minute = time.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = time.getSeconds()
      second = second < 10 ? '0' + second : second
      return hour + ':' + minute + ':' + second
    }
    return time + ' ' + getTimerr()
  }
  console.log(getTimer());


 //按格式获取时间、
  function formatTime(format = 'YYYY-MM-DD HH:mm:ss xinqi') {
    let date = new Date()
    let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    let xinqi = date.getDay()
    let hour = date.getHours()
    let minute = date.getMinutes()
    let second = date.getSeconds()
    const config = {
      YYYY: year,
      MM: month < 10 ? '0' + month : month,
      DD: day < 10 ? '0' + day : day,
      HH: hour < 10 ? '0' + hour : hour,
      mm: minute < 10 ? '0' + minute : minute,
      ss: second < 10 ? '0' + second : second,
      xinqi: week[xinqi]
    }
    for (const key in config) {
      format = format.replace(key, config[key])
    }
    return format

  }
  console.log(formatTime());//2022-04-03 12:03:41 星期日

 一些自己封装的时间戳函数：JavaScript获取三天前，一周前，一月前的时间戳_小余会努力的博客-CSDN博客

七：数组*****

数组是最常用的数据类型，比较重要

const array = ["hdcms", "houdunren"];    数组是引用类型可以使用const声明并修改它的值

通过.length可以获得数组的长度，.length-1为最后一位的索引，通过索引可以拿到它的值

数组的基础方法：

创造数组
hd = Array.of(1, 2, 3);
console.log(hd); //[1, 2, 3]  

也可以解构字符串生成数组
const [...a] = "houdunren.com";
console.log(a); //  ['h', 'o', 'u', 'd', 'u', 'n', 'r', 'e', 'n', '.', 'c', 'o', 'm']

检验数组
console.log(Array.isArray([1, "后盾人", "hdcms"])); //true
console.log(Array.isArray(9)); //false    

解构每一项转换为数组
let str = '后盾人';
console.log(Array.from(str)); //["后", "盾", "人"]
这个接受两个参数（值和箭头函数）
Array.from(str，（）=>{} )

数组的增加：push返回的是数组的长度，unshift前面添加
let arr = ["后盾人", "hdcms"];
let hd = ["houdunren"];
hd.push(...arr);
console.log(hd); //["houdunren", "后盾人", "hdcms"]

数组的删除：pop返回的是删掉的最后一个值，shift删除第一个
let arr = ["后盾人", "hdcms"];
console.log(arr.shift()); //后盾人
console.log(arr); //["hdcms"]

数组的填充：
console.dir(Array(4).fill("后盾人")); //["后盾人", "后盾人", "后盾人", "后盾人"]

slice数组截取，生成新数组，不会改变原数组，含头不含尾，没有第二个参数直接截取到最后

splice也是截取，会改变原数组，如果是增加的话，一般是在增加索引原值的前面

数组转字符串：
join():  将数组里的每个值 以什么 为连接成为字符串，但不是把每个值给拆分

Array.of 和 Array.from 的区别：

  let a = "houdunren.com"

  console.log(Array.of(a));    将值变为数组
  console.log(Array.from(a));  解构每一项转换为数组，接受两个参数，值和箭头函数

 slice 和 splice 的区别：

如果只是要拿到截取出来的新数组，请使用slice，参数可以接受负数，-1是最后一项

如果是操作原数组，请使用splice

splice移动元素索引位置案例

 function move(arr, from, to) {
    if (from < 0 || to >= arr.length) {
      console.error('参数错误');
      return
    }
    let newarr = [...arr]
    let item = newarr.splice(from, 1)
    newarr.splice(to, 0, ...item)
    return newarr
  }
  console.log(move([1, 2, 3], 0, 2));

数组展开运算符：

1：数组合并

let a = [1, 2, 3];
let b = ['a', '后盾人', ...a];
console.log(b); //["a", "后盾人", 1, 2, 3]

 2：函数参数

function hd(...args) {
  console.log(args);
}
hd(1, 2, 3, "后盾人"); //[1, 2, 3, "后盾人"]


接受部分参数

function hd(site, ...args) {
  console.log(site, args); //后盾人 (3) [1, 2, 3]
}
hd("后盾人", 1, 2, 3);

数组函数参数

function hd([a, b]) {
	console.log(a, b);
}
hd(['后盾人', 'hdcms']);    后盾人 hdcms

 数组查找元素功能

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1。，因为执行 === 严格模式，所以类型不一样也会查不到

let arr = [7, 3, 2, '8', 2, 6];
console.log(arr.indexOf(8)); // -1

第二个参数是从哪个索引位置开始查询
let arr = [7, 3, 2, 8, 2, 6];
//从第二个元素开始向后查找
console.log(arr.indexOf(2, 3)); //4

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

 includes 查找字符串返回值是布尔类型更方便判断，也执行 ===，强等于

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

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

some方法可以做布尔值判断，遍历里面是否有该值，有的话就是true，简单的数组用includes，复杂的数据类型用some，some也相当于for of 加 includes 的整合 

 let arr = [{
    a: 1
  }, {
    a: 3
  }]
  const status = arr.some(i =>
    i.a = 1
  )
  if (status) {
    alert("存在")
  }

find 对于复杂的数组对象类型比较合适，能找出符合条件的第一个值或者返回return true的判断条件，其实 filter可以替代find方法

const user = [{ name: "李四" }, { name: "张三" }, { name: "后盾人" }];
const find = user.find(user => (user.name == "后盾人"));
console.log(find);

findIndex 是找到符合条件的该项索引，查不到返回-1 

数组的排序功能：

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

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

 let arr = [7, 3, 2, 6];
 console.log(arr.sort((a, b) => b - a)); //从大到小

数组排序实例：复杂的数组对象排序

let lessons = [
  { title: "媒体查询响应式布局", click: 78 },
  { title: "FLEX 弹性盒模型", click: 12 },
  { title: "MYSQL多表查询随意操作", click: 99 }
];

let sortLessons = lessons.sort((v1, v2) => v2.click - v1.click);
console.log(sortLessons);

数组的遍历功能：

详细介绍：

前端程序员对于for in循环，for of 和 foreach循环的对比理解_小余会努力的博客-CSDN博客

利用for of 结合 entries解构特性 可以获得索引与值啦

const hd = ["hdcms", "houdunren"];

for (const [key, value] of hd.entries()) {
  console.log(key, value); //这样就可以遍历了   0 'hdcms'
                                               1 'houdunren'
}

数组的检索，过滤和叠加功能：

检索功能： 一般应用于计算属性computer

every：要所有元素操作都要返回真结果才为真。

例子：查看班级中同学的JS成绩是否都及格

const user = [
  { name: "李四", js: 89 },
  { name: "马六", js: 55 },
  { name: "张三", js: 78 }
];
const resust = user.every(user => user.js >= 60);
console.log(resust); //false



let words = ['后盾', '北京', '培训'];
let title = '后盾人不断分享技术教程';

let state = words.every(function (item, index, array) {
  return title.indexOf(item) >= 0;
});

if (state == false) console.log('标题必须包含所有关键词');

some:  如果有一个返回true，表达式结果就是真，常用来判断数组里面是否有这个值，比includes高级

let words = ['后盾', '北京', '武汉'];
let title = '后盾人不断分享技术教程'

let state = words.some(function (item, index, array) {
	return title.indexOf(item) >= 0;
});

if (state) console.log('标题含有违规关键词');

filter：过滤出符合逻辑条件的选项

  const user = [{
      name: "李四",
      js: 89
    },
    {
      name: "马六",
      js: 55
    },
    {
      name: "张三",
      js: 78
    }
  ];
  const resust = user.filter(user => user.js >= 60);
  console.log(resust);    

写个案例加深理解：过滤出不符合的值

  function filter(arr, filterArr) {
    const newarr = []
    for (const item of arr) {
      if (!filterArr.includes(item)) {
        newarr.push(item)
        return newarr
      }
    }
  }
  console.log(filter([1, 2, 3], [1, 3]));  // [2]

 map：根据规则映射出新的数组 

map与foreach对比 拿到想要的数据结构 
let a = [{
    name: 1,
    sex: 'nan'
  }, {
    name: 2,
    sex: 'lv'
  }, {
    name: 3,
    sex: 'nan'
  }]
  // let b = a.map(i => {
  //   return {
  //     want: i.name
  //   }  
  // })
  let b = []
  a.forEach(item => {
    let obj = {
      want: item.name
    }
    b.push(obj)
  })
  console.log(b);

 let arr = [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
  arr = arr.map(i => {
    i.sex = '男'
    return i
  })
  console.log(arr);  0: {name: 1, sex: '男'}
                     1: {name: 2, sex: '男'}
                     2: {name: 3, sex: '男'}

 数组的去重功能：

1. 利用set去重，set保证里面的基础数据类型唯一，对于对象等引用类型不生效，可以将引用类型转换为字符串等标准变量。
2. 利用reduce去中，简单的去重思路是创建一个新的空数组，判断里面是否包含，不包含则push进去，然后return 这个数组，复杂的数据类型去重也可以。
3. 利用map键值对类型去重

reduce：reduce 有一篇文章详解：

前端程序员应该理解的reduce方法，对你的js能力很有帮助_小余会努力的博客-CSDN博客

八：对象******

 使用valueOf()可以拿到数据类型的值

对象的基本功能：

 对象的声明

  let obj = {
    name: 1,
    show() {
      console.log(this.name); //对象属性方法简写，this指向该对象
    }
  }
  obj.show()

  obj.sex = '男' // 对象的增加属性

  delete obj.sex //对象的删除功能

  let value = obj['name'] //可以通过【】拿到属性，括号内必须是字符串

  let otherObj = obj //对象属于引用类型，传地址赋值



判断当前对象是否有这个属性，不包含原型链去找

console.log(obj.hasOwnProperty('name')); //true


对象的解构连接：

  let a = {
    name: 1
  }
  let b = {
    sex: '男'
  }
  let c = {
    ...a,
    ...b
  }

数组和对象的解构赋值对比：

数组的解构赋值：

  let a = [1, 2]
  const [c, d] = a
  console.log(c, d); // 1 2
  const [, f] = a
  console.log(f); // 2
  const [e] = a
  console.log(e); //1

对象的解构赋值：

 let a = {
    name: 1
  }
  // const {
  //   name: name //定义一个对象等于a中的属性，再赋值给name变量 ，如果属相和变量一样，可以简写，只写一个name

  // } = a
  const {
    name //简写形式
  } = a
  console.log(name); //1

  const {
    name: n  //将a对象解构赋值给n变量，可以用作自己定义的变量来接受对象的值
  } = a
  console.log(n); // 1


反着来，变量做对象的属相，如果变量名和属性一致，可以简写
  let name = 1
  let obj = {
    name   //原来的格式 name：name
  }
  console.log(obj); //{name: 1}

 不定义name时，下面是省略的写法
  let obj = {
    name  // 完整的是name：name 但是name未定义，因为对象的属性是字符串，所以后面的这个变量是空字符串
  }
  console.log(obj); //{name: ''}


 // 嵌套解构
  let a = {
    name: 1,
    day: {
      oneday: 1
    }
  }
  let {
    name,
    day: {
      oneday
    }
  } = a
  console.log(name, oneday); //1 1

解构对象变量的默认值

 let {
    name = 'q', //给name变量一个默认值，如果赋值的对象里没有这个属性，则使用默认值
      url,
      sex = '男'
  } = {
    name: 1,
    url: '2'
  };
  console.log(name, url, sex); // 1 '2' '男'

对象的解构赋值可以作函数的传参

 function a({
    name
  }) {
    console.log(name);
  }
  a({
    name: 1
  })

对象的属性判断是否存在

原型就是父亲的意思，判断该元素自身是否有这个属性，hasOwnProperty不去原型上找，只找自身

 let obj = {
    a: 1
  }
  console.log(obj.hasOwnProperty('a'));  //true

判断原型上是否有该属性

 let obj = {
    a: 1
  }
  console.log("a" in obj); //true

对象的复杂功能：

对象的计算属性，拷贝：

let a = {
    b: 1
  }
  let c = {
    f: 2
  }
  a = Object.assign(a, c)
  a = {
    ...a,
    ...c
  }
  console.log(a);

对象转数组：

1.   let arr = Object.keys(a)
2.   let arr2 = Object.values(a)
3.   let arr3 = Object.entries(a)
4. 可以利用上面的方法转为数组后，使用forof 循环了

 对象的深浅拷贝：

深浅拷贝的意义是：因为对象的复制是传地址的，改变了新的值就会印象到原来的对象，深浅拷贝改变引用类型传地址的问题。这样拷贝过来就不会改变原来的对象的值

浅拷贝方法：

  let a = {
    b: 1
  }
  
   第一种：let c = {
     ...a
   }

   第二种：let c = Object.assign({}, a)

   第三种：最原始的方法。不过可以自定义。使用forin循环
          let c = {}
          for (let key in a) {
              c[key] = a[key] + 'zidingyi'
            }

  c.b = 2
  console.log(a);
  console.log(c);

深拷贝：对于复杂类型的数据浅拷贝，可能还会存在传地址的问题，将数据深层次的拷贝，这样就彻底解决复杂数据类型的拷贝问题了

解决办法：

1：利用递归函数层层转换

let a = {
    name: 'yy',
    lang: {
      china: 1,
      eng: 0
    },
    grand: []
  }

  // 手写深拷贝函数
  function deep(obj) {
    let res = obj instanceof Array ? [] : {};
    for (const [k, v] of Object.entries(obj)) {
      res[k] = typeof v == "object" ? deep(v) : v;
    }
    return res
  }
  let c = deep(a)
  c.lang.eng = 1
  c.grand.push(1)
  console.log(JSON.stringify(a, null, 2));
  console.log(JSON.stringify(c, null, 2)); {
    "name": "yy",
    "lang": {
      "china": 1,
      "eng": 0
    },
    "grand": []
  } {
    "name": "yy",
    "lang": {
      "china": 1,
      "eng": 1
    },
    "grand": [
      1
    ]
  }

2：利用JSON序列化转换，先转换为基础数据变量，就不会涉及到传地址，然后再改回来

 let a = {
    name: 'yy',
    lang: {
      china: 1,
      eng: 0
    },
    grand: []
  }

  // 手写深拷贝函数

  let c = JSON.parse(JSON.stringify(a))
  c.lang.eng = 1
  c.grand.push(1)
  console.log(JSON.stringify(a, null, 2));
  console.log(JSON.stringify(c, null, 2));

对象的高级使用：

1：创建对象：

1-1：利用工厂函数返回return{}，将函数的返回结果为一个对象。

1-2：利用构造函数生成对象，js中很多数据类型都是构造函数生成的，所以都可以通过点语法去调动构造函数里面的对象属性方法,也可以通过设置使用原型上面的方法

2：属性的特性：

属性是可以增删改查的。如果对 对象 只做可读遍历操作，可以使用Object.freeze将他冻结

 let a = {
    name: "yy"
  }
  //查看对象具体属性的信息
  console.log(JSON.stringify(Object.getOwnPropertyDescriptor(a, "name"), null, 2));
  //编辑属性信息 这个方法提供三个参数（对象名，属性名，和一个对象{这个对象可以是信息编辑也可以是访问器对象设置}）
  Object.defineProperty(a, "age", {
    value: 18,
    writable: false, //不可更改
    enumerable: false, //不可遍历，列如forin遍历属性
    configurable: false, //不可删除
  })

 Object.defineProperty(a, "age", {

   get(){
       return 
      },
   set(v){
      todo//要做的事情
      }

  })

  //禁止新增属性
  Object.preventExtensions(a)
  Object.isExtensible(a) //返回布尔值，判断属性是否能新增
  Object.seal(a)//封闭对象，禁止新增或删除
  Object.freeze(a)//冻结对象属性，增删改功能，范围更广。可以遍历
  a.age = 19
  console.log(a);

3：属性的访问器，是对象身上的功能

给属性方法加上get 和 set ，意味着可以对对象的属性进行一层保护，给对象身上的属性方法加上get 或者 set 让他们从属性方法变成了伪造属性，通过点语法调用该伪造属性，可以修改和读取你想要更改和读的属性。相当于做了一层防护（通俗的理解来说，以前你可以直接修改对象身上的属性，现在通过set定一个属性方法，多了一层防护去改，然后再通过一个get去读）好比vue中的计算属性，将data里的数据，通过get定义一个伪造属性去读他。

 let a = {
    name: 1,
    set vc(v) {
      console.log(v);
      this.name = v  //通过set定义一个属性方法去修改name值，可以在这个里面做v的判断校验，条件允许才能改
    },
    get show() {
      return this.name  //通过get定义一个属性方法去读属性name值，此时的show是一个伪造属性，可以直接点语法使用，不用带（）
    },
  }
  a.vc = 2
  console.log(a.show); 2
  console.log(a.name); 2

一般可以使用访问器可以去设置token。   set和get定义的伪造属性可以一样

let request = {
    set token(value) {
      localStorage.setItem("token", value)
    },
    get token() {
      let token = localStorage.getItem("token")
      if (!token) alert("不存在token")
      return token
    }
  }
  request.token = "12321sadcascs"
  console.log(request.token); //12321sadcascs

访问器定义的伪造属性如果和原生属性重名，优先级大于原生属性

 let a = {
    name: 1,
    set name(v) {
      this.name = v
    },
    get name() {
      return this.name
    }
  }
这种情况下。set定义的伪造属性会使原生属性失效
  console.log(a);

{}
name: [异常：RangeError: Maximum call stack size exceeded at Object.get name [as name] (http://127.0.0.1:5500/%E4%B8%8E%E6%88%96%E8%BF%90%E7%AE%97%EF%BC%88%E6%AF%94%E8%BE%83%E5%AF%86%E7%A0%81%E6%98%AF%E5%90%A6%E7%9B%B8%E7%AD%89%EF%BC%89.html:85:19) 
get name: ƒ name()
set name: ƒ name(v)
[[Prototype]]: Object

解决办法：将原生属性重新定义在一个私有对象里面。或者set定义的伪造属性不和原生属性重名

let a = {
    data: {
      name: 1
    },
    set name(v) {
      this.data.name = v
    },
    get name() {
      return this.data.name
    }
  }
  a.name = 2  //这个name是set伪造属性，它能改变data里面的name值
  console.log(a);

 访问器实现双向绑定：

 Object.defineProperty方法通过访问器可以实现Vue框架的双向绑定原理：给一个对象，将输入框的值在每次输入的事件中赋值给对象的属性，对象的属性中访问器set方法每次更改了属性中，将新值赋值给文本

JSON：一种通用的便于阅读的代码格式

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

JSON.stringify(obj)

 反序列化：使用 JSON.parse 将字符串 json 解析成对象

JSON.parse(jsonStr)

简短总结：

数组总结：

1. 如果你只是想验证数组里是否有这个值，然后做判断，就用include
2. 如果你是想找到哪一项在函数里进行操作，可以使用foreach里面配合if语句，操作该项，不接受return 
3. 如果你想找到数组里的这个项，可以使用find找到这个item，如果只是做判断条件则用include，复杂类型用some ，也是返回布尔值
4. 最后其实find函数好用，findindex找到复杂数组里该项的索引
5. 复杂数组找索引用findindex，简单数组用indexOf
6. filter比find强一点，都可以找出符合条件的那项，filter还可以过滤得到不符合条件的其他项
7. 一般map，filter都是生成新的数组，不会改变原数组，foreach没有返回值
8. foreach 一般做遍历数组生成自己想要的对象，将想要的对象push到自己定义的数组里面，map的话是做简单的修改。for of 比 foreach 好用
9. 数组的浅拷贝也是可以通过解构运算符实现

对象总结;

1. 对象属性的特性（curd，冻结，访问器，构造函数）
2. 解构赋值，解构拼接，属性简写
3. 深浅拷贝
4. 转换类型
5. 代理

初级js：前端程序员需要了解的JavaScript_小余会努力的博客-CSDN博客

 

高级js：前端程序员需要了解的JavaScript之高级部分知识_成为前端大牛的博客-CSDN博客

Vue知识：前端程序员需要了解的Vue知识_成为前端大牛的博客-CSDN博客