溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“ECMAScript常用操作有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“ECMAScript常用操作有哪些”吧!
ECMA(前身為歐洲計算機制造商協會)指定和發布的腳本語言規范 JS包含三個部分： 1.ECMAScript(核心) 2.擴展==瀏覽器端 1.BOM(瀏覽器對象模型) 2.DOM(文檔對象模型) 3.擴展==服務器端 1.NODE ES幾個重要的版本 ES5：09年發布 ES6（ES2015）：15年發布 ES7（ES2016）：16年發布 前端幾個好用的瀏覽器插件： FE前端助手：可以自動化格式Chrome瀏覽器的json數據
除了正常運行外（混雜模式），ES5添加了第二種運行模式："嚴格模式"(script mode) 這種模式使得javascript在更嚴格的語法條件下運行 使用： 在全局或函數的第一條語句定義為：'use script' 如果瀏覽器不支持，只解析為一條簡單的語句，沒有任何副作用 語法和行為改變： 必須用var聲明變量 禁止自定義的函數中的this指向window 創建eval作用域。會解析傳入的字符串，讓解析器執行 對象不能有重名的屬性
1.JSON.stringify(obj/arr) js對象（數組）轉換為json對象（數組） 2.JSON.parse(json) json對象（數組）轉換為js對象（數組）
1.Array.prototype.indexOf(value)
-- 得到值在數組中的第一個下標
2.Array.prototype.lastIndexOf(value)
-- 得到值在數組中的最后一個下標
3.Array.prototype.forEach(function(item,index){})
-- 遍歷數組
4.Array.prototype.map(function(item,index){})
-- 遍歷數組返回一個新的數組，返回加工之后的值
5.Array.prototype.filter(function(item,index){})
-- 遍歷過濾出一個新的子數組，返回條件為true的值
var arr = [2,4,3,1,5,6,7,8];
arr.indexof(2):獲取數組中2的下標值
//數組中的每個值都加10
var map = arr.map(function(item,index){
return item+10;
});
//過濾大于3的數組
var filter = arr.filter(function(item,index){
return item > 3;
}) 1.Function.protorype.bind(obj)
作用：將函數內的this綁定為obj，并將函數返回
call()和apply()的區別：
相同點：都是立即調用函數
不同點：call()傳入的參數是一個一個的，apply()傳入的參數為數組形式
var obj = {username:'kobe'}
function foo(){
console.log(this);
}
fun(); //此時調用的this為window
foo.call(obj);//此時調用的this為object
bind()和以上的區別：通常用其指定回調函數的this
綁定完this不會立即調用函數，而是將函數返回。傳參方式和call()一樣
var bar = foo.bind(obj);
bar();//此時調用就是obj這個對象
簡化寫法：foo.bind(obj)();
例如：
setTimeout(function(){
console.log(this); //此時的this是window對象
},1000);
調用bind函數可以將回調函數指定為特定對象調用
setTimeout(function(){
console.log(this); //此時的this是obj對象
}.bind(obj),1000);此處開始是ES6語法： 1.let -作用：與var類似，用于聲明一個變量 -特點：在塊級作用域內有效 不能重復聲明 不會預處理，不存在提升 -應用： 循環遍歷加監聽 使用let取代var是趨勢 2.const - 作用：定義一個常量 - 特點：不能修改、其他特點同let一樣 - 應用：保存不用改變的數據
從對象或數組提取數據，并賦值給變量（多個）
1.對象解構賦值：
let {n,a} = {n:'tom',a:12};
console.log(n,a);
2.數組的解構賦值
let [a,b] = [1,'guigu'];
console.log(n,a);
3.函數的改變
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(){ // 可以省略對象函數的function
return this.username;
}
}1.箭頭函數沒有自己的this，箭頭函數的this不是調用的時候決定的，而是定義的時候處在的對象就是它的
this
2.擴展理解：
1.箭頭函數的this看外層的是否有函數
如果有，外層函數的this就是內部箭頭函數的this，
如果沒有，則this就是window
let obj = {
getName:function(){
//此處如果寫箭頭函數，那么所指向的是obj，因為箭頭函數外層是常規函數
}
}
let obj = {
getName:() =>{
//此處如果寫箭頭函數，那么所指向的是window，因為箭頭函數外層是箭頭函數
}
}
3.場景
1.沒有形參：小括號不能省略
2.只有一個形參：小括號可以省略
let fun2 = a => console.log(a);
3.兩個及以上的形參:小括號不能省略
let fun3 = (x,y) => console.log(x,y);
fun3(25,36);
4.函數體的情況
1.函數體只有一條語句或者表達式的時候，可以省略{}
let fun = (x,y) => x+y; 可以省略return
2.如果有多個語句或者表達式,{}不能省略的
let fun = function(){}
簡化：let fun = () => console.log('我是箭頭函數');
fun();rest(可變)參數：
作用：用來取代arguments，但比arguments靈活，只能最后部分形參參數
function foo(a,b){
arguments.callee();//調用此函數就等于在foo內部再一次調用自己
}
arguments:這是一個偽數組
1.此屬性可以獲取函數上面的實參的值
2.arguments.callee()：代表調用函數自身，代替遞歸使用
1.function foo(a,b){
console.log(arguments); //獲取的數據為【偽數組】,無法使用foreach等方法
}
2.function(...value){
console.log(value)；//獲取的值為【真數組】，可以使用foreach方法
}
foo(2,3);
//靈活性改變，如果存在占位符a，那么剩下的數字就會存入到...value數組中
3.function foo(a,...value){
console.log(value); // 10,11,12,13
}
foo(3,10,11,12,13);
使用三點運算符，可以靈活使一個數組插入另一個數組，默認調用的是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(); //如果不傳入形參，會導致a,b都為underfined
ES6提供新的默認形參：
function foo(a=0,b=0){
this.a = a;
this.b = b;
}
let obj = new foo();//此時的foo傳入的是形參默認值0,0promise對象：代表了【未來】某個將要發生的事件（通常是一個異步操作）。
有了promise對象，可以將異步操作以同步的流程表達出來，避免了層層嵌套的回調函數（俗稱'回調地獄'）
ES6的promise是一個構造函數，用來生成promise實例。
回調地獄：回調函數如果嵌套多了，會導致耦合度極高，導致不可預期的錯誤。
2.promise對象有三個狀態：
1.pending：初始化
2.fullfilled：成功狀態
3.rejected：失敗狀態
let pro = new Promise((resolve,reject)=>{
//這兩個形參都是函數!!!
//初始化promise狀態：pending
console.log('111');
//異步操作，通常是發送ajax請求，開啟定時器
setTimeout(()=>{
console.log('333');
//根據異步任務的返回結果來去修改promise的狀態
resolve('哈哈');//代表異步執行【成功】，修改promise的狀態為 fullfilled 成功狀態
reject('啦啦'); //代表異步執行【失敗】，修改promise的狀態為 rejected 失敗狀態
},3000);
});
//then里面有兩個回調函數，第一個為成功，第二個為失敗,里面回調參數data
//data參數根據resolve和reject傳輸的內容來
pro.then((data)=>{
//這個函數為成功的回調
console.log(data,'成功了');
},(error)=>{
//這個函數為失敗的回調
console.log(error,'失敗了');
});前言：ES5中對象的屬性名都是字符串，容易造成重名，污染環境。
Symbol：
概念：ES6中添加了一種【原始數據類型】symbol
（已有的原始數據類型：String、Number、boolean、null、underfined、對象）
特點：
1.symbol屬性對應的值是唯一的，解決命名沖突
2.symbol值不能與其他數據進行計算，包括同字符串拼接
3.for in，for of遍歷時不會遍歷symbol屬性。
4.可以定義常量:用去區別其他數據標識
const Person_key = Symbol('person_key');
使用：
1.調用Symbol函數得到symbol值
let symbol = Symbol()
let obj = {}
obj[symbol] = 'hello'
2.傳參標識
let symbol = Symbol('one')；
console.log(symbol); //Symbol('one')
3.內置Symbol值
除了定義自己使用的Symbol值以外，ES6還提供了11個內置的Symbol值，指向其他語言內部
使用的方法。
Symbol.iterator
- 對象的Symbol.iterator屬性，指向該對象的默認【遍歷器】方法概念：iterator是一種接口機制，為各種不同的數據結構提供統一的訪問機制
作用：
1.為各種數據結構，提供一個統一的、簡便的訪問接口
2.使得數據結構的成員能夠按某種次序排列
3.ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要提供for...of消費
工作原理：
1.創建一個指針對象（遍歷器對象），指向數據結構的起始位置
2.第一次調用next方法，指針自動指向數據結構的第一個成員
3.接下來不斷調用next方法，指針會一直往后移動，直到指向最后一個成員
4.每調用next方法返回的是一個包含value和done的對象，{value：當前成員的值，done:布爾值}
- value表示當前成員的值，done對應的布爾值表示當前的數據的結構是否遍歷結束
- 當前遍歷結束的時候返回的value值是underfined，done值為false
原生具備iteratro接口的數據(可用for of遍歷)
擴展理解：
1.當數據結構上部署了Symbol.iterator接口，該數據就是可以用【for..of】遍歷
2.當使用for of去遍歷目標數據的時候，該數據會自動去找Symbol.iterator屬性
//Symbol.iterator 屬性指向指向對象的默認遍歷器方法。
模擬iterator遍歷器：這也是底層的實現
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接口部署到指定的【數據類型】上，可以使用for of遍歷
數組、字符串、arguments（不能用for，each因為是偽數組），set容器，map容器foreach：方法沒辦法使用 break 語句跳出循環，或者使用return從函數體內返回 for in：總是得到對像的key或數組,字符串的下標,而for of和forEach一樣,是直接得到值 for of:【在ES6中】,增加了一個for of循環,使用起來很簡單，for of不能對象用
Promise依賴于回調函數，所以推出generator
概念:
1.ES6提供的解決異步編程的方案之一
2.Generator函數是一個【狀態機】，內部封裝了不同狀態的數據
3.用來生成【遍歷器對象】iterator
4.可暫停函數（惰性求值），yield可暫停，next方法可啟動。每次返回的是yield后的表達式結果
特點：
1.function與函數名之間有一個【星號】
2.內部用yield表達式來定義不同的狀態
例如：
function* generatorExample(){
console.log('開始執行');
let result = yield 'hello'; //狀態值為hello
yield 'generator'；//狀態值為geneartor
let result = yield 'generator';
console.log(result);//此時的結果為underfined，如果在next方法中參入參數
//返回值就是傳參內容aaaaa
return '返回的結果';
}
let MG = generatorExample();//返回的是指針對象
MG.next(); //每調用一次，返回一個yield后面的值
MG.next(); //每調用一次，返回一個yield后面的值
MG.next('aaaaa');//可以傳入
3.geneartor函數返回的是【指針對象】，而不是執行函數內部邏輯
4.調用next方法函數內部邏輯開始執行，遇到yield表達式停止，
返回
-- {value:yield表達式后的結果/underfined，done:false/true}
5.再次調用next方法會從上一次停止時的yield處開始，直到最后
6.yield語句返回結果通常為underfined，當調用next方法時傳參內容會作為啟動時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后面跟的內容
}
案例：發起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;
//當獲取新聞內容成功后，發送請求獲取對應的評論內容
//調用next傳參會作為上次暫停時yield的返回值
sx.next(url);
})
}
let sx = sendXML();
//發送請求獲取新聞內容
sx.next();
ES7的東西
概念：真正意義上的去解決異步回調的問題，同步流程表達異步操作
本質：Generator的語法糖
語法：
async function foo(){
await 異步操作;
await 異步操作;
}
特點：
不需要像Generator去調用next方法，調用await等待，當前的異步操作完成就往下執行
返回的總是Promise對象，可以用then方法進行下一步操作
async取代Generator函數的星號*，await取代Generator的yield
語法上更為明確，使用簡單，沒有副作用。
案例：發送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定義類/實現類的繼承
2.在類中通過constructor定義構造方法
3.通過new來創建類的實例
4.通過extends來實現類的繼承
5.通過super來調用父類的構造方法
6.重寫從父類中繼承的一般方法
//平常創建對象
function Person(name,age){
this.name = name;
this.age = age;
}
let p = new Person('kond',22);
//使用class定義類
class Person{
constructor(name,age){//定義構造方法
this.name=name;
this.age=age;
}
getName(){//定義一般方法
console.log(this.name);
}
}
let p = new Person('king',33);
p.getName();
//使用class實現繼承
class StartPerson extends Person{
constructor(name,age,salary){
super();
this.salary = salary;
}
}字符串的擴展
1.includes(str):判斷是否包含指定的字符串
2.startsWith(str)：判斷是否以指定字符串開頭
3.endsWith(str)：判斷是否以指定字符串結尾
4.repeat(count):重復指定次數
數值的擴展
1.二進制與八進制數值表示法：二進制用0b，八進制用0o
console.log(0b1010); //代表十進制10
2.Number.isFinite(i):判斷是否是有限大的數
3.Number.isNaN(i):判斷是否為NAN
4.Number.isInteger(i):判斷是否是整數
5.Number.parseInt(str):將字符串轉換為對應的數值
Number.parseInt('123abc') //123
6.Math.trunc(i):直接去除小數部分
數組的擴展：
1.Array.from(v):將偽數組對象或可遍歷對象轉換為真數組
2.Array.of(v1,v2,v3):將一系列值轉換為數組
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個數據是否完全相等
0 == -0 // true
NaN == NaN //false
Object.is(0,-0) //false 底層比較的是字符串數值
Object.is(NaN,NaN) //true
2.Object.assign(target,source1,source2)：將源對象的屬性復制到目標對象上
let obj = {}
let obj2 = {username：'zhang',age:22}
Object.assign(obj,obj2);
3.直接操作__proto__屬性
let obj2 = {}
obj2.__proto__ = obj1;基本數據類型拷貝： 拷貝后會生成新的數據，修改拷貝以后的數據不會影響原數據 對象/數組拷貝： 拷貝后不會生成新的數據，而是拷貝引用。修改拷貝以后的數據會影響 拷貝數據的方法： 1.直接賦值給一個變量 //淺拷貝 2.Object.assign() //淺拷貝 3.Array.prototype.concat() //淺拷貝 4.Array.prototype.slice() //淺拷貝 5.JSON.parse(JSON.stringify) //深拷貝!!! 淺拷貝： 拷貝的引用，修改拷貝以后的數據會影響原數據 深拷貝： 拷貝的時候生成新數據，修改拷貝以后的數據不會影響原數據
1.Set容器：無序不可重復的多個value的集合體 set() set(array) add(value) delete(value) has(value) clear() size() 2.Map容器：無序的key不重復的多個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循環： 1.遍歷數組 2.遍歷set 3.遍歷map 4.遍歷字符串 5.遍歷偽數組
到此，相信大家對“ECMAScript常用操作有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
