数组的特性
- 索引（数组属性名）
- 从0开始排列 数组中每一项都有对应的索引值
- 便于我们通过索引 来获取数组中每一项
- 获取数组中的索引为2的 那一项的值
//数组[索引值]
console.log(arr[2]);
// length 代表数组的长度 当前数组中元素的个数
console.log(arr.length);
- 元素集合 也称为类数组 但不是数组
var titles = document.getElementsByTagName('h3');
console.log(titles);
function add() {
console.log(arguments); // 实参集合 也称为类数组 但不是数组
}
add(1, 2, 3, 4);
// 获取数组中的最后一项
console.log(arr[3]);
console.log(arr[arr.length - 1]);
- 数组方法
- 类
- 数组中的方法 都存储这Array.prototype
- Array.prototype
数组增加和删除
- push
- 作用：向数组末尾添加一项或多项
- 返回值：添加后的数组长度
- 原数组：发生改变
var arr = [1, 2, 3];
console.log('添加前的数组', arr); // [1, 2, 3]
var result = arr.push(10, 20);
console.log('添加后的数组', arr); // [1, 2, 3, 10, 20]
console.log('return', result);
- unshift
- 作用：向数组开头添加一项或者多项
- 返回值：添加后的数组长度
- 原数组：发生改变
var arr = [1, 2, 3];
console.log('添加前', arr); // [1, 2, 3]
var result = arr.unshift(40, 50, 60);
console.log('添加后', arr); // [40, 50, 60, 1, 2, 3]
console.log('返回值', result); // 6
- pop
- 作用：删除数组末尾最后一项
- 原数组：发生改变
- 返回值：返回的是 删除的那一项
var arr = [1, 2, 3, 'hello'];
console.log('删除前', arr); // [1, 2, 3, 'hello']
var result = arr.pop();
console.log('删除后', arr); // [1, 2, 3]
console.log('返回值', result); // 'hello'
- shift
- 作用：删除数组开头第一项
- 原数组：发生改变
- 返回值：删除的那一项
var arr = ['hello', 1, 2, 3];
console.log('删除前', arr); // ['hello', 1, 2, 3]
var result = arr.shift();
console.log('删除后', arr); // [1, 2, 3]
console.log('返回值', result); // 'hello'
数组查找
- indexOf
- 查找某个值 在数组中的索引位置
- 返回值 查找到的那一项的索引
var arr = [1, 'a', 2, 'b', 3, 'c'];
var res = arr.indexOf('b'); // 3
//如果查找不到 就返回-1 说明数组中不存在这一项
var res = arr.indexOf(20); // -1
console.log('返回值', res);
- lastIndexOf
- 查找 值在数组中 最后一次出现的索引位置
var arr = [1, 'b', 2, 'b', 3];
// 找到的是 最前面'b'
console.log(arr.indexOf('b')); // 1
// 找到的是 最后面'b'
console.log(arr.lastIndexOf('b')); // 3
var arr2 = [1, 'b', 20, 3];
console.log(arr2.indexOf('b')); // 1
console.log(arr2.lastIndexOf('b')); // 1
// 查找一个值 是否存在于这个数组中 'l'
// var res = arr2.indexOf('l');
var res = arr2.indexOf(20);
if (res === -1) {
console.log('当前数组中 不存在这个字符')
} else {
console.log(`这个值的索引位置: ${res}`)
}
splice
- splice
- 操作的都是原数组 原数组发生改变
- 返回值 都是一个新数组
- 情况一 参数1
- splice(x)
- 从索引x处开始 一直删除到末尾，将删除的内容组成新数组返回
var arr = [10, 20, 30, 40, 50];
console.log('调用前', arr); // [10, 20, 30, 40, 50]
var result = arr.splice(2);
console.log('调用后', arr); // [10, 20]
console.log('返回值', result); // [30, 40, 50]
- 情况二 两个参数
- splice(x, y)
- 从索引x处开始，删除y个 将删除的内容组成新数组返回
var arr = [10, 20, 30, 40, 50];
console.log('调用前', arr);
var result = arr.splice(1, 3);
console.log('调用后', arr); // [10, 50]
console.log('返回值', result); // [20, 30, 40]
- 情况三 三个 及 三个以上参数
- splice(x, y, ...n)
- 从索引x处开始，删除y个 将参数n及后面所有参数 插入到索引x处
- 将删除的内容组成新数组返回
var arr = [10, 20, 30, 40, 50];
console.log('调用前', arr); // [10, 20, 30, 40, 50]
var result = arr.splice(1, 3, 100, 200, 300);
console.log('调用后', arr); // [10, 100, 200, 300, 50]
console.log('返回值', result); // [20, 30, 40]
- 添加 第二个参数为0
- splice(x, 0, ...n)
- 将参数n以及后面所有参数 插入到索引x处
var arr = [10, 20, 30, 40, 50];
console.log('调用前', arr); // [10, 20, 30, 40, 50]
var result = arr.splice(1, 0, 2019, 2018);
console.log('调用后', arr); // [10, 2019, 2018, 20, 30, 40, 50]
console.log('返回值', result); // []
var ary = [1, 2, 3];
ary.splice(1, 0, 'hello', 'world!'); // [1, "hello", "world!", 2, 3]
- 向开头添加
- unshift()
- splice(0, 0, z)
var ary = [10, 20];
ary.splice(0, 0, 1000);
console.log(ary);
- 向末尾添加
- push()
- splice(arr.length, 0, z)
var ary = [10, 20];
ary.splice(ary.length, 0, 'last');
console.log(ary);
数组截取
- slice() 截取、克隆
- 不会影响原数组
- 返回值 新数组
- 情况一 克隆
- slice()/slice(0)/slice(null)
- 按照原数组 完全克隆一份 组成新数组返回
var arr = ['a', 'b', 'c', 'd'];
console.log('原数组', arr);
var res = arr.slice(null);
console.log('返回值', res); // 克隆后的新数组
console.log(res === arr); // false
- 情况二 slice(x)
- 从索引x处开始，截取到末尾，将截取到的内容 组成新数组返回
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var res = arr.slice(2);
console.log('返回值', res); // ['c', 'd', 'e', 'f']
// slice(-x) 支持负数 相当于倒着截取x个值
slice(-x) => slice(arr.length + (-x));
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var res = arr.slice(-2); // 4
console.log('返回值', res); // ['e', 'f']
- 情况三
- slice(x, y) 从索引x处开始，截取到索引y处（注意：不包含索引y 这一项）
- x起始索引位置 y结束索引位置
// 从第1个 截取到第3个
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
var res = arr.slice(0, 3);
console.log('返回值', res); // ['b', 'c']
- slice(-x, -y);
- slice(ary.length - x, ary.length - y);
- 如果起始索引 大于 结束索引 不会截取到任何内容 直接返回一个新的空数组
排序
-
从小到大
-
从大到小
-
sort()
- 原数组会发生改变
- 返回值：排序后的原数组
var arr = [3, 4, 1, 2, 5]
console.log('排序前', arr)
var res = arr.sort()
console.log('排序后', arr)
console.log('返回值', res)
console.log(res === arr) // true
// 直接使用sort() 默认情况下 只能排序10以内的数字
var arr = [3, 14, 1, 2, 5, 26, 100]
arr.sort()
console.log('排序后', arr) // [1, 100, 14, 2, 26, 3, 5]
var arr = [3, 14, 1, 2, 5, 26, 100]
// 从小到大排序
arr.sort(function (a, b) {
return a - b
})
// 从大到小排序
arr.sort(function (a, b) {
return b - a
})
console.log('排序后', arr)
var arr = [3, 1, 'b', 'a']
// arr.sort() 可以对字母排序
console.log(arr) // [1, 3, "a", "b"]
- 排列
- 将原数组 倒着排列
var arr = [1, 2, 3, 4]
var arr = ['h', 'e', 'l', 'l', 'o']
arr.reverse()
console.log('reverse', arr) // ["o", "l", "l", "e", "h"]
数组拼接
- concat() 拼接
- 不会影响原数组
- 返回值：拼接好的内容 组成的新数组
var arr1 = [1, 2, 3];
var arr2 = [6, 7, 8];
var res1 = arr1.concat(arr2, 2, 'df');
console.log('返回值', res1); // [1, 2, 3, 6, 7, 8, 2, 'df']
var res2 = arr2.concat(arr1);
console.log('返回值', res2); // [6, 7, 8, 1, 2, 3]
console.log('arr1', arr1);
console.log('arr2', arr2);
var arr = [1];
var res = arr.concat([100], 300, 'hello');
console.log(res); // [1, 100, 300, "hello"]
// concat() 拼接时 只能展开一层数组
var res = arr.concat([[100]], [300]);
console.log(res); // [1, [100], 300]
数组转换成字符串
- 将数组转换成字符串 原数组不会发生改变
- toString()
- join()
// toString()
var arr = [1, 2, 3];
var res = arr.toString();
console.log('返回值', res); // "1,2,3"
- join(连接符)
- 根据指定的连接符 组成新字符串
var arr = [1, 2, 3];
arr.join(); // "1,2,3" 相当于toString()
arr.join(''); // "123"
arr.join('+'); // "1+2+3"
arr.join('*'); // "1*2*3"
- eval() 将字符串 当做JS代码（表达式）来执行
- 相当于小型JS解释器
eval("1+2+3"); // 6
eval("1*2*3"); // 6
// 对数组中每一项 进行求和
var a = [10, 20, 100, 30, 100];
var total = eval(a.join('+')); // eval("10+20+100+30+100")
console.log(total); // 260
console.log(eval(a.join('*'))); // 60000000
// 相当于声明了一个变量
eval('var num = 1000');
console.log(num);
