1 数组类型检测
数组类型检测有两种常用的方式,分别是使用 instanceof 运算符 和使用Array.isArray()方法 。
示例
// 第一种方式
console.log(arr instanceof Array);//输出结果:true
console.log(arr instanceof Array);//输出结果:false
// 第二种方式
console.log(Array.isArray(arr));//输出结果:true
console.log(Array.isArray(obj));//输出结果:false
2 添加或删除数组元素
| 方法名 | 功能描述 | 返回值 |
|---|---|---|
| push(参数1) | 数组末尾是一个或多个元素,会修改原数组 | 返回数组的新长度 |
| unshift(参数1) | 数组开头添加一个或多个元素,会修改原数组 | 返回数组的新长度 |
| pop() | 删除数组的最后一个元素,若是空数组则返回undefined,会修改原数组 | 返回删除元素的值 |
| shift() | 删除数组的第一个元素,若是数组则返回undefined,会修改原数组 | 返回读一个元素的值 |
示例代码:
// push
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.push('red'));// 返回的是数组长度 输出结果为:5
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white', 'yellow',
'red']
// unshift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.unshift('red', 'blue'));// 返回的是数组长度 输出结果为:6
console.log(arr);// 修改了原来的数组 输出结果为['red', 'blue', 'pink', 'black',
'white', 'yellow']
// pop
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.pop());// 返回的是删除的元素 输出结果为:yellow
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']
// shift
var arr = ['pink', 'black', 'white', 'yellow']
console.log(arr.shift());// 返回的是删除的元素(第一个) 输出结果为:pink
console.log(arr);// 修改了原来的数组 输出结果为['pink', 'black', 'white']
案例
案例需求: 要求在包含工资的数组中,剔除工资达到 2000 或以上的数据,把小于 2000 的数重新放
到新的数组里面。
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);// 相当于:newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
数组排序
| 方法 | 功能描述 |
|---|---|
| reverse() | 颠倒数组中元素的位置,该方法会改变原来数组的顺序,返回到新的数组中 |
| sort() | 对数组中的元素进行排序,该方法会改变原来数组,返回到新的数组中 |
示例代码:
##### sort有两种情况:
##### 1. 不传参数
##### 2. 传参数:参数是用来指定按某种顺序进行排列的函数
##### 即 a 和 b 是两个将要被比较的元素
// reverse
var arr = ['red', 'blue', 'green']
console.log(arr.reverse());//输出的结果为:['green', 'blue', 'red']
console.log(arr);// 改变原数组['green', 'blue', 'red']
// sort: 如果调用该方法时没有使用参数,按照字符编码的顺序进行排序。
var arr1 = [1, 4, 5, 6, 73, 32, 22, 15];
// 不传参数的情况
console.log(arr1.sort());//输出的结果为:[1, 15, 22, 32, 4, 5, 6, 73]
// 传参数:参数是用来指定按某种顺序进行排列的函数
/*
即 a 和 b 是两个将要被比较的元素:
*/
arr1.sort(function (a, b) {
// return b - a;//降序 // [73, 32, 22, 15, 6, 5, 4, 1]
return a - b;//升序 // [1, 4, 5, 6, 15, 22, 32, 73]
})
console.log(arr1);
数组索引
在开发中,若要查找指定的元素在数组中的位置,可以利用Array对象提供的检索方法。检索方法如下:
示例代码:
indexOf()
-- 参数 1 :要查找的元素
-- 参数 2 :开始查找的位置
-- 注意: 如果第二个参数是-1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查
找,以此类推。
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// 输出结果为: 1
// 找到第二个bison的索引
console.log(beasts.indexOf('bison', 2 ));
// 输出结果为: 4
console.log(beasts.indexOf('giraffe'));
// 输出结果为: -1
lastIndexOf() -- 如果该值大于或等于数组的长度,则整个数组会被查找。 -- 如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。 -- 如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// 输出结果为: 3
console.log(animals.lastIndexOf('Tiger'));
// 输出结果为: 1
案例:数组去重
案例需求: 要求在一组数据中,去除重复的元素
// 声明数组
function unique(arr) {
var newArr = [];
// 遍历数组
for (var i = 0; i < arr.length; i++) {
// 判断新数组中是否有原数组中的元素
// indexOf 结果为-1表示没有该元素
if (newArr.indexOf(arr[i]) === -1) {
// 没有的话就把该元素push到新数组中
newArr.push(arr[i])
}
}
return newArr;
}
// 调用数组
var res = unique([1,2,3,4,4,5,9,5])
console.log(res);
数组转换为字符串
在开发中,可以利用数组对象的join()和toString()方法,将数组转换为字符串方法
| 方法 | 功能概述 |
|---|---|
| toString() | 把数组转换为字符串,逗号分隔每隔一项 |
| join("分隔符") | 将数组所有元素连接到一个字符串中 |
示例代码:
toString()
// toString
var arr = ['a', 'b', 'c']
console.log(arr.toString());// 输出结果为:a,b,c
join -- 参数可选:指定一个字符串来分隔数组的每个元素 -- 如果需要,将分隔符转换为字符串()小括号里面填写的是指定的分隔符 -- 如果省略,数组元素用逗号(,)分隔。 -- 如果 separator 是空字符串(''),则所有元素之间都没有任何字符
// join
console.log(arr.join());// 输出结果为:a,b,c
console.log(arr.join(''));// 输出结果为:abc
console.log(arr.join('-'));// 输出结果为:a-b-c
其他方法
| 方法 | 功能描述 |
|---|---|
| fill() | 用一个固定值填充数组中指定范围下标范围的全部元素 |
| splice() | 通过删除或替换现有元素或者添加新的元素来修改数组,返沪被删除项目的新数组 |
| slice() | 数组截取,参数为slice(begin,end)包含了begin但不可包含end,返沪被截取项目的新数组 |
| concat() | 连两个或者不能影响数组,返回一个新数组 |
fill -- 参数:value start end -- value:用来填充数组元素的值 -- start:基于零的索引,从此开始填充,转换为整数。 -- end:基于零的索引,在此结束填充,转换为整数。fill() 填充到但不包含 end 索引。
// fill
const array1 = [1, 2, 3, 4];
// 填充0,从数组索引2(包含)开始到4(不包含)结束
console.log(array1.fill(0, 2, 4));
// 输出结果为: Array [1, 2, 0, 0]
// 填充5,从数组索引1(包含)开始
console.log(array1.fill(5, 1));
// 输出结果为: Array [1, 5, 5, 5]
// 填充6
console.log(array1.fill(6));
// 输出结果为: Array [6, 6, 6, 6]
splice -- 参数:start deleteCount item1... -- start:执行修改的开始位置(从0计数) -- deleteCount:整数,表示要移除的数组元素的个数 -- item1:要添加进去数组的元素
// 从索引 2 的位置开始删除 0 个元素,插入“drum”
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(2, 0, "小红");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["小米", "小明", "小红", "小张", "小李"]
// 被删除的元素:[], 没有元素被删除
// 从索引 2 的位置开始删除 0 个元素,插入“drum”和 "guitar"
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(2, 0, '小刚', '小蔡');
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["小米", "小明", "小刚", "小蔡", "小张", "小李"]
// 被删除的元素:[], 没有元素被删除
// 从索引 3 的位置开始删除 1 个元素
var myFish = ["小米", "小明", "小刚", "小蔡", "小张", "小李"];
var removed = myFish.splice(3, 1);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小米', '小明', '小刚', '小张', '小李']
// 被删除的元素:['小蔡']
// 从索引 2 的位置开始删除 1 个元素,插入“trumpet”
var myFish = ["小米", "小明", "小刚", "小蔡", "小张", "小李"];
var removed = myFish.splice(2, 1, "小兰");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小米', '小明', '小兰', '小蔡', '小张', '小李']
// 被删除的元素:["小刚"]
// 从索引 0 的位置开始删除 2 个元素,插入"parrot"、"anemone"和"blue"
var myFish = ["小米", "小明", "小张", "小李"];
var removed = myFish.splice(0, 2, '小兰', '小蔡', '小刚');
console.log(myFish);
console.log(removed);
slice
-- 参数:begin end
-- begin : 从该索引开始提取原数组元素(包含)
-- end : 在该索引处结束提取原数组元素(不包含)
// 运算后的 myFish: ['小兰', '小蔡', '小刚', '小张', '小李']
// 被删除的元素:['小米', '小明']
// 从索引 2 的位置开始删除 2 个元素
var myFish = ['小兰', '小蔡', '小刚', '小张', '小李'];
var removed = myFish.splice(myFish.length - 3, 2);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡', '小李']
// 被删除的元素: ['小兰', '小蔡', '小李']
// 从索引 2 的位置开始删除所有元素
var myFish = ['小兰', '小蔡', '小刚', '小张', '小李'];
var removed = myFish.splice(2);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ['小兰', '小蔡']
// 被删除的元素:['小刚', '小张', '小李']
slice -- 参数:begin end -- begin : 从该索引开始提取原数组元素(包含) -- end : 在该索引处结束提取原数组元素(不包含)
// 从索引 2 的位置开始截取
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张', '小李']
// 从索引 2 的位置开始 截取到 索引4 的位置(包含2 不包含4)
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2, 4);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张']
// 从索引 2 的位置开始 截取到 数组的倒数第一个元素(不包含)
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(2, -1);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小刚', '小张']
// 截取后两个元素
var array3 = ['小兰', '小蔡', '小刚', '小张', '小李'];
var getArr = array3.slice(-2);
console.log(array3);
console.log(getArr);
// 运算后的 array3:['小兰', '小蔡', '小刚', '小张', '小李'];
// 被截取的元素: ['小张', '小李']
concat
字符串对象
字符串对象的使用
字符串对象使用new String()来创建,在String构造函数中传入字符串,这样就会在返回的字符串
对象中保存这个字符串。
var str = new String('今天天气真好阿')
console.log(str)
console.log(str.length);//输出结果为:7
// 看不到常见的属性和方法
var str1 = '今天天气真好阿'
console.log(str1)
根据字符返回位置
| 成员 | 作用 |
|---|---|
| charAt(index) | 获取index位置的字符,位置从0开始计算 |
| charCodeAt(index) | 获取index位置的字符的asci码 |
| str[index] | 获取指定位置出的字符和charAt等 |
示例代码:
// 参数1:要查找的元素
// 参数2:开始查找的位置
var beaste=['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beaste.indexOf('bison'))
//输出结果为1
//找到第二个bison的索引
console.log(beaste.indexOf('bison',2));
//输出结果为4
console.log(beaste.indexOf('sdasd'));
//输出结果为-1
var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
//3
console.log(animals.lastIndexOf('Tiger'));
//1
练习:
var url = 'www.martinhan.com/login?name=…'; 最后的输出结果为{name:zs;age:18}
var url = 'http://www.martinhan.com/login?name=zs&age=18';
function getParams(url) {
var index = url.indexOf('?') + 1;
var params = url.substr(index);
console.log(params);
var arr = params.split('&');
var o = {};
for (var i = 0; i < arr.length; i++) {
var newArr = arr[i].split('=');
o[newArr[0]] = newArr[1];
}
return o;
}
console.log(getParams(url));