前端点滴(JS基础)(二)----倾尽所有
- JavaScript 内置对象(一)
- 内置对象公有属性
- Array 对象
- 1. Array 对象实例
- 2. Array 对象的方法
- (1)Array 对象的增、删、改、查、填充、截取
- (2)Array 对象的排序、分隔、连接、转换
- (3)Array 对象的判断、过滤、循环、累加
- 1. every() 检测数值元素的每个元素是否==都==符合条件。
- 2. some() 检测数组元素中是否==有==元素符合指定条件。
- 3. find() 返回符合传入测试(函数)条件的数组元素。
- 4. findIndex() 返回符合传入测试(函数)条件的数组元素索引。
- 5. includes() 判断一个数组是否包含一个指定的值。
- 6. isArray() 判断对象是否为数组。
- 7. filter() 检测数值元素,并返回符合条件所有元素的数组。(重点)
- 8. forEach() 数组每个元素都执行一次回调函数。(重点)
- 9. map() 通过指定函数处理数组的每个元素,并返回处理后的数组。(重点)
- 10. reduce() 将数组元素计算为一个值(累加器)。
- 3. 总结
JavaScript 内置对象(一)
内置对象公有属性
涉及面向对象编程(重点)!!!
1. constructor 返回对象的构造函数。
说明:在 JavaScript 中, constructor 属性返回对象的构造函数。js内置对象中都存在constructor属性,Match除外。用于返回创建对象的构造函数,还可用作类型的判别。
语法:
内置对象实例.constructor
实例:
/* Array */
var arr = new Array(1,2,3);
console.log(arr.constructor); //=> function Array() { [native code] }
var arr1 = new Array('chenjianer','yaodao','chen');
console.log(arr1.constructor); //=> function Array() { [native code] }
var arr2 = new Array({name:"chenjianer",age:20},{name:"yaodao",age:20},{name:"chen",age:20});
console.log(arr2.constructor); //=> function Array() { [native code] }
/* Object */
var obj = new Object({name:"chenjianer",age:20});
console.log(obj.constructor); //=> function Object() { [native code] }
/* String */
var str = new String('chenjianer');
console.log(str.constructor); //=> function String() { [native code] }
/* Number */
var num = new Number(1);
console.log(num.constructor); //=> function Number() { [native code] }
/* Boolean */
var bool = new Boolean(1/true);
console.log(bool.constructor); //=> function Boolean() { [native code] }
/* undefined */
var test;
console.log(test.constructor); //=> TypeError: Cannot read property 'constructor' of undefined
/* null */
var test2 = null;
console.log(test2.constructor); //=> TypeError: Cannot read property 'constructor' of null
/* Function */
function test3(){
}
var fn = new Function(test3());
console.log(fn.constructor); //=> function Function() { [native code] }
/* Date */
var test4 = new Date();
console.log(test4.constructor); //=> function Date() { [native code] }
2. prototype、__ proto __ 允许你向原型对象添加属性或方法。
说明:
prototype、__ proto __ 属性使您有能力向原型对象添加属性和方法。
语法:
构造函数.prototype.name=value
实例化对象.__proto__.name=value
上述的name可以是属性名、函数名;value可以是属性值、函数。
当构建一个属性,所有该类型的实例对象将被设置属性,它是默认值。
在构建一个方法时,所有该类型的实例对象都可以使用该方法。
因此:在JavaScript对象中,Prototype是一个全局属性。
/* Array原型对象添加方法 */
var arr = new Array(1,2,3);
arr.__proto__.test=function(){
this.push(4);
return this;
}
/**
*Array.prototype.test=function(){
*this.push(4);
*return this;
*}
console.log(arr.test()); //=> [1, 2, 3, 4]
/* Object原型对象添加属性*/
Object.prototype.name='chenjianer';
var obj = {age:20,sex:'male'};
console.log(obj); //=> {age: 20,name: "chenjianer",sex: "male"}
var obj1 = {age:25,sex:'female'};
console.log(obj1); //=> {age: 25,name: "chenjianer",sex: "female"}
/* 构造函数原型对象添加属性与方法 */
function fn(){
};
fn.prototype.name = 'chenjianer';
fn.prototype.say = function(){
console.log('向原型对象添加属性和方法');
}
var fn1 = new fn();
console.log(fn1); //=>{name:"chenjianer",say: fn()}
console.log(fn1.name); //=> "chenjianer"
fn1.say(); //=> "向原型对象添加属性和方法"
/* Number原型对象添加方法 */
Number.prototype.test1=function(){
return this+2;
}
var num = 0;
console.log(num.test1()); //=> 2
/* String原型对象添加方法 */
/* 此处说明在JavaScript对象中,Prototype是一个全局属性,谁需要谁就来调用 */
String.prototype.test2 = function(){
return this+"=yaodao";
}
var str = 'chenjianer';
console.log(str.test2()); //=> "chenjianer=yaodao"
var str2 = 'chenjianer2';
console.log(str2.test2()); //=> "chenjianer=yaodao"
3. length 仅用于设置或返回数组元素的个数。
语法:
array.length //=> 用于查询
array.length = number; //=> 用于设置个数
array.length = 0; //=> 用于清空数组
Array 对象
1. Array 对象实例
Array 对象(数组对象)用于在变量中存储多个值(可以是Num类型,String类型,Object类型的值),千万不要以为数组就是纯数字。
var arr = [1,2,3];
var arr = ['1','2','3'];
var arr = ["jack", "yaodao", "chen"];
var arr = [{name:"jack",age:20},{name:"yaodao",age:20},{name:"chen",age:20}];
var arr = new Array(1,2,3);
var arr = new Array('1','2','3');
....
第一个数组元素的索引值为 0,第二个索引值为 1,以此类推。
2. Array 对象的方法
(1)Array 对象的增、删、改、查、填充、截取
1. push() 向数组的末尾添加一个或更多元素,并返回新的长度。
语法:array.push(item1, item2, ..., itemX)
定义:
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
注意: 新元素将添加在数组的末尾。
注意: 此方法改变数组的长度。
注意: 其中的 item 可以为不同的类型。
实例:
/* push() 会改变原有的数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits) //=> ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
2. unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
语法:array.unshift(item1, item2, ..., itemX)
定义:
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
注意: 新元素将添加在数组的开头。
注意: 此方法改变数组的长度。
注意: 其中的 item 可以为不同的类型。
实例:
/* unshift() 会改变原有的数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Kiwi");
console.log(fruits) //=> ["Kiwi", "Banana", "Orange", "Apple", "Mango"]
3. splice() 从数组中添加或删除元素。
语法:array.splice(index(下标),howmany(删除数量),item1,.....,itemX(添加元素))
定义:
splice() 方法用于添加或删除数组中的元素。
注意: 这种方法会改变原始数组。
注意: 有添加元素就是添加(添加位置在索引前),无添加元素就是删除,howmany为删除数量,index为位置的索引(表示从哪开始)
实例:
/* splice() 会改变原有的数组 */
/* 删除元素 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1); //=> 返回的是被删除的元素数组["Apple"],如果 howmany 为 0 返回 []
console.log(fruits); //=> ["Banana", "Orange", "Mango"]
/* 添加元素 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi"); // 表示从下标 2 的前边开始添加
console.log(fruits); //=> ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
4. pop() 删除数组的最后一个元素并返回删除的元素。
语法:array.pop()
定义:
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
注意: 这种方法会改变原始数组。
注意: 此方法改变数组的长度!
注意: 删除数组最后的元素。
实例:
/* pop() 会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
console.log(fruits); //=> ["Banana", "Orange", "Apple"]
5. shift() 删除并返回数组的第一个元素。
语法:array.shift()
定义:
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
注意: 这种方法会改变原始数组。
注意: 此方法改变数组的长度!
注意: 删除数组开头(下标为 0)的元素。
实例:
/* shift() 会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
console.log(fruits); //=> ["Orange", "Apple", "Mango"]
6. 索引法修改数组元素
语法:array[index] = XXX;
定义:
注意: 这种方法会改变原始数组。
注意: index为元素的下标。
实例:
/* 此方法会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = 'chestnut'
console.log(fruits); //=> ["chestnut", "Orange", "Apple", "Mango"]
7. indexOf() 搜索数组中的元素,并返回它所在的位置。
语法:array.indexOf(item,start)
定义:
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时,start = 0)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
注意: 搜索到就立即返回,并且只返回最先符合搜索内容元素的索引。
注意: 如果在数组中没找到指定元素则返回 -1。
实例:
/* indexOf()仅用于搜索,不会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango","Apple"];
var a = fruits.indexOf("Apple");
console.log(a); //=> 2
var b = fruits.indexOf("chestnut");
console.log(b); //=> -1
8. lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置。
语法:array.lastIndexOf(item,start)
定义:
lastIndexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时,start = 0)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
注意: 搜索到就立即返回,并且只返回最后符合搜索内容元素的索引。
注意: 如果在数组中没找到指定元素则返回 -1。
实例:
/* lastIndexOf()仅用于搜索,不会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango","Apple"];
var a = fruits.lastIndexOf("Apple");
console.log(a); //=> 4
var b = fruits.lastIndexOf("chestnut");
console.log(b); //=> -1
9. fill() 使用一个固定值来填充数组。
语法:array.fill(value, start, end)
定义:
fill() 方法用于将一个固定值替换数组的元素。
注意: 参数value 必需。填充的值。
注意: 参数start 可选/不填(默认0)。开始填充位置。
注意: 参数end 可选/不填(默认数组长度)。停止填充位置 (默认为 array.length)
实例:
/* fill()会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);
console.log(fruits); //=> ["Banana", "Orange", "Runoob", "Runoob"]
fruits.fill("Runoob");
console.log(fruits); //=> ["Runoob", "Runoob", "Runoob", "Runoob"]
10. slice() 选取数组的的一部分,并返回一个新数组。
语法:array.slice(start, end)
定义:
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。
注意: start 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
注意: end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
个人习惯: 从第 n 个开始截取:start = n-1
实例:
/* slice() 方法不会改变原始数组 */
/* 截取第数组第二、三个元素 */
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
console.log(citrus); //=> ["Orange", "Lemon"]
/* 从第五个字符开始截取到最后 */
var str = "www.chenjianer.com!";
var res = str.slice(4);
console.log(res); //=> "chenjianer.com!"
(2)Array 对象的排序、分隔、连接、转换
1. sort() 对数组的元素进行排序。
语法:array.sort(sortfunction)
定义:
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
注意: 这种方法会改变原始数组。
注意: 当数字是按字母顺序排列时"40"将排在"5"前面。
注意: 使用数字排序,你必须通过一个函数作为参数来调用(升序或降序)。
实例:
/* sort()会改变原始数组 */
/* 数字按照字母排序 */
var points = [40,100,1,5,25,10,60,30];
points.sort();
console.log(points); //=> [1, 10, 100, 25, 30, 40, 5, 60]
/* 数字排序(数字和升序)*/
var points = [40,100,1,5,25,10,60,30];
points.sort(function(a,b){return a-b});
console.log(points); //=> [1, 5, 10, 25, 30, 40, 60, 100]
/* 数字排序(数字和降序)*/
var points = [40,100,1,5,25,10,60,30];
points.sort(function(a,b){return b-a});
console.log(points); //=> [100, 60, 40, 30, 25, 10, 5, 1]
/* 字符串首字母,字母顺序 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); //=> ["Apple", "Banana", "Mango", "Orange"]
/* 字符串首字母,字母倒序 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
console.log(fruits); //=> ["Orange", "Mango", "Banana", "Apple"]
2. reverse() 反转数组的元素顺序。
语法:array.reverse()
定义:
reverse() 方法用于颠倒数组中元素的顺序。
注意: 这种方法会改变原始数组。
实例:
/* reverse()会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits); //=> ["Mango", "Apple", "Orange", "Banana"]
3. join() 把数组的所有元素放入一个字符串。
语法:array.join(separator)
定义:
join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。
注意: 这种方法不会改变原始数组。
注意: separator规定分隔符号。
实例:
/* join()不会改变元素数组 */
/* 使用and对数组元素进行分隔 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.join(" and ");
console.log(res); //=> "Banana and Orange and Apple and Mango"
/* 简单使用join() 进行分隔 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = fruits.join();
console.log(res); //=> "Banana,Orange,Apple,Mango"
4. concat() 连接两个或更多的数组,并返回结果。
语法:array1.concat(array2,array3,...,arrayX)
定义:
concat() 方法用于连接两个或多个数组。会返回被连接数组的一个副本。
注意: 这种方法不会改变原始数组。
实例:
/* concat() 不会改变原始数组 */
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin"];
var arr4 = hege.concat(stale,kai);
console.log(arr4) //=> ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]
实例二:
传递两个参数m,n,返回长度为m,所有元素都为n的数组,要求不能用循环。
利用函数的递归和 concat() 方法可以实现:
function fn(m, n) {
return m ? fn(m - 1, n).concat(n) : [];
}
console.log(fn(8,2)); //=> [2, 2, 2, 2, 2, 2, 2, 2]
原理其实就是当m 递减到 0时,函数return[],后又因为函数调用了8次concat(),所以:[].concat(2).concat(2).concat(2).concat(2).concat(2).concat(2).concat(2).concat(2) === [2, 2, 2, 2, 2, 2, 2, 2]
5. toString() 把数组转换为字符串,并返回结果。
语法:array.toString()
定义:
toString() 方法可把数组转换为字符串,并返回结果。类似于join()
注意: 这种方法不会改变原始数组。
注意: 数组中的元素之间用逗号分隔。
实例:
/* toString() 不会改变原始数组 */
var arr = [1, 2, 3, 4];
var res = arr.toString();
console.log(res); //=> "1,2,3,4"
(3)Array 对象的判断、过滤、循环、累加
1. every() 检测数值元素的每个元素是否都符合条件。
语法:array.every(function(currentValue,index,arr), thisValue)
定义:
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
注意: every() 不会改变原始数组。
注意: every() 不会对空数组进行检测。
注意: currentValue 必须。当前元素的值。
注意: index 可选。当前元素的索引值。
注意: arr 可选。当前元素属于的数组对象。
实例:
/* every() 不会改变原始数组,具有遍历的作用,返回的是Boolean值 */
var ages = [32, 33, 22, 40];
// 定义判断函数
function checkAdult(age) {
return age >= 30
}
console.log(ages.every(checkAdult)); //=> false
2. some() 检测数组元素中是否有元素符合指定条件。
语法:array.some(function(currentValue,index,arr),thisValue)
定义:
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会改变原始数组。
注意: some() 不会对空数组进行检测。
参数说明同上;
实例:
/* some() 不会改变原始数组,具有遍历的作用,返回的是Boolean值 */
var ages = [32, 33, 22, 40];
// 定义判断函数
function checkAdult(age) {
return age >= 30
}
console.log(ages.some(checkAdult)); //=> true
3. find() 返回符合传入测试(函数)条件的数组元素。
语法:array.find(function(currentValue, index, arr),thisValue)
定义:
find() 方法返回通过测试(函数内判断)的数组的第一个且只有一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意: find() 并没有改变数组的原始值。
注意: find() 对于空数组,函数是不会执行的。
参数说明同上;
实例:
/* find() 不会改变原始数组,具有遍历的作用,返回的是第一个符合判断条件的元素值,若不存在符合条件的元素就返回undefined */
var ages = [32, 33, 22, 40];
// 定义判断函数
function checkAdult(age) {
return age >= 30
}
console.log(ages.find(checkAdult)); //=> 32
// 定义判断函数
function checkAdult2(age) {
return age >= 45
}
console.log(ages.find(checkAdult2)); //=> undefined
4. findIndex() 返回符合传入测试(函数)条件的数组元素索引。
语法:array.findIndex(function(currentValue, index, arr), thisValue)
定义:
findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。 ( 类似于indexOf() )
findIndex() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
注意: findIndex() 不会改变数组的原始值。
注意: findIndex() 对于空数组,函数是不会执行的。
实例:
/* findIndex() 不会改变原始数组 */
var ages = [32, 33, 22, 40];
// 定义判断函数
function checkAdult(age) {
return age >= 35
}
console.log(ages.findIndex(checkAdult)); //=> 3
// 定义判断函数
function checkAdult2(age) {
return age >= 45
}
console.log(ages.findIndex(checkAdult2)); //=> -1
5. includes() 判断一个数组是否包含一个指定的值。
语法:arr.includes(searchElement, fromIndex)
定义:
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
注意: includes() 不会改变数组的原始值。
注意: searchElement 必须。需要查找的元素值(类型要相同,不然会返回false)。
注意: fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索;如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索
实例:
/* includes() 不会改变原始数组 */
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // 超出搜索范围,false
[1, 2, 3].includes(3, -1); // (array.length + fromIndex)=3-1=2,true
[1, 2, NaN].includes('NaN'); // 类型要相同,false
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); //(array.length + fromIndex)<0,全数组搜索, true
6. isArray() 判断对象是否为数组。
语法:Array.isArray(obj)
定义:
isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true,否则返回 false。
注意: obj为判断对象
实例:
/* isArray() 不会改变原始数组 */
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var res = Array.isArray(fruits);
console.log(res) //=> true
7. filter() 检测数值元素,并返回符合条件所有元素的数组。(重点)
过滤出来并不是过滤掉 , 还可以利用来去重
语法:array.filter(function(currentValue,index,arr), thisValue)
定义:
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会改变原始数组。
注意: filter() 不会对空数组进行检测。
实例:
/* filter() 不会改变原始数组 */
var ages = [32, 33, 16, 40, 40, 32, 15, 20, 16, 33];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.filter(checkAdult)) //=> [32, 33, 40, 40, 32, 20, 33]
去重实例:
var
res,
ages = [32, 33, 16, 40, 40, 32, 15, 20, 16, 33];
res = ages.filter(function(el,index,self){
return self.indexOf(el) === index;
})
console.log(res); //=> [32, 33, 16, 40, 15, 20]
原理就是:
return self.indexOf(el) === index;
说明:filter函数遍历数组中每一个元素(el),self表示对象本身通过indexOf寻再到每个el首次出现的位置,如果它与filter遍历出来的index相等就会被筛选出来(输出)
实例二:
/* 筛选出奇数 */
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0; //关键作用在 return 中
});
console.log(r); //=> [1, 5, 9, 15]
实例三:
/* 把一个Array中的空字符串删掉 */
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim();
});
console.log(arr); // ['A', 'B', 'C']
8. forEach() 数组每个元素都执行一次回调函数。(重点)
语法:array.forEach(function(currentValue, index, arr), thisValue)
定义:
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: filter() 不会改变原始数组。
注意: forEach() 对于空数组是不会执行回调函数的。
关键是: forEach() 返回值为undefined。
实例:
9. map() 通过指定函数处理数组的每个元素,并返回处理后的数组。(重点)
语法:array.map(function(currentValue,index,arr), thisValue)
定义:
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会改变原始数组。
注意: map() 不会对空数组进行检测。
关键是: map() 有返回值
实例:
10. reduce() 将数组元素计算为一个值(累加器)。
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
定义:
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduceRight() 方法接收一个函数作为累加器,数组中的每个值(从右到左)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
注意: total 必需。初始值, 或者计算结束后的返回值。
注意: currentValue 必需。当前元素
注意: initialValue 可选。传递给函数的初始值
实例:
var numbers = [65, 44, 12, 4];
const res = numbers.reduce((total, currentValue) => total + currentValue, 10);
console.log(res); //=> 135
var numbers = [65, 44, 12, 4];
const res = numbers.reduceRight((total, currentValue) => total + currentValue, 10);
console.log(res); //=> 135
3. 总结
内置对象的公有属性prototype、__ proto __、constructor是后期面向对象编程的重点。涉及到“两链一包”中的原型链、深浅拷贝…
Array对象的常用方法:
Array对象的增、删、改、查、填充、截取(push、pop、shift、unshift、splice、fill)都会改变原始数组,indexOf、lastIndexOf、slice 除外;
Array对象的排序、连接、分隔、转换(sort、reverse)会改变原始数组,join、concat、toString 除外;
Array对象的判断、过滤、循环、累加均不会改变元素数组,对于空数组不会进行检测。
除了常规的Array对象方法的使用外,数组循环是后期的重中之重。
所以,需要清楚用法还需清楚使用环境:
一般的循环用for,for…in,for…of 和 forEach()
需要映射为新数组的用 map()(后面的map作用很大!!),
需要筛选出想要的用 filter(),
数值需要进行累加的用reduce(),
如果要找一些值用 some() 和 every(),
如果想知道值的具体位置的可以用 indexOf() 和 lastIndexOf()
不仅如此还可以按照实际情况进行链式操作。
最后,来个实例:
/* 链式操作 */
var personnel = [
{
id: 5,
name: "Luke Skywalker",
pilotingScore: 98,
shootingScore: 56,
isForceUser: true,
},
{
id: 82,
name: "Sabine Wren",
pilotingScore: 73,
shootingScore: 99,
isForceUser: false,
},
{
id: 22,
name: "Zeb Orellios",
pilotingScore: 20,
shootingScore: 59,
isForceUser: false,
},
{
id: 15,
name: "Ezra Bridger",
pilotingScore: 43,
shootingScore: 67,
isForceUser: true,
},
{
id: 11,
name: "Caleb Dume",
pilotingScore: 71,
shootingScore: 85,
isForceUser: true,
},
];
/* 箭头函数 es6 规则 */
/* 不要使用 forEach,因为没有 return ! ! */
const totalJediScore = personnel
.filter(person => person.isForceUser)
.map(jedi => jedi.pilotingScore + jedi.shootingScore)
.reduce((acc, score) => acc + score, 0);
console.log(totalJediScore) //=> 420,不明白自己看上面