fix: --

huangguangda · huangguangda · commit 1487e229ff26 · 2022-04-25T21:00:57.000+08:00
diff --git a/js-code/js/_filter.js b/js-code/js/_filter.js
@@ -0,0 +1,21 @@
+// 实现数组的filter方法
+Array.prototype._filter = function(fn) {
+ if(typeof fn !== 'function') {
+  throw Error('参数必须是一个函数')
+ }
+ const res = []
+ for(let i = 0, len = this.length; i < len; i++) {
+  fn(this[i]) && res.push(this[i])
+ }
+ return res
+}
+
+let arr = [1,2,3,4,5];
+// let newArr = arr.filter((item) => {
+//  return item > 3
+// })
+// console.log(newArr, arr) // [ 4, 5 ] [ 1, 2, 3, 4, 5 ]
+
+// console.log(arr._filter((item) => {
+//  return item > 3
+// }), arr)// [ 4, 5 ] [ 1, 2, 3, 4, 5 ]
diff --git a/js-code/js/_flat.js b/js-code/js/_flat.js
@@ -0,0 +1,20 @@
+// 实现数组的flat方法
+function _flat(arr, depth) {
+ if(!Array.isArray(arr) || depth <= 0) {
+  return arr
+ }
+ return arr.reduce((prev, cur) => {
+  if(Array.isArray(cur)) {
+   return prev.concat(_flat(cur, depth-1))
+  }else{
+   return prev.concat(cur)
+  }
+ },[]);
+}
+
+// let arr = [1, [2, [3, 4]]];
+// console.log(_flat(arr, 3))
+
+// Debugger attached.
+// [ 1, 2, 3, 4 ]
+// Waiting for the debugger to disconnect...
diff --git a/js-code/js/_map.js b/js-code/js/_map.js
@@ -0,0 +1,22 @@
+// 实现数组的map方法
+
+Array.prototype._map = function(fn) {
+ if(typeof fn !== 'function') {
+  throw Error('参数必须是一个函数')
+ }
+ const res = []
+ for(let i = 0, len = this.length; i < len; i++) {
+  res.push(fn(this[i]))
+ }
+ return res
+}
+
+// let arr = [1,2,3,4,5];
+// let newArr = arr.map((item) => {
+//  return item * 3
+// })
+// console.log(newArr, arr) // [ 3, 6, 9, 12, 15 ] [ 1, 2, 3, 4, 5 ]
+
+// console.log(arr._map((item) => {
+//  return item * 3
+// }), arr)// [ 3, 6, 9, 12, 15 ] [ 1, 2, 3, 4, 5 ]
diff --git a/js-code/js/_push.js b/js-code/js/_push.js
@@ -0,0 +1,11 @@
+// 实现数组的push方法
+
+Array.prototype.myPush = function() {
+ for(let i = 0; i < arguments.length; i++) {
+  this[this.length] = arguments[i];
+ }
+ return this.length;
+}
+
+let arr = [1,2]
+console.log(arr.myPush(3), arr) // 3 [1,2,3]
diff --git a/js-code/js/ajax.js b/js-code/js/ajax.js
@@ -0,0 +1,37 @@
+// AJAZ 是Asynchronous JavaScript and XML的缩写，指的是通过JavaScript的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
+
+// 创建AJAX请求的步骤：
+/**
+
+1. 创建一个XMLHttpRequest对象
+2. 在这个对象上使用open方法创建一个HTTP请求，open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息
+3. 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过setRequestHeader方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件，可以通过设置监听函数，来处理请求成功后的结果。
+4. 当对象的readyState变为4的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是2XX或者304的话则代表返回正常。这个时候就可以通过response中的数据来对页面进行更新了。
+5. 当对象的属性和监听函数设置完成后，最后调用send方法来向服务器发起请求，可以传入参数作为发送的数据体。
+
+*/
+
+const SERVER_URL = '/server';
+let xhr = new XMLHttpRequest();
+// 创建Http请求
+xhr.open('GET', SERVER_URL, true);
+// 设置状态监听函数
+xhr.onreadystatechange = function() {
+ if(this.readyState !== 4) return;
+ // 当请求成功时
+ if(this.status === 200) {
+  handle(this.response);
+ }else{
+  console.error(this.statusText);
+ }
+};
+// 设置请求失败时的监听函数
+xhr.onerror = function() {
+ console.log(this.statusText);
+};
+// 设置请求头信息
+xhr.responseType = 'json';
+xhr.setRequestHeader('Accept', 'application/json');
+// 发送Http请求
+xhr.send(null)
+
diff --git a/js-code/js/copy.js b/js-code/js/copy.js
@@ -0,0 +1,74 @@
+// 浅拷贝，一个新的对象 对 原始对象的属性值进行精确地拷贝，如果拷贝的是基本数据类型，拷贝的就是基本数据类型的值，如果是引用数据类型，拷贝的就是内存地址。
+// 如果其中一个对象的引用内存地址发生改变，另一个对象也会发生变化。
+
+// 1.Object.assign()是es6中对象的拷贝方法，接受的第一个参数是目标对象，其余参数是源对象，用法：Object.assign(target, source_1, ...)，该方法可以实现浅拷贝，也可以实现一维数组的深拷贝。
+
+/**
+1.如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。
+2.如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回。
+3.因为null和undefined不会转化为对象，所以第一个参数不能为null或undefined，会报错。
+
+let target = {a: 1}
+let object2 = {b: 2}
+let object3 = {c: 3};
+Object.assign(target, object2, object3);
+console.log(target); // {a: 1, b: 2, c: 3};
+
+ */
+
+/**
+
+2.扩展运算符
+使用扩展运算符可以在 构造字面量对象 的时候，进行属性的拷贝。
+let cloneObj = {...obj}
+
+let obj1 = {a:1,b:{c:1}}
+let obj2 = {...obj1};
+obj1.a = 2;
+console.log(obj1); //{a:2,b:{c:1}}
+console.log(obj2); //{a:1,b:{c:1}}
+obj1.b.c = 2;
+console.log(obj1); //{a:2,b:{c:2}}
+console.log(obj2); //{a:1,b:{c:2}}
+
+ */
+
+/**
+数组方法实现数组浅拷贝
+Array.prototype.slice
+这个方法可以从已有数组中返回选定的元素，array.slice(start, end), 该方法不会改变原始数组。要赋值新变量。
+
+该方法有两个参数，如果两个参数都不屑，就可以实现一个数组的浅拷贝。
+
+let arr = [1,2,3,4];
+console.log(arr.slice()); // [1,2,3,4]
+console.log(arr.slice() === arr); // false
+
+ */
+
+/**
+Array.prototype.concat
+concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
+
+该方法有两个参数，两个参数都可选，如果两个参数都不写，就可以实现一个数组的浅拷贝。
+
+
+let arr = [1,2,3,4];
+console.log(arr.concat()); // [1,2,3,4]
+console.log(arr.concat() === arr); //false
+ */
+
+// 浅拷贝
+function shallowCopy(object) {
+ // 只拷贝对象
+ if(!object || typeof object !== 'object') return;
+ // 根据object的类型判断是新建一个数组还是对象
+ let newObject = Array.isArray(object) ? [] : {};
+ // 遍历object，并且判断是object的属性才拷贝
+ for(let key in object) {
+  if(object.hasOwnProperty(key)) {
+   newObject[key] = object[key];
+  }
+ }
+ return newObject;
+}
diff --git a/js-code/js/curry.js b/js-code/js/curry.js
@@ -0,0 +1,27 @@
+// 函数柯里化的实现
+// 函数柯里化指的是一种将使用多个参数的一个函数转换成一些列使用一个参数的函数的技术
+
+function curry(fn, args) {
+ // 获取函数需要的参数长度
+ let length = fn.length
+ args = args || [];
+ return function() {
+  let subArgs = args.slice(0);
+  // 拼接得到现有的所有参数
+  for(let i = 0; i < arguments.length; i++) {
+   subArgs.push(arguments[i]);
+  }
+  // 判断参数的长度是否已经满足函数所需参数的长度
+  if(subArgs.length>=length) {
+   // 如果满足,执行函数
+   return fn.apply(this, subArgs);
+  } else {
+   // 如果不满足，递归返回柯里化的函数，等待参数的传入
+   return curry.call(this, fn, subArgs);
+  }
+ };
+}
+
+function curryES6(fn, ...args) {
+ return fn.length <= args.length ? fn(...args) : curry.bind(null, fn, ...args);
+}
diff --git a/js-code/js/dateFormat.js b/js-code/js/dateFormat.js
@@ -0,0 +1,13 @@
+const dateFormat = (dateInput, format) => {
+ var day = dateInput.getDate()
+ var month = dateInput.getMonth() + 1
+ var year = dateInput.getFullYear()
+ format = format.replace(/yyyy/, year)
+ format = format.replace(/MM/, month)
+ format = format.replace(/dd/, day)
+ return format
+}
+
+// dateFormat(new Date('2020-12-01'), 'yyyy/MM/dd') // 2020/12/01
+// dateFormat(new Date('2020-04-01'), 'yyyy/MM/dd') // 2020/04/01
+// dateFormat(new Date('2020-04-01'), 'yyyy年MM月dd日') // 2020年04月01日
diff --git a/js-code/js/deepcopy.js b/js-code/js/deepcopy.js
@@ -0,0 +1,54 @@
+// 浅拷贝：将一个对象的属性值复制到另一个对象，如果有的属性的值为引用类型的话，那么会将这个引用的地址复制给对象，因此两个对象会有同一个引用类型的引用。
+// 浅拷贝可以使用Object.assign, 扩展运算符，Array.prototype.slice，Array.prototype.concat
+
+
+/**
+
+深拷贝:如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一个原有类型的引用。
+
+深拷贝对于一些对象可以使用JSON的两个函数来实现，但是由于JSON的对象格式化比js的对象格式更加严格，所以如果属性值里边出现函数或者Symbol类型的值时，会转换失败
+
+JSON.stringify()
+
+JSON.parse(JSON.stringify(obj))是目前比较常用的深拷贝方法之一
+
+原理是利用JSON.stringify将js对象序列化（JSON字符串），再使用JSON.parse来反序列化（还原）js对象。
+
+这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined，symbol，当使用过JSON.stringify()进行处理之后，都会消失。
+
+let obj1 = {  a: 0,
+              b: {
+                 c: 0
+                 }
+            };
+let obj2 = JSON.parse(JSON.stringify(obj1));
+obj1.a = 1;
+obj1.b.c = 1;
+console.log(obj1); // {a: 1, b: {c: 1}}
+console.log(obj2); // {a: 0, b: {c: 0}}
+
+函数库lodash的_.cloneDeep方法
+该函数库也有提供_.cloneDeep用来做 Deep Copy
+
+var _ = require('lodash');
+var obj1 = {
+    a: 1,
+    b: { f: { g: 1 } },
+    c: [1, 2, 3]
+};
+var obj2 = _.cloneDeep(obj1);
+console.log(obj1.b.f === obj2.b.f);// false
+
+
+ */
+
+function deepCopy(object) {
+ if(!object || typeof object !== 'object') return;
+ let newObject = Array.isArray(object) ? [] : {}
+ for(let key in object) {
+  if(object.hasOwnProperty(key)) {
+   newObject[key] = typeof object[key] === 'object' ? deepCopy(object[key]) : object[key]
+  }
+ }
+ return newObject;
+}
diff --git a/js-code/js/flatten.js b/js-code/js/flatten.js
@@ -0,0 +1,29 @@
+// let arr = [1, [2, [3, 4, 5]]];
+
+// function flatten(arr) {
+//  let result = [];
+//  for(let i = 0; i < arr.length; i++) {
+//   if(Array.isArray(arr[i])) {
+//    // flatten(arr[i])
+//    result = result.concat(flatten(arr[i]))
+//   } else {
+//    result.push(arr[i])
+//   }
+//  }
+//  return result;
+// }
+
+// function flattenReduce(arr) {
+//  return arr.reduce(function(prev, next){
+//   return prev.concat( Array.isArray(next) ? flatten(next) : next)
+//  }, [])
+// }
+
+/**
+flat 方法的语法：arr.flat([depth])
+
+ */
+
+function flatten(arr) {
+ return arr.flat(Infinity);
+}
diff --git a/js-code/js/promise-ajax.js b/js-code/js/promise-ajax.js
@@ -0,0 +1,29 @@
+// promise封装ajax
+function getJSON(url) {
+ // 创建一个promise对象
+ let promise = new Promise(function(resolve, reject) {
+  let xhr = new XMLHttpRequest();
+  // 创建一个http请求
+  xhr.open('GET', url, true);
+  // 设置状态的监听函数
+  xhr.onreadystatechange = function() {
+   if(this.readyState !== 4) return;
+   // 当请求成功或失败时，改变promise的状态
+   if(this.status === 200) {
+    resolve(this.response)
+   } else {
+    reject(new Error(this.statusText))
+   }
+  };
+  // 设置错误监听函数
+  xhr.onerror = function() {
+   reject(new Error(this.statusText));
+  };
+  // 设置响应的数据类型
+  xhr.responseType = 'json'
+  // 设置请求头信息
+  xhr.setRequestHeader('Accept', 'application/json');
+  // 发送http请求
+  xhr.send(null)
+ })
+}
diff --git a/js-code/js/setArr.js b/js-code/js/setArr.js
@@ -0,0 +1,20 @@
+
+const setArr = function(array) {
+ return Array.from(new Set(array))
+}
+
+// const array = [1, 2, 3, 5, 1, 5, 9, 1, 2, 8];
+// console.log(setArr(array)) // [1, 2, 3, 5, 9, 8]
+
+// es5: 使用map存储不重复的数字
+function uniqueArray(array) {
+ let map = {}
+ let res = []
+ for(let i = 0; i < array.length; i++) {
+  if(!map.hasOwnProperty([array[i]])) { // 对象属性[]
+   map[array[i]] = 1
+   res.push(array[i])
+  }
+ }
+ return res
+}
