菜鸟赵赵今天学什么？学JS（进阶）

前言

嗨，老伙计们，你们好吗？我是lucky赵赵，请大家多多指教呀！

菜鸟赵赵重走前端之路，今天学JS（进阶）！

不喜勿喷，不喜勿喷，接受任何善意的指教 ^ _ ^

JS（进阶）

(一)数组

1.Array数组中常用三种迭代方法

some,every,forEach

方法	是否有返回值	使用语法(指定执行函数可以是匿名函数或有名函数)
every用来判断当前数组内 的每一个元素是否都满足某个要求	都满足返回true， 否则返回false	数组.every(指定执行函数)
some判断一个数组内 是否至少存在一个元素满足条件	存在返回true， 否则返回false	数组.some(指定执行函数)
forEach遍历数组中的每一个元素，并且对数组中的每个元素运行指定函数	没有返回值，和for循环一样，区别在于forEach方法没有break和continue；	数组.forEach(指定执行函数)

2.Array数组中常用两种会返回新数组的方法

map,filter

方法	是否有返回值	使用语法(指定执行函数可以是匿名函数或有名函数)
map	返回一个新数组	var newArr= 数组.map(指定执行函数)
filter	返回一个由满足条件的元素组成的新数组	var newArr= 数组.filter(指定执行函数);

3.Array数组中会被用来做叠加器的方法

reduce(该方法会有初始值，初始值可以是任意值包括空数组)

方法	是否有返回值	使用语法(指定执行函数可以是匿名函数或有名函数) 四个参数prev，current，（array，index）可选参数
reduce	返回一个将被叠加到累加器的值，返回的值就是prev的值	数组.reduce(function (prev, current) { return prev + current },0); current表示迭代的数组当前项元素，prev相当于迭代值，return返回的值会依次赋值给prev，相当于prev=prev+current；末尾的0是prev的初始值；

4.Array数组中关于查找的常用三种方法

find,findIndex,includes

方法	是否有返回值	使用语法(指定执行函数可以是匿名函数或有名函数)
find	返回第一个满足条件的值，没找到返回 undefined	数组.find(指定执行函数);
findIndex	返回查找到的该元素在数组里的索引，没找到返回-1	数组.findIndex(指定执行函数);
includes	查看数组内是否包含你要查找的元素	数组.includes(要查找的元素)

(二)toString()

1.语法

要转换为字符串的元素.toString();

(将元素整体转换为字符串)

2.用法

(1)可以转换数字的进制（2-36进制）

语法：

数字.toString(要转换的进制) 

实例：

var a = 10;
a.toString(2) // "1010"
a.toString(8) // "12"
a.toString(16) // "a"

(2)判断数据(简单数据和引用数据)类型

原理：执行Object原型上的toString，让这个方法中的this变为我们要检测的那个值，以实现数据类型的检测

Object.prototype.toString = function () { 　　
    return this.constructor
}

console.log(Object.prototype.toString.call([]));
console.log({}.toString.call(0));
    
VM1432:5 ƒ Array() { [native code] }
VM1432:6 ƒ Number() { [native code] }

[[Class]]这个内部属性是引擎内部用来判断一个对象是属于哪种类型的值。
所有typeof返回值为"object"的对象（如数组）都包含一个内部属性[[class]]

Object.prototype.toString.call(Array) 
ƒ Function() { [native code] }

Object.prototype.toString.call([])
ƒ Array() { [native code] }

对于普通函数使用toString()的方法，会得到这个函数的内容，对于内置函数使用toString的时候，会返回 '[native code]' 字符串。

function test(){
    alert(1);
}
test.toString(); // function test(){\n    alert(1);\n}

Function.toString(); // function Function() { [native code] }

注意：

不可以转换null 和 undefined，因为null 和 undefined 没有自己的包装对象，不能访问对象的toString() 方法，包装对象的属性引用结束，这个新创建的临时对象就会被销毁了。

var s = 'test';
s.len = 4;
var t = s.len;

console.log(t);//undefined

字符串有对应的包装类型，可以把字符串转换成对象，这个对象可以用来处理属性的引用， 一旦引用结束，就会销毁这个新创建的对象。 当再次运行var t = s.len的时候，又要 重新通过包装对象创建一个新对象，但是新对象是没有给len赋值的，所以上面的这道题输 出是undefined。

(三)数组去重

1.includes+reduce

var arr = [1,2,3,4,1,5,4];
//此时的初始值是一个数组用来装不重复的数字进行返回
var res = arr.reduce(function(prev,current){
    console.log(prev);
    if (!prev.includes(current)) {
            prev.push(current);
    }
    return prev;
},[])
console.log(res);

2.filter+indexOf

var arr=[1,2,3,4,1,5,4];
//原理：indexOf的方法在第一次查找到时就会返回相应的索引
//所以只有在第一次查找到相同的一个元素时会被筛选出来
//第二次重复出现的元素不会被返回当前所在arr数组内相应的索引,返回的是第一次出现的位置索引
var newArr = arr.filter(function(item,index){
    console.log(arr.indexOf(item) == index);
    return arr.indexOf(item) == index;
})
console.log(newArr);

(四)类数组（arrayLike）

1.定义

长得和数组很像（一个披着数组外衣的对象），但不是数组，需要转化才能使用数组原型上的方法

var o = {
	0: 123,
	1: 234,
	2: 345,
	length: 3,
};

和普通数组一样，都有length属性，也可循环遍历

2.常见的类数组

(1)函数的参数arguments

(2)HTMLCollection

通过getElementsByTagName，getElementsByClassName，getElementsByName等方法获取的dom列表

(3)NodeList

通过querySelectorAll()方法获取的NodeList节点列表

3.类数组调用普通数组方法

注意，类数组上没有数组的原型方法，转换方法如下

(1)call，apply

call()和apply()方法是预定义的 JavaScript 方法,可以用来调用函数。(第一个参数必须是它们本身)，会改变this指针

apply第二个参数必须是数组（即apply传参是[1,2,3,4]，而call是1，2，3，4......）

[].slice.call(arguments, 4)；
[].slice.push(arguments,[])；

(2)将类数组转换为数组

即通过特定方法，将类数组变为普通数组

(3)Array.from

(五)hash表

一种数据结构，可以用来存储和操作数据（速度极快，即使是大量数据）。将数据存储在数组中，通过将数据的键转换为数组的索引，达到访问数据的目的。

var hash={
    "{":"}",
    "(":")",
    "[":"]"
};

本人对这块内容知之甚少，就不班门弄斧了，有需要了解的，推荐这位前辈内容

(六)对象和原型

1.Object.defineProperty()

语法：Object.defineProperty(操作的对象，操作的属性，配置项) //配置项是一个对象

配置项
{
	value:"hsijwdi",//设置操作属性的属性值
	enumerable:true,//是否可枚举，默认不可枚举
	//是一个不可逆的操作,当configurable得属性值为false时，是不可以重新赋值进行修改的，但是如果是true时，可以被修改为false；
	configurable:true,//是否可删除，默认不可删除
	writable:true//是否可修改，默认不可修改
}

会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

2.Object.getOwnPropertyDescriptor()

获取某个属性的全部属性值(描述)

语法：Object.getOwnPropertyDescriptor(要获取属性的对象，指定的属性名)

Object.getOwnPropertyDescriptor(obj,"age");

3.属性代理

定义：指的是将对象中嵌套的对象的属性代理到外层的对象上，通过[外层对象.操作符]可以获取到嵌套内的属性

Happy Ending

好啦！下次见啦！