當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS基础入门篇（四十三）—ES6（二）
生活随笔
收集整理的這篇文章主要介紹了
JS基础入门篇（四十三）—ES6（二）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.對象簡潔表示法
原來寫法
var name = "lzf";var gender = "male";var fn = function(){console.log(1);}var obj = {name:name,gender:gender,fn:fn,fn2:function(){console.log(2)}};console.log( obj );obj.fn2();obj.fn();簡潔寫法
var name = "zm";var gender = "male";var fn = function(){console.log(1);}var obj = {name,gender,fn,fn2(){console.log(2)}};console.log( obj );obj.fn2();obj.fn();2.Array.map( )
map( ): 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map( ): 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。
舉例一：
var arr=[10,,12,13];//item：表示數組每一項的值//index：表示下標//arr：表示數組var res=arr.map(function (item,index,arr) {console.log( item,index,arr );})運行結果：
舉例二：
var arr=[10,11,12]; var res=arr.map(function (item,index,arr) {console.log( item,index,arr );arr.shift(); })運行結果：
舉例三：
var arr = [100,,300];arr[10] = 1000;var res = arr.map( function(item){return item * 10} );console.log( res );//[1000, empty, 3000, empty × 7, 10000]console.log( arr );//[100, empty, 300, empty × 7, 1000]3.Array.filter( )
filter( ) : 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
注意： filter( ) 不會對空數組進行檢測。
注意： filter( ) 不會改變原始數組。
4.Array.every( )
只要有一次 回調函數 執行 返回值 為 假 就立刻 停止 并且 every返回值為假
var arr = [1,-5,2,3,34,54,56];var res = arr.every( item => {console.log( item );return item > 0;});console.log( res );運行結果：
5.Array.some( )
只要 有一次 回調函數 執行 返回值 為 真 ，就立刻 停止 并且 some返回值為真
var arr = [1,-5,2,3,34,54,56];var res = arr.some( item => {console.log( item );return item > 0} );console.log( res );運行結果：
6.Array.reduce( )
舉例說明一：
//reduce（ fn[,attr1] ）//其中fn是函數，attr1是參數//fn函數有兩個參數a,b。//第一次執行a的值為attr1,b的值為數組第0項//第二次執行a指的是第一次執行的返回值,b的值為數組第1項//第三次執行a指的是第二次執行的返回值,b的值為數組第2項//直到遍歷數組的全部內容，返回最終結果。var arr = [1,2,3,4,5];var res = arr.reduce( function( a,b ){console.log( a,b );return a+b},100);console.log( res );運行結果為：
舉例說明二：
//reduce（ fn ） //其中fn是函數，當沒有第二個參數時。 //fn函數有兩個參數a,b。 //第一次執行a的值為數組第0項,b的值為數組第1項 //第二次執行a指的是第一次執行的返回值,b的值為數組第2項 //第三次執行a指的是第二次執行的返回值,b的值為數組第3項 //直到遍歷數組的全部內容，返回最終結果。 var arr = [1,2,3,4,5]; var res = arr.reduce( function( a,b ){console.log( a,b );return a+b}); console.log( res );運行結果為：
7.Array.includes( )
includes( ) 方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false。
var arr = [1,2,3,4,undefined,false,5,"a",null,NaN];console.log( arr.includes( "a" ) );//true console.log( arr.includes( NaN ) );//true console.log( arr.includes( "1" ) );//false console.log( arr.includes( null ) );//true console.log( arr.includes( undefined ) );//true console.log( arr.includes( false ) );//true8.Array.fill( )
fill( )：填充數組，返回新數組，改變原來數組。
這個博客對fill（ ）的用法寫的更清楚，想進一步了解請點擊
var arr = [1,2,4,3]; var res = arr.fill( ["a","b"]); console.log( arr ); console.log( res );運行結果：
9.Array.of（ ）和Array.from（ ）
Array.of（ ）
var arr = Array.of( 4,5,6,7 ); console.log( arr );//?[4, 5, 6, 7]Array.from（ ）：將類數組轉化為數組。有三個參數，并沒有深入研究。
<body><ul><li></li><li></li><li></li><li></li><li></li></ul> <script>var lis = document.getElementsByTagName("li");var res = Array.from( lis );console.log( res );res.push( 2 );console.log( res ); </script>運行結果：
11.Array.find( )和Array.findIndex( )
find( )函數用來查找目標元素，找到就返回該元素，找不到返回undefined。
findIndex( )函數也是查找目標元素，找到就返回元素的位置，找不到就返回-1。
<body> <ul><li>1</li><li>2</li><li>5</li><li>3</li><li>5</li> </ul> <script>var lis = document.getElementsByTagName("li");var res1 = Array.from(lis).find( function( item,index,arr ){console.log( item,index,arr );return item.innerHTML === "50";} );console.log( res1 );//------------------------------------------var res2 = Array.from(lis).findIndex( function( item,index,arr ){console.log( item,index,arr );return item.innerHTML === "5";} )console.log( res2 ); </script> </body>運行結果：
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的JS基础入门篇（四十三）—ES6（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python-day06-2018.7.
- 下一篇： 百度地图api 去左下角百度地图logo