08_JavaScript数据操作方法_数组

目录

一、创建一个数组

1.1 数组如何创建

字面量创建

构造函数创建

1.2 数组的长度

数组名.length 

1.3 数组的索引

1.4 数组如何循环遍历

for 循环遍历

for in

for of

二、数组的常用方法 （重点 面试）

push 方法

unshift 方法

pop

shift

splice

reverse

sort

concat

join

slice

练习

作业

---

 

一、创建一个数组

• [] 装起来的内容构成了一个数组 比如[2,8,'hello',true] 中间逗号分割

1.1 数组如何创建

分成两种方式

• 字面量创建

 // 字面量创建 
        var arr = []; //创建了一个空数组
        var arr1 = [11,22,33,44,55,99];// 创建了一个有内容的数组

• 构造函数创建

    
    //构造函数创建
    var arr2 = new Array();// 创建了一个空数组 
    var arr3 = new Array("hello","js","!");// 创建了一个有内容的数组
    console.log(arr3);

1.2 数组的长度

数组名.length 

• length 代表长度，数组里有多少个成员，length就是多少

var arr3 = new Array("hello","js","!");// 创建了一个有内容的数组
console.log(arr3.length);

1.3 数组的索引

• 索引就是下标，是指一个数据在数组里面排在第几个位置

• 注意：下标从0开始的，所有编程语言里的下标都是从0开始

• 想获取数组的第几个元素就 数组[索引]

var arr1 = [11, 22, 33, 44, 55, 99];// 创建了一个有内容的数组

//构造函数创建
var arr3 = new Array("hello", "js", "!");// 创建了一个有内容的数组
// console.log(arr3.length);


// 如何通过下标获取数组的某一项
console.log(arr1[0]);//11
console.log(arr1[5]);//99
console.log(arr3[1]);//js

1.4 数组如何循环遍历

• for 循环遍历

var arr = ["11","22","33","44","55","66"];
// 1  直接通过for循环遍历
for(var i=0;i<arr.length;i++){
    //i  0-8  9次
   console.log(arr[i]); //0-8 的值
}

i<arr.length  因为length就是数组的长度，就是一个数字，可以直接把它当成循环的次数
arr[i]  //i 代表 0 1 2 3 4...  相当于arr[0] arr[1] arr[2] arr[3]

• for in

       // 2  for  in 遍历数组  直接获取到数组的索引
        for(idx in arr){
            console.log("数组下标是"+idx);
            // 可以获取到下标，通过下标拿到数组的每一个元素
            console.log("数组元素是"+arr[idx]);

        }

• for of

        // 3 for of  遍历数组  直接获取到数组的元素
        for(item of arr){
            console.log(item); 
        }

二、数组的常用方法 （重点 面试）

• push 方法

  • 就是在数组的末尾追加一个元素，返回添加之后的数组的长度

  • 会修改原数组的

var arr = [1,2,3,4,5];
var res = arr.push("哈哈哈");
console.log(arr,"添加后");
console.log(res);//6

unshift 方法

• 就是在数组的最前边添加一个元素，返回添加之后的数组的长度

• 会修改原素组的

var arr = [1,2,3,4,5,6,8];
var res = arr.unshift("00000");
console.log(arr);
console.log(res);//8

pop

• 用来删除数组末尾的一个元素，返回删除的元素

• 会修改原数组

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

shift

• 删除数组最前边的一个元素，返回删除的元素

• 会修改原数组

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

splice

• 用来截取数组中的某些内容，按照数组的索引来截取，返回截取的内容

• 也会修改原数组

• 语法1：数组.splice(从哪个索引位置开始截取,截取的个数)

• 语法2：数组.splice(从哪个索引位置开始截取,截取的个数,替换的新元素) 第三个参数可以不写

    var arr = ["hello","js","heihei","haha","html","Css"];
    var res = arr.splice(2,3);
    console.log(arr);//['hello', 'js', 'Css']
    console.log(res);
    
    
    三个参数
    var arr = ["正在加载","正在加载","正在加载","正在加载"];
    //arr.splice(0,1,"加载完成");
    //console.log(arr); //['加载完成', '正在加载', '正在加载', '正在加载']

    arr.splice(0,2,"加载完成")
    console.log(arr);//['加载完成', '正在加载', '正在加载']

reverse

• 用来翻转数组 把数组反过来

• 会修改原数组

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



     // 数组的方法  是可以连用的
        arr.reverse().splice(0,2);
        console.log(arr);//[4, 3, 2, 1]

sort

• 用来给数组排序的 给一个无序的数组排列成有序的

• 会修改原数组

var arr = [8,2,1,3,6,9];
arr.sort();
console.log(arr); //[1, 2, 3, 6, 8, 9]  从小到大排序
===================================================

// 从小到大排序
// arr.sort(function (a,b){
//     return a-b  // 从小到大排序
// })
// console.log(arr);

// 从大到小排序
arr.sort(function (a,b){
    return b-a  // 从大到小排序
})
console.log(arr); //[9, 8, 6, 3, 2, 1]
=====================================================

var arr1 = [{
    name:"张三",
    age:18
},{
    name:"李四",
    age:16
},{
    name:"王五",
    age:20
}]

// 按照年龄排序
arr1.sort(function(a,b){
  return b.age - a.age
})
console.log(arr1);

concat

• 用来数组合并的 把多个数组合在一起

• 不会改变原来的数组，会返回一个新的合并后的数组

var arr = [1,2,3,4];
var arr1 = ["hello","js"];
var arr2 = [true,false];
var newArr = arr.concat(arr1)
console.log(arr,arr1); // [1, 2, 3, 4]  ['hello', 'js']
console.log(newArr);//[1, 2, 3, 4, 'hello', 'js']

join

• 是把数组里边的每一项内容连接起来，变成一个字符串

• 中间的连接符可以自己定义

• 不会改变原数组 而是返回新的字符串

var arr = [1,2,3,4,5,6];
var str = arr.join();
var str1 = arr.join("");
var str2 = arr.join("-")
console.log(arr);//[1, 2, 3, 4, 5, 6]
console.log(str);//1,2,3,4,5,6
console.log(str1);//123456
console.log(str2);//1-2-3-4-5-6

slice

• 取出数组的一部分

• 两参数 arr.slice（开始位置,结束位置） 不包含结束位置

• 不会改变原数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 两参数 `arr.slice（开始位置下标,结束位置下标）`   不包含结束位置
//var res = arr.slice(0, 3)
var res = arr.slice(4,6);
console.log(res); // [1, 2, 3]
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

练习

1、山上有一口缸可以装50升水，现在有15升水。老和尚让小和尚去挑水，小和尚一次挑5升，问

小和尚挑几次可以把水缸挑满？编程实现

循环  几次  不确定的
一次挑5升  一次往数组里push 5
var arr = [15]

// - 次数  可能是多次   多次想到循环
// 次数不确定几次  想写个死循环  符合结束条件停止循环
    var arr = [15];
    while(true){
        // 1- 执行一次就往数组里 push 5
        arr.push(5)
        // 2- 等到数组里的数组元素和相加>=50 这个循环该停止
        var sum = 0;
        for(var i=0;i<arr.length;i++){
            sum = sum + arr[i];
        }
        if(sum>=50){
            // 桶满了
            // 不需要循环了
            break;
        }

    }
    console.log(arr);
    console.log("挑了"+(arr.length-1)+"次");




二选一

var arr = [15]
var sum = 0
for (var i = 0; i < arr.length; i++) {
    sum += arr[i]
    if (sum < 50) {
        arr.push(5)
    } else {
        console.log(i);
    }
}

作业

1、定义一个含有30个整形元素的数组，按顺序分别赋予从2开始的偶数，然后按顺序每五个求出一个平均值，

放在另一个数组中并输出 编程实现

var arr = [2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40...];
不要写死一个数组 定义一个空数组  循环 往空数组里push  

每五个求出一个平均值
[6, 16,26, 36,46,56]

2、编写一个函数，把数组中的每一个数都增加30%，返回一个新数组

var arr = [10,100,200];
function fn(){
	//XXXXX
}

3、编写一个函数 ，判断数组中是否存在55这个元素，返回布尔值 (选做)

var arr = [1,2,3,4,55];
var arr1 = [1,2,3,4,6,7,8]；
function fn(){
	XXXXXX
}
fn(arr,55); //true
fn(arr1,55);//false