JavaScript基本知识day10

最新推荐文章于 2023-02-10 10:49:29 发布

weixin_44036797

最新推荐文章于 2023-02-10 10:49:29 发布

阅读量149

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44036797/article/details/128536950

版权

文章介绍了ES6中字符串的新方法如repeat,padStart,padEnd以及去除空格的方法。数值方法包括Number.isFinite和Number.isNaN的用法，以及Number.parseFloat和parseInt。函数的扩展点包括参数默认值、rest参数和箭头函数的特性，特别是箭头函数中的this指向。还提到了严格模式的作用和开启方式。

摘要由CSDN通过智能技术生成

一、字符串新增方法

1.repeat(n):返回的是新字符串，n表示重复的次数

        console.log("12".repeat(3));//121212

2.padStart(length,ele)：补全字符串头部的内容

length补全长度

ele表示补全头部的元素

第二个参数不写，用空格补全

需要补全的长度小于或者等于字符的长度，返回字符串

        console.log("111".padStart(5, 2));//22111

3.padEnd(length,ele)：补全字符串尾部的内容

length补全长度

ele表示补全尾部的元素

第二个参数不写，用空格补全

需要补全的长度小于或者等于字符的长度，返回字符串

        console.log("111".padEnd(5, 2));

4.去除字符串的空格

es5： trim()：去除字符串前后端的空格

es6：

trimStart()/trimLeft()：去除字符串左边的空格

trimEnd()/trimRight()：去除字符串尾部的空格

二、数值方法的扩展

1.Number.isFinite(n):用来检测n是否是有限，返回值是布尔值，如果检测是非数值类型，不会转换为数值类型在判断，直接返回false

        console.log(Number.isFinite(12.2311));//true
        console.log(Number.isFinite(Infinity));//false
        console.log(Number.isFinite(NaN));//false
        console.log(Number.isFinite(undefined));//false
        console.log(Number.isFinite('swaa'));//false

2.Number.isNaN(n):用来检测数据n是否是NaN，返回值是布尔值

es5 isNaN(XXX):现将其他数据转换为数值类型在判断

es6 比es5更严格只会判断数值类型，不会进行数据类型转化

        console.log("=============================");
        console.log(Number.isNaN(100));//false
        console.log(Number.isNaN(Math.PI));//false
        console.log(Number.isNaN(1/3));//false
        console.log(Number.isNaN(NaN));//true
        console.log(Number.isNaN(null));//false
        console.log(Number.isNaN(undefined));//false
        console.log(Number.isNaN('sxx'));//false

3.Number.parseFloat() 和 Number.parseInt()

和全局的方法parseFloat() 和 parseInt()相同，只不过是将方法移植到Number上，让代码模块化管理

parseInt(ele,radix):

ele:需要解析的元素

radix:几进制，0/不写默认10，取值范围[2,36] 大于36或者小于2返回NaN

        console.log("=============================");
        console.log(Number.parseInt(10,3));//3
        console.log(Number.parseInt(10,1));//NaN
        console.log(Number.parseInt(10,37));//NaN
        console.log(Number.parseInt(10));//10
        console.log(Number.parseInt(10,0));//10
        console.log(Number.parseInt(12,20));//22

三、函数的扩展

1.参数的默认值

2.和解构赋值一起用

3.函数的length属性，返回的是形参的个数

如果默认值的参数不是尾参，那么length属性不在记入后面的参数

剩余运算符也不计入length属性中

        function log(x, y = '默认值', c) {
            console.log(x, y);
            c = 1;
            console.log(c);
        }
        log('hello');

4.作用域

        // 给函数参数设置默认值，按照es6语法处理
        function f(x, y = x) {
            console.log(y);
        }
        f(2);

5.rest参数，剩余运算符(...变量名)，用来就收剩余的参数，必须写在最后一位

        // 可以取代arguments类数组对象
        function myfun(a,b,...c){
            console.log(a,b,c);
        }
        console.log(myfun(1,2,3,4,5,2,2323));

四、严格模式

从es5开始，函数内部或者整个script内部都开启严格模式，以更严格标准执行代码

整个script都要开始严格模式，在代码第一行写'use strict'

在函数内部开始严格模式，在函数内部第一行写'use strict'

1.没有用关键字声明的变量会报错(没有声明的变量不允许使用)

// a = 'hello';

// console.log(a);//报错

2.函数参数不能设置默认值/解构赋值

        
        function myfun1(a, b = 1) {//报错
            'use strict'
            console.log(a, b);
        }
        myfun1()

函数内部在严格模式下使用es6语法的解决方式：

1.将use strict添加到srcipt标签中

2.将函数包含在立即执行函数中

        var res =  (function (){
            'use strict'
            return function(a,b="hello"){
                console.log(a,b);
            }
        })()
        console.log(res);

五、函数的name属性

函数的name属性返回函数名称

1.function声明的函数，返回值是函数名

2.function声明的匿名函数，返回值为空

3.内置函数Function声明的函数，返回值anonymous

4.bind方法返回值的name值bound 函数名

5.通过声明式声明的函数，返回值为函数名，没有函数名则是变量名

六、箭头函数

普通函数和箭头函数的区别？

函数作为普通函数调用，this指向window对象

函数作为对象中的方法，谁调用this指向谁

函数作为构造函数，this指向实例化对象

箭头函数中没有this指向，this指向的是上层function声明的函数内部的this，上层没有function声明的函数，this指向window

箭头函数不能作为构造函数，因为箭头函数没有this

箭头函数中没有arguments对象，可以用剩余运算符代替arguments

1.箭头函数写法

        function fun() { };
        var fun = () => {
            //代码块
        }

1.1只有一个形参，并且返回形参，简写

        function fun2(a) {
            return a;
        }
        console.log(fun2(10));//10

        var fun3 = a => a;
        console.log(fun3(100));

1.2多个参数,小括号不能省略，return和花括号可以省略

        var fun4 = (a, b) => a + b;
        console.log(fun4(10, 20));

1.3减函数可以和解构赋值一起使用

        var fun5 = (...a)=>{
            console.log(a);
        }
        console.log(fun5(1,2,3,4));
        
        var fun6 = ([a,b])=>{
           return a+b
        }
        console.log(fun6([2,3]));

1.4对象中的方法

        let obj = {
            naem : 'name',
            say:function(){},
            sing:()=>{}
        }

        var fun11 = ()=>{
            console.log(this,'fun11');
        }
        fun11()
        fun11.call([121])

1.5箭头函数的用处:

1.改变this的指向

2.简化代码

七、箭头函数this

        /*
            es5 
        */
        function outer() {
            console.log(this, 'outer');//window
            function inner() {
                console.log(this, 'inner');//window
            }
            inner();
        }
        outer();
        outer.call({ name: '66666' });

        /* 
            es6
        */
        var outer = () => {
            console.log(this, 'outer');//window
            var inner = () => {
                console.log(this, 'inner');//window
            }
            inner();
        }
        outer();
        outer.call({ name: '66666' });

八、test

1.编写函数findfunru,有两个输入参数，arrs是一个从小到大已经排好序的数组,t是目标值;该函数需要打印出arrs中两个相加等于t的组合. arrs=[1,2,3,4,6] t=7 函数打印: 1,6 和 3,4

        var arrs=[1,2,3,4,6];
        var t = 7;
        var findfunru = (a,b)=>{
            // console.log(a,b);
            for (let i = 0; i < a.length-1; i++) {
                for (let j = 1; j < a.length; j++) {
                    if (a[i]+a[j]==b) {
                        console.log( `${a[i]},${a[j]}`);
                    }
                }
            }
        }
        findfunru(arrs,t);//1,6 3,4 4,3

2.用js写一个函数，传人三个参数a,b,c,返回这3个参数值是否能组成一一个直角三角形

        var fun = (a,b,c) =>{
           return a*a+b*b===c*c?true:false;
        }
        console.log(fun(3,4,5));//true
        console.log(fun(1,1,2));//false

3.编写函数factorial,有一个参数n为正整数，函数的返回值为参数n的阶乘

// 补充说明:一个正整数的阶乘(factorial) 是所有小于及等于该数的正整数的积.比如3的阶乘为3*2*1=6

        var factorial = a =>{
            let sum = 1;
            for (let i = a; i > 0; i--) {
                sum*=i;
            }
            return sum;
        }
        console.log(factorial(4));//24
        console.log(factorial(6));//720