1.改變?cè)瓟?shù)組的方法
var arr = []
arr.splice()
arr.reverse()
arr.fill()
arr.copyWithin()
arr.sort()
arr.push()
arr.pop()
arr.unshift()
arr.shift()
// 1.刪除功能。
let arr = ['a', 'b', 'c', 'd'];
// 從下標(biāo)0開始，刪除2個(gè)元素，并接收刪除的元素。
let deletedElements = arr.splice(0, 2);
console.log(arr); // ["c", "d"]
console.log(deletedElements); //["a", "b"]
// 2.插入功能
arr = ['a', 'b', 'e', 'f'];
// 從下標(biāo)2處開始，刪除0個(gè)元素，插入c, d兩個(gè)元素。
arr.splice(2, 0, 'c', 'd');
console.log(arr); // ["a", "b", "c", "d", "e", "f"]
// 3.替換功能。
arr = ['a', 'a', 'a', 'b'];
// 從下標(biāo)1處開始，刪除3個(gè)元素，插入b,c兩個(gè)元素。
arr.splice(1, 3, 'b', 'c');
console.log(arr); // ["a", "b", "c"]
arr.reverse()
// reverse方法沒有參數(shù) 原數(shù)組改變了 返回的數(shù)組也是改變后的數(shù)組
var arr = [4, 5, 6, 3, 2, 5, 4, 3, 9];
var arrReturn = arr.reverse();
console.log(arr); //[9, 3, 4, 5, 2, 3, 6, 5, 4]
console.log(arrReturn); //[9, 3, 4, 5, 2, 3, 6, 5, 4]
arr.fill()
// arr.fill() 是 ES6 的新方法。
// fill() 方法用于將一個(gè)固定值替換數(shù)組的元素。
// 語(yǔ)法： array.fill(value, start, end)
// 1.value 必需。填充的值。
// 2.start 可選。開始填充位置。
// 3.end 可選。停止填充位置 (默認(rèn)為 array.length)填充是從 start 位置開始，到 end-1 位置結(jié)束，不包含end位置.直接修改原數(shù)組
let arr1 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
arr1.fill(4, 2, 5);
console.log(arr1); // [1, 2, 4, 4, 4, 7, 7, 8, 9]
let arr2 = [1, 2, 3, 4, 56, 7, 7, 8, 9];
arr2.fill(4);
console.log(arr2); // [4, 4, 4, 4, 4, 4, 4, 4, 4]
arr.copyWithin()
// 數(shù)組實(shí)例的copyWithin()方法，在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置（會(huì)覆蓋原有成員），然后返回當(dāng)前數(shù)組。也就是說，使用這個(gè)方法，會(huì)修改當(dāng)前數(shù)組。
// 它接受三個(gè)參數(shù)。
// target（必需）：從該位置開始替換數(shù)據(jù)。
// start（可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn)為 0。如果為負(fù)值，表示倒數(shù)。
// end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長(zhǎng)度。如果為負(fù)值，表示倒數(shù)。
// 這三個(gè)參數(shù)都應(yīng)該是數(shù)值，如果不是，會(huì)自動(dòng)轉(zhuǎn)為數(shù)值。
[1, 2, 3, 4, 5].copyWithin(0, 3);
// 結(jié)果為 [4, 5, 3, 4, 5]
// 上面代碼表示將從 3 號(hào)位直到數(shù)組結(jié)束的成員（4 和 5），復(fù)制到從 0 號(hào)位開始的位置，結(jié)果覆蓋了原來(lái)的 1 和 2。下面是更多例子。
// 將3號(hào)位復(fù)制到0號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// 將索引從3開始到4結(jié)束 復(fù)制到索引1的位置
// -2相當(dāng)于3號(hào)位，-1相當(dāng)于4號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
arr.sort()
// arr.sort() 是給數(shù)組進(jìn)行排序
var peiData= [
{ name: '輸電', y: 28, h: 50 },
{ name: '變電', y: 20, h: 40 },
{ name: '配電', y: 10, h: 20 },
{ name: '新業(yè)務(wù)', y: 3, h: 6 }
]
peiData.sort(function (a, b) {
return a.y - b.y
})
console.log(peiData);
// 已數(shù)組中的每一項(xiàng)的y值比較 進(jìn)行排序
arr.push()
// push方法 ：接受任意數(shù)量的參數(shù) 把參數(shù)逐個(gè)添加到數(shù)組的末尾 改變了原數(shù)組 返回插入后數(shù)組的長(zhǎng)度
var arr1 = [1, 2, 3, 4, 5, 6];
var newarr = arr1.push(7, 8, 9, 10);
console.log(arr1); // arr1[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 改變了原數(shù)組
console.log(newarr); // 10 返回插入后數(shù)組的長(zhǎng)度
// 下面是在接數(shù)據(jù)時(shí)的用法
var newval = [
{ name: '輸電', y: 28 },
{ name: '變電', y: 20 },
{ name: '配電', y: 10 },
{ name: '新業(yè)務(wù)', y: 3 }
];
var peiData = [];
newval.forEach((item) => {
peiData.push({
name: item.name,
y: item.y * 1,
h: item.y * 1.5
});
});
console.log(peiData);
// peiData結(jié)果為----
[
{ name: '輸電', y: 28, h: 42 },
{ name: '變電', y: 20, h: 30 },
{ name: '配電', y: 10, h: 15 },
{ name: '新業(yè)務(wù)', y: 3, h: 4.5 }
];
arr.pop()
// pop : 刪除數(shù)組中的最后一個(gè) 元素 并返回 影響原數(shù)組
var arr = [1, 3, 5, 7];
console.log(arr.pop()); // 輸出 7
console.log(arr); // [1,3,5]
arr.unshift()
// unshift() 方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
// 返回值
// 把指定的值添加到數(shù)組的開頭之后的新長(zhǎng)度。
// 說明
// unshift() 方法將把它的參數(shù)插入 arrayObject 的頭部，并將已經(jīng)存在的元素順次地移到較高的下標(biāo)處，以便留出空間。該方法的第一個(gè)參數(shù)將成為數(shù)組的新元素 0，如果還有第二個(gè)參數(shù)，它將成為新的元素 1，以此類推。
// 請(qǐng)注意：unshift() 方法不創(chuàng)建新的創(chuàng)建，而是直接修改原有的數(shù)組。
// 提示和注釋
// 注釋：該方法會(huì)改變數(shù)組的長(zhǎng)度。
// 注釋：unshift() 方法無(wú)法在 Internet Explorer 中正確地工作！
// 提示：要把一個(gè)或多個(gè)元素添加到數(shù)組的尾部，請(qǐng)使用 push() 方法。
var arr = new Array();
arr[0] = 'George';
arr[1] = 'John';
arr[2] = 'Thomas';
document.write(arr + '<br />');
document.write(arr.unshift('William') + '<br />');
document.write(arr);
// 輸出結(jié)果為
// George, John, Thomas;
// 4;
// William, George, John, Thomas;
arr.shift()
// shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。
var arr = ['北京', '上海', '廣州', '天津'];
var arr1 = arr.shift(); // 有返回值 用arr1接受一下
console.log(arr); //['上海', '廣州', '天津']
console.log(arr1); // 北京
1.不改變?cè)瓟?shù)組的方法
var arr = []
arr.slice()
arr.map()
arr.forEach()
arr.every()
arr.some()
arr.filter()
arr.reduce()
arr.entries()
arr.find()
arr.concat('1',['2','3']) //[1,2,3]
arr.slice()
// slice方法 主要用來(lái)截取數(shù)組 原數(shù)組不發(fā)生變化 返回一個(gè)新數(shù)組
var arr1 = ['arr1', 'arr2', 'arr3', 'arr4', 'arr5', 'arr6'];
// 傳入兩個(gè)參數(shù) 一個(gè)是開始截取的下標(biāo) 一個(gè)是結(jié)束截取的下標(biāo)
var newarr1 = arr1.slice(1, 5);
console.log(newarr1); // ["arr2", "arr3", "arr4", "arr5"] 下標(biāo)為1, 2, 3, 4的值都被截取出來(lái)了 但是沒有下標(biāo)為5的值 所以截取并的不包括第二個(gè)參數(shù)
console.log(arr1); // ["arr1", "arr2", "arr3", "arr4", "arr5", "arr6"]
// 傳入一個(gè)參數(shù) 表示需要開始截取的下標(biāo) 默認(rèn)截取從開始截取的下標(biāo)開始到數(shù)組結(jié)束
var newarr2 = arr1.slice(1);
console.log(newarr2); // [ "arr2", "arr3", "arr4", "arr5", "arr6"]; 可以看到除了下標(biāo)為1的都被截取了
arr.map()
// map() 方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
// 下面是在處理數(shù)據(jù)上用的 用于把name和value 分別拆成一個(gè)新的數(shù)組
var allData = [
{ name: '北京', value: 30 },
{ name: '傷害', value: 1946 },
{ name: '陜西', value: 5407 },
{ name: '西安', value: 8466 },
{ name: '廣州', value: 5666 },
{ name: '深圳', value: 35 }
];
var provinceArr = this.allData.map((item) => {
return item.name;
});
var valueArr = this.allData.map((item) => {
return item.value;
});
console.log(provinceArr); // ['北京', '傷害', '陜西', '西安', '廣州', '深圳']
console.log(valueArr); // [30, 1946, 5407, 8466, 5666, 35]
arr.forEach()
var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function (item, index) {
console.log(item, index);
});
console.log(res); //forEach的返回值為undefined,
// 下面是我在項(xiàng)目里運(yùn)用過的
// 下面是在接數(shù)據(jù)時(shí)的用法
var newval = [
{ name: '輸電', y: 28 },
{ name: '變電', y: 20 },
{ name: '配電', y: 10 },
{ name: '新業(yè)務(wù)', y: 3 }
];
var peiData = [];
newval.forEach((item) => {
peiData.push({
name: item.name,
y: item.y * 1,
h: item.y * 1.5
});
});
console.log(peiData);
// peiData結(jié)果為----
[
{ name: '輸電', y: 28, h: 42 },
{ name: '變電', y: 20, h: 30 },
{ name: '配電', y: 10, h: 15 },
{ name: '新業(yè)務(wù)', y: 3, h: 4.5 }
];
arr.every()
// every()方法會(huì)返回一個(gè)Boolean類型的值，該值取決了數(shù)組中是否所有的元素滿足給定的條件
// every()為數(shù)組中的每一個(gè)元素執(zhí)行一次回調(diào)函數(shù)，如果數(shù)組中檢測(cè)到有一個(gè)元素不滿足，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會(huì)再進(jìn)行檢測(cè)；如果所有的元素都滿足給定的條件，那么將返回一個(gè)true
// demo如下：
var arr = [1, 8, 19, 48, 10];
var flag = arr.every((item) => {
return item < 100;
});
// var flag = arr.every(function (item) {
// return item > 100;
// });
console.log(flag); // true
arr.some()
// some()方法會(huì)返回一個(gè)Boolean類型的值，該值取決了數(shù)組中是否有元素滿足給定的條件
// some()為數(shù)組中的每一個(gè)元素執(zhí)行一次回調(diào)函數(shù)，直到找到一個(gè)使得回調(diào)函數(shù)返回一個(gè)“真值”（即可轉(zhuǎn)換為布爾值 true 的值），如果找到了這樣一個(gè)值，some() 將會(huì)立即返回 true；否則，some() 返回 false
// demo如下：
let arr = [10, 20, 40, 50, 60];
let flag = arr.some((item) => {
return item >= 50;
});
/*
let flag = arr.some(function(item) {
return item <= 50;
})
*/
console.log(flag); // true
arr.filter()
// 1、創(chuàng)建新數(shù)組
// 2、不改變?cè)瓟?shù)組
// 3、輸出的是判斷為true的數(shù)組元素形成的新數(shù)組
// 4、回調(diào)函數(shù)參數(shù)，item(數(shù)組元素)、index(序列)、arr(數(shù)組本身)
// 5、使用return操作輸出，會(huì)循環(huán)數(shù)組每一項(xiàng)，并在回調(diào)函數(shù)中操作
var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function (item, index) {
return item > 2 && item < 5; //根據(jù)判斷為true來(lái)遍歷循環(huán)添加進(jìn)新數(shù)組 返回大于2 小于5 的數(shù) 并形成一個(gè)新數(shù)組
});
console.log(newArr); //打印新數(shù)組 [3,4]
console.log(arr); //打印原數(shù)組，map()沒有改變?cè)瓟?shù)組 [1, 2, 3, 4, 5];
arr.reduce()
// arr.reduce(callback,[initialValue])
// reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素，接受四個(gè)參數(shù)：初始值（或者上一次回調(diào)函數(shù)的返回值），當(dāng)前元素值，當(dāng)前索引，調(diào)用 reduce 的數(shù)組。
// callback （執(zhí)行數(shù)組中每個(gè)值的函數(shù)，包含四個(gè)參數(shù)）
// 1、previousValue （上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue））
// 2、currentValue （數(shù)組中當(dāng)前被處理的元素）
// 3、index （當(dāng)前元素在數(shù)組中的索引）
// 4、array （調(diào)用 reduce 的數(shù)組）
// initialValue （作為第一次調(diào)用 callback 的第一個(gè)參數(shù)。）
// （1）簡(jiǎn)單用法
let arr1 = [1, 2, 3, 4, 5];
//求和
let sum = arr1.reduce((pre, item) => {
return pre + item;
}, 0);
console.log('sum=', sum); //15
//求積
let mul = arr1.reduce((x, y) => {
return x * y;
});
console.log('mul=', mul); //120
// （2）數(shù)組中元素出現(xiàn)的次數(shù)
let name = [1, 5, 2, 1, 6, 5, 1, 2, 4, 2, 4, 3, 5, 6];
let nameNum = name.reduce((pre, item) => {
if (item in pre) {
pre[item]++;
} else {
pre[item] = 1;
}
return pre;
}, {});
console.log('次數(shù)', nameNum); //{1: 3, 2: 3, 3: 1, 4: 2, 5: 3, 6: 2}
// （3）數(shù)組去重
let name = [1, 5, 2, 1, 6, 5, 1, 2, 4, 2, 4, 3, 5, 6];
let newArr = name.reduce((pre, item) => {
if (!pre.includes(item)) {
return pre.concat(item);
} else {
return pre;
}
}, []);
console.log('newArr', newArr); //[1,5,2,6,4,3]
arr.entries()
// 獲取數(shù)組的鍵值對(duì)entries方法
var arr = [1, 2, 3, 4, 5, 6];
for (const [idx, val] of arr.entries()) {
console.log(idx, val);
}
// 打印結(jié)果為
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// 5 6
arr.find()
// arr.find():查找出第一個(gè)符合條件的數(shù)組成員，并返回該成員，如果沒有找到就返回undefine
// 返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值，若沒有滿足測(cè)試函數(shù)的元素，則返回undefined
// function（必選）：在數(shù)組的元素上執(zhí)行的函數(shù)，它帶有三個(gè)參數(shù)
// 1、currentValue（必選）：元素
// 2、index（可選）：元素索引
// 3、arr（可選）：數(shù)組本身
let a = [
{ name: 'chen', age: 18 },
{ name: 'li', age: 10 },
{ name: 'li', age: 13 },
{ name: 'huang', age: 44 },
{ name: 'zhou', age: 100 }
];
let result = a.find((item) => item.name === 'li');
console.log(result); //返回第一個(gè)符合的元素{name:'li',age:10}
arr.concat()
// 合并數(shù)組
arr.concat('1',['2','3']) //[1,2,3]
浙公網(wǎng)安備 33010602011771號(hào)