数组对象
在其他语言里,例如java,c++等,数组是一片连续的内存空间.但在JavaScript中数组是一个特殊的对象,该对象的属性都是数字字符串.
数组的表现形式
数组是用一个 [] 来表示的.它不需要写数字属性,只需要在中括号内写上你的数据即可.由于js是弱类型语言,它对存储的数据类型没有要求,所以我们可以在数组中存储任意类型的数据
// 这是一个数组
["html","css","javascript"];
//数组里可以存任意类型的数据
[1,undefined,null,{brand:"格力"},"tomcat"}]
数组的创建
- 通过构造函数创建 Array
var colors = new Array();//创建一个空数组
//创建一个长度为5,但是数据内容为undefined的数组
var arr = new Array(5);
console.log(arr);//[undefined,undefined,undefined,undefined,undefined]
//如果构造函数的参数多于1个,则这些参数就是数组的内容
var arr2 = new Array(3,"html");
console.log(arr2);//输出结果是[3,"html"]
- 通过字面量创建数组 这也是我们最为常用的创建数组的方式
var arr = [];//创建一个空数组
var colors = ["red","green","blue"];
访问数组的元素
虽然说数组是一个特殊的对象,但是要想访问它的元素只能通过 字符串语法访问,而不能用点语法进行访问
var colors = ["red","green","blue"];
console.log(colors.red);//输出结果是undefined
正确的访问方式,通过数组元素在数组的中位置进行访问,数组的元素的位置从0开始,最大的位置就是数组的长度-1
var colors = ["red","green","blue"];
//获取第一个元素
console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
数组长度 length
数组对象有一个 length属性,可以获取到数组中有多少个元素
var colors = ["red","green","blue"];
console.log(colors.length);
遍历数组
for循环
var colors = ["red","green","blue"]; for(var i=0;i<colors.length;i++){ console.log(colors[i]); }for in for...in 循环只遍历可枚举属性,既可以遍历对象,也可以用来遍历数组
for (var variable in object){ statement } variable 在每次迭代时，variable会被赋值为不同的属性名。 object 被迭代枚举其属性的对象。遍历对象
var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); }遍历数组
var colors = ["red","green","blue"]; for(var key in colors){ console.log(key); }for of 循环
for...of是从ES6引入的,创建一个循环来迭代可迭代的对象.
语法
for (var variable of iterable) { statement } variable：每个迭代的属性值被分配给该变量。 iterable：一个具有可枚举属性并且可以迭代的对象。var colors = ["red","green","blue"]; for(var color of colors){ console.log(color); }forEach 语法
arr.forEach(callback[, thisArg]); callback 为数组中每个元素执行的函数，该函数接收三个参数： currentValue 数组中正在处理的当前元素。 index可选 数组中正在处理的当前元素的索引。 array可选 forEach() 方法正在操作的数组。 thisArg可选 可选参数。当执行回调函数时用作 this 的值(参考对象)。forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。
var colors = ["red","green","blue"]; colors.forEach(function(item,index){ console.log(index); console.log(item); })
操作数组
对数组进行增删该
- 修改数组元素
可以根据数组的下标来修改指定位置的元素
var colors = ["red","green","blue"];
// 将第一个元素的值修改为 "orange"
colors[0] = "orange";
console.log(color);//输出结果为["orange","green","blue"]
- 为数组新增元素
- push 在数组最后新增元素
- unshift 在数组最前面插入元素
var colors = ["red","green","blue"];
colors.push("orange");
console.log(colors);//输出结果["red","green","blue","orange"]
colors.unshift("yellow");
//输出结果["yellow","red","green","blue","orange"]
console.log(colors);
- 删除数组元素
- pop 从数组最后的一个元素弹出
- shift 将数组的第一个元素删除
var colors = ["red","green","blue"];
colors.pop();
cosnole.log(colors);//blue被删除,输出结果为 ["red","green"]
colors.shift();
console.log(colors);//red被删除,输出结果为 ["green"]
密集数组和稀梳数组
- 密集数组 就是每个元素都按照连续的顺序进行排位,不存在空隙
- 稀梳数组 每个元素比一定按照连续的顺序进行排位,中间允许有空隙
例如
// 这是密集数组
var colors = ["red","green","blue"]
// 这是稀梳数组
var books = new Array();
books[0] = "html";
books[3] = "javascript";
console.log(books[0]);//输出html
console.log(books[1]);//输出undefined
数组常用方法
数组本身是一个内置对象,而它也自带了很多常用的方法.它的方法分两种
- 不改变原数组,使用函数之后,重新生成一个新的数组,而原数组不会发生变化
- concat()
- join()
- slice()
- toString()
- filter()
- map()
- reduce()
- 改变原数组,使用函数之后,改变数组的内容
- pop()
- push()
- reverse()
- shift()
- unshift()
- sort()
- splice()
不改变原数组
concat
- 先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的尾部，最后返回这个副本
- 如果参数是一个或多个数组，这该方法会将这些数组中的每一项都添加到结果数组中
- 如果参数不是数组，这些值会被简单的添加到结果数组的末尾
- 如果不传参数，它只是复制数组并返回副本（可用于复制数组）
不会破坏原数组
var baseBooks = ["html","css","javascript"]; var upBooks = ["vue","react"]; var allBooks = baseBooks.concat(upBooks); console.log(allBooks); // 输出结果是, ["html", "css", "javascript", "vue", "react"] var backBooks = ["java","nodejs"]; var books = baseBooks.concat(upBooks,backBooks); console.log(books); //输出结果为["html", "css", "javascript", "vue", "react", "java", "nodejs"]
join(seperator)
- 将数组中的所有元素拼接成一个字符串并返回
- seperator是字符连接符
- 不会破坏原数组
var books = ["html","css","javascript"]; //将数组里的所有字符用 - 进行连接成一个字符串 var result = books.join("-"); console.log(result);//html-css-javascript console.log(typeof result);//string
slice(start,end)
- start: 截取数组的起始位置
- end: 截取数组的结束位置,但是不包括结束为止的值
var books = ["html","css","javascript"]; //截取起始下标为0,结束下标为2的数组部分 var result = books.slice(0,2); console.log("输出结果",result); //结果是 ["html","css"]- toString()
对象序列化
var books = ["html","css","javascript"]; console.log(books.toString()); //输出结果 html,css,javascript - filter() 数组过滤函数
- 对数组元素进行过滤,满足条件的返回true,组成新的数组,不满足条件的返回false,不会出现在新的数组中
var arr = [1,2,3,5,6,7]; var newArr = arr.filter(function(item){ if(item%2==0){ return true; }else{ return false; } }) console.log(newArr);
- 对数组元素进行过滤,满足条件的返回true,组成新的数组,不满足条件的返回false,不会出现在新的数组中
- map()
- 对数组元素进行处理,然后返回处理后的数据,组成一个新的数组
var arr = [1,2,3,5,6,7]; var newArr = arr.map(function(item){ return item*2; }) console.log(newArr);//[2, 4, 6, 10, 12, 14]
- 对数组元素进行处理,然后返回处理后的数据,组成一个新的数组
- reduce()
- 使用指定的函数对数组元素进行组合，生成单个值，这在函数式编程中是常见操作，也可成为“注入”和“折叠”
- reduce第一个参数是执行简化操作的化简函数，化简函数的任务是用某种方法把两个值组合或化简为一个值，并返回化简后的值，第二个参数（可选）是作为化简函数的第一个参数的初始值，如果不传就取数组的第一项
- 化简函数的第一个参数是到目前为止的化简操作累计的结果，第2-4个参数分别是数组元素、数组索引和数组本身
- reduceRight类似于reduce，不同的是它是从右往左处理
const a = [1,2,3,4,5] const sum = a.reduce(function(x,y){return x+y}, 0) // 数组求和 const max = a.reduce(function(x,y){return (x>y)?x:y}) // 数组求最大值改变原数组
- reverse() 翻转数组
var books = ["html","css","javascript"]; books.reverse(); console.log(books);//输出结果,原数组发生变化["javascript", "css", "html"] sort() 对数组进行排序
- 如果sort不带参数,则会以字母顺序进行排序,
如果该函数接收一个函数为实参,在该实参函数里,有两个形参,我们暂且把这两个形参定位 a 和b
- 返回 a-b 是升序
返回 b-a 是降序
var arr = [1,"a","c",3,"aa","a1"]; arr.sort(); console.log(arr); //输出结果 [1, 3, "a", "a1", "aa", "c"] //升序 var nums = [5,2,1,6,2,7,8,9,22]; nums.sort(function(a,b){ return a-b; }); console.log(nums); //输出结果 [1, 2, 2, 5, 6, 7, 8, 9, 22] //降序 nums.sort(function(a,b){ return b-a }) console.log(nums);//输出结果为 [22, 9, 8, 7, 6, 5, 2, 2, 1]
- splice()
- 删除数组中的指定的连续的元素，也可向数组的中部插入项
- 删除：提供两个参数：删除第一项的起始位置，删除的个数
- 插入：提供三个参数：起始位置，0（删除的项数），要插入的项
- 编辑：提供三个参数：起始位置，删除的项数，要添加的项（删除的项数不一定要等于添加的项数）
- 返回从原始数组删除的项组成的数组
var arr = [1,2,3,5,6,7]; //往arr数组中第4个位置(既下标为3)插入一个新的值 4 arr.splice(3,0,4) console.log(arr);// [1, 2, 3, 4, 5, 6, 7] //删除下标为5的元素,由于上一次插入操作已经改变了原数组,现在下标为5的元素是 6 arr.splice(5,1); console.log(arr);// [1, 2, 3, 4, 5, 7]
数组练习
- 第一题
给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。
示例 1:
输入: "abcabcbb"
输出: 3
解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
示例 2:
输入: "bbbbb"
输出: 1
解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。
示例 3:
输入: "pwwkew"
输出: 3
解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。
请注意，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。
- 第二题
给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，
并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。
给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]
- 第三题
有若干个正整数组成的数组,用js编写函数实现返回这些正整数所能组成的最大值( 例如[4,29,3,1] 能组成的最大值为 43291 [2,79,3,10,8]能组成最大值为 8793210 - 第四题
将n个元素的数组向右旋转K个步骤
例如: 在 n = 7和k=3的情况下,数组[1,2,3,4,5,6,7]旋转到 [5,6,7,1,2,3,4]
注意:必须在当前数组处理,不可以建立新的数组
var rotate = function(n,k){
}
- 第五题
对于一组包含n个数据的记录，冒泡排序在最坏的情况下需要进行n-1趟排序
第1趟：依次比较0和1、1和2、2和3...（n-2）和（n-1）索引的元素，
如果发现第1个数据大于第2个数据，交换他们，经过第1趟排序，最大的元素排到了最后
第2趟：依次比较0和1、1和2、2和3...（n-3）和（n-3）索引的元素，
如果发现第1个数据大于第2个数据，交换他们，经过第2趟排序，第二大的元素排到了倒数第二个位置
...
第n-1趟：比较0和1索引的元素，如果发现第1个数据大于第2个数据，交换他们，
经过第n-1趟排序，第二小的元素排到了第二个位置