Array、箭头函数和对象的扩展

最新推荐文章于 2024-04-20 10:23:12 发布
最新推荐文章于 2024-04-20 10:23:12 发布
阅读量165 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch2362710931/article/details/125709477
版权

一、数组

  1. 数组的遍历

    • ES5 中数组的遍历方式
      • for：经常用，不太简洁
      • forEach：没有返回值，代码块中不能使用break、continue
      • map：返回新的数组
      • filter：返回新的数组
      • some：返回 boolean
      • every：返回 boolean
      • reduce：接收一个函数作为累加器，第一个参数式回调函数，回调函数的参数一共有4个：
        • prevValue：必需，上一次回调返回的值
        • currentValue：必需，数组中当前被处理的元素
        • index：可选
        • array：可选
    • ES6 中数组的遍历方式
      • find
      • findIndex
      • for of
        • values
        • keys
        • entries

  2. 伪数组

    • 伪数组有以下两个特征：1. 按索引方式储存数据；2. 具有 length 属性

  3. Array.from()

    let arrayList = {
  	0: "es5",
    1: "es6",
    length: 2
};

let newArr = Array.from(arrayList);
newArr.push("es7");

      1. 如何判断是否是数组？

        • typeof
        • instanceof
        • constructor
        • Object.prototype.toString

    2. 函数

      1. 参数与解构赋值结合

      2. 参数作用域

        作用域链：当在JS中使用一个变量的时候，首先JS会尝试在当前作用域下去寻找该变量，如果没有找到，再到它上一层作用域寻找。以此类推直到找到该变量为止，如果最后也没找到，直接报错！

        let x = 1;
function foo(x, y = x) {
	console.log(y);
}
foo(2); // 2

        let x = 1;
function foo(y = x) {
    console.log(y);
}
foo(); // 1

        function foo(y = x) {
    let x = 2;
    console.log(y);
}
// 定义函数时直接报错 x 未定义

        3.扩展运算符：把数组或者类数组展开用逗号隔开的值，应用场景如下：

        • 复制数组

          // 由于数组是按照引用传值的，不能直接赋值。
let arr1 = [1, 2];
let arr2 = arr1;
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

          // ES5 方式
let arr1 = [1, 2];
let arr2 = [];
arr1.forEach(function(value) {
    arr2.push(value);
});
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2]

          // ES6 方式
let arr1 = [1, 2];
let arr2 = [...arr1];
arr1.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2]

          数组合并

          // ES5 方式
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.concat(arr2);
console.log(arr1); // [1, 2, 3]

          // ES6 方式
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
// [1, 2, 3, 4, 5, 6]
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

          let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
// [1, 2, 3, 4, 5, 6]
let arr3 = [...arr1, ...arr2];
console.log(arr); // [1, 2, 3, 4, 5, 6]

          剩余参数：把逗号隔开的值组合成一个数组，应用场景如下：

          • 不定参数 arguments

            // 案例：计算函数所有参数的和

// ES5 方式
function sum() {
    let result = 0;
    for(let i = 0; i <= arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

sum(1, 2, 3);
sum(1, 2, 3, 67, 45, 100);

            // ES6 方式
function sum(...args) {
    let result = 0;
    args.forEach(function(value) {
        result += value;
    });
    return result;
}
sum(1, 2, 3);
sum(1, 2, 3, 67, 45, 100);

            function sum(...args) {
    return args.reduce(function(prevValue, currentValue) {
        return prevValue + currentValue;
    }, 0);
}
sum(1, 2, 3);
sum(1, 2, 3, 67, 45, 100);

            解构赋值

            let [a, b, ...c] = [1, 2, 3, 4];
console.log(a, b, c); // 1 2 [3, 4]

            let {b, a, ...args} = {a: 1, b: 2, c: 3, d: 4};
console.log(a, b, args); // 1 2 {c: 3, d: 4}

            二、箭头函数

            1. 定义函数的几种方式

              foo(1, 2);
function foo(x, y) {
    return x + y;
}
foo(1, 2);

              let foo = function(x, y) {
	return x + y;
}
foo(1, 2);

              let foo = (x, y) => {
    return x + y;
}
foo(1, 2);

              let foo = (x, y) => x + y;
foo(1, 2);

              let x = x => x;

// 等价于
function x(x) {
    return x;
}

  4. this 的本质

    • 全局函数的this指向全局对象window；

    • 当函数作为对象的方法被调用时，this 指向该对象。即谁调用函数this就指向谁；

    • 匿名函数的this指向全局对象window；

    • 箭头函数的this指向的是定义时的this对象，而不是执行时的this对象。

  5. 使用箭头函数的注意事项

    1. 箭头函数的this指向的是定义时的this对象，而不是执行时的this对象。
    2. 不可以当作构造函数
    3. 不可以使用 arguments

三、对象的扩展

  1. 属性简洁表示法
  2. 属性名表达式
  3. Object.is()
  4. Object.assign()
  5. in
  6. 对象的遍历方式
    1. for in
    2. Object.keys()
    3. Object.getOwnPropertyNames()
    4. Reflect.ownKeys()

四、作业

  1. 简述 bind、call、apply 的作用及区别。

call 和 apply 的区别：传参的方式不同

  • call(obj, param1, param2, param3…)
  • apply(obj, [param1, param2, param3…])

bind 与 call / apply 的区别：

  • bind 返回的是一个新的函数，需要再调用一下才会执行
  • bind 的传参方式同 call， 即：bind(obj, param1, param2, …)
  • call / apply 是立即执行，bind 返回的是一个函数，便于稍后调用。

2.简述什么是递归函数？

递归就是一个函数在它的函数体内调用它自身。执行递归函数将反复调用其自身，每调用一次就进入新的一层。递归函数必须有结束条件。
当函数在一直递推，直到遇到墙后返回，这个墙就是结束条件。
所以递归要有两个要素，结束条件与递推关系

3.简述深拷贝和浅拷贝，手写一个实现深拷贝的函数。

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象。
区别：浅拷贝基本类型之前互不影响，引用类型其中一个对象改变了地址，就会影响另一个对象；深拷贝
改变新对象不会影响原对象，他们之前互不影响。

//赋值
//对象赋值
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = obj1;
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '李四', action: { say: 'hello'}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}


//浅拷贝
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = Object.assign({}, obj1);
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hello'}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}


//展开运算符
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = {... obj1};
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hello'}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}


//深拷贝
let obj1 = { name: '张三', action: { say: 'hi'};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.name = '李四';
obj2.action.say = 'hello'
console.log('obj1',obj1) 
// obj1 { name: '张三', action: { say: 'hi'}
console.log('obj2',obj2) 
// obj2 { name: '李四', action: { say: 'hello'}
若枫~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Array map() 方法、箭头函数Arrow_functions的简单用法
Easylee的博客
03-09 848
参考资料： ①菜鸟教程JavaScript Array map() 方法 ②MDN箭头函数 结合参考资料，博主写的demo代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Array map() 方法、箭头函数Arrow_fu...
js函数扩展
03-28
2. **箭头函数**：ES6引入的箭头函数`=>`简化了函数定义，其语法更紧凑，并且箭头函数没有自己的`this`，而是继承自父作用域。 3. **函数参数默认值**：在ES6中，我们可以为函数参数设置默认值，例如`function foo...
JS中Array.from()使用
qq_42526440的博客
04-04 344
Array.from() Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。 console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] 在 Array.from 中使用箭头函数 //使用箭头函数作为映射函数
ES6关于函数的拓展，箭头函数，普通函数（2024-04-20）
最新发布
hap1994的博客
04-20 736
（1）默认值的基本用法ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。上面代码检查函数log()的参数y有没有赋值，如果没有，则指定默认值为World。这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。就像上面代码的最后一行，参数y等于空字符，结果被改为默认值（期望的结果是不被赋值,y=‘’就是期望值，但被改成默认值了）。ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。可以看到，ES6 的写法比 ES5 简洁许多，而且非常自然。
ES6 函数——函数参数的扩展、箭头函数
Concise200的博客
02-22 277
ES6 函数1. 函数2. 箭头函数 1. 函数 1.只有在未传递参数，或者参数为 undefined 时，才会使用默认参数。null和空字符串被认为是有效的值传递。 <script> function fn(name, age = 17) { console.log(name + "," + age); } fn("woody"); // woody,17 fn("Smith", undefined) // Smith,17 fn("jo
自学-ES6篇-函数的扩展
故事的小洋葱
10-07 3498
1、函数参数的默认值 基本用法 在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。 function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', ''
【JavaScript】数组的映射
小秀的博客
06-22 1284
JavaScript数组的映射
JS高阶函数原理与用法实例分析
10-17
6. 箭头函数：JavaScript中的箭头函数提供了一种简洁的函数定义方式，它可以替代传统的函数表达式。例如，使用箭头函数重写`mapForEach`中的回调函数，可以进一步简化代码。 高阶函数的使用不仅提高了代码的简洁性...
js基码函数
07-22
随着JavaScript的不断演进，出现了许多新的特性，如箭头函数`() => {}`、模板字符串` `${expression}` `、解构赋值、Promise、async/await等，极大地提升了开发效率和代码可读性。 ### 总结 JavaScript的基础函数...
js代码-Array
07-16
JavaScript中的Array对象是编程中最常用的数据结构之一，用于存储一系列有序的值，这些值可以是任何类型，包括数字、字符串、对象等。在JavaScript中，数组与其他语言的数组有些不同，因为它们是动态的，意味着可以...
Array-Cardio-1：js
02-14
8. **ES6新特性**：包括箭头函数、解构赋值、展开运算符在数组操作中的应用。 通过Array-Cardio-1的练习，你可以提升JavaScript编程技巧，更好地掌握数组的动态操作和高级用法，这对于日常开发工作，尤其是在处理...
【React】js array的map方法总结
RogerQianpeng的博客
06-30 637
在写React官方教程的示例游戏（三连棋）时，对于map方法有些疑惑，解决之后做一个记录。 代码内容 const moves = history.map((step,move)=>{ const desc = move? 'Go to move #' + move : 'Go to game start'; return ( <li key={mov.
数组的扩展
annangyu7013的博客
07-27 113
1、拓展运算符（...） -- 定义：扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 -- 应用： -- 该运算符主要用于函数调用。 function add(x, y) { return x + y; } var numbers = ...
js 匿名函数_编写高质量箭头函数的5个最佳做法
weixin_39635648的博客
11-24 266
箭头功能值得流行。它的语法简洁明了，使用词法绑定绑定 this，它非常适合作为回调。在本文中，通过了解决学习5个最佳实践，以便我们可以从中学习更多箭头函数的知识，并从它身上获得更多的好处。1. 箭头函数名推断JS 中的箭头函数是匿名(anonymous)的:函数的name属性是''。(number=>number+1).name;//=>''在调试会话或调用堆栈分析期...
JavaScript中Array数组的map()函数的详解
能先森的博客
03-31 8124
前言 开发中，经常会用到js的Array数组的各种迭代函数map()，filter()，some()，every()，forEach()，find() findIndex()，也是在ES6中新增一些遍历函数。同样是不是也是一道面试题，说说ES6新增的一些新特性？？？？ ✍开始正文map()函数 ✍一、对map()函数的定义： map()：通过指定函数处理数组中的每一个元素，并返回一个处理...
深入理解JavaScript箭头函数
热门推荐
倾城一笑stu
12-23 2万+
箭头函数就是个简写形式的函数表达式，并且它拥有词法作用域的this值（即不会新产生自己作用域下的this，arguments,super和new.target等对象）。此外，箭头函数总是匿名的。 语法 基础语法 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression
箭头函数和js里面的map函数用法
qq_36939013的博客
05-30 3934
var a = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryl­lium' ]; //获取每个元素的长度，组成一个数组，方法1 var b = a.map(function(s){return s.length}); //方法2 var c = a.map(s => s.length) ...
理解使用箭头函数
xyc859666356的博客
01-29 525
在这里obj是一个json对象，有属性array，函数sum，第二个红框“箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域”，obj中的箭头函数中this的外围区域就是obj的外围区域，即window，不存在window.array，只有obj.array 参考链接： https://blog.csdn.net/qq_32614411/article/details/89960057 https://blog.csdn.net/qq_32614411/article/detail..
JavaScript（数组、箭头函数、for循环）
weixin_64899102的博客
08-07 887
1
js es6 到 es13 常用代码段，列出50个
02-07
2. 箭头函数 3. 解构赋值 4. 展开运算符 5. 模板字符串 6. 迭代器和生成器 7. 类和继承 8. 块级作用域 9. 对象的扩展运算符 10. Array.from() 和 Array.of() 11. Array.find() 和 Array.findIndex() 12. Array.fill...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值