企业网站找谁做,黑龙江 网站建设,建网站需什么条件,营销图片大全目录
1 模板字符串
1.1 模板字符串基本用法
1.2 模板字符串解决了一些痛点
2 解构赋值
2.1 对象的解构赋值
2.2 函数参数的解构赋值
2.3 补写#xff1a;属性的简写
3 rest参数
3.1 arguments
3.2 rest参数
3.3 补充#xff1a;判断数据类型
4 箭头函数
4.1 …目录
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 divpspan123/span/pp${s2}/pp${s3}/pp${s1}/p/div;console.log(s5); 2 解构赋值
节省代码量简化代码 2.1 对象的解构赋值 var obj{name:张三,age:18}var {name,age}obj; //生成2个变量// name值来自于obj.name、// age值来自于obj.agevar {name:title}obj;//生成一个变量title值来自于obj.namevar {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) //3fn(a, b, c, d, e) //5 3.2 rest参数 es6箭头函数内部不能使用arguments为了弥补这个问题rest参数应孕而生 //...args就是rest参数//--产生了一个变量这个变量是一个数组数组里面包含了这个函数调用时传递的所有实参function q(...args) {//验证args是不是数组console.log(args instanceof Array);//trueconsole.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、typeoftypeof只能判断数字、字符串、布尔值、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.onclickfunction(){console.log(你好)}//箭头函数div.onclick(){console.log(你好)} 2有一个参数的箭头函数 var fn(a){console.log(abc);}//等价于var fna{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值而箭头函数不可用 scriptvar p{age:18,//es6中对象方法的箭头函数表示形式run:(){setTimeout((){//this:windowconsole.log(this);//this是window},100)},travel:function(){//this:psetTimeout((){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对象
