本篇內(nèi)容主要講解“ECMAScript常用操作有哪些”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“ECMAScript常用操作有哪些”吧!
創(chuàng)新互聯(lián)公司:于2013年成立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù),為上千多家公司企業(yè)提供了專業(yè)的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計和網(wǎng)站推廣服務(wù), 按需網(wǎng)站策劃由設(shè)計師親自精心設(shè)計,設(shè)計的效果完全按照客戶的要求,并適當?shù)奶岢龊侠淼慕ㄗh,擁有的視覺效果,策劃師分析客戶的同行競爭對手,根據(jù)客戶的實際情況給出合理的網(wǎng)站構(gòu)架,制作客戶同行業(yè)具有領(lǐng)先地位的。
ECMA(前身為歐洲計算機制造商協(xié)會)指定和發(fā)布的腳本語言規(guī)范 JS包含三個部分: 1.ECMAScript(核心) 2.擴展==瀏覽器端 1.BOM(瀏覽器對象模型) 2.DOM(文檔對象模型) 3.擴展==服務(wù)器端 1.NODE ES幾個重要的版本 ES5:09年發(fā)布 ES6(ES2015):15年發(fā)布 ES7(ES2016):16年發(fā)布 前端幾個好用的瀏覽器插件: FE前端助手:可以自動化格式Chrome瀏覽器的json數(shù)據(jù)
除了正常運行外(混雜模式),ES5添加了第二種運行模式:"嚴格模式"(script mode) 這種模式使得javascript在更嚴格的語法條件下運行 使用: 在全局或函數(shù)的第一條語句定義為:'use script' 如果瀏覽器不支持,只解析為一條簡單的語句,沒有任何副作用 語法和行為改變: 必須用var聲明變量 禁止自定義的函數(shù)中的this指向window 創(chuàng)建eval作用域。會解析傳入的字符串,讓解析器執(zhí)行 對象不能有重名的屬性
1.JSON.stringify(obj/arr) js對象(數(shù)組)轉(zhuǎn)換為json對象(數(shù)組) 2.JSON.parse(json) json對象(數(shù)組)轉(zhuǎn)換為js對象(數(shù)組)
1.Array.prototype.indexOf(value) -- 得到值在數(shù)組中的第一個下標 2.Array.prototype.lastIndexOf(value) -- 得到值在數(shù)組中的最后一個下標 3.Array.prototype.forEach(function(item,index){}) -- 遍歷數(shù)組 4.Array.prototype.map(function(item,index){}) -- 遍歷數(shù)組返回一個新的數(shù)組,返回加工之后的值 5.Array.prototype.filter(function(item,index){}) -- 遍歷過濾出一個新的子數(shù)組,返回條件為true的值 var arr = [2,4,3,1,5,6,7,8]; arr.indexof(2):獲取數(shù)組中2的下標值 //數(shù)組中的每個值都加10 var map = arr.map(function(item,index){ return item+10; }); //過濾大于3的數(shù)組 var filter = arr.filter(function(item,index){ return item > 3; })
1.Function.protorype.bind(obj) 作用:將函數(shù)內(nèi)的this綁定為obj,并將函數(shù)返回 call()和apply()的區(qū)別: 相同點:都是立即調(diào)用函數(shù) 不同點:call()傳入的參數(shù)是一個一個的,apply()傳入的參數(shù)為數(shù)組形式 var obj = {username:'kobe'} function foo(){ console.log(this); } fun(); //此時調(diào)用的this為window foo.call(obj);//此時調(diào)用的this為object bind()和以上的區(qū)別:通常用其指定回調(diào)函數(shù)的this 綁定完this不會立即調(diào)用函數(shù),而是將函數(shù)返回。傳參方式和call()一樣 var bar = foo.bind(obj); bar();//此時調(diào)用就是obj這個對象 簡化寫法:foo.bind(obj)(); 例如: setTimeout(function(){ console.log(this); //此時的this是window對象 },1000); 調(diào)用bind函數(shù)可以將回調(diào)函數(shù)指定為特定對象調(diào)用 setTimeout(function(){ console.log(this); //此時的this是obj對象 }.bind(obj),1000);
此處開始是ES6語法: 1.let -作用:與var類似,用于聲明一個變量 -特點:在塊級作用域內(nèi)有效 不能重復(fù)聲明 不會預(yù)處理,不存在提升 -應(yīng)用: 循環(huán)遍歷加監(jiān)聽 使用let取代var是趨勢 2.const - 作用:定義一個常量 - 特點:不能修改、其他特點同let一樣 - 應(yīng)用:保存不用改變的數(shù)據(jù)
從對象或數(shù)組提取數(shù)據(jù),并賦值給變量(多個) 1.對象解構(gòu)賦值: let {n,a} = {n:'tom',a:12}; console.log(n,a); 2.數(shù)組的解構(gòu)賦值 let [a,b] = [1,'guigu']; console.log(n,a); 3.函數(shù)的改變 let obj = {username:'kobe',age:39}; function foo({username,age}{ console.log(username,age); }); foo(obj);
1.模板字符串必須用``(esc下面的那個)包含 2.變化的部分用${xxx}定義 let obj = {username:'kode',age:39}; let str = '我的名字叫做:'+obj.username+',年齡是:'+obj.age; let str2 = `我的名字叫:${obj.username},年齡是:${obj.age}`; 對象的簡寫方式: let username = 'kon'; let age = 39; let obj = { username:username, age:age, getName:function(){ return this.username; } } let obj = { username, // 同名的屬性可以不寫 age, getName(){ // 可以省略對象函數(shù)的function return this.username; } }
1.箭頭函數(shù)沒有自己的this,箭頭函數(shù)的this不是調(diào)用的時候決定的,而是定義的時候處在的對象就是它的 this 2.擴展理解: 1.箭頭函數(shù)的this看外層的是否有函數(shù) 如果有,外層函數(shù)的this就是內(nèi)部箭頭函數(shù)的this, 如果沒有,則this就是window let obj = { getName:function(){ //此處如果寫箭頭函數(shù),那么所指向的是obj,因為箭頭函數(shù)外層是常規(guī)函數(shù) } } let obj = { getName:() =>{ //此處如果寫箭頭函數(shù),那么所指向的是window,因為箭頭函數(shù)外層是箭頭函數(shù) } } 3.場景 1.沒有形參:小括號不能省略 2.只有一個形參:小括號可以省略 let fun2 = a => console.log(a); 3.兩個及以上的形參:小括號不能省略 let fun3 = (x,y) => console.log(x,y); fun3(25,36); 4.函數(shù)體的情況 1.函數(shù)體只有一條語句或者表達式的時候,可以省略{} let fun = (x,y) => x+y; 可以省略return 2.如果有多個語句或者表達式,{}不能省略的 let fun = function(){} 簡化:let fun = () => console.log('我是箭頭函數(shù)'); fun();
rest(可變)參數(shù): 作用:用來取代arguments,但比arguments靈活,只能最后部分形參參數(shù) function foo(a,b){ arguments.callee();//調(diào)用此函數(shù)就等于在foo內(nèi)部再一次調(diào)用自己 } arguments:這是一個偽數(shù)組 1.此屬性可以獲取函數(shù)上面的實參的值 2.arguments.callee():代表調(diào)用函數(shù)自身,代替遞歸使用 1.function foo(a,b){ console.log(arguments); //獲取的數(shù)據(jù)為【偽數(shù)組】,無法使用foreach等方法 } 2.function(...value){ console.log(value);//獲取的值為【真數(shù)組】,可以使用foreach方法 } foo(2,3); //靈活性改變,如果存在占位符a,那么剩下的數(shù)字就會存入到...value數(shù)組中 3.function foo(a,...value){ console.log(value); // 10,11,12,13 } foo(3,10,11,12,13); 使用三點運算符,可以靈活使一個數(shù)組插入另一個數(shù)組,默認調(diào)用的是iterator接口 let arr1 = [1,6]; let arr2 = [2,3,4,5]; //將arr2插入到arr1中 arr1 = [1,...arr2,6];
function foo(a,b){ this.a = a; this.b = b; } let obj = new foo(); //如果不傳入形參,會導(dǎo)致a,b都為underfined ES6提供新的默認形參: function foo(a=0,b=0){ this.a = a; this.b = b; } let obj = new foo();//此時的foo傳入的是形參默認值0,0
promise對象:代表了【未來】某個將要發(fā)生的事件(通常是一個異步操作)。 有了promise對象,可以將異步操作以同步的流程表達出來,避免了層層嵌套的回調(diào)函數(shù)(俗稱'回調(diào)地獄') ES6的promise是一個構(gòu)造函數(shù),用來生成promise實例。 回調(diào)地獄:回調(diào)函數(shù)如果嵌套多了,會導(dǎo)致耦合度極高,導(dǎo)致不可預(yù)期的錯誤。 2.promise對象有三個狀態(tài): 1.pending:初始化 2.fullfilled:成功狀態(tài) 3.rejected:失敗狀態(tài) let pro = new Promise((resolve,reject)=>{ //這兩個形參都是函數(shù)!!! //初始化promise狀態(tài):pending console.log('111'); //異步操作,通常是發(fā)送ajax請求,開啟定時器 setTimeout(()=>{ console.log('333'); //根據(jù)異步任務(wù)的返回結(jié)果來去修改promise的狀態(tài) resolve('哈哈');//代表異步執(zhí)行【成功】,修改promise的狀態(tài)為 fullfilled 成功狀態(tài) reject('啦啦'); //代表異步執(zhí)行【失敗】,修改promise的狀態(tài)為 rejected 失敗狀態(tài) },3000); }); //then里面有兩個回調(diào)函數(shù),第一個為成功,第二個為失敗,里面回調(diào)參數(shù)data //data參數(shù)根據(jù)resolve和reject傳輸?shù)膬?nèi)容來 pro.then((data)=>{ //這個函數(shù)為成功的回調(diào) console.log(data,'成功了'); },(error)=>{ //這個函數(shù)為失敗的回調(diào) console.log(error,'失敗了'); });
前言:ES5中對象的屬性名都是字符串,容易造成重名,污染環(huán)境。 Symbol: 概念:ES6中添加了一種【原始數(shù)據(jù)類型】symbol (已有的原始數(shù)據(jù)類型:String、Number、boolean、null、underfined、對象) 特點: 1.symbol屬性對應(yīng)的值是唯一的,解決命名沖突 2.symbol值不能與其他數(shù)據(jù)進行計算,包括同字符串拼接 3.for in,for of遍歷時不會遍歷symbol屬性。 4.可以定義常量:用去區(qū)別其他數(shù)據(jù)標識 const Person_key = Symbol('person_key'); 使用: 1.調(diào)用Symbol函數(shù)得到symbol值 let symbol = Symbol() let obj = {} obj[symbol] = 'hello' 2.傳參標識 let symbol = Symbol('one'); console.log(symbol); //Symbol('one') 3.內(nèi)置Symbol值 除了定義自己使用的Symbol值以外,ES6還提供了11個內(nèi)置的Symbol值,指向其他語言內(nèi)部 使用的方法。 Symbol.iterator - 對象的Symbol.iterator屬性,指向該對象的默認【遍歷器】方法
概念:iterator是一種接口機制,為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制 作用: 1.為各種數(shù)據(jù)結(jié)構(gòu),提供一個統(tǒng)一的、簡便的訪問接口 2.使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列 3.ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán),Iterator接口主要提供for...of消費 工作原理: 1.創(chuàng)建一個指針對象(遍歷器對象),指向數(shù)據(jù)結(jié)構(gòu)的起始位置 2.第一次調(diào)用next方法,指針自動指向數(shù)據(jù)結(jié)構(gòu)的第一個成員 3.接下來不斷調(diào)用next方法,指針會一直往后移動,直到指向最后一個成員 4.每調(diào)用next方法返回的是一個包含value和done的對象,{value:當前成員的值,done:布爾值} - value表示當前成員的值,done對應(yīng)的布爾值表示當前的數(shù)據(jù)的結(jié)構(gòu)是否遍歷結(jié)束 - 當前遍歷結(jié)束的時候返回的value值是underfined,done值為false 原生具備iteratro接口的數(shù)據(jù)(可用for of遍歷) 擴展理解: 1.當數(shù)據(jù)結(jié)構(gòu)上部署了Symbol.iterator接口,該數(shù)據(jù)就是可以用【for..of】遍歷 2.當使用for of去遍歷目標數(shù)據(jù)的時候,該數(shù)據(jù)會自動去找Symbol.iterator屬性 //Symbol.iterator 屬性指向指向?qū)ο蟮哪J遍歷器方法。 模擬iterator遍歷器:這也是底層的實現(xiàn) function Myiterator() {//模擬指針對象(遍歷器對象),iterator接口 let index = 0;//記錄指針的位置 return {//遍歷器對象 next() { return index < arr.length ? {value: arr[index++], done: false} : {value: undefined, done: true}; } } } let arr = ['wang',2,'abc',5]; let mykiss = Myiterator(arr); console.log(mykiss.next()); console.log(mykiss.next()); console.log(mykiss.next()); console.log(mykiss.next()); console.log(mykiss.next()); iterator接口部署到指定的【數(shù)據(jù)類型】上,可以使用for of遍歷 數(shù)組、字符串、arguments(不能用for,each因為是偽數(shù)組),set容器,map容器
foreach:方法沒辦法使用 break 語句跳出循環(huán),或者使用return從函數(shù)體內(nèi)返回 for in:總是得到對像的key或數(shù)組,字符串的下標,而for of和forEach一樣,是直接得到值 for of:【在ES6中】,增加了一個for of循環(huán),使用起來很簡單,for of不能對象用
Promise依賴于回調(diào)函數(shù),所以推出generator 概念: 1.ES6提供的解決異步編程的方案之一 2.Generator函數(shù)是一個【狀態(tài)機】,內(nèi)部封裝了不同狀態(tài)的數(shù)據(jù) 3.用來生成【遍歷器對象】iterator 4.可暫停函數(shù)(惰性求值),yield可暫停,next方法可啟動。每次返回的是yield后的表達式結(jié)果 特點: 1.function與函數(shù)名之間有一個【星號】 2.內(nèi)部用yield表達式來定義不同的狀態(tài) 例如: function* generatorExample(){ console.log('開始執(zhí)行'); let result = yield 'hello'; //狀態(tài)值為hello yield 'generator';//狀態(tài)值為geneartor let result = yield 'generator'; console.log(result);//此時的結(jié)果為underfined,如果在next方法中參入?yún)?shù) //返回值就是傳參內(nèi)容aaaaa return '返回的結(jié)果'; } let MG = generatorExample();//返回的是指針對象 MG.next(); //每調(diào)用一次,返回一個yield后面的值 MG.next(); //每調(diào)用一次,返回一個yield后面的值 MG.next('aaaaa');//可以傳入 3.geneartor函數(shù)返回的是【指針對象】,而不是執(zhí)行函數(shù)內(nèi)部邏輯 4.調(diào)用next方法函數(shù)內(nèi)部邏輯開始執(zhí)行,遇到y(tǒng)ield表達式停止, 返回 -- {value:yield表達式后的結(jié)果/underfined,done:false/true} 5.再次調(diào)用next方法會從上一次停止時的yield處開始,直到最后 6.yield語句返回結(jié)果通常為underfined,當調(diào)用next方法時傳參內(nèi)容會作為啟動時yield語句的返回 值 對象Symbol.iterator屬性,指向遍歷器對象 let obj = {username:'kobe',age:33}; //for of無法遍歷對象,可以使用generator進行遍歷 obj[Symbol.iterator] = function* Test(){ yield 1; yield 2; yield 3; } for(let i of obj){ console.log(i);//打印出來的就是yield后面跟的內(nèi)容 } 案例:發(fā)起ajax請求 function* sendXML(){ let url = yield getNews('http://localhost:3000/news/ID=2'); yield getNews(url); } function getNews(url){ $.ajax(url,function(data){ let commentURL = data.commentUrl; let url = 'http://localhost:3000' + commentURL; //當獲取新聞內(nèi)容成功后,發(fā)送請求獲取對應(yīng)的評論內(nèi)容 //調(diào)用next傳參會作為上次暫停時yield的返回值 sx.next(url); }) } let sx = sendXML(); //發(fā)送請求獲取新聞內(nèi)容 sx.next();
ES7的東西 概念:真正意義上的去解決異步回調(diào)的問題,同步流程表達異步操作 本質(zhì):Generator的語法糖 語法: async function foo(){ await 異步操作; await 異步操作; } 特點: 不需要像Generator去調(diào)用next方法,調(diào)用await等待,當前的異步操作完成就往下執(zhí)行 返回的總是Promise對象,可以用then方法進行下一步操作 async取代Generator函數(shù)的星號*,await取代Generator的yield 語法上更為明確,使用簡單,沒有副作用。 案例:發(fā)送ajax請求 async function getNews(url){ return new Promise((resolve,reject) => { $.ajax({ method:'GET', url, success:data => resolve(data), error:data => reject() }) }) } async function sendXML(){ let result = await getNews('http://localhost:3000/news?id=7'); result = await getNews('http:localhost:3000' + result.commentUrl); } sendXML();
1.通過class定義類/實現(xiàn)類的繼承 2.在類中通過constructor定義構(gòu)造方法 3.通過new來創(chuàng)建類的實例 4.通過extends來實現(xiàn)類的繼承 5.通過super來調(diào)用父類的構(gòu)造方法 6.重寫從父類中繼承的一般方法 //平常創(chuàng)建對象 function Person(name,age){ this.name = name; this.age = age; } let p = new Person('kond',22); //使用class定義類 class Person{ constructor(name,age){//定義構(gòu)造方法 this.name=name; this.age=age; } getName(){//定義一般方法 console.log(this.name); } } let p = new Person('king',33); p.getName(); //使用class實現(xiàn)繼承 class StartPerson extends Person{ constructor(name,age,salary){ super(); this.salary = salary; } }
字符串的擴展 1.includes(str):判斷是否包含指定的字符串 2.startsWith(str):判斷是否以指定字符串開頭 3.endsWith(str):判斷是否以指定字符串結(jié)尾 4.repeat(count):重復(fù)指定次數(shù) 數(shù)值的擴展 1.二進制與八進制數(shù)值表示法:二進制用0b,八進制用0o console.log(0b1010); //代表十進制10 2.Number.isFinite(i):判斷是否是有限大的數(shù) 3.Number.isNaN(i):判斷是否為NAN 4.Number.isInteger(i):判斷是否是整數(shù) 5.Number.parseInt(str):將字符串轉(zhuǎn)換為對應(yīng)的數(shù)值 Number.parseInt('123abc') //123 6.Math.trunc(i):直接去除小數(shù)部分 數(shù)組的擴展: 1.Array.from(v):將偽數(shù)組對象或可遍歷對象轉(zhuǎn)換為真數(shù)組 2.Array.of(v1,v2,v3):將一系列值轉(zhuǎn)換為數(shù)組 let arr = Array.of(1,2,'abc',true); 3.find(function(value,index,arr){return true}):找出第一個滿足條件true的元素 let arr2 = [2,3,4,5,6,7,8]; let result = arr2.find(function(item,index){ return item > 4; }) 4.findIndex(function(value,index,arr){return true}):找出第一個滿足條件返回true的 元素的下標 對象方法擴展: 1.1.Object.is(v1,v2):判斷2個數(shù)據(jù)是否完全相等 0 == -0 // true NaN == NaN //false Object.is(0,-0) //false 底層比較的是字符串數(shù)值 Object.is(NaN,NaN) //true 2.Object.assign(target,source1,source2):將源對象的屬性復(fù)制到目標對象上 let obj = {} let obj2 = {username:'zhang',age:22} Object.assign(obj,obj2); 3.直接操作__proto__屬性 let obj2 = {} obj2.__proto__ = obj1;
基本數(shù)據(jù)類型拷貝: 拷貝后會生成新的數(shù)據(jù),修改拷貝以后的數(shù)據(jù)不會影響原數(shù)據(jù) 對象/數(shù)組拷貝: 拷貝后不會生成新的數(shù)據(jù),而是拷貝引用。修改拷貝以后的數(shù)據(jù)會影響 拷貝數(shù)據(jù)的方法: 1.直接賦值給一個變量 //淺拷貝 2.Object.assign() //淺拷貝 3.Array.prototype.concat() //淺拷貝 4.Array.prototype.slice() //淺拷貝 5.JSON.parse(JSON.stringify) //深拷貝!!! 淺拷貝: 拷貝的引用,修改拷貝以后的數(shù)據(jù)會影響原數(shù)據(jù) 深拷貝: 拷貝的時候生成新數(shù)據(jù),修改拷貝以后的數(shù)據(jù)不會影響原數(shù)據(jù)
1.Set容器:無序不可重復(fù)的多個value的集合體 set() set(array) add(value) delete(value) has(value) clear() size() 2.Map容器:無序的key不重復(fù)的多個key-value的集合體 Map() Map(array) set(key,value) //添加 get(key) delete(key) has(key) //判斷是否存在 clear() size let set = new Set([1,2,3,3,4,5,6]); set.add(7); let map = new Map([['aaa','username'],[36,age]]) map.set(78.'haha'); map.delete(78); for of循環(huán): 1.遍歷數(shù)組 2.遍歷set 3.遍歷map 4.遍歷字符串 5.遍歷偽數(shù)組
到此,相信大家對“ECMAScript常用操作有哪些”有了更深的了解,不妨來實際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
網(wǎng)頁標題:ECMAScript常用操作有哪些
URL網(wǎng)址:http://jinyejixie.com/article16/ghhidg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、ChatGPT、響應(yīng)式網(wǎng)站、域名注冊、面包屑導(dǎo)航、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)