es6的循環(huán)方法

!DOCTYPE html

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、昌江黎族網(wǎng)絡(luò)推廣、成都微信小程序、昌江黎族網(wǎng)絡(luò)營銷、昌江黎族企業(yè)策劃、昌江黎族品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供昌江黎族建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：jinyejixie.com

html lang="en"

head

meta charset="UTF-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/title

/head

body

select name="" id=""

? ? option value=""是否已婚/option

? ? option value="0"未婚/option

? ? option value="1"已婚/option

/select

button onclick="query()"查詢/button

table border="1"

? ? tr

? ? ? ? th姓名/th

? ? ? ? th年齡/th

? ? ? ? th是否已婚/th

? ? /tr

/table

script src="./js/jquery-1.12.4.js"/script

script

? ? /* yh:0未婚 1已婚 */

? ? let arr = [{

? ? ? ? name:"張三",

? ? ? ? age:18,

? ? ? ? yh:0,

? ? ? ? arr01:{

? ? ? ? ? ? car:'寶馬',

? ? ? ? ? ? color:'白色'

? ? ? ? }

? ? },{

? ? ? ? name:"李四",

? ? ? ? age:30,

? ? ? ? yh:1,

? ? ? ? arr01:{

? ? ? ? ? ? car:'奔馳',

? ? ? ? ? ? color:'紅色'

? ? ? ? }

? ? },{

? ? ? ? name:"王五",

? ? ? ? age:28,

? ? ? ? yh:0,

? ? ? ? arr01:{

? ? ? ? ? ? car:'保時(shí)捷',

? ? ? ? ? ? color:'黃色'

? ? ? ? }

? ? },{

? ? ? ? name:"李麗",

? ? ? ? age:35,

? ? ? ? yh:1,

? ? ? ? arr01:{

? ? ? ? ? ? car:'法拉利',

? ? ? ? ? ? color:'綠色'

? ? ? ? }

? ? }];

? ? /* 第一次進(jìn)入頁面 渲染table */

? ? arr.forEach(r={

? ? ? ? $('table').append(`

? ? ? ? ? ? tr

? ? ? ? ? ? ? ? td${r.name}/td

? ? ? ? ? ? ? ? td${r.age}/td

? ? ? ? ? ? ? ? td${r.yh}/td

? ? ? ? ? ? /tr

? ? ? ? `)

? ? })

? ? /* 點(diǎn)擊查詢的時(shí)候選擇對應(yīng)的數(shù)據(jù) */

? ? function query(){

? ? ? ? let val = $('select').val();

? ? ? ? $('table').html(`

? ? ? ? tr

? ? ? ? ? ? th姓名/th

? ? ? ? ? ? th年齡/th

? ? ? ? ? ? th是否已婚/th

? ? ? ? /tr`);

? ? ? ? let newArr = arr.filter(r=r.yh==val);

? ? ? ? console.log(newArr);

? ? ? ? newArr.forEach(r={

? ? ? ? ? ? $('table').append(`

? ? ? ? ? ? ? ? tr

? ? ? ? ? ? ? ? ? ? td${r.name}/td

? ? ? ? ? ? ? ? ? ? td${r.age}/td

? ? ? ? ? ? ? ? ? ? td${r.yh}/td

? ? ? ? ? ? ? ? /tr

? ? ? ? ? ? `)

? ? ? ? })

? ? }

? ? /* 傳統(tǒng)方式 */

? ? /* for(let i=0;iarr.length;i++){

? ? ? ? console.log(arr[i].name)

? ? } */

? ? /* for in 常用于遍歷對象 數(shù)組也可以 key就是數(shù)組的索引*/

? ? /* for(let key in arr){

? ? ? ? console.log(arr[key].name)

? ? } */

? ? /* es6的另一個(gè)循環(huán)的方式 */

? ? /* val直接就是數(shù)組的每一個(gè)值 */

? ? /* for(let val of arr){

? ? ? ? console.log(val.name);

? ? } */

? ? /* es6的forEach 不能return */

? ? /* r表示數(shù)組的每個(gè)值 i代表索引 */

? ? /* arr.forEach( (r,i)={

? ? ? ? console.log(r,i);

? ? }) */

? ? /* es6的map方法 可以幫我們返回一個(gè)新數(shù)組 */

? ? /* let newArr = arr.map( (r,i)=r.arr01); */

? ? /* 判斷內(nèi)容結(jié)果的布爾值數(shù)組 r.yh==1*/

? ? /* 返回一個(gè)姓名的新數(shù)組 =r.name */

? ? /* console.log(newArr); */

? ? /* 新建一個(gè)json數(shù)組 循環(huán) 返回json數(shù)組的 全是姓名的新數(shù)組 ?*/

? ? /* es6的數(shù)組方法之過濾 返回一個(gè)過濾后的新數(shù)組*/

? ? /* 返回一個(gè)已婚人數(shù)的新數(shù)組 */

? ? /* let newArr = arr.filter( r = r.yh==1 );

? ? console.log(newArr); */

? ? /* es6數(shù)組方法之some （一些的意思） 返回一個(gè)布爾值*/

? ? /* 重點(diǎn) 只有有一個(gè)符合條件 就返回true */

? ? /* let flag = arr.some(r=r.yh==0);

? ? console.log(flag); */

? ? /* es6數(shù)組方法之every （每一個(gè)的意思） 返回一個(gè)布爾值 */

? ? /* 重點(diǎn) 只有有一個(gè)不滿足條件 就返回false */

? ? /* let flag = arr.every( r = r.yh==0 );

? ? console.log(flag); */

? ? /* es6中對象的方法 */

? ? /* Object.keys() 返回一個(gè)全是key的新數(shù)組*/

? ? let obj = {

? ? ? ? car:"保時(shí)捷",

? ? ? ? color:"紅色",

? ? ? ? price:"200w",

? ? ? ? zhuren:"韓老師"

? ? }

? ? /* let keysArr = Object.keys(obj); */

? ? /* console.log(keysArr); */

? ? /* Object.values() 返回全是對象的value的新數(shù)組*/

? ? /* let valArr = Object.values(obj);

? ? console.log(valArr); */

? ? /* 后臺給我們數(shù)據(jù)（是一個(gè)對象） 有可能有 有可能沒有

? ? 我們怎么去判斷呢？*/

? ? /* let l = Object.keys(obj).length;

? ? console.log(l);

? ? if(l){

? ? ? ? console.log(obj.zhuren)

? ? }else{

? ? ? ? console.log('后臺數(shù)據(jù)有誤')

? ? } */

? ? /* 創(chuàng)建一個(gè)對象 答應(yīng)出他的所有的key 和他所有的value

? ? 并判斷對象的長度是否為0 為0則打印出 數(shù)據(jù)為空 */

/script

/body

/html

ajax和es6先學(xué)哪個(gè)

先學(xué)es6比較好。

ajax因?yàn)橐钆淝昂蠖私换?，所以至少要把nodejs的express框架學(xué)習(xí)了，掌握并且要會(huì)寫基本的創(chuàng)建服務(wù)器，json數(shù)據(jù)轉(zhuǎn)換，跨域資源訪問，路由，端口等搭建服務(wù)器的基本知識，建議中間適當(dāng)學(xué)習(xí)下mogodb數(shù)據(jù)庫的相關(guān)增刪改查操作，知道有這個(gè)東西就行，ajax時(shí)直接套用服務(wù)器模板進(jìn)行學(xué)習(xí)就行，自己原生ajax封住一個(gè)，jquery使用一下就行了。

還有要先了解es6基本知識，nodejs中的數(shù)據(jù)解構(gòu)和vue很多方法會(huì)用到es6的。

jquery支持es6嗎

是否支持es6主要看瀏覽器。

jquery是把常用的js方法進(jìn)行了封裝，并兼容各瀏覽器，但對es6并沒有進(jìn)行瀏覽器兼容。在支持es6的新版本瀏覽器下，jquery也可以直接使用es6語法。

如果需要對低版本瀏覽器兼容運(yùn)行es6的話一般使用babel。

怎么快速上手JavaScript中的ES6，ES6中的解構(gòu)，運(yùn)算符，類，繼承模塊化 有什么簡單的理解？

模塊化在項(xiàng)目中十分的重要，一個(gè)復(fù)雜的項(xiàng)目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費(fèi)時(shí)又耗力。但是引用別人編寫模塊的前提是要有統(tǒng)一的“打開姿勢”，如果每個(gè)人有各自的寫法，那么肯定會(huì)亂套，下面介紹幾種JS的模塊化的規(guī)范。

一:模塊化進(jìn)程一：script標(biāo)簽

這是最原始的 JavaScript 文件加載方式，如果把每一個(gè)文件看做是一個(gè)模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window 對象中，不同模塊的接口調(diào)用都是一個(gè)作用域中，一些復(fù)雜的框架，會(huì)使用命名空間的概念來組織這些模塊的接口。

缺點(diǎn):

1、污染全局作用域

2、開發(fā)人員必須主觀解決模塊和代碼庫的依賴關(guān)系

3、文件只能按照script標(biāo)簽的書寫順序進(jìn)行加載

4、在大型項(xiàng)目中各種資源難以管理，長期積累的問題導(dǎo)致代碼庫混亂不堪

二:模塊化進(jìn)程二：CommonJS規(guī)范

該規(guī)范的核心思想是允許模塊通過require方法來同步加載所要依賴的其他模塊，然后通過 exports 或 module.exports 來導(dǎo)出需要暴露的接口。

require("module");

require("../file.js");

exports.doStuff = function(){};

module.exports = someValue;

優(yōu)點(diǎn)：

1、簡單并容易使用

2、服務(wù)器端模塊便于重用

缺點(diǎn):

1、同步的模塊加載方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載，瀏覽器資源是異步加載的

2、不能非阻塞的并行加載多個(gè)模塊

module.exports與exports的區(qū)別

1、exports 是指向的 module.exports 的引用

2、module.exports 初始值為一個(gè)空對象 {}，所以 exports 初始值也是 {}

3、require() 返回的是 module.exports 而不是 exports

exports示例：

// app.js

var circle = require('./circle');

console.log(circle.area(4));

// circle.js

exports.area = function(r){

return r * r * Math.PI;

}

module.exports示例：

// app.js

var area = require('./area');

console.log(area(4));

// area.js

module.exports = function(r){

return r * r * Math.PI;

}

錯(cuò)誤的情況：

// app.js

var area = require('./area');

console.log(area(4));

// area.js

exports = function(r){

return r * r * Math.PI;

}

其實(shí)是對 exports 進(jìn)行了覆蓋，也就是說 exports 指向了一塊新的內(nèi)存（內(nèi)容為一個(gè)計(jì)算圓面積的函數(shù)），也就是說 exports 和 module.exports 不再指向同一塊內(nèi)存，也就是說此時(shí) exports 和 module.exports 毫無聯(lián)系，也就是說 module.exports 指向的那塊內(nèi)存并沒有做任何改變，仍然為一個(gè)空對象{}，也就是說area.js導(dǎo)出了一個(gè)空對象，所以我們在 app.js 中調(diào)用 area(4) 會(huì)報(bào) TypeError: object is not a function 的錯(cuò)誤。

總結(jié)：當(dāng)我們想讓模塊導(dǎo)出的是一個(gè)對象時(shí)， exports 和 module.exports 均可使用（但 exports 也不能重新覆蓋為一個(gè)新的對象），而當(dāng)我們想導(dǎo)出非對象接口時(shí)，就必須也只能覆蓋 module.exports 。

三:模塊化進(jìn)程三：AMD規(guī)范

由于瀏覽器端的模塊不能采用同步的方式加載，會(huì)影響后續(xù)模塊的加載執(zhí)行，因此AMD(Asynchronous Module Definition異步模塊定義)規(guī)范誕生了。

AMD標(biāo)準(zhǔn)中定義了以下兩個(gè)API

1、require([module], callback);

2、define(id, [depends], callback);

require接口用來加載一系列模塊，define接口用來定義并暴露一個(gè)模塊。

示例：

define("module", ["dep1", "dep2"], function(d1, d2){

return someExportedValue;

});

require(["module", "../file"], function(module, file){ /* ... */ });

優(yōu)點(diǎn)：

1、適合在瀏覽器環(huán)境中異步加載模塊

2、可以并行加載多個(gè)模塊

缺點(diǎn)：

1、提高了開發(fā)成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢

2、不符合通用的模塊化思維方式，是一種妥協(xié)的實(shí)現(xiàn)

四:模塊化進(jìn)程四：CMD規(guī)范

CMD(Common Module Definition)規(guī)范和AMD很相似，盡量保持簡單，并與CommonJS和Node.js的 Modules 規(guī)范保持了很大的兼容性。在CMD規(guī)范中，一個(gè)模塊就是一個(gè)文件。

示例：

define(function(require, exports, module){

var $ = require('jquery');

var Spinning = require('./spinning');

exports.doSomething = ...

module.exports = ...

})

優(yōu)點(diǎn)：

1、依賴就近，延遲執(zhí)行

2、可以很容易在 Node.js 中運(yùn)行

缺點(diǎn)：

1、依賴 SPM 打包，模塊的加載邏輯偏重

AMD和CMD的區(qū)別

AMD和CMD起來很相似，但是還是有一些細(xì)微的差別，讓我們來看一下他們的區(qū)別在哪里：

1、對于依賴的模塊，AMD是提前執(zhí)行，CMD是延遲執(zhí)行。

2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個(gè)模塊的時(shí)候再去require。看代碼：

// AMD

define(['./a', './b'], function(a, b){ // 依賴必須一開始就寫好

a.doSomething()

// 此處略去 100 行

b.doSomething()

...

});

// CMD

define(function(require, exports, module){

var a = require('./a')

a.doSomething()

// 此處略去 100 行

var b = require('./b')

// 依賴可以就近書寫

b.doSomething()

// ...

});

3、AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。

五:模塊化進(jìn)程五：ES6模塊化

EcmaScript6標(biāo)準(zhǔn)增加了JavaScript語言層面的模塊體系定義。ES6 模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運(yùn)行時(shí)確定這些東西。

在 ES6 中，我們使用export關(guān)鍵字來導(dǎo)出模塊，使用import關(guān)鍵字引用模塊。需要說明的是，ES6的這套標(biāo)準(zhǔn)和目前的標(biāo)準(zhǔn)沒有直接關(guān)系，目前也很少有JS引擎能直接支持。因此Babel的做法實(shí)際上是將不被支持的import翻譯成目前已被支持的require。

盡管目前使用import和require的區(qū)別不大(本質(zhì)上是一回事)，但依然強(qiáng)烈推薦使用import關(guān)鍵字，因?yàn)橐坏㎎S引擎能夠解析ES6的import關(guān)鍵字，整個(gè)實(shí)現(xiàn)方式就會(huì)和目前發(fā)生比較大的變化。如果目前就開始使用import關(guān)鍵字，將來代碼的改動(dòng)會(huì)非常小。

示例：

import "jquery";

export functiondoStuff(){}

module "localModule" {}

優(yōu)點(diǎn)：

1、容易進(jìn)行靜態(tài)分析

2、面向未來的 EcmaScript 標(biāo)準(zhǔn)

缺點(diǎn)：

1、原生瀏覽器端還沒有實(shí)現(xiàn)該標(biāo)準(zhǔn)

2、全新的命令字，新版的 Node.js才支持

網(wǎng)頁名稱：包含es6jquery的詞條
網(wǎng)頁URL：http://jinyejixie.com/article40/dssogeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站改版、響應(yīng)式網(wǎng)站、Google、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)