likes
comments
collection
share

菜鸟赵赵今天学什么?学JS(进阶)

作者站长头像
站长
· 阅读数 44

前言

嗨,老伙计们,你们好吗?我是lucky赵赵,请大家多多指教呀!

菜鸟赵赵重走前端之路,今天学JS(进阶)!

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

菜鸟赵赵今天学什么?学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,[]);

菜鸟赵赵今天学什么?学JS(进阶)

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

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

(3)Array.from

菜鸟赵赵今天学什么?学JS(进阶)

(五)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
评论
请登录