欢迎光临散文网 会员登陆 & 注册

千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

2023-07-12 11:35 作者:卐小智卍  | 我要投稿

数组

数组是用来批量存储数据的一种对象，类似于数学中的集合

一、数组的定义

  1. 构造函数
 var arr = new 构造函数();
  1. 引用类型的内存存储机制与内置类型不同:
  2. 栈与堆:都是内存中的空间
  3. 内置类型存储数据:内置类型只有一块栈空间,该空间存的就是数值本身
 var a = 123;
  1. 引用类型存储的方式:引用类型有两块空间
  2. 一块栈空间，存的是new出来堆空间的地址
  3. 一块堆空间,堆空间存的是真正的数据
  4. new是一个关键字，作用为在堆内存开辟空间
  5. Array是构造函数，可以理解为是一个类型的模板
  6. new Array(1,2,3,4,5):按照Array类型的模板在堆内存开辟了一个Array的空间，并且存储的元素分别为1,2,3,4,5
  7. 注意事项:new和构造函数必须一起使用，含义为创造了一个该类型的对象
 var arr = new Array(1,2,3,4,5);
 console.log(arr);
  1. 字面量
  2. 字面意思将new Array() 简化为[ ]
 var arr = [1,2,3,4,5];
 console.log(arr);
 var arr = [];

二、数组的使用

数组元素的访问：数组名[下标]

数组名：就是数组的名字

下标:数组元素访问时的索引

  1. 从0开始
  2. 连续的自然数
  3. 下标可以用变量
  4. 数组在访问时，千万不要越界，下标取值范围是：0~数组长度-1

三、数组的遍历

对所有的元素进行相同的操作(依赖于循环)

数组对象.length:返回数组的长度（元素的个数）

var arr = [11,22,33,44,5,5,9,8,4,3];

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

数组的逆序运算写法：

需要循环n/2取整次，并用无赋值容器将元素交换

var arr = [5,6,7,4,8,3,9,2,0,1];
var len = arr.length;
var t;
for(var i=0; i<parseInt(len/2); i++){
    t = arr[i];
    arr[i] = arr[len-i-1];
    arr[len-i-1] = t;
}

console.log(arr);

四、数组的API：API--->应用程序接口--->系统提供的函数，打点访问

[内容表示可以省略不写]

如何学习API

  1. 函数的功能
  2. 函数的参数
  3. 函数的返回值
  4. 抄案例 无耻求demo

push

功能:尾插

参数:push(参数1,[参数2,参数3...])

返回值:数值，表示数组的新长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits.push("Kiwi","1","hello");
console.log(fruits);
console.log(len);

pop

功能:尾删

参数:无

返回值:被删除的元素

var arr = ["t",7,"r",8,"e"];
var x = arr.pop();
console.log(arr);
console.log(x);       
x = arr.pop();
console.log(arr);
console.log(x);

unshift

功能:头插

参数:unshift(参数1,/参数2,参数3.../)

返回值:数值，表示数组的新长度

var arr = [1,2,3,4,5];
var len = arr.unshift(666,777);
console.log(arr);
console.log(len);

shift

功能:头删

参数:无

返回值:被删除的元素

var arr = ["t",7,"r",8,"e"];
var x = arr.shift();
console.log(arr);
console.log(x);

reverse

功能:逆序,并且改变元素组本身

参数:无

返回值:返回逆序的数组

var arr = [5,7,8,4,8];
arr.reverse();
//这样就直接实现了算数运算逆序，更简便。
console.log(arr);

splice

功能:指定位置删除或插入

参数:splice(起始位置,偏移量,[被插入的参数1,参数2...])

返回值:被删除的数组区间

var arr = [5,6,7,4,8,3,9];
arr.splice(1,3);
var arr1 = arr.splice(1,3);
arr.splice(1,3,99,111);
arr.splice(2,1);
console.log(arr);
console.log(arr1);

slice

功能:截取数组区间，不会改变元数组

参数:slice(起始位置,结束位置) 左闭右开

返回值:被截取的元素

var arr = [6,5,7,4,8,3];
var arr1 = arr.slice(1,3);
console.log(arr);
console.log(arr1);

concat

功能:数组的拼接,不会改变原始数组

参数:concat(新数组)

返回值:拼接的数组

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
console.log(arr3);

join

功能:将数组转为字符串

参数:join([分隔符]),默认不写时用逗号分割

返回值:字符串

var arr = [2,3,4,5,6,7,8,9];
var str = arr.join("laowang");
console.log(str);

length:数组的长度

indexOf

功能:查找元素是否在数组中出现（字符串：查找字符串第一次出现的位置）

参数:indexOf(目标元素)

返回值:找到返回下标，找不到返回-1

indexOf("abc")        查找字符串第一次出现的位置
var str = "helloworld";
console.log(str.indexOf("llo"));

lastIndexOf

功能:查找元素是否在数组中出现（字符串：查找字符串最后一次出现的位置）

参数:lastIndexOf(目标元素)

返回值:找到返回下标，找不到返回-1

lastIndexOf("abc")    查找字符串最后一次出现的位置  如果没找到  返回-1
var str = "helloworld";
console.log(str.lastIndexOf("o"));

五、多维数组：拥有多个下标的数组元素

JS本身是没有多维数组的，所有的多维数组都是通过一维数组的嵌套实现的

案例：将多维数组内容打到浏览器白板上

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

// console.log(arr[1][0]);获取下标1里面数组的下标0的数值

for(var i=0; i<arr.length; i++){
    // console.log(arr[i]);
    for(var j=0; j<arr[i].length; j++){
        document.write(arr[i][j] + " ");
    }
    document.write("<br>");
}

六、冒泡排序：将数值类型数组，按照由小到大，或者由大到小的顺序排列

案例：

核心思想：两两比较

外层循环：比较多少趟:N-1趟

内层循环：每趟比较多少次:N-1-i

第0趟为例 交换9次
/*
    5,6,7,4,8,3,9,2,0,1
    5,6,7,4,8,3,9,2,0,1
    5,6,4,7,8,3,9,2,0,1
    5,6,4,7,8,3,9,2,0,1
    5,6,4,7,3,8,9,2,0,1
    5,6,4,7,3,8,9,2,0,1
    5,6,4,7,3,8,2,9,0,1
    5,6,4,7,3,8,2,0,9,1
    5,6,4,7,3,8,2,0,1,                       

    第1趟    交换8次
    5,6,4,7,3,8,2,0,1
*/

var arr = [6,5,7,4,8,3,9,2,0,1];

var t;

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

console.log(arr);

用indexOf去重

var arr = [5,6,5,5,6,6,1,7,7,8,9,4,8,9,3,0];
var arr1 = [];

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

console.log(arr1);

七、数组相关迭代

迭代函数的功能:实现了循环，用户只需要自己写功能

forEach

功能:遍历数组所有元素，并且实现回调函数的功能

参数:forEach(回调函数)

回调函数(数组元素数值,[数组下标,数组名]){}

返回值:无

let arr = [6,5,4,7,3,8];

function fun(x,index,a){
    console.log(a[index]);
    x = x + 10;
    a[index] = x + 10;
    a[index] *= a[index];
}
arr.forEach(fun);
console.log(arr);

map

功能:拼接，遍历数组所有元素，并且实现回调函数的功能

参数:map(回调函数)

回调函数(数组元素数值,[数组下标,数组名]){}

返回值:回调函数return的值，拼接的数组

function fun(x){
    if(x%2){
        return "heihei";
    }else{
        return "yingyingying";
    }
}
let arr = [5,4,6,7,3,8];
let arr1 = arr.map(fun);
console.log(arr);
console.log(arr1);

filter

功能:过滤,根据回调函数返回的布尔值筛选元素，遍历数组所有元素，并且实现回调函数的功能

参数:filter(回调函数)

回调函数(数组元素数值,[数组下标,数组名]){}

返回值:回调函数return的布尔值，筛选后拼接的数组

let arr = [5,4,6,7,3,8];
function fun(x){
    if(x%2){
        return true;
    }else{
        return false;
    }
}
let arr1 = arr.filter(fun);
console.log(arr1);

面试题：map和forEach的异同

forEach没有返回值

map返回的是回调函数return的值，拼接的数组

标签：

千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip的评论 (共 条)

分享到微博请遵守国家法律