前端JavaScript必备知识点二

已于 2022-09-19 20:17:26 修改
阅读量225 收藏
点赞数
分类专栏： 前端JavaScript必备知识点 文章标签： javascript 前端 开发语言 html
于 2022-09-01 18:41:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52704461/article/details/126636211
版权

1：类数组与数组的区别与转换

arguments是一个类数组对象，包含着传入函数中的所有参数。arguments主要用途是保存函数参数，但是这个对象还有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。  

 js中的数组是可以存放任意数据类型值的集合，数组的元素可以是任意数据类型，数组的长度可以动态调整。

类数组与数组的区别：

  1. 都可用下标访问每个元素，都有length属性。（相同点）

  2. 类数组不具有数组所具有的方法，数组遍历可以用 for in和for循环,类数组只能用for循环遍历。（不同点）

  3. 类数组是一个普通对象，而真实的数组是Array类型。（不同点）

在JavaScript中常见的类数组有：内置对象arguments、DOM方法返回的结果（如：document.querySelectorAll('li')，document.getElementsByTagName('div')）

 类数组转换数组

 1、Array.prototype.slice.call(arrayLike)的结果是将arrayLike对象转换成Array对象，Array.prototype.slice表示数组的原型中的slice方法。slice方法返回的是一个Array类型的对象。

   function fun() {
            return Array.prototype.slice.call(arguments)

        }
        var a = fun(1, 2, 3)
        console.log(a);//[1, 2, 3]

2、Array.from(arrayLike)（ES6）

 var arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'b',
            length: 3
        }
        var arr = Array.from(arrayLike)
        console.log(arr);//['a', 'b', 'b']
 var list = '前端小白'
 console.log(Array.from(list));//['前', '端', '小', '白']

3、使用JavaScript的扩展运算符，三个点"..."，作用是将数组转换为一个用逗号分隔的参数列表，利用拓展运算符可以轻松合并两个数组；同时也可以实现类数组转换为数组。

         var list = '前端小白'
        console.log([...list]); //['前', '端', '小', '白']

2：数组的常见API

toString() 在默认情况下都会以逗号分隔字符串的形式返回数组项

var arr = [1,5,2,8,10,{a:1}];
console.log(arr);//[ 1, 5, 2, 8, 10, { a: 1 } ]
console.log(arr.toString());//”1,5,2,8,10,[object Object]”

join() 使用指定的字符串用来分隔数组字符串

var arr = [1,5,2,8,10,{a:1}];
console.log(arr);//[ 1, 5, 2, 8, 10, { a: 1 } ]
console.log(arr.join(""));//”152810[object Object]”
console.log(arr.join("-"));//”1-5-2-8-10-[object Object]”

 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// push()  添加元素到末尾  参数是要添加的元素 返回值是修改之后数组的长度【改变原数组】
fruits.push("Kiwi")
console.log(fruits);
//fruits 结果输出：Banana,Orange,Apple,Mango,Kiwi

 pop() 方法用于删除数组的最后一个元素并返回删除的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
console.log(fruits);
//fruits 结果输出：Banana,Orange,Apple

 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
console.log(fruits);
//fruits结果输出:Orange,Apple,Mango

 unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits)
//fruits 将输出：Lemon,Pineapple,Banana,Orange,Apple,Mango

 reverse() 方法用于颠倒数组中元素的顺序。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits)
//fruits结果输出：Mango,Apple,Orange,Banana

 sort()：对数组元素进行排序，返回排序后的新数组(改变原数组)

 // 如果调用该方法时没有使用参数，将按字母顺序（Ascall编码）对数组中的元素进行排序，说得更精确点，
        // 是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
        // 如果要想进行升序或是降序排序的话，要提供比较函数。
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        fruits.sort();
        console.log(fruits)
        //fruits 输出结果：Apple,Banana,Mango,Orange
        // 先比较第一位的ASCII码值，如果第一位的ASCII码值相同，则开始比较第二位的ASCII码值，以此类推
        // ASCII码表
        // 当 a>b 时，
        // a - b > 0  ，排序结果 ===> b，a （升序）
        // b - a < 0  ，排序结果 ===> a，b （降序）

        // 当 b>a 时，
        // a - b < 0  ，排序结果 ===> a，b （升序）
        // b - a > 0  ，排序结果 ===> b，a （降序）

        // 当 a=b 时，
        // a - b = b - a =0 , 排序结果 ===> 保持不变
        var points = [40, 100, 1, 5, 25, 10];
        points.sort(function (a, b) {
            return a - b
        });
        //points输出结果：1,5,10,25,40,100
        var points = [40, 100, 1, 5, 25, 10];
        points.sort(function (a, b) {
            return b - a
        });
        //fruits输出结果：100,40,25,10,5,1

 concat() 方法用于连接两个或多个数组。

var hege = ["Cecilie", "Lone"]; 
var stale = ["Emil", "Tobias", "Linus"]; 
var kai = ["Robin"]; 
var children = hege.concat(stale,kai);
//children 输出结果：Cecilie,Lone,Emil,Tobias,Linus,Robin

slice(start, end)：获取子数组，包含原数组索引start的值到索引end的值，不包含end，返回获取的子数组(不改变原数组)

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 
var citrus = fruits.slice(1,3);
//citrus 结果输出:Orange,Lemon

 splice(index, count, value1, value2....)：从索引位index处删除count个元素，插入value1, value2等元素，返回被删除的元素组成的新数组(改变原数组)

数组中添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
//从数组索引位置 2 开始，不删除元素，添加两个新的元素"Lemon","Kiwi"
fruits.splice(2,0,"Lemon","Kiwi");
//fruits输出结果：Banana,Orange,Lemon,Kiwi,Apple,Mango

 移除数组的第三个元素，并在数组第三个位置添加新元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

//fruits输出结果：Banana,Orange,Lemon,Kiwi,Mango

从第三个位置开始删除数组后的两个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);

//fruits输出结果：Banana,Orange

 indexOf() 从索引为0开始，检查数组中是否包含有value，有则返回匹配到的第一个索引，没有则返回-1(不改变原数组)

//该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。
如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
var a = fruits.indexOf("Apple");

//a结果输出：2
//以上输出结果意味着 "Apple" 元素位于数组中的第 3 个位置。

 lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。 

如果在数组中没找到指定元素则返回 -1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

//a输出结果：2
//以上实例输出结果意味着 "Apple" 位于数组中的第 2 个位置.

 forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

var numbers = [4, 9, 16, 25];

numbers.forEach(function (number, index) {
  console.log(index + ' -- ' + number);
})
// 0 -- 4
// 1 -- 9
// 2 -- 16
// 3 -- 25

 every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

  • 如果所有元素都满足条件，则返回 true。

var ages = [32, 33, 16, 40];

var result = ages.every(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:false

 some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

  • 如果没有满足条件的元素，则返回false。

var ages = [32, 33, 16, 40];

var result = ages.some(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:true

 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

var ages = [32, 33, 16, 40];

var result = ages.filter(function (age) {
  return age >= 18
})
console.log(result);//输出结果为:[ 32, 33, 40 ]

 map() 方法按照原始数组元素顺序依次处理元素。

var numbers = [4, 9, 16, 25];

var result = numbers.map(function (number) {
  return Math.sqrt(number)
})
console.log(result);//输出结果为:[ 2, 3, 4, 5 ]

3：bind、call、apply的区别

调用函数的方式不仅限于()执行，还有其他几种方式

  • 函数名(实参列表);

  • 函数名.call(执行环境对象,实参列表);

  • 函数名.apply(执行环境对象,实参列表数组);

  • 函数名.bind(执行环境对象)(实参列表);

1.call(执行环境对象,实参列表);

 调用call方法，第一个参数就是要把b添加到哪个环境中，简单来说，this就会指向那个对象。

var obj = {
  name: '好学生',
  sayName: function () {
    console.log(this.name);
  }
}
var b = obj.sayName;
b.call(obj); // 好学生

在使用call调用的时候，还可以传递多个参数 

var obj = {
  name: '好学生',
  sayName: function (a,b) {
    console.log(this.name);
    console.log(a,b); // 1,2
  }
}
var b = obj.sayName;
b.call(obj,1,2); // 好学生

2.apply(执行环境对象,实参列表数组);

 apply方法和call方法有些相似，它也可以改变this的指向

var obj = {
  name: '好学生',
  sayName: function () {
    console.log(this.name);
  }
}
var b = obj.sayName;
b.apply(obj); // 好学生

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var obj = {
  name: '好学生',
  sayName: function (a,b) {
    console.log(this.name);
    console.log(a,b); // 100,200
  }
}
var b = obj.sayName;
b.apply(obj,[100,200]); // 好学生

注意：如果call和apply的第一个参数是null，那么this在node环境下指向的是global对象，在HTML中指向的是window对象

var obj = {
  name: '好学生',
  sayName: function () {
    console.log(this); // global
  }
}
var b = obj.sayName;
b.apply(null); // 好学生

3.bind(执行环境对象)(实参列表);

var obj = {
  name: '好学生',
  sayName: function () {
    console.log(this.name);
  }
}
var b = obj.sayName;
b.bind(obj); // 代码没有被打印,这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。
// 新建一个变量c来接收bind修改后的函数
var c = b.bind(obj);
console.log(c); // 发现c是一个[Function: bound sayName]函数
// 执行c
c(); // 好学生

 同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var obj = {
  name: '好学生',
  sayName: function (a,b,c) {
    console.log(this.name);
    console.log(a,b,c); // 1,2,3
  }
}
var b = obj.sayName;
b.bind(obj); // 代码没有被打印,这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。
// 新建一个变量c来接收bind修改后的函数
var c = b.bind(obj, 1, 2);
console.log(c); // 发现c是一个[Function: bound sayName]函数
// 执行c
c(3); // 好学生

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。

LL1018。
关注
专栏目录
前端知识点梳理
日常笔记/总结/系列知识梳理
08-15 2212
Vue.js 的核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。Vue.js 的设计从底向上逐步增量开发，其核心库只关注视图层，不仅易于上手，而且便于与第三方库或既有项目整合。
JavaScript 数组
baipenggui_bo
11-04 443
如何定义数组？遍历、访问数组；向数组添加元素；判断是否是数组；向数组追加元素；删除数组；合并数组；在数组的指定位置删除、添加元素；把数组转换为字符串；将新元素添加到数组的开头；按字母顺序对数组进行升序排序；传入比较函数对数值进行排序；取数组中最大的数；按数字属性给对象进行排序；Array.forEach()；Array.map()；Array.filter()；Array.every()；Array.some()；Array.reduce()；Array.indexOf()；Array.find()；
javascript Array(数组)
u010688943的博客
02-28 220
数组 ：查询、截取、替换 数组属性和方法：属性方法 1.concat() 连接两个或更多的数组，并返回结果。 2.every() 检测数组元素的每个元素是否都符合条件。 3.filter() 检测数组元素，并返回符合条件所有元素的数组。 4.indexOf() 搜索数组中的元素，并返回它所在的位置。 5.join() 把数组的所有元素放入一个字符串。 6.lastIndexOf() 回
splice()方法深读
codewhy的博客
10-09 1328
文章目录语法参数返回值示例 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。 语法 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 参数 start​ 指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果
Js 中splice()方式的使用,在AngularJs中用户过滤掉有重复选项的list
你好邱林和的专栏
04-18 4458
参考w3c的解释:          JavaScript splice() 方法  JavaScript Array 对象 实例 数组中添加新元素： var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); fruits 输出结
JavaScript学习：JavaScript数组
weixin_44753854的博客
08-05 402
一、JS数组两种表示方法 1、var cars = [“Saab”, “Volvo”, “BMW”]; 2、var cars = new Array(“Saab”, “Volvo”, “BMW”); 使用JavaScript关键词new。 出于简洁、可读性和执行速度的考虑，请使用第一种方法（数组文本方法）。 二、访问数组元素 索引号（下标号）从0开始 访问：var name = cars[0]; ...
前端JavaScript必备知识点四
m0_52704461的博客
09-13 192
前端JavaScript必备知识点
前端JavaScript必备知识点三
m0_52704461的博客
09-01 185
前端JavaScript必备知识点
前端程序员必备：JavaScript与ES的25个重要知识点.pdf
09-24
JavaScript与ES（ECMAScript）是前端开发中不可或缺的核心部分，尤其对于前端程序员来说，深入理解和掌握这些知识点至关重要。以下是一些关于JavaScript与ES的重要知识点的详细解释： 1. **严格模式**： - `use ...
前端知识点总结前端知识点总结
08-09
在前端开发中，掌握各种知识点是至关重要的。本文将对前端开发中的关键概念进行深入的总结，主要包括HTML、CSS、JavaScript、Vue.js组件通信以及一些实用技巧。 首先，基础的前端知识包括HTML、CSS和JavaScript。...
javascript前端知识汇总
06-24
以下是对标题"javascript前端知识汇总"和描述中所述知识点的详细说明： 1. **基础语法**：JavaScript的基础包括变量、数据类型（如字符串、数字、布尔、null、undefined、对象和数组）、操作符（算术、比较、逻辑、...
前端知识点梳理 web前端
05-09
以下是对"前端知识点梳理 web前端"这一主题的详细解析： 一、HTML（超文本标记语言） HTML是构成网页的基础，用于定义页面结构。它由一系列标签组成，如`<head>`、`<body>`、`<h1>`、`<p>`、`<a>`等，这些标签描述...
【JavaScript】-- 数组介绍（超详细）
qq_48802092的博客
08-14 806
JS中的数组就是一个有序列表的集合，用于存放多个值。
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2469
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 549
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 294
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 355
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 589
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 329
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
前端面试必备：JavaScript知识点深度解析
"前端面试知识点锦集，重点讨论JavaScript相关问题，包括Ajax的理解、延迟对象deferred的概念及其功能，以及跨域的定义和实现方法。" JavaScript是前端开发中的核心语言，对于面试者来说，掌握其核心概念和技术是至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值