1.数组篇
1.1 pop shift 返回删除了元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // x 的值是 "Mango"
1.2 push unshift返回的是数组当前的长度
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // x 的值是 5
1.3 splice 返回一个包含已删除项的数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // 删除 fruits 中的第一个元素
1.4 concat 合并数组
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3) // 方法不会更改现有数组。它总是返回一个新数组。
1.5 slice 切割数组
// 相比较于splice slice不会改变原数组，但功能没有splice强大
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2); // ["Lemon", "Apple", "Mango"]
console.log(fruits) // ["Banana", "Orange", "Lemon", "Apple", "Mango"]
1.6 sort 排序
// sort 排序的原理
// 当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。
// 中文姓名的拼音首字母排序的检索思路 通过将文字转化成拼音
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
1.7 fill 函数的简单用法
arr.fill(value, start, end)
value：填充值。
start：填充起始位置，可以省略。
end：填充结束位置，可以省略，实际结束位置是end-1。
1.采用一默认值填初始化数组。
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr1.fill(7)
console.log('%s', arr1)
7,7,7,7,7,7,7,7,7,7,7
2.制定开始和结束位置填充。
实际填充结束位置是前一位。
const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr3.fill(7, 2, 5)
console.log('%s', arr3)
1,2,7,7,7,6,7,8,9,10,11
3.结束位置省略。
从起始位置到最后。
onst arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr4.fill(7, 2)
console.log('%s', arr4)
1,2,7,7,7,7,7,7,7,7,7
1.8 reduce 函数的用法
array.reduce(function(total, current, index, arr), initvalue)
1、reduce()累加和累乘
let arr3 = [1,3,4,6,7];
let sum3 = arr3.reduce((pre,cur)=> pre+cur, 0)
let multiply = arr3.reduce((pre,cur) => pre*cur, 0)
console.log(sum3) // 21
2.reduce 数组去重
// 数组去重
let arr4 = [1,3,2,5,3,1,2,7,8];
let newArr = arr4.reduce((pre,cur)=>{
if(!pre.includes(cur)){
return pre.concat(cur)
} else {
return pre
}
},[]); // 初始值可以为数组
console.log(newArr, '数组去重') // [1, 3, 2, 5, 7, 8]
3. 将二维数组转换成一维数组
// 将二维数组转换成一维数组
let arr5 = [[1,2],[3,4],[5,7]];
let newArr2 = arr5.reduce((pre,cur)=>{
return pre.concat(cur)
},[]);
console.log(newArr2, '二维转成一维') // [1, 2, 3, 4, 5, 7]
4.操作对象属性
const data = [
{
id:1,
name:'安徽'
},
{
id:2,
name:'南京'
},
{
id:3,
name:'上海'
},
{
id:4,
name:'杭州'
},
{
id:5,
name:'天津'
},
{
id:6,
name:'北京'
},
{
id:7,
name:'山东'
},
{
id:8,
name:'河南'
},
{
id:9,
name:'重庆'
},
{
id:10,
name:'成都'
},
{
id:11,
name:'合肥'
},
]
const city_list = data.reduce((prev, item, idx) => {
let key =
idx > 8
? `${idx + 1}00`
: `0${idx + 1}00`;
prev[key] = item.name;
return prev;
}, {});
console.log(city_list, '转换后的城市列表')
5.计算数组每个元素出现的次数
// 计算数组中每个元素出现的次数
let arr7 =['红','黄','黑','黄','蓝','红']
let num = arr7.reduce((pre,cur)=>{
if(cur in pre){
pre[cur]++
}else {
pre[cur] = 1
}
return pre
},{})
console.log(num,'num对象') //{红: 2, 黄: 2, 黑: 1, 蓝: 1}
1.9 Array.form() 用法
Array.from(object, mapFunction, thisValue)
1. 构造指定长度并且有规律的数组
const myArr = Array.from({length: 5}, (v,i) => {
console.log(v, i)
return i+1});
console.log(myArr) // [ 1, 2, 3, 4, 5 ]
2.将伪数组转化成真正的数组
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]
3.将 new set()结构的数据转化成真正的数组‘
这个方法常用于数组去重
unction unique(array) {
return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]
4. 将字符串转化成数组
let str = 'hello world!';
let arr = Array.from(str);
console.log(arr); // ["h", "e", ..., ' ', 'w',...]
5. 浅克隆一个数组
const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);
numbers === numbersCopy; // => false
1.10 map和forEach 函数的比较
1.map函数返回一个新的数组，在map的回调函数里，迭代每一项的时候也必须有返回值。 如果数组为空则无法进行遍历，所以要对数组做非空校验。
2.forEach 没有返回值，数值为空后可以运行，不报错
1.11 数组元素的查找 find ,findIndex, indexOf, lastIndexOf
1.find与indexOf 的比较
indexOf 的兼容型更好，同时indexof 可以接受第二个参数来约束起始查找的位置，功能更强大。
find 用于查找符合规则的数组项，并将其整合成一个数组。
2. lastIndex 从末尾查找符合项的位置
3. indexOf 与 findIndex 的区别
indexOf 使用与简单的数组
find 适用与比较复杂的数组，比如对象数组
1.12 数组实训
1. 数组去重
\
