es6的新增方法和es5數組的一些方法
阿新 • • 發佈:2018-12-29
document 最大值 值類型 簡寫 常用 初始 ctype end 不同
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body><script> // 大多數情況下,es5的數組方法接受的第一個參數為一個函數,並且對數組的每個元素調用一次該函數。 // 該函數有三個參數:數組元素,元素的索引和數組本身。 // 如果有第二個參數,則第一個參數中的this指向第二個參數。 var arr= [1,2,3,4,5]; var result; //forEach()============================= //從頭到尾遍歷數組,為每個元素調用指定的函數。 //返回值:undefined 無//原數組不改變 //計算和 // var sum =0; // arr.forEach(function(val,index,a){ // sum+=val; // console.log(val,index,a) // }) // console.log(sum,arr); // //每個數組元素值+1 // result=arr.forEach(function(val,i){ // arr[i]=val+1; //// break; //直接break會報錯,forEach中沒法終止遍歷 // }) // console.log(arr); // console.log(result); //undefined //map()====================================== //將調用的數組的每個元素傳遞給指定的函數,並返回一個數組,它包含該函數的返回值 //原數組不改變,而會返回一個新數組 // result = arr.map(function(x){ // return x*x; //一定要有return,否則返回undefined // }) // console.log(result,arr); //filter()==================================== //filter方法返回的數組元素是調用的數組的一個子集。傳遞的函數是用來邏輯判定的。該函數返回true或false。 //原數組不改變 // var result1 = arr.filter(function(v,i,a){ // return v>3; // }) // [4, 5] // console.log(result1) // var result2= arr.filter(function(v){ // return v%2; // }) //[1, 3, 5] // console.log(arr,result2); // // filter方法可以把稀疏數組中的空元素篩出去 // var result3 = arr.filter(function(v){ // return v!=undefined &&v!=null; // }); // console.log(arr,result3); // every()和some()============================ //every和some是數組的邏輯判定:他們對數組元素應用指定的函數進行判定,返回true或false // every()方法就像數學中的“針對所有”的量詞:當且僅當針對數組中的所有元素調用判定函數都返回true,它才返回true // result = arr.every(function(x){ // return x<10; // }) // console.log(result); // result = arr.every(function(x){ // return x%2===0; // }) // console.log(result); // some()方法就像數學中的“存在”的量詞:當數組中至少有一個元素調用判定函數返回true,它就返回true,並且當且僅當數值中的所有元素調用判定函數都返回false,它才返回false // result = arr.some(function(v){ // return v%2===0; // }) // console.log(result); //一旦every()和some()確認該返回什麽值他們就會停止遍歷數組元素 // some在判定第一個元素返回true就停止遍歷返回true,否則遍歷整個數組直到遇到true // every在判定第一個元素返回false就停止遍歷,否知就一直遍歷直到遇到false為止 //reduce()和reduceRight()===================== //reduce()和reduceReight()方法使用指定的函數將數組元素進行組合,生成單個值。這在函數式編程中是常見的操作,也可以稱為“註入”和“折疊” //返回值為化簡函數最後一次返回的結果 //數組求積 // var product = arr.reduce(function(x,y,z,a){ // console.log(x,y,z,a); // return x*y; // }) // console.log(product); // //數組求和 // var sum = arr.reduce(function(x,y,z,a){ // console.log(x,y,z,a); // return x+y; // }); // console.log(sum); // //數組求最大值 // var max = arr.reduce(function(x,y){ // return x>y?x:y; // }) // console.log(max); // reduce()需要兩個參數。第一個是執行化簡操作的函數。化簡函數的任務就是用某種方法把兩個值組合或化簡為一個值,並返回化簡後的值。 //化簡函數function(初始值或者上一次化簡函數的返回值,數組元素,元素的索引,數組本身) // 第二個參數是一個傳遞給函數的初始值,當不指定初始值時,他將數組元素的第一個值作為其初始值 // reduceRight()===================== // reduceRight()的工作原理和reduce()一樣,不同的是它按照數組索引從高到低(從右到左)處理數組。 // var product = arr.reduceRight(function(x,y,z,a){ // console.log(x,y,z,a); // return x*y; // },1) // console.log(product); //indexOf()和lastIndexOf()===================== </script> </body> </html>
1.let
塊作用域
const
常量,不能二次賦值
2.箭頭函數
(參數)=>{邏輯代碼}
參數為1時
參數=>{}
參數不為一時
()=>{}
返回值為值類型
()=>1
返回值為對象時
()=>({a:a})
其他情況
()=>{}
箭頭函數中的this跟包裹他的代碼共享this,通常用在回調函數中
setTimeout(()={},1000)
3.增強的對象字面量
var o={
__proto__:parent, //繼承
name, //屬性簡寫
fun(){ //方法簡寫
super.fun(); //調用父級對象上的方法
},
["prpp"+(()=>10)]:110 //動態屬性
}
4.類
class extends constructor super static
class 類名{
constructor(構造函數的參數){
this.屬性名=“”
}
//公有方法
fun(參數){
//邏輯代碼
return
}
//靜態方法的定義
static fun(){}
}
var a = new 類名();
靜態方法的調用
類名.方法名();
子類
class 子類 extends 父類,父類{
constructor(){
super(); //繼承父類上的屬性方法以及靜態方法
this.子類的屬性
}
//子類的方法
fun(){
super.fun()
}
}
5.模板字符串
var str = `
${變量名}
`
6.解構
es6按照一定的模式從數組和對象中提取值,
7.默認參數
function f(x,y=10){
}
不定參數
function fun(x,...y){
}
fun(1,1,2,3)
擴展運算符...
function fun(x,y,z){
}
fun(...arr)
es6的新增方法和es5數組的一些方法