JavaScript 学习

1，js 返回一个 包含26个英文字母的数组

const arr= Array(26).fill('').map((_, i) => String.fromCharCode(65 + i));
arr=arr.map(x=>x.toLowerCase());//转小写

2, 随机生成一个长度为n的密码，密码中必须包含大写字母，小写字母，数字至少各一个。

/*
* n 为密码长度
*/
const getRandomPassWord = (n) => {
  const larr = [...Array(26)].map((_, index) => String.fromCharCode(index + 65));
  const sarr = [...Array(26)].map((_, index) => String.fromCharCode(index + 97)); // larr.map(item => item.toLowerCase());
  const numArr = [...Array(10)].map((_, index) => index);
  const getRandomChar = arr => arr[Math.floor(Math.random() * arr.length)];
  const concatArr = larr.concat(sarr).concat(numArr);
  const passCharArray = [getRandomChar(larr), getRandomChar(sarr), getRandomChar(numArr)]
   .concat([...Array(n-3)].map((_, index) => getRandomChar(concatArr)));
  return passCharArray.sort(() => Math.random() - 0.5).join('');
}

3，将多个对象合并为一个对象

//方法一
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj={...o1,...o2,...o3};
//o1,o2,o3 的值不会变化，相同的key值会被覆盖

//方法二
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj=Object.assign(o1,o2,o3);
//o1,o2,o3 的值发生变化，与obj相同,相同key值会被覆盖

一，Array 的方法总结

1，Array.from   该方法返回一个数组对象 

2，Array.isArray   判断当前变量是否是数组

let arr=[3,4,5];
let obj={};
let str='3234';
Array.isArray(arr);

该方法优于 instanceof 方法判断 

3，push pop   从数组的末尾添加删除元素，改变数组的长度

4，unshift shift  从数组的开头添加删除元素，改变数组的长度

5，slice 截取数组中的一部分    splice    删除或者添加元素

arrayObject.slice(start,end);   //参数 起止索引
arrayObject.splice(index,howmany,item1,.....,itemX);  //1，索引（必需），如果是负数，则从右边开始 2，长度（为0则不删除）3，要插入的元素（可选）

var arr=[2,3,4,6,7,8];
arr.slice(0,3); //截取0~3之间  返回值为截取的部分 ，不影响原数组的长度

arr.splice(0,3); //从0开始，删除长度3，改变原数组长度
arr.splice(0,3,'a','b','c') //先删除3个元素，然后再添加

6，sort 数组排序  

//针对number 数组排序

function sortNumber(a,b){
    return a-b;
}
var arr=[3,5,7,8,10,2,1,23,4];
arr.sort(sortNumber);

7，reverse 反转

8，join 拼接为字符串  默认使用 ','分割开

9，toString    转为字符串

var arr=[3,4,6,7,'','fa',false]
arr.toString();

10，concat 数组连接
  

11,forEach  循环遍历数组每个元素，并执行一个函数，改变原数组

var arr=[1,3,4,5,6,6]
arr.forEach(x=>x*2); //arr的所有值都变为2倍

12，map 循环遍历数组中每个元素，并执行一个函数，输出新的数组，不改变原数组

var arr=[1,3,4,5,6,6]
var arrNew=arr.map(x=>x*2);

13，filter 将满足条件的元素输出

var arr=[1, 3, 4, 5, 6, 6];
var arrNew=arr.filter(x=>x%2==0);

14，reduce 所有元素调用返回函数做累积元素，返回值输出      reduceRight() 从右到左

arr.reduce(function(prev,cur,index,arr){},init);
// arr 表示原数组
// prev 表示上一次调用回调时的返回值，第一次为初始值 init;
// cur 表示当前正在处理的元素
//index 表示当前处理元素的索引，若有init 则为0，否则为1；
// initial表示初始值
var arr= [1, 3, 4, 5, 6, 6];
arr.reduce((x,y)=>x*10+y);  //将整数数组转为整数

15，some 针对部分元素如果满足输出 true
       every 所有元素满足输出true

16，查找元素

find 返回通过测试的数组的第一个元素 ,findIndex 返回这个值的索引

17，includes 检查是否含有需要查找的值，如果有返回true

17，flat   扁平化嵌套数组 默认值1 ，可以移除空项,不改变原数组

var arr=['a','b','c',[2,3],'d', ,'s',[4,[5]];
arr.flat();

18，fill   用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

var arr=[2,3,4,5];
arr.fill('a',1,3); //将索引1到3之间不包含3的值改为'a'

19，keys values 返回数组的key ,values 

20，delete   删除指定的值

var arr=[3,4,6,7];
delete arr[3];

总结：sort forEach  map, filter ,reduce, some,every ,find 方法的参数均可为 一个函数逻辑。

二，Object 方法

1, Object.keys 跟 Object.getOwnPropertyNames 的区别

这两个方法都可以返回一个对象的key的列表，区别在于Object.keys 只能返回 Object 中可枚举的属性key，而Object.getOwnPropertyNames 可返回所有属性的keys。如下图所示age 属性被设置为不可枚举后，Object.keys 就无法返回这个了。

2, Object.create() 方法

Object.create(null) 跟 {} 的区别: 前者返回的是一个没有Object 原型链属性方法的空对象

 3, entries 方法跟 fromEntries 方法

entries 方法可以将对象转换为一个可枚举的键值对数组,这个二维数组可直接转换为map结构 。

因此常用Object 转 Map 的方法即可这么转换。

本地实现方法：

const  entries = (obj) => {
   return Object.keys(obj).map((key) => [key, obj[key]]);
};

fromEntries 方法可把键值对列表转换为一个对象，即entries 的反操作。

 本地实现方法

const fromEntries = (arr) => {
    if (arr.constructor === Map) { // 如果是Map 结构先转换为Array
        arr = Array.from(arr);
    }
    if (!Array.isArray(arr)) {
        throw new Error('error arguments');
    }
    const obj = {};
    arr.forEach(item => {
        const [key, value] = item;
        obj[key] = value;
    });
    return obj;
};

输出结果

 4，Object.freeze() 方法冻结一个对象，冻结后的对象无法修改属性，无法修改已有属性的可枚举性，可配置性，可写性，以及已有的属性。此外冻结后该对象的原型也不可修改。

可以看到Object.freeze 方法是一个浅操作，无法针对子节点的对象进行冻结。深度冻结方法如下所示。

// 深冻结
const deepFreeze = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    throw new Error('error arguments');
  }
  const propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach(key => {
    var prop = obj[key];
    if (typeof prop === 'object' && prop !== null) {
      deepFreeze(prop);
    }
  });
  return Object.freeze(obj);
}

 冻结后对象可以通过 Object.isFrozen() 进行判断

5, Object.assign() 方法  通常用于合并多个对象，然后返回合并后的新对象，只能合并可枚举的属性，对于不可枚举的属性则无法合并。

 // 复制一个对象

 深拷贝： 通常我们需要完全复制一个对象，但又不能在后续操作中由于复制的对象改动而导致这个对象改动，因此需要深拷贝。

(a)：通过JSON.parse 来实现

缺点1,：如图所示，对象上的函数无法被拷贝

 缺点2：如图所示，对象原型链属性方法无法拷贝

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toString() {
    return `name: ${this.name}  age:${this.age}`;
  }
}
var p = new Person('Jane', 12);
var p1 = JSON.parse(JSON.stringify(p));

缺点3: 层次较深易发生堆栈溢出

(b):自定义深拷贝方法

// 深拷贝
const deepCopy = (obj) => {
  if (typeof obj !== 'object' || obj === null) {
    throw new Error('error arguments');
  }
  const targetObj = obj.constructor === Array ? [] : {};
  Object.getOwnPropertyNames(obj).forEach(key => {
    var prop = obj[key];
    if (typeof prop === 'object' && prop !== null) {
      targetObj[key] = prop.constructor === Array ? [] : {};
      targetObj[key] = deepCopy(prop);
    } else {
      targetObj[key] = prop;
    }
  })
  return targetObj;
};

三，Reflect 跟Proxy 学习理解