目录
1 模板字符串
1.1 模板字符串基本用法
1.2 模板字符串解决了一些痛点
2 解构赋值
2.1 对象的解构赋值
2.2 函数参数的解构赋值
2.3 补写:属性的简写
3 rest参数
3.1 arguments
3.2 rest参数
3.3 补充:判断数据类型
4 箭头函数
4.1 用法
4.2 箭头函数和普通匿名函数有哪些不同?
5 指向window
6 global和window的区别
1 模板字符串
模板字符串就是一种字符串的新的表现形式
1.1 模板字符串基本用法
var s1 = `abc`
1.2 模板字符串解决了一些痛点
1、字符串拼接
var s3 =" a " + s1 + " b " + s2; //普通字符串拼接 var s4 = ` a ${s1} b ${s2}`; //模板字符串,减少了错误几率
2、字符串换行
var s5 =`<div> <p> <span>123</span> </p> <p>${s2}</p> <p>${s3}</p> <p>${s1}</p> </div>`; console.log(s5);
2 解构赋值
节省代码量,简化代码
2.1 对象的解构赋值
var obj={name:"张三",age:18} var {name,age}=obj; //生成2个变量, // name值来自于obj.name、 // age值来自于obj.age var {name:title}=obj; //生成一个变量:title,值来自于obj.name var {name:title,age:title1}=obj; //相当于给obj里的变量在外面取了别名
2.2 函数参数的解构赋值
function f1(obj){ //未解构 console.log(obj.age); console.log(obj.height) } //等价于 function f1({ age,height }){ //解构 //创建了age、height两个局部变量,值来自于实参 //这样写代码又节省了一些字符 console.log(age); console.log(height) } f1({age:5,height:180}) //调用函数
2.3 补写:属性的简写
var a = 3 ; var c = 10; var b = { a,c } ; //b对象有一个a属性,a属性的值,来自于a变量 , //还有一个c属性,c属性的值来自于c变量 console.log(b)
3 rest参数
使用背景:es6的
优点:arguments是伪数组,而rest参数是真数组
3.1 arguments
arguments是函数内部的一个局部变量,
arguments.length表示函数的实参的个数function fn() { console.log(arguments.length); for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } fn(1, 3, 5) //3 fn("a", "b", "c", "d", "e") //5
3.2 rest参数
es6箭头函数内部不能使用arguments,为了弥补这个问题,rest参数应孕而生
//...args就是rest参数 //-->产生了一个变量,这个变量是一个数组,数组里面包含了这个函数调用时传递的所有实参 function q(...args) { //验证args是不是数组? console.log(args instanceof Array);//true console.log(Object.prototype.toString.call(args));//"[object Array]" console.log(Array.isArray(args)); //true es5中的新方法 console.log(args); } q(1, 3, 5); q(2, 3, 4, 5, 6, 7, 8);
3.3 补充:判断数据类型
1、typeof:typeof只能判断:数字、字符串、布尔值、undefined、函数
2、Object.prototype.toString.call()
- 5 '[object Number]'
- "abc" '[object String]'
- true '[object Boolean]'
- null '[object Null]'
- undefined '[object Undefined]'
- [1,3,5] '[object Array]'
- function(){} '[object Function]'
- new Date() '[object Date]'
- /abc/ '[object RegExp]'
3、Array.isArray() es5中提出来的检测数组
4、 isNaN()
5、 isInfinity()
4 箭头函数
场景:用于替换匿名函数
4.1 用法
1:基本用法
//匿名函数 div.onclick=function(){ console.log("你好") } //箭头函数 div.onclick=()=>{ console.log("你好") }
2:有一个参数的箭头函数
var fn=(a)=>{ console.log("abc"); } //等价于: var fn=a=>{ console.log("abc"); }
3 有2个及更多参数的箭头函数
切记:()不能省略
var f=(a,b,c)=>{ console.log("abc") }
4.2 箭头函数和普通匿名函数有哪些不同?
1、函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
2、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3、不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4、(不常用)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。 generator函数现在经常用async替代
普通的匿名函数,或者说具名函数,都可以决定函数内部的this值,而箭头函数不可用
<script> var p={ age:18, //es6中对象方法的箭头函数表示形式 run:()=>{ setTimeout(()=>{ //this:window console.log(this);//this是window },100) }, travel:function(){ //this:p setTimeout(()=>{ console.log(this);//this是p },100) }, //推荐使用的方式☆☆☆:es6中对象方法的简写形式 say(){ console.log("say方法中的this:",this); setTimeout(()=>{ console.log("say内部的延迟函数:",this);//this是p },100) }, } p.run(); p.travel(); p.say(); </script>
5 指向window
在 jQuery 的
$.ajax
方法中,直接使用this
关键字在success
回调函数中通常不会指向你期望的上下文(比如调用$.ajax
的对象或者某个特定的 DOM 元素)。这是因为 JavaScript 的回调函数通常改变了this
的上下文,除非你显式地绑定它。在
$.ajax
的success
回调函数中,this
通常指向全局对象(浏览器中通常是window
)。这是因为当你调用一个回调函数时,除非你明确地设置了它的this
值(例如使用.call()
,.apply()
, 或者箭头函数),否则this
将默认指向全局对象。$.ajax({ success:function(){ console.log(this); //window } })
在 JavaScript 中,当你使用普通的函数(非箭头函数)作为回调,并且这个函数是在没有显式指定上下文(即没有使用
.call()
,.apply()
, 或.bind()
方法)的情况下被调用的,那么this
的值通常是全局对象(在浏览器中是window
)。[1,3,5].map(function(){ console.log(this); //window })
6 global和window的区别
global是es中全局作用域中的根对象
- 但是nodejs里面,global全是表示全局变量的载体
- 浏览器端的js里面,全局变量都放在了window中,浏览器中不存在global对象