Array.prototype.concat()
- 合并一個或多個數(shù)組；
- 不會覆蓋原數(shù)組結(jié)構(gòu)；
- 多個數(shù)組的合并，存在相同值不會被覆蓋；
- 數(shù)組合并的是對象，那么對象會被加入到數(shù)組中去（見示例abk變量）
- 數(shù)組合并的是字符串或者數(shù)字，會將字符串或數(shù)字加入到數(shù)組中去（見示例 abc變量）
//代碼
let a = ["a","b","c"];
let b = ["c","d","e"];
let c = [1,2,3];
let ab = a.concat(b);
let ac = a.concat(c);
let abc = ["a","b"].concat("c");
let abk = ["a","b"].concat({k:"123"});
//結(jié)果
// a = ["a","b","c"]
// ab = ["a", "b", "c", "c", "d", "e"]
// ac = ["a", "b", "c", 1, 2, 3]
// abc = ["a","b","c"]
// abk = ["a","b",{k:"123"}]
Array.prototype.reduce()
- 數(shù)據(jù)累加
- 數(shù)組迭代、遞歸
- 刪除數(shù)組中的某個元素
示例1
let sum = [0, 1, 2, 3].reduce(function(result, item) {
return result + item;
}, 10);
console.log(sum);
//結(jié)果
//16
示例2
// 刪除 對象中 id=2的數(shù)據(jù)
let sum = [{id:1,val:"1"},{id:2,value:"2"},{id:3,value:"3"}].reduce(function(result, item) {
if(item.id!=2){
return result.concat(item);
}else{
return result;
}
}, []);
console.log(sum);
//結(jié)果
[{id:1,val:"1"},{id:3,value:"3"}]
reduce接收兩個參數(shù)
- callback回調(diào)函數(shù)，接受四個參數(shù)
- 上次回調(diào)函數(shù)的結(jié)果（或初始值(initialValue) ，即reduce方法的第二個參數(shù)）
- 當(dāng)前正在進(jìn)行的元素
- 正在進(jìn)行中的元素的數(shù)組索引，如果沒有初始值，則回調(diào)從1開始執(zhí)行
- 調(diào)用 reduce 的數(shù)組
- initialValue 可選項，其值用于第一次調(diào)用 callback 的第一個參數(shù)。
應(yīng)用其他場景
// 數(shù)組扁平化
let arr = [1,[3,4],[5,6],[[7,8,9]]];
function flatten(arrs){
let newarr = []
newarr =
arrs.reduce(function(result,item){
if( Array.isArray(item) ){
return result.concat( flatten(item) );
}else{
return result.concat(item);
}
},[]);
return newarr
}
var a = flatten(arr);
Polyfill（墊片）
// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
if (!Array.prototype.reduce) {
Object.defineProperty(Array.prototype, 'reduce', {
value: function(callback /*, initialValue*/) {
if (this === null) {
throw new TypeError( 'Array.prototype.reduce ' +
'called on null or undefined' );
}
if (typeof callback !== 'function') {
throw new TypeError( callback +
' is not a function');
}
// 1. Let O be ? ToObject(this value).
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// Steps 3, 4, 5, 6, 7
var k = 0;
var value;
if (arguments.length >= 2) {
value = arguments[1];
} else {
while (k < len && !(k in o)) {
k++;
}
// 3. If len is 0 and initialValue is not present,
// throw a TypeError exception.
if (k >= len) {
throw new TypeError( 'Reduce of empty array ' +
'with no initial value' );
}
value = o[k++];
}
// 8. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kPresent be ? HasProperty(O, Pk).
// c. If kPresent is true, then
// i. Let kValue be ? Get(O, Pk).
// ii. Let accumulator be ? Call(
// callbackfn, undefined,
// ? accumulator, kValue, k, O ?).
if (k in o) {
value = callback(value, o[k], k, o);
}
// d. Increase k by 1.
k++;
}
// 9. Return accumulator.
return value;
}
});
}
Array.prototype.slice(start , end)
- 提取數(shù)組，不修改原數(shù)組
- 淺拷貝（一維數(shù)組是對象或數(shù)組，改變提取出的數(shù)組它的對象原數(shù)組也會被改變，如示例二）
slice( start , end )
- 參數(shù) start (可選)，原數(shù)組索引位置
- 參數(shù) end (可選)，原數(shù)組第n個的位置
- slice( 2, 3 ) 提取原數(shù)組索引為2的，直到原數(shù)組從左到右的第3個值
- 如果數(shù)組中有 對象引用（不是實際的對象），那么改變該對象引用，相應(yīng)的新數(shù)組與原數(shù)組的對象引用也會隨之改變（如示例二）
示例一
let arr = ["a","b","c","d","e","f","g"];
let r1 = arr.slice();
let r2 = arr.slice(2, 5);
let r3 = arr.slice(3);
// r1 結(jié)果為 ["a","b","c","d","e","f","g"];
// r2 結(jié)果為 ["c","d","e"]
// r3 結(jié)果為 ["d",······]
示例二
// myHonda 是對象引用
var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
var myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
var newCar = myCar.slice(0, 2);
// 改變myHonda對象的color屬性.
myHonda.color = 'purple';
// myCar 及 newCar對應(yīng)的color屬性會跟著改變
經(jīng)典場景
// 直接執(zhí)行 Array.prototype.slice()將會得到結(jié)果為一個空數(shù)組
// 將 類似數(shù)組對象（Array-like）轉(zhuǎn)換為真正的數(shù)組
// 如果是obj是對象引用則報錯，即不是數(shù)組對象無法使用該方法
var obj = {0:"a",1:"c",2:"e",length:3};
// 原型寫法
Array.prototype.slice.call(obj);
// 簡寫形式
[].slice.call(obj);
代碼兼容
/**
* Shim for "fixing" IE's lack of support (IE < 9) for applying slice
* on host objects like NamedNodeMap, NodeList, and HTMLCollection
* (technically, since host objects have been implementation-dependent,
* at least before ES6, IE hasn't needed to work this way).
* Also works on strings, fixes IE < 9 to allow an explicit undefined
* for the 2nd argument (as in Firefox), and prevents errors when
* called on other DOM objects.
*/
(function () {
'use strict';
var _slice = Array.prototype.slice;
try {
// Can't be used with DOM elements in IE < 9
_slice.call(document.documentElement);
} catch (e) { // Fails in IE < 9
// This will work for genuine arrays, array-like objects,
// NamedNodeMap (attributes, entities, notations),
// NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
// and will not fail on other DOM objects (as do DOM elements in IE < 9)
Array.prototype.slice = function (begin, end) {
// IE < 9 gets unhappy with an undefined end argument
end = (typeof end !== 'undefined') ? end : this.length;
// For native Array objects, we use the native slice function
if (Object.prototype.toString.call(this) === '[object Array]'){
return _slice.call(this, begin, end);
}
// For array like object we handle it ourselves.
var i, cloned = [],
size, len = this.length;
// Handle negative value for "begin"
var start = begin || 0;
start = (start >= 0) ? start: len + start;
// Handle negative value for "end"
var upTo = (end) ? end : len;
if (end < 0) {
upTo = len + end;
}
// Actual expected size of the slice
size = upTo - start;
if (size > 0) {
cloned = new Array(size);
if (this.charAt) {
for (i = 0; i < size; i++) {
cloned[i] = this.charAt(start + i);
}
} else {
for (i = 0; i < size; i++) {
cloned[i] = this[start + i];
}
}
}
return cloned;
};
}
}());
Array.prototype.toString()
- 返回一個字符串，表示指定的數(shù)組及其元素。
- 該方法等同于數(shù)組調(diào)用了join方法
- 該方法無參數(shù)
示例一
let arr = ["abc","efg","myName"];
arr.toString(); // 方法一
Array.prototype.toString.call(arr); //方法二
arr.join(","); //方法三
//以上三種方法效果一致---------------------
示例二
// 多維數(shù)組（數(shù)組中沒有對象）與一維數(shù)組
let arr = ["abc",["a","c"],"1","2"];
// 結(jié)果
// abc,a,c,1,2
// -------------------------------------
// 多維數(shù)組中存在 鍵值對象的情況
var list = ["abc",["a","c"],"1",{"key":"val"}];
// 結(jié)果
// abc,a,c,1,[object Object]
Array.prototype.find(callback[, thisArg])
-
find()方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回undefined。 -
findeIndex()方法，它返回數(shù)組中找到的元素的索引，而不是其值。 - find 方法不會改變數(shù)組。
- 在第一次調(diào)用 callback 函數(shù)時會確定元素的索引范圍，即調(diào)用后添加了數(shù)組不會被訪問到，以及回調(diào)函數(shù)中未被訪問的數(shù)組被提前刪除，該元素扔然能被訪問到
參數(shù)
-
callback 數(shù)組每一項回調(diào)函數(shù)，擁有參數(shù)：
- element 當(dāng)前遍歷到的元素。
- index 當(dāng)前遍歷到的索引。
- array 數(shù)組本身。
thisArg（ 可選 ）— 指定 callback 的 this 參數(shù)。
如果提供了 thisArg 參數(shù)，那么它將作為每次 callback 函數(shù)執(zhí)行時的上下文對象，否則上下文對象為 undefined
返回
- 當(dāng)某個元素通過 callback 的檢驗時，返回數(shù)組中的這個元素的值，否則返回undefined
Polyfill（墊片）
// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, ? kValue, k, O ?)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
}
});
}
