2023-03-10-JSDay10-数组重来

作者: 远方的路_ | 来源:发表于2023-03-09 21:27 被阅读0次

重来
如果人生可以重来
三行悲诗·重来
【青春玄幻】如果重来一次目录
我知道不能重来，但我假装看不见自己的悲伤
黄粱一梦
没有一份爱需要重来
重来 or 不重来
重来，无法重来
重来就重来

1. 创建数组

1.1 构造函数方式:

var myCars=new Array();
myCars[0]="奥迪";      
myCars[1]="宝马";
myCars[2]="奔驰";

1.2 简洁方式:

var myCars=new Array("沃尔沃","保时捷","奥拓");

注意:空数组的长度 var myCars=new Array(3);如果是数字是数组的长度，如果是非数字那么则是一个一个元素。

1.3 字面量定义方式:常用

var myCars=["凯迪拉克","宝骏","QQ"];
var myCars=[]；空数组

2. 访问数组

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="雪佛兰";

3. 遍历数组

遍历数组:利用循环获取数组中每个元素的值

var arr = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄','张三'];
for (var i = 0; i < arr.length; i++) {
        console.log(arr[i]);
}

4. 数组方法和属性

使用数组对象预定义属性和方法：

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("玛莎拉蒂")   // "玛莎拉蒂" 值的索引值

5. 数组的增删改查

5.1 增

在数组的尾部添加元素

var arr = [1,2,3];
arr[arr.length] = 4;  
console.log(arr);

从数组的头部添加一个元素

   //         0 1 2 3  4
            var arr = [2,3,4,5];
            //         2 2 3 4  5
            arr[4] = arr[3];// 2 3 4 5 5
            arr[3] = arr[2];// 2 3 4 4 5
            arr[2] = arr[1];// 2 3 3 4 5
            arr[1] = arr[0];// 2 2 3 4 5

            // for(var i = arr.length; i > 0; i--){
            //     arr[i] = arr[i-1];
            // }
            arr[0] = 1;
            console.log(arr); // [1, 2, 3, 4, 5]

从数组的中间(某个索引值的位置)添加一个元素

  //         0 1 2 3 4 5
  var arr = [1,2,3,5,6];
// arr[5] = arr[4];//1 2 3 5 6 6
// arr[4] = arr[3];//1 2 3 5 5 6

for(var i = arr.length - 1; i > 2; i--){
    arr[i+1] = arr[i];
}

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

5.2 删

从数组的尾部删除一个元素

var arr = ['鸭架','邓紫棋','关之琳','邱淑贞','张柏芝'];
// 如果数组的长度减一了  那么就会从末尾来删除一个元素
arr.length--;
// arr.length -= 1;
console.log(arr); // ['鸭架','邓紫棋','关之琳','邱淑贞']

从数组的头部删除一个元素

//         0 1 2 3 4 5
var arr = [9,1,2,3,4,5];

// arr[0] = arr[1];
// arr[1] = arr[2];
// arr[2] = arr[3];
// arr[3] = arr[4];
// arr[4] = arr[5];

for(var i = 0; i < arr.length-1; i++){
     arr[i] = arr[i+1];
}

arr.length--;

console.log(arr);

从数组的中间(某个索引值)删除一个元素

//         0 1 2 3 4 5 6
var arr = [1,2,2,3,4,5,6];

// arr[2] = arr[3];
// arr[3] = arr[4];
// arr[4] = arr[5];
// arr[5] = arr[6];
for(var i = 3; i < arr.length; i++){
     arr[i-1] = arr[i];
}

arr.length--;

console.log(arr);

5.3 改

var arr = [1,2,3,4,5,5];
// 下标或者叫索引是唯一的  标识了 数组中的元素
arr[5] = 6;
console.log(arr);

5.4 查

var arr = [0,1,2,3,4,5];
console.log(arr[0]);

6. 案例练习

输出数组中最大的值

var arr2 = [1, 2, 3, 0, 5];
// 最大值
// 默认认为数组的一个元素是当前最大值
var max = arr2[0];
for (var i = 1; i < arr2.length; i++) {
    // max比后面的小
    if (max < arr2[i]) {
        max = arr2[i];
    }
}
console.log(max);

将数组中所有元素和|拼接成一个新的字符串

var arr3 = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄', '张三'];
var sum = '';
for (var i = 0; i < arr3.length-1; i++) {
    sum += arr3[i]+'|';     
}
sum+=arr3[arr3.length-1];
console.log(sum);

反向遍历

var arr4 = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄', '张三'];
for(var i = arr4.length-1;i>=0;i--){
    console.log(arr4[i]);
}

动态按序从尾部插入数组元素

var arr7 = [];
// arr7.length  0
arr7[arr7.length] = '哈哈';
// arr7.length  1
arr7[arr7.length] = '呵呵';
// arr7.length  2
arr7[arr7.length] = '嘿嘿';
console.log(arr7);

去掉数组中元素的值是0的,重新生成一个新数组

var arr5 = [5,0,4,2,0,8,0,9];
var newArr = [];
for (var i = 0; i < arr5.length; i++) {
    if(arr5[i] != 0){
        //插入新数组
        newArr[newArr.length] =arr5[i];
    }
}
console.log(newArr);

7. 数组方法

对原数组有影响的

(1) push 添加
功能：从数组的末尾增加一个或者多个
参数：增加的元素
返回值：返回加入元素后数组的新长度
这个方法对原数组有影响

(2) pop 删除
功能：从数组的末尾删除一个
参数：无
返回值：返回删除的那一个元素
这个方法对原数组有影响

(3) unshift 添加
功能：从数组的头部增加一个或者多个
参数：增加的元素
返回值：返回加入元素后数组的新长度
这个方法对原数组有影响

(4) shift 删除
功能：从数组的头部删除一个
参数：无
返回值：返回删除的那一个元素
这个方法对原数组有影响

(5) splice 增删改一体化 (对原数组有影响)
一个参数的时候是保留了几个元素
arr.splice(2);
console.log(arr);
二个参数的时候
a参数代表的是从第几个开始
b参数代表的是删除几个元素
arr.splice(2,0);
console.log(arr); // [ ]
三个参数的时候
a参数代表的是从哪个位置开始
b参数代表的是删除几个如果是0就不删除
c参数代表的是在a位置前添加的元素
arr.splice(2,0,666);
console.log(arr);

(6) reverse 数组翻转 (对原数组有影响)

var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);

翻转数组
- 在新数组当中翻转

var arr = [1,2,3,4,5,6];
var newArr = [];
for(var i = arr.length - 1; i >= 0; i--){
        newArr[newArr.length] = arr[i];

    }
console.log(newArr);

在原数组上进行翻转---》非常重要

//         0 1 2 3 4 5 6 7
var arr = [1,2,3,4,5,6,7,8];
// arr[i]   arr[arr.length - i - 1]    
// arr[0]  arr[7]                        8      1
// arr[1]  arr[6]                        8      2 
// arr[2] arr[5]                         8      3
// arr[3] arr[4]                         8      4

for(var i = 0; i < arr.length / 2; i++){
     var temp = arr[i];
     arr[i] = arr[arr.length - 1 - i];
     arr[arr.length - i - 1] = temp;
}

console.log(arr);

(7) sort 方法默认是按照ascii码来排序的
自定义排序规则1-升序
自定义排序规则2-降序
自定义排序规则3-字符串长度
对原数组有影响

var arr = [6,5,3,11,8,7,2,4];
arr.sort();
console.log(arr); // [11, 2, 3, 4, 5, 6, 7, 8]

var arr = [6,5,3,11,8,7,2,4];
arr.sort(function(a,b){
     return a - b;
});
console.log(arr); //  [2, 3, 4, 5, 6, 7, 8, 11]

var arr = [6,5,3,11,8,7,2,4];

arr.sort(function(a,b){
     return b - a;
});

console.log(arr); // [11, 8, 7, 6, 5, 4, 3, 2]

var arr = ['ac','a','abc','abcd'];
arr.sort(function(a,b){
     return a.length - b.length;
});
console.log(arr);  //  ['a', 'ac', 'abc', 'abcd']

对原数组没有影响的

(8) join
功能：以指定的字符串为连接符，将数组元素连接成一个字符串
参数：如果不传，默认以逗号为连接符，将元素连接成字符串
如果传的是正常字符串，那么以这个字符串为连接符将元素连接成字符串
如果传的是空串，那么直接将字符串连接成字符串，中间没有任何连接
返回值：返回连接好的字符串
这个方法对原数组没有影响

var arr = [1,2,3,4,5];
var a = arr.join('#');
console.log(arr);  //  [1, 2, 3, 4, 5]
console.log(a); // 1#2#3#4#5

(9)concat
功能：在数组的末尾拼接元素
参数：可以不写，相当于复制一个数组
也可以写一个或者多个值，会把这些值拼接到数组末尾
也可以写数组，会先把数组拆开，把元素拼接到数组末尾
返回值：返回拼接好的新数组
这个方法对原数组没有影响

var arr = [1,2,3];
var a = arr.concat(4);
console.log(a); // [1, 2, 3, 4]
console.log(arr); // [1,2,3]

var a = arr.concat(); // 相当于复制一个数组
console.log(a);

var a = arr.concat(4,5,6,7,8);.//可以写一个或者多个值，会把这些值拼接到数组末尾
console.log(a);

 var a = arr.concat([4,5,6]); // 可以写数组，会先把数组拆开，把元素拼接到数组末尾
console.log(a); 
console.log(arr);

(10) slice
功能：在数组当中截取部分元素形成新数组
参数：和字符串方法slice一致；起始位置和结束位置，不包含结束位置的元素
如果只传一个代表起始位置，一直到结束。两个位置都可以使用负数
返回值：返回截取的元素形成的新数组
这个方法对原数组没有影响

(11) toString
功能：将数组对象转化为字符串
参数：无
返回值：把数组的中括号去掉，其余加引号形成字符串返回

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

(12) valueOf 返回该数组的对象

var arr = [1,2,3,4];
var a = arr.valueOf();
console.log(a); // [1,2,3,4]
console.log(a === arr); //true

（13）fill 判断是否重复的类似逻辑中会使用到

var arr = new Array(5);
console.log(arr); //[empty × 5]
arr.fill(true);
console.log(arr); // [true, true, true, true, true]

ES5新增的数组方法

(14) forEach
item代表的是数组中的元素
index代表的是数组中的下标
arr 代表的是当前正在操作的数组

1.只能是用来遍历

2.一旦开始了遍历就停不下来

3.返回值是undefined 这个undefined对于我们来说没有用

var arr = ['科比','库里','詹姆斯','杜兰特'];
普通方法
// var new_score_arr = [];
// for(var i = 0; i < score_arr.length; i++){
//     if(score_arr[i] >= 80){
//         new_score_arr.push(score_arr[i]);
//     }
// }
// console.log(new_score_arr);

var result = arr.forEach(function(item,index,arr){
      console.log(item,index,arr);
});
console.log(result);

(15) map
map的使用场景是遍历数组中的每一个元素然后对元素进行操作通过return 放到一个新的数组中
map的返回值就是return后面的值存到了这个数组中

var arr = [1,2,3,4,5];
var new_arr = arr.map(function(item,index,arr){
        return item * item;
});
console.log(new_arr); // [1, 4, 9, 16, 25]

(16) filter

1.可以循环遍历数组中的每一项

2.可以对循环遍历到的数据进行判断

3.当条件成立时,使用了return true后会将满足条件的那一项存到一个新的数组当中

var score_arr = [100,90,80,70,60,50];
var new_score_arr = score_arr.filter(function(item,index,arr){
     return item >= 80;
});
console.log(new_score_arr); //  [100,90,80]

(17) some
return后面的值如果有一个元素匹配上了那么则返回值true 并且后续不再执行
return后面的值如果一个都没有匹配上则返回false
应用场景：判断注册的时候会不会有用户名字重复

var name_arr = ['虎皮猫','下硅谷','倔强的小红军1','阿李'];

原始操作
// for(var i = 0; i < name_arr.length; i++){
//     if(name_arr[i] == '倔强的小红军'){
//         console.log('用户名字已经注册');
//         break;
//     }
// }

var flag = name_arr.some(function(item,index,arr){
     return item == "倔强的小红军";
});
console.log(flag);

(18) every
强调的是一个整体的结果如果所有的元素都满足某个条件
则返回true 只要是有一个不满足则返回false

var arr = [59,60,70,80,90,100];
原始方法
// for(var i = 0; i < arr.length; i++){
//     if(arr[i] < 60){
//         console.log('不合格');
//     }
// }

var result = arr.every(function(item,index,arr){
     return item >= 60;
});
console.log(result);

(19) reduce
prev: 上一次的值/初始值
如果给了初始值则prev的值就是初始值
如果没有给初始值那么prev的值就是数组中的第一个值
item：数组中的元素
prev：第一次的值要么是初始值要么是数组中的第一个元素取决于你给没给初始值
return后面的值会赋值给prev


var arr = [1,2,3,4,5];
var result = arr.reduce(function(prev,item){
      return prev + item;
},0);
console.log(result); // 15

var result = arr.reduce(function(prev,item,index,arr){
      return prev * item;
});
console.log(result); // 120

8. 冒泡排序

// 0趟    7次    8        53167248
// 1趟    6次    7
// 2趟    5次    6
// 3趟    4次    5
// 4趟    3次    4
// 5趟    2次    3
// 6趟    1次    2
var arr = [6,5,3,1,8,7,2,4];
for(var i = 0; i < arr.length - 1; i++){
        // 找到了一个最大值
        for(var j = 0; j < arr.length-1 - i; j++){
        if(arr[j] > arr[j+1]){
            var temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
}
console.log(arr);

9. 函数类型

函数声明定义函数

function f1(){
     console.log(1111);
}
f1();

函数表达式定义函数

var f1 = function(){
     console.log(111);
}
f1();

10. IIFE

IIFE 匿名函数自调用
最常用的匿名函数自调用的方式

IIFE的特点:

匿名函数自调用是在定义的同时执行函数

匿名函数自调用只能执行一次
如果需要一个函数可以执行多次，这个函数必须是有名函数
如果函数没有名字要想执行必须是自调用，但是只能执行一次

匿名函数自调用，函数整体不会发生预解析，但是函数内部执行代码是要去预解析

IIFE的作用：
（1）避免命名污染
（2）隐藏内部代码，暴露接口
（3）加载一次---因为没有名字可以调用

(function (){
      console.log(111);
})();

(function(name){
       console.log(111 + name);
})("马志刚"); // 参数传递

(function(){
       console.log(userName); // undefined
       var userName = 'zs';  // 函数内部预解析
})();


 // header
(function(){
     var name = 'zs';
})();
// nav
(function(){
      var name = 'ls';
})();

重来
如果能重来………… 如果能重来………… 如果能重来………… 如果能重来………… 如果能重来………… 如果能重来……...
如果人生可以重来
如果人生可以重来，是从什么时候开始重来？是否带有曾经的记忆重来？如果重来的时间点不对，已经无可挽回，重来和不重来...
三行悲诗·重来
时间不让重来你也不想重来我也不敢重来
【青春玄幻】如果重来一次目录
如果重来一次(1) 如果重来一次(2) 如果重来一次(3) 如果重来一次(4) 如果重来一次(5) 如果重来一次(...
我知道不能重来，但我假装看不见自己的悲伤
我安静的在想。下棋，输了，可以重来。游戏，卡了，可以重来。工作，没了，可以重来。感情，败了，也可以重来。 ...
黄粱一梦
人生尽皆黄粱梦到头都是一场空再重来，再重来梦中不知愁，再重来，再重来……
没有一份爱需要重来
如果爱可以重来，我会…… 如果爱可以重来，我会…… 如果爱可以重来，我会…… 可是爱真的会重来吗？我们又真的需要...
重来 or 不重来
闲暇时光发呆，困意有却难以入眠，来一波长篇大论刷屏，文字写给自己看。我最大的兴趣爱好是自得其乐、笔耕不辍地...
重来，无法重来
你看车窗外倒退的风景，但是这一刻的画面就将成为今天回不去的上一秒，就算明天也有这一刻，那也只是明天。 ...
重来就重来
其实重来并不可怕。今天只能这么安慰自己。做了一天的H5，要推倒重来，是一件很沮丧的事。尤其是我觉得那个H5特别漂...

2023-03-10-JSDay10-数组重来

1. 创建数组

2. 访问数组

3. 遍历数组

4. 数组方法和属性

5. 数组的增删改查

5.1 增

5.2 删

5.3 改

5.4 查

6. 案例练习

7. 数组方法

8. 冒泡排序

9. 函数类型

函数声明定义函数

函数表达式定义函数

10. IIFE

IIFE 匿名函数自调用

相关文章

重来

如果人生可以重来

三行悲诗·重来

【青春玄幻】如果重来一次目录

我知道不能重来，但我假装看不见自己的悲伤

黄粱一梦

没有一份爱需要重来

重来 or 不重来

重来，无法重来

重来就重来

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读