摘要:需要返回值,如果不給,默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。
前言
本文主要介紹數(shù)組常見遍歷方法:forEach、map、filter、find、every、some、reduce,它們有個共同點:不會改變原始數(shù)組。
一、forEach:遍歷數(shù)組var colors = ["red","blue","green"]; // ES5遍歷數(shù)組方法 for(var i = 0; i < colors.length; i++){ console.log(colors[i]);//red blue green }
// ES6 forEach colors.forEach(function(color){ console.log(color);//red blue green });
我們再來看個例子:遍歷數(shù)組中的值,并計算總和
var numbers = [1,2,3,4,5]; var sum = 0; numbers.forEach(number=>sum+=number) console.log(sum)//15二、map:將數(shù)組映射成另一個數(shù)組
map通過指定函數(shù)處理數(shù)組的每個元素,并返回處理后新的數(shù)組,map 不會改變原始數(shù)組。
forEach和map的區(qū)別在于,forEach沒有返回值。
map需要返回值,如果不給return,默認返回undefined
使用場景1
假定有一個數(shù)值數(shù)組(A),將A數(shù)組中的值以雙倍的形式放到B數(shù)組
var numbers = [1,2,3]; var doubledNumbers = []; // es5寫法 for(var i = 0; i < numbers.length; i++){ doubledNumbers.push(numbers[i] * 2); } console.log(doubledNumbers);//[2,4,6]
// es6 map方法 var doubled = numbers.map(function(number){ return number * 2; }) console.log(doubled);//[2,4,6]
使用場景2 假定有一個對象數(shù)組(A),將A數(shù)中對象某個屬性的值存儲到B數(shù)組中
var cars = [ {model:"Buick",price:"CHEAP"}, {model:"BMW",price:"expensive"} ]; var prices = cars.map(function(car){ return car.price; }) console.log(prices);//["CHEAP", "expensive"]三、filter:從數(shù)組中找出所有符合指定條件的元素
filter() 檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 filter() 不會改變原始數(shù)組。
使用場景1:假定有一個對象數(shù)組(A),獲取數(shù)組中指定類型的對象放到B數(shù)組中
var porducts = [ {name:"cucumber",type:"vegetable"}, {name:"banana",type:"fruit"}, {name:"celery",type:"vegetable"}, {name:"orange",type:"fruit"} ]; // es5寫法 var filteredProducts = []; for(var i = 0; i < porducts.length; i++){ if(porducts[i].type === "vegetable"){ filteredProducts.push(porducts[i]); } } console.log(filteredProducts);//[{name: "cucumber", type: "vegetable"}, {name: "celery", type: "vegetable"}]
// es6 filter var filtered2 = porducts.filter(function(product){ return product.type === "vegetable"; }) console.log(filtered2);
使用場景2:假定有一個對象數(shù)組(A),過濾掉不滿足以下條件的對象
條件: 蔬菜 數(shù)量大于0,價格小于10
var products = [ {name:"cucumber",type:"vegetable",quantity:0,price:1}, {name:"banana",type:"fruit",quantity:10,price:16}, {name:"celery",type:"vegetable",quantity:30,price:8}, {name:"orange",type:"fruit",quantity:3,price:6} ]; products = products.filter(function(product){ return product.type === "vegetable" && product.quantity > 0 && product.price < 10 }) console.log(products);//[{name:"celery",type:"vegetable",quantity:30,price:8}]
使用場景3:假定有兩個數(shù)組(A,B),根據(jù)A中id值,過濾掉B數(shù)組不符合的數(shù)據(jù)
var post = {id:4,title:"Javascript"}; var comments = [ {postId:4,content:"Angular4"}, {postId:2,content:"Vue.js"}, {postId:3,content:"Node.js"}, {postId:4,content:"React.js"}, ]; function commentsForPost(post,comments){ return comments.filter(function(comment){ return comment.postId === post.id; }) } console.log(commentsForPost(post,comments));//[{postId:4,content:"Angular4"},{postId:4,content:"React.js"}]四、find:返回通過測試(函數(shù)內判斷)的數(shù)組的第一個元素的值
它的參數(shù)是一個回調函數(shù),所有數(shù)組成員依次執(zhí)行該回調函數(shù),直到找出第一個返回值為true的成員,然后返回該成員。如果沒有符合條件的成員,則返回undefined。
使用場景1
假定有一個對象數(shù)組(A),找到符合條件的對象
var users = [ {name:"Jill"}, {name:"Alex",id:2}, {name:"Bill"}, {name:"Alex"} ]; // es5方法 var user; for(var i = 0; i < users.length; i++){ if(users[i].name === "Alex"){ user = users[i]; break;//找到后就終止循環(huán) } } console.log(user);// {name:"Alex",id:2}
// es6 find user = users.find(function(user){ return user.name === "Alex"; }) console.log(user);// {name:"Alex",id:2}找到后就終止循環(huán)
使用場景2:假定有一個對象數(shù)組(A),根據(jù)指定對象的條件找到數(shù)組中符合條件的對象
var posts = [ {id:3,title:"Node.js"}, {id:1,title:"React.js"} ]; var comment = {postId:1,content:"Hello World!"}; function postForComment(posts,comment){ return posts.find(function(post){ return post.id === comment.postId; }) } console.log(postForComment(posts,comment));//{id: 1, title: "React.js"}五、every&some
every:數(shù)組中是否每個元素都滿足指定的條件
some:數(shù)組中是否有元素滿足指定的條件
使用場景1:計算對象數(shù)組中每個電腦操作系統(tǒng)是否可用,大于16位操作系統(tǒng)表示可用,否則不可用
//ES5方法 var computers = [ {name:"Apple",ram:16}, {name:"IBM",ram:4}, {name:"Acer",ram:32} ]; var everyComputersCanRunProgram = true; var someComputersCanRunProgram = false; for(var i = 0; i < computers.length; i++){ var computer = computers[i]; if(computer.ram < 16){ everyComputersCanRunProgram = false; }else{ someComputersCanRunProgram = true; } } console.log(everyComputersCanRunProgram);//false console.log(someComputersCanRunProgram);//true
//ES6 some every var every = computers.every(function(computer){ return computer.ram > 16; }) console.log(every);//false var some = computers.some(function(computer){ return computer.ram > 16; }) console.log(some);//true
一言以蔽之:Some: 一真即真;Every: 一假即假
使用場景2:假定有一個注冊頁面,判斷所有input內容的長度是否大于0
function Field(value){ this.value = value; } Field.prototype.validate = function(){ return this.value.length > 0; } //ES5方法 var username = new Field("henrywu"); var telephone = new Field("18888888888"); var password = new Field("my_password"); console.log(username.validate());//true console.log(telephone.validate());//true console.log(password.validate());//true //ES6 some every var fields = [username,telephone,password]; var formIsValid = fields.every(function(field){ return field.validate(); }) console.log(formIsValid);//true if(formIsValid){ // 注冊成功 }else{ // 給用戶一個友善的錯誤提醒 }六、reduce:將數(shù)組合成一個值
reduce() 方法接收一個方法作為累加器,數(shù)組中的每個值(從左至右) 開始合并,最終為一個值。
使用場景1: 計算數(shù)組中所有值的總和
var numbers = [10,20,30]; var sum = 0; //es5 方法 for(var i = 0; i < numbers.length; i++){ sum += numbers[i]; } console.log(sum);
// es6 reduce var sumValue = numbers.reduce(function(sum2,number2){ console.log(sum2);//0 10 30 60 return sum2 + number2; },0);//sum2初始值為0 console.log(sumValue);
使用場景2:
將數(shù)組中對象的某個屬性抽離到另外一個數(shù)組中
var primaryColors = [ {color:"red"}, {color:"yellow"}, {color:"blue"} ]; var colors = primaryColors.reduce(function(previous,primaryColor){ previous.push(primaryColor.color); return previous; },[]); console.log(colors);//["red", "yellow", "blue"]
使用場景3:判斷字符串中括號是否對稱
function balancedParens(string){ return !string.split("").reduce(function(previous,char){ if(previous < 0) { return previous;} if(char == "("){ return ++previous;} if(char == ")"){ return --previous;} return previous; },0); } console.log(balancedParens("((())))"));
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://systransis.cn/yun/114093.html
摘要:需要返回值,如果不給,默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要:需要返回值,如果不給,默認返回使用場景假定有一個數(shù)值數(shù)組將數(shù)組中的值以雙倍的形式放到數(shù)組寫法方法使用場景假定有一個對象數(shù)組將數(shù)中對象某個屬性的值存儲到數(shù)組中三從數(shù)組中找出所有符合指定條件的元素檢測數(shù)值元素,并返回符合條件所有元素的數(shù)組。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...
摘要:遍歷為了達到最佳性能來遍歷一個數(shù)組,最好的方式就是使用經(jīng)典的循環(huán)。盡管屬性是定義在數(shù)組本身的,但是在循環(huán)的每一次遍歷時仍然會有開銷。給屬性賦值一個更小的數(shù)將會截斷數(shù)組,如果賦值一個更大的數(shù)則不會截斷數(shù)組。 盡管數(shù)組在 Javascript 中是對象,但是不建議使用 for in 循環(huán)來遍歷數(shù)組,實際上,有很多理由來阻止我們對數(shù)組使用 for in 循環(huán)。 因為 for in 循環(huán)將會枚...
摘要:今天,會更具體地將數(shù)組的常用操作進行歸納和匯總,以便備不時之需。在公用庫中,一般會這么做的判斷新增的操作和傳入一個回調函數(shù),找到數(shù)組中符合當前搜索規(guī)則的第一個元素,返回這個元素,并且終止搜索。 showImg(https://segmentfault.com/img/bVbpzuS?w=750&h=422); 前言 上一篇文章「前端面試題系列8」數(shù)組去重(10 種濃縮版) 中提到了不少...
閱讀 3182·2021-11-22 15:25
閱讀 3859·2021-11-17 09:33
閱讀 3374·2021-11-08 13:15
閱讀 3053·2021-09-22 10:56
閱讀 545·2021-08-31 09:45
閱讀 2758·2019-08-30 13:49
閱讀 3085·2019-08-30 12:52
閱讀 1149·2019-08-29 17:05