JavaScript知识点总结（五）

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量369 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51981718/article/details/121371377
版权

数组

基本类型的变量只能存一个值，数组可以存一组值。

使用数组的最大好处就是可以对数组里面的数据进行批量操作。

基本概念

  • 数组，一组值，数组可以存储多个值（每一项都可以保存任何类型的数据），数组的最大特点就是__有序__

  • 下标（索引，键，key），为了能够拿到对应位置的数据所给的标识。

    索引都是从0开始。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLvFdB9q-1637113778468)(image-20211115092815819.png)]

  • 元素：下标和值的组合叫元素。

  • 数组只有一个属性，就是length

  • 类和对象的概念：

    JS中数组是对象类型，其他语言当中数组是基本数据类型。

    面向对象语言中都有类和对象的概念。ES中没有类的概念。

    • 类：具有相同特征的事物的总称。
      • 每个类里面的东西都有一些共同的特征，这些特征我们叫属性。（空调有牌子、功率）
      • 每个类里面都有一些共有的行为，这些行为我们叫方法。空调-》制冷。
    • 对象：是类的具体化。
    • 类和对象的关系：根据类（模板）创造对象（根据模板创造出来的实体），创造出来的对象里面同样也有属性和方法。

数组的创建

  1. 使用Array来创建。

    <script>
    var arr = new Array();
    console.log(typeof arr);
</script>

    new是操作符，表示调用后面的内容，创建一个对象。

    new后面是Array（可以暂时将Array看成是一个类）,new Array我要创建一个对象，这个对象是数组，我要创建一个数组对象。

    在Array中传递数组中应该包含的项。

    var colors = new Array('red','blue','green');
console.log(colors);

    数组中每个元素的值可以是表达式。

    var c = 'green';
var colors = new Array('red' + 1, c);
console.log(colors);

    如果Array()中只有一个元素并且是数值，将会创建有数值个数的元素的数组。如果只有一个其他类型的值那么只会创建只有一个元素的数组。

    var arr = new Array(3);
console.log(arr);

var arr1 = new Array('a');
console.log(arr1);

    可以省略new操作符。

    var arr = Array('red','green','blue');
console.log(arr);

  2. 使用数组字面量方法

    数组的字面量方式声明数组，一对方括号，里面包含数组中的每一项，每一项之间使用逗号进行分隔。

    var arr = ['red','green','blue'];
console.log(arr);
var arr1 = [3];
console.log(arr1);

数组元素的个数

数组中的元素的个数始终保存在数组的length属性中。

var arr = ['red','green','blue'];
console.log(arr.length);

数组中length属性的值始终大于等于0。

数组的最后一项的索引始终是length-1

var arr = ['red','green','blue','pink'];
console.log(arr.length);

数组的基本操作

查看元素的值

数组[下标]这种方式来访问对应下标的值，使用数组首先就是要找下标。

读取时超过了最大的下标，那么值为undefined

var arr = ['red','green','blue','pink','black','white'];
console.log(arr[100]);

中括号里面可以放置的是任何返回数值或数值型字符串的表达式。


var arr = ['red','green','blue','pink','black','white']
console.log(arr['0']);//red
console.log(arr[25-25]);//red
console.log(arr[arr.length]);//undefined

获得数组中最后一个元素的值。

arr[arr.length-1]

可以通过for循环配合length属性将所有的值拿出来，这种操作我们称为遍历。

var arr = ['red','green','blue','pink','black','white','yellow'];
    /* console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]); */
    for (var i = 0; i < arr.length;i++){
        /* console.log(i); */
        console.log(arr[i]);
    }

怎么倒叙输出呢？

<script>
    var members = ['张三', '李四', '王五', '赵六', '田七'];

    for (var i = members.length - 1; i >= 0; i--) {
        /* console.log(i); */
        console.log('来发苹果'+ members[i]);
    }
</script>

增加元素

在不同的位置增加

  • 在末尾增加

    直接使用下标添加

    var members = ['张三', '李四', '王五', '赵六', '田七'];
members[5] = '华华的baby';
console.log(members);

    当设置的时候超过了最大的下标，那么数组最大下标为设置后的下标，数组长度最大的下标+1

    var members = ['张三', '李四', '王五', '赵六', '田七'];
members[5] = '华华的baby';
members[60] = '熊键';
console.log(members[60]);
console.log(members.length);

    使用length属性始终向末尾添加元素

    ​ arr[arr.length] = xxx 这就是给数组的末尾添加元素，增加数组长度。

    ​ arr[arr.length-1] = xxx 这就是给数组的末尾元素重新赋值。

    最后一个下标是length-1，那length就是比当前的最大下标多一。

    var members = ['张三', '李四', '王五', '赵六', '田七'];
members[members.length] = '小华华';
members[members.length] = '小熊';
console.log(members);

  • 在开始的地方加

    <script>
    var colors = ['red','blue','green'];
    /* colors[3] = colors[2]//[red,blue,green,green]
    colors[2] = colors[1]//[red,blue,blue,green]
    colors[1] = colors[0]//[red,red,blue,green]
    colors[0] = 'pink';//[pink,red,blue,green] */

    /*
    i=3 3>0 true
        colors[3] = colors[2]//colors[3] = green
    i=2 2>0 true
        colors[2] = color[1]//colors[2] = blue
    i=1 1>0 true
        colors[1] = colors[0]//colors[1] = red
    i=0 0>0 false
    */
    for (var i = colors.length;i>0;i--){
        // console.log(i,i-1);
        colors[i] = colors[i-1];
    }
    colors[0] = 'pink';

    console.log(colors);
</script>

  • 在中间的位置添加

    <script>
    var colors = ['red', 'blue', 'green'];
    //var colors = ['red','blue','pink','green'];
    /*
    i=3 3>0 true
        i=2 false
        color[3] = colors[2]//red,blue,green,green
    i=2 2>0 true
        i=2 true
        break;
    */
    for (var i = colors.length; i > 0; i--) {
        //挪到指定下标的时候就不挪了
        if (i==2){
            break;
        }
        colors[i] = colors[i - 1];
    }
    colors[2] = 'pink';
    console.log(colors);
</script>

    另外一种方法：

    /*
    i=3 3>=2 true
        colors[3] = colors[2]//colors[3] = green//red,blue,green,green;
    */
for (var i = colors.length;i>2 ;i--){
    colors[i] = colors[i-1];
}
colors[2] = 'dark';
console.log(colors);

修改元素

数组[下标]='值'

删除元素

  • 删除末尾元素

    <script>
    var colors = ['red', 'blue', 'green'];
    // colors.length=2;
    colors.length--;
    colors.length--;
    console.log(colors);
</script>

  • 删除开头的

    [red,blue,green]

    var colors = ['red', 'blue', 'green'];
    /*
    i=1 1<3 true
        colors[0] = colors[1]//[blue,blue,green]
    i=2 2<3 true
        colors[1] = colors[2]//[blue,green,green]
    */
    for (var i = 1; i < colors.length; i++) {
        colors[i - 1] = colors[i];
    }
    colors.length--;//[blue,green]
    console.log(colors);

  • 删除指定位置的元素

    删除下标为1的元素。

    <script>
    var colors = ['red','blue','green','yellow'];
    /*
    i=2 2<4 true
        colors[1] = colors[2]//[red,green,green,yellow]
    i=3 3<4 true
        colors[2] = colors[3]//[red,green,yellow,yellow]
    i=4 4<4 false
    */
    for (var i = 2; i < colors.length;i++){
        colors[i-1] = colors[i];
    }
    colors.length--;
    console.log(colors);
</script>

多维数组

数组的每个元素的值都可以是任意类型的数据，所以数据也可以是数组。

维：维度。

几层中括号。

<script>
    var arr = [
        1,2,[
            3,4
        ]
    ];
</script>

使用二维数组就是一层一层的往里面找。

数组一般来说最多到三层，一维二维用的比较多，最多三维。但是不管多少维都是一层一层往里面找。

练习题

  1. 数组求和。

    [1,2,3,4,5,6,7,8,9,10]求和。

    <script>
    var arr = [1,2,3,4,5,6,7,8,9,10];
    var sum = 0;//用来存放和的变量。
    for (var i = 0 ; i < arr.length ; i++){
        sum += arr[i];
    }
    console.log(sum);
</script>

  2. 求数组中的最大值和最小值

    [1,2,3,4,5,6,7,100,2,1,2,11,-4,87847,8848]

        var arr = [2, -4, 87847, 8848];
    //2
    var max = arr[0];
    /*
    i=0 0<4 true
        2>2 false
    i=1 1<4 true
        -4>2 false
    i=2 2<4 true
        87847>2 true
        max = 87847
    i=3 3<4 true
        8848>87847 false
    i=4 4<4 false
    */
    //获得最大值
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }

    var min = arr[0];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < min) {
            min = arr[i];
        }
    }
    console.log(min);
    console.log(max);

  3. 反转数组

    [1,2,3,4,5,6,7,100,2,1,2,11,-4,87847,8848]

    • 方法一：用新数组作为容器

      var arr = ['a','b','c','d'];//d c b a
var newArr = [];//用来放置倒序之后的数组
//第一种方法：用新数组作为容器的，倒序输出。
for(var i = arr.length-1 ; i>=0;i-- ){  //这里比较重要，而且一定i>=0，不然少一位。
// console.log(arr[i]);
newArr[newArr.length] = arr[i];
}
console.log(newArr);

    • 方法二：用自身作为容器

      ['a','b','c','d','e','f']
arr[0]   arr[5]
arr[1]   arr[4]
arr[2]   arr[3]

      <script>
    var arr = ['a','b','c','d'];//
    //先找下标。
    /*
    i=0 0<2 true
        0   3
    i=1 1<2 true
        1   2
    */
    for (var i =0 ; i < arr.length/2 ; i++){
        // 1.找到要交换的下标
        console.log(i,arr.length-1-i);
        // 2. 交换他们
        var tmp = arr[i];
        arr[i] = arr[arr.length-1-i];
        arr[arr.length-1-i] = tmp;
    }
    console.log(arr);

</script>

  4. 数组合并

    • 方法一：新数组中合并两个数组

      <script>
    //方法一：新数组中合并两个数组
    var arr1=[1,2];
    var arr2=[5,6];
    //创建一个空数组，作为容器。
    var newArr = [];
    //遍历第一个数组，将第一个数组中的每个值追加到新容器中。
    /*
    i=0 0<2 true
        newArr[0] = arr1[0]//[1]
    i=1 1<2 true
        newArr[1] = arr1[1]//[1,2]
    i=2 2<2 false
    */
    for (var i = 0 ;i < arr1.length; i++){
        newArr[newArr.length] = arr1[i];
    }
    /*
    j=0 0<2 true
        newArr[2] = arr2[0]//[1,2,5]
    j=1 1<2 true
        newArr[3] = arr2[1]//[1,2,5,6]
    j=2 2<2 false
    */
    for (var j = 0 ; j < arr2.length ; j++){
        newArr[newArr.length] = arr2[j];
    }
    console.log(newArr);
</script>

    • 方法二：原数组中合并另外一个数组

      <script>

    var arr1=[1,2];//arr1作为容器
    var arr2=[5,6];
    /*
    要将arr2里面的内容放到arr1里面去，遍历的是arr2，放的是arr1
    i=0 0<2 true
        arr1[2] = arr2[0] //[1,2,5]
    i=1 1<2 true
        arr1[3] = arr2[1] //[1,2,5,6]
    i=2 2<2 false
    */
    for (var i = 0 ; i < arr2.length ; i++){
        arr1[arr1.length] = arr2[i];
    }
    console.log(arr1);
</script>

    1. 数组去重并排序

      // 数组去重并排序
    function arrSortUnrepeat(arr, newArr) {
      // 去重
      for (var i = 0; i < arr.length; i++) {
        var flag = true;
        for (var j = 0; j < newArr.length; j++) {
          if (newArr[j] == arr[i]) {
            flag = false;
            break;
          }
        }
        if (flag) {
          newArr[newArr.length] = arr[i];
        }
      }
      // console.log(newArr);
      // 排序
      for (var i = 0; i < newArr.length - 1; i++) {
        for (var j = 0; j < newArr.length - 1 - i; j++) {
          var temp;
          if (newArr[j] > newArr[j + 1]) {
            temp = newArr[j];
            newArr[j] = newArr[j + 1];
            newArr[j + 1] = temp;
          }
        }
      }
      return newArr;
    }
    var arr1 = [9, 5, 8, 9, 1, 2, 5, 9, 7, 74, 1];
    var arr2 = [];
    var res = arrSortUnrepeat(arr1, arr2);
    console.log(res);
八百比晴明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《JavaScript高级程序设计》总结——第5章：引用类型
是喵喵酱呀！
02-14 283
一、Object类型 二、Array类型 创建数组两种方式 var colors = new Array(); //new可省略，创建length为20的数组,&quot;20&quot;不写就是创建个空数组 var colors = new Array(“pink”,“red”); var colors = new Array(); var colors = Array(); var numbers = [...
JavaScript 重点知识总结
ailsa_csdn的博客
03-28 4744
JS重点、易错点再次总结
js笔记4格式化日期时分秒与数组对象
qq_59294119的博客
04-04 543
一 格式化日期时分秒 (Date)： 封装一个函数，返回时分秒 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia.
JavaScript基础笔记（三）
叼根棒棒糖打天下的博客
12-05 207
介绍了JavaScript的数组以及函数的基本内容。适合学习JavaScript基础阶段学习。
nodejs colors模块
kaitlyn2011的专栏
10-27 2388
一、安装 npm install colors 二、 用法一 var colors = require('colors'); console.log('hello'.green); // outputs green text console.log('i like cake and pies'.underline.red) // outputs red underlined
Javascript知识点总结
赵宪福的博客
09-24 7770
JavaScript知识点整理 取消链接的默认行为： 得到从一个html页面到另外一个html界面传递过来的参数 方式一：var Ohref=window.location.href; alert(Ohref) //http://localhost:8080/route_list.html?cid=1 var arrhref=Ohref.split("?cid="); var cid= ar...
Javascript知识点总结（一）
鹏鹏的专栏
11-15 696
额外热
JavaScript知识点总结（四）
溪斜山遮的博客
01-05 5722
jQuery常用选择器和过滤选择器 使用方法 下载Jquery文件库，保存在站点js文件夹中，使用script标签引入，放在head标签内 window.οnlοad=function()可简化为$(function) window.οnlοad=function(){ … 页面加载事件 } $(function){ …页面加载事件 } 下面的是上面的简化方式 jQuery的选择器 基本选择器 $("#id") ：id选择器 $("div") ：div选择器 $("
JavaScript知识点总结（三）
溪斜山遮的博客
01-04 7996
文档对象模型 document对象常用属性 document.bgColor：页面背景颜色 document.fgColor：文本的前景颜色 document.title：页面标题 <body> <h1>对象常用属性</h1> <script type="text/javascript"> document.title="对象常用属性"; document.bgColor="blue"; document.fgColor="whit
Web开发之JavaScript知识点总结
nuist_NJUPT的博客
08-16 803
JavaScript(JS)是web上的脚本语言，JavaScrip和Java的关系就好比雷峰塔和雷锋之间的关系，哈哈。JS主要用于控制页面的特效展示，JS可以对HTML进行动态控制，可以对表单进行校验，也可以控制CSS样式。JS是脚本语言，不需要编译，浏览器直接解析就可以，JS必须嵌入到其它语言中，无法独立执行，JS的执行过程是从上到下依次执行的。...
javascript知识点总结（1）
07-23
本文包括JavaScript的部分基础知识的总结
JavaScript入门系列之知识点总结
10-22
JavaScript 是属于网络的脚本语言。本文是小编日常收集整理些javascript入门基础知识，对js新手朋友非常有帮助，对js入门知识点感兴趣的朋友一起学习吧
JavaScript知识点总结之如何提高性能
10-22
JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下JavaScript性能优化方面的知识点，绝对是干货，需要的朋友快来一起学习吧
javaScript知识点总结(必看篇)
10-22
下面小编就为大家带来一篇javaScript知识点总结(必看篇)。小编觉得挺不错的，现在就分享 给大家，也给的大家做个参考。一起跟随小编过来看看吧
JavaScript知识点总结文档
01-06
JavaScript知识点总结文档,javaScript需要掌握的基本只是内容汇总，一起学习，一起进步
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 359
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 520
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1322
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 551
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
JavaScript 函数作用域的相关知识点有哪些？
09-12
JavaScript 中的函数作用域包括以下内容： 1. 全局作用域：在 JavaScript 代码的最外层定义的变量和函数属于全局作用域。 2. 函数作用域：在函数内部定义的变量和函数属于函数作用域，并不能在函数外部访问。 3. 块级作用域：在 ES6 中，使用 let 和 const 关键字定义的变量具有块级作用域。这意味着它们的作用范围仅限于所在代码块。 4. 作用域链：JavaScript 通过作用域链来实现词法作用域，即内部作用域可以访问外部作用域的变量和函数，但是外部作用域不能访问内部作用域的变量。 5. 闭包：闭包是指有权访问另一个函数作用域中的变量的函数。闭包可以帮助我们实现一些有趣的功能，例如封装变量和函数。 这些是 JavaScript 中函数作用域相关的一些基本概念。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值