ES5_6_7
ES6_模板字符串
-
模板字符串 : 简化字符串的拼接
模板字符串必须用 `` 包含
变化的部分使用${xxx}定义
<script type="text/javascript"> let obj={username: 'xuefeng',age:12}; let str='喜欢的角色'+obj.username+'年龄'+obj.age; console.log(str);//喜欢的角色xuefeng年龄12 str= `喜欢的角色:${obj.username},年龄:${obj.age}`; console.log(str);//喜欢的角色:xuefeng,年龄:12 </script>
ES6_对象的简写方式
简化的对象写法
-
省略同名的属性值
-
省略方法的function
-
例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};<script type="text/javascript"> let username='jifeng'; let age=12; let obj={ username:username,//以前的老写法 getName:function(){//以前的老写法 return this.username; }, age,//同名的属性可以省略不写, getAge(){//可以省略函数的function return this.age; } }; console.log(obj);//Object ,age: 12 getAge: ƒ getAge() ,getName: ƒ () username: "jifeng" ,__proto__: Object console.log(obj.getName()); console.log(obj.getAge()); </script>
ES6_箭头函数详解
-
作用: 定义匿名函数
-
基本语法:
- 没有参数: () => console.log(‘xxxx’)
- 一个参数: i => i+2
- 大于一个参数: (i,j) => i+j
- 函数体不用大括号: 默认返回结果
- 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
使用场景: 多用来定义回调函数
-
箭头函数的特点：
- 1、简洁
- 2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
- 3、扩展理解： 箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。
-
<script type="text/javascript"> //let fun=function(){ // console.log('我是箭头函数'); // }; let fun=() => console.log('我是箭头函数'); fun(); //形参的时候 //1.没有形参的时候 let fun1 =() => console.log('a'); fun1(); //a //2.只有一个形参的时候 ()可以省略 let fun2 = a =>console.log(a); fun2('aaa'); //aaa //3.两个及两个以上的形参的时候 ()不能省略 let fun3 =(x,y) =>console.log(x,y); fun3(25,12); //25 12 //函数体的情况 //1.函数体只有一条语句或者表达式的时候 {}可以省略--->会自动返回执行的结果或者是表达式的结果 let fun4 =(x,y) => x+y; console.log(fun4(1,2));//3 let fun5 = (x,y) => {return x+y};//有{}需要有return返回语句执行的结果 console.log(fun5(1,3));//4 //2.函数体不止一条语句或者是表达式的情况 {}不可以省略 let fun6 = (x,y) =>{ console.log(x,y); x+y; console.log(x+y); }; fun6(12,12);//12 12 24 //测试箭头函数的this let btn1=document.getElementById('btn1'); let btn2=document.getElementById('btn2'); btn1.onclick =function () { alert(this); };//[object HTMLButtonElement] btn2.onclick = () =>{ alert(this); };//[object Window] let obj={ name: '箭头函数', getName:() =>{//因为这个还是个箭头函数，所以this会继续往上一个函数找，就找到window了 btn2.onclick = () =>{//箭头函数上还是个箭头函数 console.log(this); }; }, getName2:function () { btn2.onclick = () =>{//箭头函数上就是这个getName2()函数,所以this指的是getName2() console.log(this); }; } }; obj.getName();//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …} obj.getName2();//{name: "箭头函数", getName: ƒ, getName2: ƒ} </script>
ES6_三点运算符
-
1.rest(可变)参数
用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数
function fun(...values) { console.log(arguments); arguments.forEach(function (item, index) { console.log(item, index); }); console.log(values); values.forEach(function (item, index) { console.log(item, index); }) } fun(1,2,3); -
2.扩展运算符
let arr1 = [1,3,5]; let arr2 = [2,...arr1,6]; arr2.push(...arr1); -
<script type="text/javascript"> function foo(a,b) { console.log(arguments);//伪数组arguments /* arguments.forEach(function (item,index) {//arguments可以收集，但是不能遍历 console.log(item,index);//报错 forEach is not a function })*/ }; foo(1,2);//Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] function foo2(a,...value) {//使用三点运算符必须要放到最后 console.log(value);//三点运算符 出来的是一般数组 value.forEach(function (item,index) { console.log(item,index); }) } foo2(1,3,45,88);//(3) [3, 45, 88] 3 0 45 1 88 2 let arr=[1,6]; let arr1=[2,7,5,4]; arr=[1,...arr1,6];//使用三点运算符可以很快的实现插入操作 console.log(arr);//(6) [1, 2, 7, 5, 4, 6] console.log(...arr);//1 2 7 5 4 6 </script>
ES6_形参默认值
-
形参的默认值----当不传入参数的时候默认使用形参里的默认值
<script type="text/javascript"> //定义一个点的坐标的构造函数 function Point(x = 0,y = 0) { this.x=x; this.y=y; }; let point=new Point(23,25); console.log(point);//x:23 y:25 let point2=new Point(); console.log(point2);//x:0 y:0 </script>
ES6_promise对象原理详解
-
1.理解
- Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
- 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)
- ES6的Promise是一个构造函数, 用来生成promise实例
-
2.使用promise基本步骤(2步):
-
创建promise对象
-
let promise = new Promise((resolve, reject) => { //初始化promise状态为 pending //执行异步操作 if(异步操作成功) { resolve(value);//修改promise的状态为fullfilled } else { reject(errMsg);//修改promise的状态为rejected } })
-
-
调用promise的then()
-
promise.then(function( result => console.log(result), errorMsg => alert(errorMsg) ))
-
-
-
3.promise对象的3个状态
- pending: 初始化状态
- fullfilled: 成功状态
- rejected: 失败状态
-
4.应用
-
使用promise实现超时处理
-
使用promise封装处理ajax请求
-
let request = new XMLHttpRequest(); request.onreadystatechange = function () { } request.responseType = 'json'; request.open("GET", url); request.send();
-
-
-
<script type="text/javascript"> //创建promise对象 let promise=new Promise((resolve,reject) =>{ //初始化promise状态 pending:初始化 console.log('111'); //只能够异步操作，通常是发送Ajax请求，开启定时器 setTimeout( () =>{ console.log('333'); //根据异步任务的返回结果去修改promise的状态 //异步任务执行成功 resolve('哈哈');//修改promise的状态为 fullfilled:成功的状态 //异步任务执行失败 //reject('呜呜'); //修改promise的状态为 rejected 失败的状态 },2000); }); console.log('222'); promise .then( (data) =>{//成功的回调 data是传入的参数 console.log(`success...${data}`); },(error) =>{//失败的回调 error是传入的参数 console.log(`falure...${error}`); }) </script>
ES6_promise对象案例练习
-
<script type="text/javascript"> //定义一个请求news的方法 function getNews(url) { //创建一个promise对象 let promise = new Promise((resolve, reject) => { //初始化promise状态为pending //启动异步任务 let request = new XMLHttpRequest(); request.onreadystatechange = function () { if(request.readyState === 4){ if(request.status === 200){ let news = request.response; resolve(news); }else{ reject('请求失败了。。。'); } } }; request.responseType = 'json';//设置返回的数据类型 request.open("GET", url);//规定请求的方法，创建链接 request.send();//发送 }) return promise; } getNews('http://localhost:3000/news?id=3') .then((news) => { console.log(news); document.write(JSON.stringify(news)); console.log('http://localhost:3000' + news.commentsUrl); return getNews('http://localhost:3000' + news.commentsUrl); }, (error) => { alert(error); }) .then((comments) => { console.log(comments); document.write('<br><br><br><br><br>' + JSON.stringify(comments)); }, (error) => { alert(error); }) </script>
Symbol属性介绍
-
前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
-
Symbol
-
概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
-
特点:
- 1、Symbol属性对应的值是唯一的，解决命名冲突问题
- 2、Symbol值不能与其他数据进行计算，包括同字符串拼串
- 3、for in, for of遍历时不会遍历symbol属性
-
使用:
-
1、调用Symbol函数得到symbol值
-
let symbol = Symbol(); let obj = {}; obj[symbol] = 'hello';
-
-
2、传参标识
-
let symbol = Symbol('one'); let symbol2 = Symbol('two'); console.log(symbol);// Symbol('one') console.log(symbol2);// Symbol('two')
-
-
3、内置Symbol值
- 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
- Symbol.iterator
- 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲)
-
-
<script type="text/javascript"> //创建symbol属性值 let symbol=Symbol(); console.log(symbol);//Symbol() let obj={username: 'xuefeng',age:12}; obj[symbol]='hello'; console.log(obj);//age: 12 username: "xuefeng" Symbol(): "hello" //for in || for of不能遍历symbol属性 for(let i in obj){ console.log(i);//username age } let symbol2=Symbol('one'); let symbol3=Symbol('two'); console.log(symbol2==symbol3);//false //可以用于定义常量 const aa_key=Symbol('aa_key'); console.log(aa_key);//Symbol(aa_key) </script>
-
ES6_iterator接口机制
-
概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
-
作用:
- 1、为各种数据结构，提供一个统一的、简便的访问接口；
- 2、使得数据结构的成员能够按某种次序排列
- 3、ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of消费
-
工作原理:
- 创建一个指针对象(遍历器对象)，指向数据结构的起始位置。
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
- value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束
- 当遍历结束的时候返回的value值是undefined，done值为false
-
原生具备iterator接口的数据(可用for of遍历)
-
1、Array
2、arguments
3、set容器
4、map容器5、String
-
-
<script type="text/javascript"> function myInerator(arr){//iterator接口 let nextIndex=0;//记录指针的位置 return {//遍历器对象 next:function () { return nextIndex < arr.length?{value:arr[nextIndex++],done:false }:{value:undefined,done:true} } } } let arr=[1,4,5,'qwe']; let iteratorObj=myInerator(arr); console.log(iteratorObj.next());//done:false value:1 console.log(iteratorObj.next());//done:false value:4 console.log(iteratorObj.next());//done:false value:5 console.log(iteratorObj.next());//done:false value:qwe console.log(iteratorObj.next());//done:true value:undefined console.log(iteratorObj.next());//done:true value:undefined //将iterator接口部署到指定的数据类型上 //数组,字符串,arguments,set容器,map容器 for(let i of arr){ console.log(i); } let str='abcdefg'; for (let i of str) { console.log(i); } function fun() { for(let i of arguments){ console.log(i); } } fun(1,4,8,'wee'); //当使用for of 去遍历某一个数据结构的时候，首先去找Symbol.iterator 找到了就去遍历,没有找到不能遍历 xxx is not iterable let targetData={ [Symbol.iterator]:function(){ let nextIndex=0; return {//遍历对象 next: function () { return nextIndex<this.length?{value:arr[nextIndex++],done:false }:{value:undefined,done:true}; } } } } </script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
