1.數組循環javascript
介紹數組循環以前,先回顧一下ES5數組的循環css
(1)數組遍歷(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是數組的當前項,index是數組的鍵名(下標),arr是整個數組html
let arr = ['today','tomorrow','the day after tommrrow','three days from now']; arr.forEach(function(val,index,arr){ console.log(val,index,arr);//today 0 (4) ["today", "tomorrow", "the day after tommrrow", "three days from now"]... });
(2)數組映射:arr.map(callback(item,index,arr){todo... 正常狀況下,須要配合return,返回的是一個新數組,若沒有return,至關於forEach,通常用於在有return的狀況下}) //item是數組的當前項,index是數組的鍵名(下標),arr是整個數組java
let arr = [ {title:'aaaa',read:100,hot:true}, {title:'bbbb',read:100,hot:true}, {title:'cccc',read:100,hot:true}, {title:'dddd',read:100,hot:true} ]; let newArr = arr.map((item,index,arr)=>{ // console.log(val,index,arr); let json = {}; json.t = item.title; json.r = item.read; json.h = item.hot == true && '真棒!!!'; return json; }); console.log(newArr);//(4) [Object, Object, Object, Object]
(3)數組過濾:arr.filter(callback(item,index,arr){todo... 正常狀況下,須要配合return,返回值爲true的元素,返回值爲false的元素則被過濾掉}) //item是數組的當前項,index是數組的鍵名(下標),arr是整個數組node
let arr = [ {title:'aaaa',read:100,hot:true}, {title:'bbbb',read:100,hot:false}, {title:'cccc',read:100,hot:true}, {title:'dddd',read:100,hot:false} ]; let newArr = arr.filter((item,index,arr)=>{ // return item.hot == true; return item.hot; }); console.log(newArr);//(2) [Object, Object]
(4)數組單項檢測:arr.some(callback(item,index,arr){todo... 正常狀況下,須要配合return,若是有一個值爲true,則返回true,不然返回false}) //item是數組的當前項,index是數組的鍵名(下標),arr是整個數組jquery
let arr = ['one','two','three','four']; let b = arr.some((val,index,arr)=>val=='one'); console.log(b);//true
注:此方法可封裝成一個檢測數組中是否存在某一項的函數es6
let arr = ['apple','banana','orange']; function findInArray(arr,item){ return arr.some((val,index,arr)=> val == item); } console.log(findInArray(arr,'orange'));//true
(5)數組多項檢測:arr.every(callback(item,index,arr){todo... 正常狀況下,須要配合return,若是全部的值都爲true,則返回true,不然返回false}) //item是數組的當前項,index是數組的鍵名(下標),arr是整個數組json
let arr = ['one','two','three','four',6,8,2]; let b = arr.every((val,index,arr)=>val); console.log(b);//true
(6)數組簡化:arr.reduce(callback(prev,cur,index,arr){todo... 正常狀況下,須要配合return,返回計算後的結果},傳遞給函數的初始值(可選,默認爲第一項的值)) //prev是數組的前一項(若是第一次循環,則prev默認爲0),cur是數組的當前項,index是數組的鍵名(下標),arr是整個數組;數組
arr.reduceRight()用法和arr.reduce相似,只不過計算順序是從右向左promise
//數組求和 let arr = [1,2,3,4,5]; let res = arr.reduce((prev,cur,index,arr)=>{ return prev+cur; },0); console.log(res);//15//數組求積 let arr = [1,2,3,4,5]; let res = arr.reduce((prev,cur,index,arr)=>{ return prev*cur; },1); console.log(res);//120 // 數組求最大值 let arr = [1,2,3,298,4,5,199]; let res = arr.reduce((prev,cur,index,arr)=>{ return (cur>prev?cur:prev); }); console.log(res);//298 // 求階乘(ES2017新增冪運算符**,例如Math.pow(2,3)可寫成2**3。) let arr = [2,2,3]; let res = arr.reduce((prev,cur,index,arr)=>{ return Math.pow(prev,cur);//也能夠寫成return prev**cur }); console.log(res);//64
(7)ES6新增for...of循環:
let arr = ['a','b','c','d']; // 遍歷值 for(let val of arr){ console.log(val); } // 遍歷下標 for(let index of arr.keys()){ console.log(index); } // 遍歷某一項 for(let item of arr.entries()){ console.log(item[0],item[1]); } // or for(let [key,val] of arr.entries()){ console.log(key,val); }
(8)ES6新增Array.from()方法:將類數組對象(只要有length屬性就能夠)轉換爲數組,也能夠複製數組
<ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> <script type="text/javascript"> window.onload= function(){ let aLi = document.querySelectorAll('ul li'); // let arrLi = Array.from(aLi);//ES6方法
// let arrLi = [...aLi];//ES6方法 let arrLi = [].slice.call(aLi);//ES5方法 arrLi.pop(); console.log(arrLi); } </script>
function show(){ let args = Array.from(arguments); // let args = [...arguments];//也能夠用拓展運算符 args.push(6); console.log(args);//[1, 2, 3, 4, 5, 6] } show(1,2,3,4,5);
let str = 'hello'; // let arr = str.split(''); // let arr = [...str]; let arr = Array.from(str); console.log(arr);//["h", "e", "l", "l", "o"]
let json = { 0:'one', 1:'two', 2:'three', length:3 } let arr = Array.from(json); console.log(arr);//["one", "two", "three"]
(9)ES6新增Array.of()方法:把一組值轉成數組
let arr = Array.of('apple','banana','orange'); console.log(arr);//["apple", "banana", "orange"]
(10)ES6新增Array.find()查找元素方法:查找,找出第一個符合條件的數組成員,若是沒有找到返回undefined
let arr = [1,2221,344,876,55,56,78]; let res = arr.find((val,index,arr)=>{ return val > 333; }); console.log(res);//2221
(11)ES6新增Array.findIndex()查找元素索引方法:查找,找出第一個符合條件的數組成員的位置,若是沒有找到返回-1
let arr = [1,2221,344,876,55,56,78]; let res = arr.findIndex((val,index,arr)=>{ return val > 333; }); console.log(res);//1
(12)ES6新增Array.fill()填充數組方法:Array.fill(要填充的內容,開始填充的位置,結束的位置)
let arr = new Array(10); arr.fill('默認',1,3); console.log(arr);//[undefined × 1, "默認", "默認", undefined × 7]
(13)ES7(ES2016)新增Array.includes()查找數組中是否存在某一項方法,若是有返回true,不然返回false
let arr = [1,2,3,4]; let b = arr.includes(2); console.log(b);//true
(1)對象簡潔語法
let name = 'pilot'; let age = 18; let json = { name,//至關於name:name age//至關於age:age } console.log(json);//Object {name: "pilot", age: 18}
let name = 'pilot'; let age = 18; let json = { name,//至關於name:name age,//至關於age:age showA(){//注意:不要替換爲箭頭函數 return this.name; }, showB(){ return this.age; } } console.log(json.showA(),json.showB());//pilot 18
(2)ES6對象新增Object.is()方法:比較兩個值是否相等
console.log(NaN == NaN);//false console.log(NaN != NaN);//true console.log(NaN === NaN);//false console.log(NaN !== NaN);//true let b = Object.is(NaN,NaN); console.log(b);//true
console.log(+0 == -0);//true let b = Object.is(+0,-0); console.log(b);//false console.log(Object.is('aaa','aab'));//false
(3)ES6對象新增Object.assign()方法:用來合併對象,Object.assign(目標對象,source1,source2...),後面的值會覆蓋前面的值
let json = {a:1}; let json2 = {b:2,a:2}; let json3 = {c:3}; let obj = Object.assign({},json,json2,json3); console.log(obj);//{a: 2, b: 2, c: 3}
// 複製數組 let a = [1,2,3,4]; let b = Object.assign([],a); console.log(b);//[1, 2, 3, 4]
(4)ES8(ES2017)新增Object.keys()、Object.entries()、Object.values()方法
let json = { a:1, b:2, c:3 } for(let key of Object.keys(json)){ console.log(key);//a,b,c }
let {keys,values,entries} = Object;//解構 let json = { a:1, b:2, c:3 } for(let key of keys(json)){ console.log(key);//a,b,c } for(let value of values(json)){ console.log(value);//1,2,3 } for(let item of entries(json)){ console.log(item);//["a", 1],["b", 2],["c", 3] } for(let [key,val] of entries(json)){ console.log(key,val);//a, 1,b, 2,c, 3 }
(5)ES9(ES2018)新增對象的」…「運算符
let {x,y,...z} = {x:1,y:2,a:3,b:4};//在Chrome最新版本測試 console.log(x,y,z);//1 2 {a: 3, b: 4}
let json = {a:3,b:4}; let json2 = {...json};//複製json對象(在Chrome最新版本測試) delete json2.b; console.log(json);//{a: 3, b: 4} console.log(json2);//{a: 3}
(1)Promise.resolve('aa'):將現有的東西,轉成一個promis對象,resolve狀態,成功狀態;
Promise.reject('aa'):將現有的東西,轉成一個promis對象,reject狀態,失敗狀態;
Promise.all([p1,p2,p3]):把promise打包,扔到一個數組裏面,打包完仍是一個promise對象,必須確保全部的promise對象,都是resolve狀態,都是成功狀態;
Promise.race([p1,p2,p3]):把promise打包,扔到一個數組裏面,打包完仍是一個promise對象,只要有一個成功,就返回成功狀態。
let p1 = Promise.resolve('aaa'); //等價於 let p1 = new Promise(resolve=>{resolve('aaa')}); p1.then(res=>{ console.log(res);//aaa });
let p1 = Promise.reject('aaa'); //等價於 let p1 = new Promise((resolve,reject)=>{reject('aaa')}); p1.then(res=>{ console.log(res); }).catch(err=>{ console.log(err);//aaa });
let p1 = Promise.resolve('aaa'); let p2 = Promise.resolve('bbb'); let p3 = Promise.resolve('ccc'); Promise.all([p1,p2,p3]).then(res=>{ // console.log(res);//["aaa", "bbb", "ccc"] let [res1,res2,res3] = res; console.log(res1,res2,res3);//aaa bbb ccc });
let p1 = Promise.resolve('aaa'); let p2 = Promise.reject('bbb'); let p3 = Promise.reject('ccc'); Promise.race([p1,p2,p3]).then(res=>{ console.log(res);//aaa });
new Promise(function(resolve,reject){ //resolve,成功調用 //reject,失敗調用 })
let a = 103; let promise = new Promise(function(resolve,reject){ if(a == 10){ resolve('成功'); }else{ reject('失敗'); } }); // promise.then(success,fail); promise.then(res=>{ console.log(res);//成功 },err=>{ console.log(err);//失敗 })
let a = 103; let promise = new Promise(function(resolve,reject){ if(a == 10){ resolve('成功'); }else{ reject('失敗'); } }); // promise.then(success,fail); // promise.then(res=>{ // console.log(res);//成功 // },err=>{ // console.log(err);//失敗 // }); // promise.catch(err=>{//reject,發生錯誤,別名 // console.log(err);//失敗 // }); // promise.then(success,fail); promise.then(res=>{ console.log(res);//成功 }).catch(err=>{//reject,發生錯誤,別名 console.log(err);//失敗 });
(1)在es6以前,是不支持模塊化的,可是社區制定一套模塊規範:
Commonjs 主要服務端 nodeJa require('http')
AMD requireJs,curlJs
CMD seaJs
ES6模塊化出來後,統一服務端和客戶端模塊規範:
import {xx} from ddd;
(2)基本概念:
注:須要放服務器環境
>如何定義模塊?
export 東西
>如何使用?
import
使用模塊:
<script type="module">
</script>
import特色:
1.import能夠是相對路徑,也能夠是絕對路徑
import 'https://cdn.bootcss.com/jquery/2.2.2/jquery.js'
2.import模塊只會導入一次,不管引入多少次
3.import './modules/1.js';若是這麼用,至關於引入文件
4.有提高效果,import會自動提高到頂部,首先執行
5.導出去模塊內容,若是裏面有定時器更改,外面也會改動
* 6.import動態引入:
import(),相似於node裏面的require,能夠動態引入,默認import語法不能寫到if之類的語法裏
優勢:
1.按需加載
2.能夠寫if中
3.路徑也能夠寫動態
4.由於返回值是promise對象,因此能夠用then方法
例子:
one.html
<script type="module"> import {a,b,c} from './modules/1.js'; console.log(a,b,c);//12 15 65 </script>
1.js
export const a = 12; export const b = 15; export let c = 65;
two.html
<script type="module"> import {aaa as a,bbb as b,ccc as c} from './modules/2.js'; console.log(a,b,c);//12 5 102 </script>
2.js
const a =12; const b =5; const c =102; export { a as aaa,//起別名 b as bbb, c as ccc }
three.html
<script type="module"> import * as modTwo from './modules/3.js'; console.log(modTwo.aaa);//125 </script>
3.js
const a =125; const b =25; const c =1012; export { a as aaa,//起別名 b as bbb, c as ccc }
four.html
<script type="module"> import a,{cc,dd} from './modules/4.js'; console.log(a,cc,dd);//12 21 23 </script>
4.js
export default 12; export const cc = 21; export const dd = 23;
five.html
<script type="module"> //import有提高效果,import會自動提高到頂部,首先執行 console.log(a,cc,dd);//12 21 23 import a,{cc,dd} from './modules/5.js'; </script>
5.js
export default 12; export const cc = 21; export const dd = 23;
six.html
<script type="module"> //導出去模塊內容,若是裏面有定時器更改,外面也會改動 import {a,b} from './modules/6.js'; console.log(a); setTimeout(() => { console.log(a); }, 3000); </script>
6.js
let a = 6; let b = 12; setTimeout(()=>{ a = 12345; },2000); export { a, b }
seven.html
<script type="module"> //動態加載模塊,按需加載,能夠寫if中,路徑能夠是動態 import('./modules/7.js').then(res=>{ console.log(res.a+res.b);//27 }); </script>
7.js
console.log('7模塊加載了'); export const a = 12; export const b = 22;
eight.html
<script type="module"> //動態加載模塊結合Promise使用 Promise.all([ import('./modules/1.js'), import('./modules/2.js') ]).then(([mod1,mod2])=>{ console.log(mod1); console.log(mod2); }) </script>
nine.html
<script type="module"> //動態加載模塊結合async、await函數使用 async function main(){ /* 方法1 */ const mod1 = await import('./modules/1.js'); const mod2 = await import('./modules/2.js'); console.log(mod1,mod2); /* 方法2 */ const [m1,m2] = await Promise.all([ import('./modules/1.js'), import('./modules/2.js') ]); console.log(m1,m2); } main(); </script>
附上其餘倆個部分的地址: