当前位置：首页 > news >正文

JS-09-es6常用知识1

news 来源：原创 2024/9/28 17:32:19

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.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、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: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
})