Js高级数组方法--构造函数

NIE52

已于 2022-04-25 18:27:53 修改

阅读量710

点赞数

文章标签： javascript

于 2022-04-25 18:24:27 首次发布

本文链接：https://blog.csdn.net/weixin_59166066/article/details/124411303

版权

JS高级

箭头函数

ES6中新增定义函数方式

（ ）=>
const fn = ( )=>{ }

1650643279139

1650643298205

箭头函数以小括号开头，小括号里面放置形参的地方小括号后面要写一个箭头这是固定语法小箭头后面要写一个大括号大括号依然表示函数体这就是定义箭头函数的基本方式

箭头函数没有名字要如何调用呢？

通常我们都会讲箭头函数赋值给一个变量变量名字就是函数名字，通过变量名字来调用函数就可以了

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号、不能写return

 <SCRipt>
    function sum(num1,num2){
        return num1 + num2
    }
    </SCRipt>    //此为传统函数定义
    
    <SCRipt>
    箭头函数定义则为：
     const sum = (num1, num2) => num1 + num2;
     const result = sum(10,20);
     condole.log(result);
     </SCRipt>

使用传统的函数定义方式为上面

箭头函数为下面 num1 num2 为函数的形参

在箭头函数中如果形参只有一个形藏外侧的小括号也是可省略的

  <script>
      const fn = v => {
         alert(v);
      }
      fn(20);
   </script>

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，箭头函数继承而来的this指向永远不变。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

箭头函数都是匿名函数,ES5匿名函数的语法糖,并且没有自己的this,arguments,super或new.target。

它的优点是:

(1)简洁的语法。

(2)隐式返回,如下面的代码可以去掉return,代码一到一行,减少代码量numbers.map((number)=>number*2)

(3)解决了this的指向问题,原生的写法this指向的是调用者,箭头函数this绑定的是定义时的那个对象。如果有对象嵌套的情况下,则this绑定到最近的一层对象上

它的缺点是:

(1)做为构造函数的时候不能使用箭头函数

(2)真正需要this的时候如给元素绑定click事件的时候,执行的回调函数不能使用箭头函数。

(3)我们需要使用arguments对象的时候不能使箭头函数。箭头函数中没有arguments对象。

(4)对象的方法也不可以使用箭头函数

1650649210000

常用数组方法

forEach( ) 方法

forEach () 数组每一个元素都会执行一次回调函数 =类似以前的for forEach 高阶函数 (可以接受一个形参-函数)

for循环可以通过break来打断 forEacah不能通过break 打断

 <script>
    const arr=['a','b','c'];
    //分别打印他们
    // arr.forEach(function(value,index){
     
    //     console.log(`值是${value} 下标是${index}`);
    // });

    // arr.forEach((value,index)=>console.log(`值是${value} 下标是${index}`))
    arr.forEach(value=>console.log(`值是${
       value}`))
        
    </script>

注意：forEach() 对于空数组是不会执行回调函数的。

利与弊：foreach虽然是for循环的简化版本，但是并不是说foreach就比for更好用，foreach适用于循环次数未知，

或者计算循环次数比较麻烦情况下使用效率更高，但是更为复杂的一些循环还是需要用到for循环效率更高。

foreach不能对数组或集合进行修改（添加删除操作），如果想要修改就要用for循环。

map( )方法

  <script>
        map();
    function map(){
        //map 根据原来的数组 来返回新的数组
        //也会循环数组 在循环的回调函数中 可以返回新的数据 组成新的数组
        const arr = ['a','b','c'];
        //要求返回['我的字母是a','我的字母是b','我的字母是c']
        const newArr =arr.map(value=>`我的字母是${value}`); //1,1,1  return了什么 就会被装到数组的每一个元素当中
        console.log(newArr);


        const list =[9,99,999];  //要求返回10 100 1000
        const newList =list.map(value=>value+1)
        console.log(newList);
        

        const objArr = [{name:'悟空'},{name:'八戒'},];
        const newObjArr = objArr.map(value=>{
            value.color='red';
            return value
           
        })
        console.log(newObjArr);


        //数组拼接成字符串数组 转成字符串 插到网页上
       
        const text =['刘德华','张学友','胡歌']
        const newText =text.map(value=>`<div>${value}</div>`)
        console.log(newText);
        //把它转成字符串
        const html = newText.join('');
        console.log(html);
        document.body.innerHTML=html;
    }
    </script>

04-箭头函数返回对象

  <script>
        
        const arr = ['a','b','c'];
        //返回 [{name:'a',name:'b',name:'c'}]
        const newArr = arr.map(value=>
        {
     return{
     name:value}});
        console.log(newArr);
        //次为正确
        

        //{} 这个大括号 就是对象（只是我们的认为  浏览器认为这是块级空间）
        //如果 一定要在箭头函数中想要通过省略  return的方式 来返回对象，请一定加上小括号
        const func7 = (num)=>({
     a:123}); //右边加了小括号 表示想要返回 小括号里面的数据return {a:123};
        const func8 = (num)=>{
     a:123}; //undefined

        console.log(func7()); //{a:123};
        console.log(func8());//undefined
    </script>

every ( )

 <script>
        every();
        function every(){
     
        const arr = [1,2,3,4];
        //判断数组中的每一个元素，是不是都小于5 如果是 返回true

        //every 当中的函数，要求每一个都return 了true  最后every 的返回值才是true
        const result = arr.every((value)=>{
     
            if(value<5){
     
                return true;
            }else{
     
                return false;
            }
        });
        console.log(result);
    }
    // every:
    // 会返回true 或者false
    // 要求数组中每一个元素都符合条件，every 得到true
    // 如果空的数组调用了every   得到结果 也是 true
    </script>

06-商品单选全选案例

<html>
  <head lang="</

最低0.47元/天解锁文章

NIE52

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js高级数组方法--构造函数

JS高级箭头函数ES6中新增定义函数方式（）=>const fn = ( )=>{ }箭头函数以小括号开头，小括号里面放置形参的地方小括号后面要写一个箭头这是固定语法小箭头后面要写一个大括号大括号依然表示函数体这就是定义箭头函数的基本方式箭头函数没有名字要如何调用呢？通常我们都会讲箭头函数赋值给一个变量变量名字就是函数名字，通过变量名字来调用函数就可以了函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号、不能写return
复制链接

扫一扫