一、走进数组
数组(Array) 就是一组数据的集合，数组里可以存储任何数据类型的数据 ，并且数组中每一项之间是以逗号隔开
如：[ 1, 'hello', { name: 'zhufeng' }, ['web前端'] ]
复制代码本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是"object"
数组的特性
索引（下标）
数组中从第一项开始 会为每一项分配下标（下标从0开始） 便于我们通过下标来操作数组中的每一项
length（数组长度）
每个数组对象 自身都会有一个length属性 代表数组的长度
var arr1 = [1, 'zhufeng', 3]
console.log(arr1.length) // 3
var arr2 = ['hello', 'world']
console.log(arr2.length) // 2
复制代码length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。
// 利用length 删除数组或清空数组
var arr = [1, 2, 3, 4]
arr.length = 3
console.log(arr) // (3) [1, 2, 3]
// 设为0 清空数组
arr.length = 0
console.log(arr) // []
复制代码二、如何创建数组
创建数组的两种方式：
// 使用构造函数方式
var arr = new Array()
var arr = new Array(1, 2, 3) // [1, 2, 3]
var arr = Array(1, 3, 4) // [1, 3, 4]
// Array的不足 如果只传入一个参数x 返回的是一个length为x的空数组
var arr1 = Array(2) // [empty × 2]
var arr2 = new Array(3) // [empty × 2]
// 字面量表示法
var arr = [1, 2, 3]
复制代码三、数组循环遍历
// for 循环
var arr = [1, 2, 3, 4]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// for in循环 虽然也可以用于数组 但通常用来遍历普通object使用
var arr = [1, 2, 3]
for (var k in arr) {
console.log(k, arr[k])
}
复制代码四、数组操作方法
在数组类(Array) 原型对象中提供了很多供数组调用的属性方法，这些方法让我们能够更加方便的来操作数组
数组增删改查
push
方法说明：向数组末尾添加 一项或多项
原数组：改变
返回值：添加后的数组长度
/**
* 向数组末尾添加一项或多项 原数组发生改变
* @method push
* @param {Any} value 要添加到数组末尾的一项或多项
* @return {Number} 增加后的数组长度
*/
var array = [1, 2, 3]
var result = array.push(10, 'last')
console.log('返回值', result) // 返回值 5
console.log('原数组', array) // 原数组 [1, 2, 3, 10, "last"]
复制代码unshift
方法说明：向数组开头添加 一项或多项
原数组：改变
返回值：添加后的数组长度
/**
* 向数组开头添加一项或多项 原数组发生改变
* @method unshift
* @param {Any} value 需要添加到数组开头的一项或多项
* @return {Number} 增加后的数组长度
*/
var array = [1, 2, 3]
var result = array.unshift('first', 10)
console.log('返回值', result) // 返回值 5
console.log('原数组', array) // 原数组 ["first", 10, 1, 2, 3]
复制代码pop
作用：删除数组末尾最后一项
原数组： 改变
返回值：删除的那一项 (最后一项)
/**
* 删除数组末尾最后一项
* @method pop
* @param 无
* @return {Number} 删除的那一项（数组最后一项）
*/
var array = [1, 2, 3]
var result = array.pop()
console.log('返回值', result) // 返回值 3
console.log('原数组', array) // 原数组 [1, 2]
复制代码shift
作用：删除数组开头第一项
原数组：改变
返回值：删除的那一项 (数组第一项)
/**
* 删除数组开头第一项
* @method shift
* @param 无
* @return {Number} 删除的那一项（数组第一项）
*/
var array = [1, 2, 3]
var result = array.shift()
console.log('返回值', result) // 返回值 1
console.log('原数组', array) // 原数组 [2, 3]
复制代码splice
添加或删除数组中的元素 原数组改变
/**
* 添加或删除数组中的元素 原数组改变
* @method splice
* @param {Number} start 指定索引起始位置
* @param {Number} n 指定删除元素个数
* @param {Number} item1...itemN 用来插入的元素
* @return {Array} 删除的内容组成的新数组
*/
复制代码情况一 无参数
splice() 无参数时 一项也不删除 但会返回一个新的空数组 原数组改变
var array = ['h', 'e', 'l', 'l', 'o', 24]
/**
* splice() 无参数 一个也不删除并返回一个新的空数组
* 原数组 不改变
* @param 无
* @return {Array} 新的空数组
*/
var result = array.splice()
console.log('返回值', result) // 返回值 []
console.log('原数组', array) // 原数组 (6) ["h", "e", "l", "l", "o", 24]
复制代码情况二 只有一个参数
splice(x) 从索引x处开始一直删除到末尾 并且将删除后的内容组成一个新数组返回 原数组改变
var array = ['h', 'e', 'l', 'l', 'o', 24]
// 从索引2这个位置开始 一直删除到array末尾 删除的内容组成新数组返回
var result = array.splice(2)
console.log('返回值', result) // 返回值 (4) ["l", "l", "o", 24]
console.log('原数组', array) // 原数组 (2) ["h", "e"]
// 如果参数是0 等价于清空原数组 并且克隆一份和原数组一样的新数组返回
var result = array.splice(0)
console.log('返回值', result) // 返回值 (6) ["h", "e", "l", "l", "o", 24]
console.log('原数组', array) // 原数组 []
复制代码情况三 两个参数
splice(x, y) 从索引x处开始 删除y个 并且将删除的内容组成一个新数组返回 原数组改变
var array = ['h', 'e', 'l', 'l', 'o', 24]
var result = array.splice(2, 3)
console.log('返回值', result) // 返回值 (3) ["l", "l", "o"]
console.log('原数组', array) // 原数组 (3) ["h", "e", 24]
复制代码情况四 两个以上参数
splice(x, y, ...n) 从索引x处开始 删除y个 然后将第三项及第三项后面的参数 插入到索引x处 原数组改变
var array = ['h', 'e', 'l', 'l', 'o']
var result = array.splice(2, 2, 100, 200)
console.log('返回值', result) // 返回值 (3) ["l", "l"]
console.log('原数组', array) // 原数组 (5) ["h", "e", 100, 200, o]
复制代码第二个参数为0
splice(x, 0, ...n) 如果第二个参数为0 则一项都不删除 只是将第三项及第三项后面的参数 插入到索引x处 原数组改变
var array = ['h', 'e', 'l', 'l', 'o']
var result = array.splice(2, 0, 100, 200)
console.log('返回值', result) // 返回值 []
console.log('原数组', array) // 原数组 (8) ["h", "e", 100, 200, "l", "l", "o"]
复制代码splice(0, 0, z)实现unshift功能 向开头添加一项或多项 原数组改变
var array = ['h', 'e', 'l', 'l', 'o']
var result = array.splice(0, 0, 100)
console.log('返回值', result) // 返回值 []
console.log('原数组', array) // 原数组 (7) [100, "h", "e", "l", "l", "o"]
复制代码splice(array.lenght, 0, z) 实现push功能 向数组末尾添加一项或多项 原数组改变
var array = ['h', 'e', 'l', 'l', 'o']
var result = array.splice(array.length, 0, 100, 200)
console.log('返回值', result) // 返回值 []
console.log('原数组', array) // 原数组 (8) ["h", "e", "l", "l", "o", 100, 200]
复制代码查找指定项的索引位置
indexOf 和 lastIndexOf (ES5)
indexOf() 方法可返回某个指定的值在数组中首次出现的索引位置。
/**
* 查找某个指定的值在数组中首次出现的索引位置
* @method indexOf
* @param {Any} 要查找的值
* @param {Number} 查找的起始索引位置 默认为0, 取值范围 0 到 array.length - 1
* @return {Number} 返回查找到的索引 查找不到则返回-1
*/
// 按照从左到右顺序依次查找 直至找到为止 否则返回-1
var ary = ['w', 'e', 'n', 'l', 'n', 24]
var index = ary.indexOf('n')
console.log('n的索引位置', index) // n的索引位置 2
// 从索引3处开始向后查找 直至找到为止 否则返回-1
var ary = ['w', 'e', 'n', 'l', 'n', 24]
var index = ary.indexOf('n', 3)
console.log('n的索引位置', index) // n的索引位置 4
复制代码lastIndexOf() 方法可返回某个指定的值在数组中最后出现的索引位置
/**
* 方法可返回某个指定的值在数组中最后出现的索引位置
* @method lastIndexOf
* @param {Any} 要查找的值
* @param {Number} 从后向前查找的起始位置
* @return {Number} 返回查找到的索引 查找不到则返回-1
*/
var ary = ['w', 'e', 'n', 'l', 'n', 24]
var index = ary.lastIndexOf('n')
console.log('index', index) // index 4
// 从索引3处开始向前查找
var index = ary.lastIndexOf('n', 3)
console.log('index', index) // index 2
复制代码数组的截取
slice从数组中截取内容 组成新数组（浅拷贝）返回，原数组不改变
/**
* 从数组中截取内容 组成新数组（浅拷贝）返回，原数组不改变
* @method slice
* @param {Number} 截取的起始索引start
* @param {Number} 截取的结束索引位置end
* @return {Array} 返回一个新的数组，包含从start到end（不包括该元素）的array中的元素。
*/
var ary = ['h', 'e', 'l', 'l', 'o']
slice()/slice(0) 如果参数不传（null/undefined/0) 等价于是把原数组完全克隆一份组
JavaScript
var result = ary.slice()
console.log('返回值', result)
复制代码slice(x) 从索引x处开始截取到数组末尾 将截取到的内容组成新数组并返回
var result = ary.slice(2)
console.log('返回值', result) // 返回值 (3) ["l", "l", "o"]
复制代码slice(x, y) 从索引x处开始截取到数组索引y处（不包含索引y这一项）将截取到的内容组成新数组并返回
var result = ary.slice(1, 3)
console.log('返回值', result) // 返回值 (2) ["e", "l"]
复制代码slice(-x, -y)截取参数可支持负数 如果索引是负数slice(-x, -y) 则将负数索引与数组length相加后的和（array.length + (-x)）作为要截取的索引来用
// slice(-x)
var result = ary.slice(-3) // slice(-3) => slice(ary.length-3) => slice(2)
console.log('返回值', result) // 返回值 (3) ["l", "l", "o"]
// slice(-3, -1) => slice(ary.length-3, ary.length - 1) = slice(2, 4)
var result = ary.slice(-3, -1)
console.log('返回值', result) // 返回值(2) ["l", "l"]
复制代码排序和排列
sort - 排序
用于对数组中的元素进行排序 原数组改变 不创建新数组
/**
* 用于对数组的元素进行排序 原数组改变
* @method sort
* @param {Function} 规定排序顺序, 必须是函数.
* @return {Array} 排序好的原数组
*/
var arr = [5, 20, 11, 18, 24, 8]
// 如果没有传参数 按照字符编码的顺序进行排序 (只能排序10以内的数) 对与字母按字母顺序进行排序
arr.sort()
console.log('返回值', arr) // 返回值 (6) [11, 18, 20, 24, 5, 8]
// 按字母顺序进行排序
var ary = ['a', 'e', 'f', 'd']
console.log(ary.sort()) // (4) ["a", "d", "e", "f"]
// 升降序
arr.sort(function (a, b) {
// 从大到小排序
// return b - a
// 从小到大排序
return a - b
})
console.log('排序后', arr) // 排序后 (6) [5, 8, 11, 18, 20, 24]
/**
* a 和 b的三种情况
* 若a小于b 则返回负数 不交换位置
* 若a等于b，则返回0 不交换位置
* 若a大于b 则返回正数 a与b换位置
*/
复制代码reverse
将数组中的元素颠倒过来排列 原数组改变 不会创建新数组
/**
* 将数组中的元素颠倒过来排列 原数组改变 不会创建新数组
* @method reverse
* @param 无
* @return {Array} 排列好的原数组
*/
var ary = ['a', 'b', 'c', 'd']
console.log(ary.reverse()) //(4) ["d", "c", "b", "a"]
复制代码拼接
concat
用于数组的拼接
/**
* 用于数组合并 返回拼接好的新数组 原数组不改变
* @method concat
* @param {Any} 要拼接的一项或多项参数
*/
var arr1 = ['hello']
// 如果拼接的参数中有数组 则展开(只能展开一层)该数组再拼接
var result = arr1.concat(1, 'a', [1, 2, 3], {name: 'liwenli'})
console.log('拼接好的数组', result) // 拼接好的数组 (7) ["hello", 1, "a", 1, 2, 3, {name: 'liwenli'}]
复制代码类型转换
join
将数组转换成字符串
/**
* 把数组中每项按照指定分隔符 转换成字符串 原数组不改变 不受影响
* @method join
* @param {String} 分隔符 传入的参数会隐式转换成字符串类型
* @return {String} 转换后的字符串
*/
var ary = [1, 2, 3, 4]
console.log(ary.join()) // "1,2,3,4"
console.log(ary.join('')) // "1234"
console.log(ary.join('+')) // "1+2+3+4"
复制代码eval (相当于小型JS解释器)
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。 如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
/**
* 可计算某个字符串（js表达式），并执行其中的的 JavaScript 代码
* @method eval
*/
// 利用eval和join 对纯数字数组进行计算
console.log(eval(ary.join('+'))) // eval("1+2+3+4") => 10
console.log(eval(ary.join('*'))) // eval("1*2*3*4") => 24
复制代码表达式（expression）是JavaScript中的一个短语，JavaScript解释器会将其计算（evalate）出一个结果，常量 变量名 变量赋值 数组 函数都是表达式
toString
把数组转换为字符串
// toString
var ary = [1, 2, 3, 4]
console.log(ary.toString()) // "1,2,3,4"
复制代码数组操作方法梳理
// 向数组末尾添加
arr.push(x)
arr.splice(arr.length, 0, x)
arr[arr.length] = x
// 向数组开头添加
arr.unshift(x)
arr.splice(0, 0, x)
// 删除数组开头第一项
arr.shift()
arr.splice(0, 1)
// 删除数组最后一项
arr.pop()
arr.length--
arr.length-=1
arr.splice(arr.length - 1, 1)
// 清空数组
arr.splice(0)
arr.length = 0
// 数组克隆
arr.slice()/arr.slice(0)
arr.concat()
// 能够改变原数组的方法
push
shift
unshift
pop
sort
splice
reverse
复制代码五、数组方法ES5（遍历 查找 修改 过滤）
forEach map filter find ...
forEach（遍历）
遍历数组全部元素 利用回调函数对数组进行操作，自动遍历数组.length次数，且无法break/return中途跳出循环
arr.forEach(function(item, index) {
// item 遍历出来的值 index 值的索引
console.log('item', index)
})
复制代码map (修改)
基于原数组创建一个新数组 回调函数中每次调用时的返回值 会作为新数组里的组成元素 原数组不变
var arr = [1, 2, 3, 4]
// item 代表每次遍历出的值 index 值对应的索引
var newArr = arr.map(function(item, index) {
// 将每项乘以2 然后返回组成新数组
return item * 2
})
console.log('new', newArr) // new (4) [2, 4, 6, 8]
console.log('old', arr) // old (4) [1, 2, 3, 4]
复制代码filter (过滤)
// 在原数组中通过指定条件进行过滤 将符合条件的元素组成一个新数组并返回 原数组不变
var arr = [1, 2, 3, 4]
// item 代表每次遍历出的值 index 值对应的索引
var result = arr.filter(function(item, index) {
return item > 2
})
console.log('result', result) // result (2) [3, 4]
console.log('arr', arr) // arr (4) [1, 2, 3, 4]
复制代码六、数组求和
for循环 不定项求和（任意数求和）
function sum() {
var total = 0 // 累加初始值
var len = arguments.length // arguments 实参集合（类数组）
for (var i = 0; i < len; i++) {
var cur = Number(arguments[i]) // 将实参集合中每一项转换成数字
if (!isNaN(cur)) { // 如果是有效数字就进行累加
total += cur
}
}
return total
}
console.log(sum('1', 'a', '2', 20, 'b')) // 23
复制代码eval + join组合求和
var arr = [1, 2, 3]
eval(arr.join('+')) // 6
复制代码从零开始一起学习
JavaScript视频：
JavaScript课程视频地址：
www.zhufengpeixun.cn/videoCourse…
JavaScript全栈课程大纲地址：
video.zhufengpeixun.cn/course/30/t…