菜鸟赵赵今天学什么?学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
好啦!下次见啦!
转载自:https://juejin.cn/post/7287224080170893312