1. Array.form()； 方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。可以传3个参数，其中第一个是数组，必传；第二个是一个函数（类似map函数），对数组元素进行操作后再返回数组，可选；第三个是对于 this关键字的指向，可选。
<script type="text/javascript">
//(1).类似数组对象 转换为真正的数组
//length为必有 如没有则返回空数组 []
//若length值大于键值对的长度则返回对应长度的数组超出部分为undefined ['a', 'b', 'c',undefined]
//若length值小于键值对长度 则只返回对应长度的数组['a', 'b']
let array1 = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr1 = Array.from(array1 );
console.log(arr1); // ['a', 'b', 'c']
//实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，
//以及函数内部的arguments对象。Array.from()方法都可以将它们转为真正的数组。
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
//querySelectorAll方法返回的是一个类似数组的对象，可以将这个对象转为真正的数组，再使用forEach方法。
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
//将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免
JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug。
Array.from('hello');//['h', 'e', 'l', 'l', 'o']
Array.from('hello').length;
//如果参数是一个真正的数组 则会返回数据相同的数组 类似（...）扩展运算符的作用
let arr2 = Array.from(array1);
console.log(arr2); // ['a', 'b', 'c']
//任何有length属性的对象，都可以通过Array.from()方法转为数组
Array.from({ length: 3 });// [ undefined, undefined, undefined ]
//(2).第二个参数，作用类似于数组的map方法 用来对每个元素进行处理，将处理后的值放入返回的数组。
let arr3=Array.form(arr1 ,item=>item+item);
console.log(arr3);//['aa','bb','cc']
//第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活
Array.from({ length: 2 }, () => 'jack')
//(3). 如果map函数里面用到了this关键字，还可以传入Array.from()方法的第三个参数，用来绑定this。
</script>
2.new Set()；数组去重
<script type="text/javascript">
let aaa = [1,2,45,1,2,2,45];
//因new Set()返回的结构类似键值对所以需要用 Array.from() 转换
console.log(Array.from(new Set(aaa)))
</script>3.sort()；排序。
<script type="text/javascript">
let arr = [9, 2, 4, 5, 6, 7, 8, 10, 11, 12, 15]
console.log(arr.sort((a, b) => a - b)); //升序 [2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 15]
console.log(arr.sort((a, b) => b - a)); //降序 [15, 12, 11, 10, 9, 8, 7, 6, 5, 4, 2]
let arr1 = [{
"name": "糖果",
"money": 23,
"num": 30
}, {
"name": "豆奶",
"money": 38,
"num": 24
}, {
"name": "方便面",
"money": 4.8,
"num": 36
}];
console.log([...arr1.sort((a, b) => a['money'] - b['money'])]); //升序
//[{name: "方便面", money: 4.8, num: 36},{name: "糖果", money: 23, num: 30},{name: "豆奶", money: 38, num: 24}]
console.log([...arr1.sort((a, b) => b['money'] - a['money'])]); //降序
//[{name: "豆奶", money: 38, num: 24},{name: "糖果", money: 23, num: 30},{name: "方便面", money: 4.8, num: 36}]
</script>4.map()；通过指定函数处理数组的每个元素，并返回处理后的数组 （特性：方法按照原始数组元素顺序依次处理元素。不会对空数组进行检测。不会改变原始数组。）
<script type="text/javascript">
//按照原始数组元素顺序依次处理元素。
let arr1=[2,5,9,20];
console.log(arr1.map(x=>x*2));//[4, 10, 18, 40]
// 不会改变原始数组。
let arr2 = [{
"name": "张三",
"age": "23"
}, {
"name": "李四",
"age": "24"
}, {
"name": "王老五",
"age": "48"
}];
let newArr=[];
arr2.map((item, index, array) => {
newArr.push({
a:item.name
})
});
console.log(newArr);
//[{a: "张三"},{a: "李四"},{a: "王老五"}]
console.log(arr2);//不会改变
</script>5.forEach()；调用数组的每个元素，并将元素传递给回调函数
<script type="text/javascript">
//循环数组
let arr2 = [{
"name": "张三",
"age": "23"
}, {
"name": "李四",
"age": "24"
}, {
"name": "王老五",
"age": "48"
}];
arr2.forEach((item,index,array)=>{
item.a=1
})
console.log(arr2);//[{name: "张三", age: "23", a: 1}, {name: "李四", age: "24", a: 1},{name: "王老五", age: "48", a: 1}]
//遍历dom节点修改内容
let domNodes=document.querySelectorAll('li');
domNodes.forEach((item, index, array)=>{
console.log(item)
console.log(index)
item.innerHTML=index;
})
</script>6.every()；检测所有元素是否都符合条件。如果数组中有一个元素不满足，则返回 false ，且剩余的元素不会再进行检测。如果都满足条件，则返回 true;不会对空数组进行检测;不会改变原始数组
<script type="text/javascript">
let arr1 = [{
"name": "张三",
"age": "23"，
"status":true
}, {
"name": "李四",
"age": "24"，
"status":true
}, {
"name": "王老五",
"age": "48"，
"status":true
}];
console.log(arr1.every(item => item.age < 50));//true
let arr2 = [1, 2, 3, 4, 5, 6, 7];
console.log(arr2.every(item => item > 5));//false
//实际应用 复选框全选功能
let arr2=arr1.filter(item => item.status == true);//false
console.log(arr1);//原数组不变
</script>7.some();检测是否存在符合条件 如果有一个元素满足条件，则表返回true , 剩余的元素不会再执行检测。如果没有满足条件，则返回false。
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.some((item, index, array)=> item > 8));//true
let arr1 = [{
"name": "张三",
"age": "23",
"status":true
}, {
"name": "李四",
"age": "24",
"status":true
}, {
"name": "王老五",
"age": "48",
"status":false
}];
console.log(arr1.some(item => item.age >=60 ));//false
</script>8.filter()；创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = arr.filter(item => item > 8);
console.log(res);//[9,10]
let arr1 = [{
"name": "张三",
"age": "23",
"status":true
}, {
"name": "李四",
"age": "24",
"status":true
}, {
"name": "王老五",
"age": "48",
"status":false
}];
//实际应用 穿梭框功能
let arr2=arr1.filter(item => item.status == true);
console.log(arr2);//[{"name": "张三","age": "23","status":true}, {"name": "李四","age": "24","status":true}]
console.log(arr1);//原数组不变
</script>9.concat()；拼接数组, 返回新数组, 不改变现有数组;
<script type="text/javascript">
let arr1 = [{
"name": "张三",
"age": "23"
}, {
"name": "李四",
"age": "24"
}, {
"name": "王老五",
"age": "48"
}];
let arr2=[1,2,3];
let arr3=[25,36,47];
let arr4=[];
console.log(arr4.concat(arr1,arr2, arr3));
//[{"name": "张三","age": "23"}, {"name": "李四","age": "24"}, {"name": "王老五","age":"48"},1,2,3,25,36,47]
console.log(arr1);//原数组不变
</script>10.copyWithin()；从数组的指定位置拷贝元素到数组的另一个指定位置中, 改变原数组
<script type="text/javascript">
//copyWithin(target,start,end)接受三个参数
//target 要改变的元素起始位置
//start 起始位置 (可省略, 负数从后向前)
//end 结束位置, 不含当前 (可省略, 负数从后向前)
//start省略表示从0开始，end省略表示数组的长度
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = [1, 2, 3, 4, 5, 6, 7];
console.log(arr1.copyWithin(4, 0, 2));//[1, 2, 3, 4, 1, 2, 7, 8, 9, 10]
console.log(arr2.copyWithin(4, 2));//[1, 2, 3, 4, 3, 4, 5]
</script>11.fill()；从数组的指定位置拷贝元素到数组的另一个指定位置中, 改变原数组
<script type="text/javascript">
//fill(value,start,end)接受三个参数
//value 使用一个固定值来填充数组或用value值代替
//start 要替换的起始位置 (可省略, 负数从后向前)
//end 要替换的结束位置, 不含当前 (可省略, 负数从后向前)
//start省略表示从0开始，end省略表示数组的长度
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = [1, 2, 3, 4, 5, 6, 7];
console.log(arr1.fill('hello'));//['hello', 'hello', 'hello', 'hello', 'hello', 'hello', 'hello', 'hello', 'hello', 'hello']
console.log(arr2.fill('hello',1,4));//[1, 'hello', 'hello', 'hello', 5, 6, 7]
</script>12.find()；创建一个新的数组，新数组中的元素是符合条件的第一个元素
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = arr.find((item, index, array)=> item > 7);
console.log(res);//[8]
let arr1 = [{
"name": "张三",
"age": "23",
"status":true
}, {
"name": "李四",
"age": "24",
"status":true
}, {
"name": "王老五",
"age": "48",
"status":false
}];
console.log(arr1.find((item, index, array)=> item.name == "王老五"));
//{"name": "王老五", "age": "48","status":false}
console.log(arr1);//原数组不变
</script>13.findIndex()；检测条件的第一个元素的下标（位置）。找到之后不会再调用执行函数。
<script type="text/javascript">
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = arr.findIndex((item, index, array)=> item > 7);
console.log(res);// 7
let arr1 = [{
"name": "张三",
"age": "23",
"status":true
}, {
"name": "李四",
"age": "24",
"status":true
}, {
"name": "王老五",
"age": "48",
"status":false
}];
console.log(arr1.findIndex((item, index, array)=> item.name == "王老五"));//2
console.log(arr1);//原数组不变
</script>14.reduce()；求和 （必须位数字）
<script type="text/javascript">
array.reduce(function(total, value , index, arr){}, initialVal);
total 必需。初始值, 或者计算结束后的返值
value 必需。当前元素
index 可选。当前元素的索引
initialVal 可选。传递给函数的初始值
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.reduce((total,num)=>total+Math.round(num)));//21
let arr1 = [14.5, 36.8, 4, 7.6];
console.log(arr1.reduce((total,num)=>total+Math.round(num)));//63.5
let arr2 = [{
"name": "糖果",
"money": "23",
"num":30
}, {
"name": "豆奶",
"age": "38",
"num":24
}, {
"name": "方便面",
"age": "4.8",
"26":false
}];
//实际应用 购物车金额计算
console.log(arr2.map(item=>item.money).reduce((total, value)=>total+value,0).toFixed(2));//65.80
</script>15.entries()；返回数组的可迭代对象；是JavaScript中的内置函数，用于获取新的Array，其中包含数组每个索引的键和值对 。
<script type="text/javascript">
let a = ['a','b','c','d']
let iterator = a.entries();
console.log(iterator);//Array Iterator {} 控制台查看
console.log(iterator.next().value);//[0, "a"]
for (let [key, value] of iterator ) {
console.log(`${key}: ${value}`)
}
//1: b
//2: c
//3: d
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
