<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var list = ['1','2','3'];
// 1 push: 往数组的最后一个位置追加元素
list.push(9);
console.log(list);
// 2 unshift: 往数组的第一个位置追加元素
list.unshift('kobe')
console.log(list);
// 3 pop: 移除数组中的最后一个元素，并返回这个被删除的元素
var p = list.pop()
console.log(p);
console.log(list);
// 4 shift: 移除数组中的第一个元素，并返回这个被删除的元素
var s = list.shift();
console.log(s);
console.log(list);
// 5 splice: 可以用来对js的数组进行删除，添加，替换等操作。
// 参数1：要开始删除的索引位置
// 参数2：表示要删除几个 如果写0 则是插入参数3往后的元素
// 参数3往后: 表示要替补的元素， 可以是多个
// 删除： splice（0，2）删除前两项
// 插入：splice(2,0,"red","green") 从位置2插入red, green
// 替换：splice(2,1,"red","green")删除位置2一项，然后从位置2插入red，green。
// splice方法始终会返回一个数组。
// 调用该方法的数组会改变。
var res = list.splice(1,1,22,33);
console.log('splice:')
console.log(res) // ["2"]
console.log(list); //["1", 22, 33, "3"]
// 6 slice:切割数组，返回新数组，不会对原始数组造成影响
// 参数1：切割的起始位置（包含该元素）
// 参数2：切割的结束位置（不包含该元素）
// 如果只传一个参数，表示从这个位置截到最后一个元素
var sliceres = list.slice(2,4);
console.log("slice")
console.log(sliceres)
console.log(list);
// 7 concat: 实现数组拼接,返回新数组，不影响原数组
var concatres = list.concat(["kobe",'ronaldo'])
console.log(concatres)
console.log(list);
// 8 reverse: 数组反转, 返回新数组，会影响原数组
var reverseres = list.reverse();
console.log("reverse");
console.log(reverseres);
console.log(list);
// 9 sort: 数组排序, 返回新数组，会影响原数组
// 9.1 按照字符编码的顺序进行排序
var list1 = [1,2,100,5,30];
var sortres1 = list1.sort();
console.log("sort1")
console.log(sortres1) // [1, 100, 2, 30, 5]
console.log(list1); // [1, 100, 2, 30, 5]
// 9.2 升序
function sortNumber1(a,b){return a - b};
var sort2 = list1.sort(sortNumber1);
console.log(sort2);// [1, 2, 5, 30, 100]
console.log(list1);// [1, 2, 5, 30, 100]
// 9.3 降序
function sortNumber2(a,b){return b - a};
var sort3 = list1.sort(sortNumber2);
console.log(sort3);// [100, 30, 5, 2, 1]
console.log(list1);// [100, 30, 5, 2, 1]
// 10 join: 把数组用字符串拼接, 返回拼接后的字符串 不影响原数组
var joinres = list1.join('-');
console.log(joinres); //100-30-5-2-1
console.log(list1);// [100, 30, 5, 2, 1]
// 11 toString:把数组转成字符串 不影响原数组
var tostringres = list1.toString();
console.log(tostringres);// 100,30,5,2,1
console.log(list1);// [100, 30, 5, 2, 1]
// 12 indexOf: 查询某个元素的索引位置， 返回第一个出现的元素的索引
var list2 = [2,4,6,4,7,8,2,3];
console.log(list2.indexOf(2)) //0
// 13 lastIndexOf: 查询某个元素的索引位置， 返回最后一个出现的元素的索引
console.log(list2.lastIndexOf(2)) //6
// 14 includes: 判断某个元素是否存在
console.log(list2.includes(2)); // true
console.log(list2.includes(1)); // false
var list5 = [
{
id: 1,
name: '小明',
gender: '男',
score: 100
},
{
id: 2,
name: '小磊',
gender: '男',
score: 59
},
{
id: 3,
name: '小红',
gender: '女',
score: 89
},
{
id: 4,
name: '小丽',
gender: '女',
score: 90
},
{
id: 5,
name: '小武',
gender: '男',
score: 66
}
];
// 15 forEach: 遍历数组，会遍历到数组的每个元素
list5.forEach(item=>{
console.log(item.id);
console.log(item.name);
});
// 16 filter: 过滤数组，遍历所有元素，会根据某个条件对数组进行过滤，
// 最终返回一个新数组，不会影响原数组
var filterres = list5.filter(item=>{
return item.gender == '男';
})
console.log(filterres);
// 17 map: 根据原数组，遍历所有元素，返回一个新的数组，但是数组元素结构可能会发生变化
// 回调函数中返回新数组的每一个元素
var mapres1 = list5.map(item=>{
return item.name;
})
console.log(mapres1); // ["小明", "小磊", "小红", "小丽", "小武"]
var mapres2 = list5.map(item=>{
return {username:item.name};
})
console.log(mapres2); // [{username: "小明"},{username: "小磊"},{username: "小红"},{username: "小丽"},{username: "小武"}]
// 18 some: 用于查询数组中是否有符合条件的某个元素，如果有，返回true，没有，就返回false
// 遍历的次数不确定，一旦找到符合条件的，就立即返回true，不再遍历
var someres = list5.some(item=>{
return item.score<60;
})
console.log(someres); // true
var someres2 = list5.some(item=>{
return item.score<50;
})
console.log(someres2); // false
// 19 every: 用于查询数组中是否每一个元素都符合条件，如果都符合，返回true, 如果有不符合的，返回false
// 遍历的次数不确定，一旦找到不符合条件的，就立即返回false，不再遍历
var everyres = list5.every(item=>{
return item.score>60;
})
console.log(everyres); // false
var everyres2 = list5.every(item=>{
return item.score>=59; // true
})
console.log(everyres2);
// 20 find: 查找符合条件的某个元素，返回元素对象 如果没找到 返回undefined
// 遍历的次数不确定，一旦找到符合条件的，就立即返回该元素对象，中止遍历
var findres = list5.find(item=>{
return item.score == 59;
})
console.log(findres); // {id: 2, name: "小磊", gender: "男", score: 59}
var findres2 = list5.find(item=>{
return item.score>80;
})
console.log(findres2);// {id: 1, name: "小明", gender: "男", score: 100}
var findres2 = list5.find(item=>{
return item.score < 59;
})
console.log(findres2); //undefined
// 21 findIndex: 查找符合条件的某个元素，返回元素的索引 如果没找着，返回-1
var findIndexRes = list5.findIndex(item=>{
return item.score<59;
})
console.log(findIndexRes); //-1
var findIndexRes2 = list5.findIndex(item=>{
return item.score > 60 && item.score <70;
})
console.log(findIndexRes2); // 4
// 22 reduce:为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
// 接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
// https://www.jianshu.com/p/e375ba1cfc47
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
},0) //注意这里设置了初始值
console.log(arr, sum);
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10
// 如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，
// 跳过第一个索引。如果提供initialValue，从索引0开始。
// 23 reduceRight(): reduce()方法从数组的第一项开始，逐个遍历到最后。
// 而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
// 24 fill: 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
// 语法：array.fill(value, start, end)
// value：必需。填充的值。
// start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
// end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。
let arr11 = [1,2,3,4,5,6];
arr11.fill(0); // [0, 0, 0, 0, 0, 0]
arr11.fill(0,1); // [1, 0, 0, 0, 0, 0]
arr11.fill(0,1,2); // [1, 0, 3, 4, 5, 6]
arr11.fill(0,-1); // [1, 2, 3, 4, 5, 0]
arr11.fill(0,1,-1); // [1, 0, 0, 0, 0, 6]
// 25 遍历数组方法 keys()、values()、entries()
// 这三个方法都是返回一个遍历器对象，可用for...of循环遍历，
// 唯一区别：keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。
// keys
let arr1 = ["a","b","c","d"];
for(let i of arr1.keys()){
console.log(i);
}
//打印：
// 0
// 1
// 2
// 3
// values
let arr2 = ["a","b","c","d"];
for(let i of arr2.values()){
console.log(i);
}
//打印：
// a
// b
// c
// d
// entries
let arr3 = ["a","b","c","d"];
for(let i of arr3.entries()){
console.log(i);
}
//打印：
// [0, "a"]
// [1, "b"]
// [2, "c"]
// [3, "d"]
for(let [idx,item] of arr3.entries()){
console.log(idx+":"+item);
}
//打印：
// 0:a
// 1:b
// 2:c
// 3:d
// 26 copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员
// 语法：array.copyWithin(target , start , end)
// target ：必需。从该位置开始替换数据。
// start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。
// end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
let arr22 = [1,2,3,4,5,6];
// let result1 = arr22.copyWithin(0);
let result2 = arr22.copyWithin(0,1);
// let result3 = arr22.copyWithin(1,3,5);
// let result4 = arr22.copyWithin(1,2,-1);
// let result5 = arr22.copyWithin(1,-4,6);
// console.log(result1); // [1, 2, 3, 4, 5, 6]
console.log(result2); // [2, 3, 4, 5, 6, 6]
// console.log(result3); // [1, 4, 5, 4, 5, 6]
// console.log(result4); // [1, 3, 4, 5, 5, 6]
// console.log(result5); // [1, 3, 4, 5, 6, 6]
</script>
</body>
</html>
10-17
188
188
05-08
327
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
