js重点难点剖析

874 阅读4分钟

 ~  ~前言:我又来开新坑了,本系列突出一个特点--随机,更新的内容随机,更新的时间也随机,主要是我在工作中使用js遇到的一些重点难点,或者我觉得有必要深入研究的细节,就可能会作为本系列的其中一篇文章。同时本系列也可以作为个人工具书,以后遇到难点的时候也可以翻阅本系列去寻找启发。
噢,对了,再附上一个个人总结的小字典, ~ 前端技术  ~ ~ 前端语言  ~

周尛先森




数组类(Array)操作及兼容性处理(polyfill)


Array类

直接在Array类上挂载的方法:

 ~Array.from ~

Array.from(arrayLike[, mapFn[, thisArg]]);

从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例

 ~Array.isArray ~

Array.isArray(obj);

用于确定传递的值是否是一个 Array

 ~Array.of ~

Array.of(element0[, element1[, ...[, elementN]]]); 

从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例


Array原型方法

在Array原型上挂载的方法,即可在Array实例上调用:

 ~arr.length ~
返回或设置一个数组中的元素个数

 ~arr.toLocaleString ~

arr.toLocaleString([locales[,options]]); 

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开

 ~arr.toString(); ~
返回一个字符串,表示指定的数组及其元素

 ~arr.push ~

arr.push(element1, ..., elementN); 

将一个或多个元素添加到数组的末尾,并返回该数组的新长度

 ~arr.pop(); ~

arr.pop(); 

数组中删除最后一个元素,并返回该元素的值

 ~arr.unshift ~

arr.unshift(element1, ..., elementN); 

将一个或多个元素添加到数组的开头,并返回该数组的新长度

 ~arr.shift ~

arr.shift(); 

从数组中删除第一个元素,并返回该元素的值

 ~arr.sort ~

arr.sort([compareFunction]); 

用原地算法对数组的元素进行排序,并返回数组

 ~arr.reverse ~

arr.reverse(); 

将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个

 ~arr.slice ~

arr.slice([begin[, end]]); 

返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)

 ~arr.fill ~

arr.fill(value[, start[, end]]); 

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

 ~arr.splice ~

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]]); 

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容

 ~arr.copyWithin ~

arr.copyWithin(target[, start[, end]]); 

浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度

注意:以上10个操作(push到copyWithin),对原有数组有影响


Array遍历方法

 ~arr.forEach ~

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]); 

数组的每个元素执行一次给定的函数

 ~arr.map ~

var new_array = arr.map(function callback(currentValue[, index[, array]]) {\
  // Return element for new_array \
}[, thisArg]); 

创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值

 ~arr.filter ~

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg]); 

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

 ~arr.reduce ~

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]); 

对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值

 ~arr.reduceRight ~

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue]); 

对数组中的每个元素执行一个由您提供的reduceRight函数(从右到左),将其结果汇总为单个返回值


再补充一些Array原型方法,对原数组没有影响

 ~arr.keys ~

arr.keys(); 

返回一个包含数组中每个索引键的Array Iterator对象

 ~arr.entries ~

arr.entries(); 

返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对

 ~arr.values ~

arr.values(); 

返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

 ~arr.includes ~

arr.includes(valueToFind[, fromIndex]); 

判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

 ~arr.indexOf ~

arr.indexOf(searchElement[, fromIndex]); 

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

 ~arr.find ~

arr.find(callback[, thisArg]); 

返回数组中满足提供的测试函数的第一个元素的值

 ~arr.findIndex ~

arr.findIndex(callback[, thisArg]); 

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

 ~arr.lastIndexOf ~

arr.lastIndexOf(searchElement[, fromIndex]); 

返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1

 ~arr.some ~

arr.some(callback(element[, index[, array]])[, thisArg]); 

测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

 ~arr.every ~

arr.every(callback(element[, index[, array]])[, thisArg]); 

测试一个数组内的所有元素是否都能通过某个指定函数的测试

 ~arr.flatMap ~

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {\
\
             // return element for new_array\
\
}[, thisArg]); 

使用映射函数映射每个元素,然后将结果压缩成一个新数组

 ~arr.flat ~

var newArray = arr.flat([depth]); 

按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

小结

最后,让我们一起加油吧!

gg.jpg

都看到这了,不如顺手点个赞再走 ( *ˇωˇ* )