本篇内容主要讲解“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
