首页 前端知识 JS-09-es6常用知识1

JS-09-es6常用知识1

2024-06-22 01:06:08 前端知识 前端哥 472 288 我要收藏

目录

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对象
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13206.html
标签
es6
评论
发布的文章

HTML5 多人游戏开发(二)

2024-07-20 17:07:44

web前端(第一天HTML)

2024-07-20 17:07:16

HTML 音频(Audio)

2024-07-20 17:07:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!