ECMAScript常用操作有哪些
本篇内容主要讲解“ECMAScript常用操作有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ECMAScript常用操作有哪些”吧!
创新互联公司:于2013年成立为各行业开拓出企业自己的“网站建设”服务,为上千多家公司企业提供了专业的成都网站设计、网站建设、外贸网站建设、网页设计和网站推广服务, 按需网站策划由设计师亲自精心设计,设计的效果完全按照客户的要求,并适当的提出合理的建议,拥有的视觉效果,策划师分析客户的同行竞争对手,根据客户的实际情况给出合理的网站构架,制作客户同行业具有领先地位的。
ECMA(European Computer Manufacturers Association)
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作用域。会解析传入的字符串,让解析器执行 对象不能有重名的属性
json对象的扩展
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);
let、const关键字
此处开始是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,0
promise(承诺)
promise对象:代表了【未来】某个将要发生的事件(通常是一个异步操作)。 有了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,'失败了'); });
Symbol
前言: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
概念: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、for-in与for-of的区别
foreach:方法没办法使用 break 语句跳出循环,或者使用return从函数体内返回 for in:总是得到对像的key或数组,字符串的下标,而for of和forEach一样,是直接得到值 for of:【在ES6中】,增加了一个for of循环,使用起来很简单,for of不能对象用
Generator函数
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();
asnc函数详解及应用
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();
class类的详用
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) //深拷贝!!! 浅拷贝: 拷贝的引用,修改拷贝以后的数据会影响原数据 深拷贝: 拷贝的时候生成新数据,修改拷贝以后的数据不会影响原数据
set、map容器
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常用操作有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
当前题目:ECMAScript常用操作有哪些
链接URL:http://pwwzsj.com/article/ghhidg.html