创建数组
JavaScript 中创建数组有两种方式:
- 利用 new 创建数组
- 利用数组字面量创建数组
①利用 new 创建数组🔥
var 数组名 = new Array();
var arr = new Array(); //创建一个新的空数组
②利用数组字面量创建数组🔥
// 1.利用数组字面量方式创建空的数组
var 数组名 =[];
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 =['小白','小黑','小黄','瑞奇'];
// 3.数组中可以存放任意类型的数据,例如字符串,数字,布尔值等
var arrStus =['小白',12,true,28.9];
数组中新增元素
①通过修改 length 长度新增数组元素
- 可以通过修改 length 长度来实现数组扩容的目的
- length 属性是可读写的
var arr = ['red', 'green', 'blue', 'pink'];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
②通过修改数组索引新增数组元素
- 可以通过修改数组索引的方式追加数组元素
- 不能直接给数组名赋值,否则会覆盖掉以前的数据
- 这种方式也是我们最常用的一种方式
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';
console.log(arr);
删除指定数组元素🔥
将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后,形成一个不包含 0 的新数组。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for(var i = 0; i <arr.length; i++){
if(arr[i] != 0){
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
翻转数组🔥
将数组 [‘red’, ‘green’, ‘blue’, ‘pink’, ‘purple’] 的内容反过来存放
// 把旧数组索引号的第4个取过来(arr.length - 1),给新数组索引号第0个元素(newArr.length)
var arr = ['red','green','blue','pink','purple'];
var newArr = [];
for (var i = arr.length -1; i>=0; i--){
newArr[newArr.length] = arr[i];
}
console.log(newArr);
数组排序🔥
冒泡排序
var arr = [5,4,3,2,1];
for (var i = 0; i < arr.length-1; i++){ //外层循环管趟数,5个数共交换4躺
for (var j = 0; j <= arr.length - i - 1; j++){
//里层循环管每一趟交换的次数
//前一个和后面一个数组元素相比较
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
检测是否为数组🔥
- instanceof 运算符,可以判断一个对象是否属于某种类型
- Array.isArray() 用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法
添加删除数组元素🔥
数组排序🔥
// 1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);
// 2.数组排序(冒泡排序)
var arr1 = [3,4,7,1];
arr1.sort();
console.log(arr1);
// 对于双位数
var arr = [1,64,9,61];
arr.sort(function(a,b) {
return b - a; //降序的排列
return a - b; //升序
}
)
数组索引🔥
//返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号
//它只发返回第一个满足条件的索引号
//如果找不到元素,则返回-1
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue')); // 2
console.log(arr.lastIndexOf('blue')); // 4
数组去重
分析:把旧数组里面不重复的元素选取出来放到新数组中,重复的元素只保留一个,放到新数组中去重。
核心算法:我们遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否则不添加。
我们怎么知道该元素没有存在? 利用 新数组.indexOf(数组元素) 如果返回是 -1 就说明 新数组里面没有改元素
// 封装一个去重的函数 unique 独一无二的
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);
数组转化为字符串🔥
// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割
console.log(arr1.join('-')); // green-blue-red
console.log(arr1.join('&')); // green&blue&red
其他方法
其中
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。concat 方法不会改变 this 或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
连接三个数组
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);
console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
slice方法:
slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)即左闭右开。原始数组不会被改变。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]
console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']
splice()
splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
- 删除功能,第一个参数为删除的起始位置,第二个参数为要删除几个。(用法:array.splice(index,num),返回值为删除内容,array为结果值。)
- 插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)。(用法:array.splice(index,0,insertValue),返回值为空数组,array值为最终结果值。)
- 替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)。(用法:array.splice(index,num,insertValue),返回值为删除内容,array为结果值。)
const months = ['Jan', 'March', 'April', 'June'];
console.log(months.splice(1, 3)); //['March', 'April', 'June']
console.log(months); //['Jan']
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
其中splice()方法和split()方法容易混:下面我们来做一个区分
splice() 的主要用途是向数组的中部插入项,而split()方法可以基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中。
split() :
split() 方法用于把一个字符串分割成字符串数组。
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"
const chars = str.split('');
console.log(chars[8]);
// expected output: "k"
const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]
对于是否改变数组:
改变原数组的:
shift:将第一个元素删除并且返回删除元素,空即为undefined
unshift:向数组开头添加元素,并返回新的长度
pop:删除最后一个并返回删除的元素
push:向数组末尾添加元素,并返回新的长度
reverse:颠倒数组顺序
sort:对数组排序
splice:splice(start,length,item)删,增,替换数组元素,返回被删除数组,无删除则不返回
不改变原数组的:
concat:连接多个数组,返回新的数组
join:将数组中所有元素以参数作为分隔符放入一个字符
slice:slice(start,end),返回选定元素
map,filter,some,every等不改变原数组
将字符串转为数组
- 方法1:使用split()方法
split()方法用于将给定字符串拆分为字符串数组,该方法是使用参数中提供的指定分隔符将其分隔为子字符串。 - 方法2:扩展运算符(…)
- 方法3:使用Array.from()方法
Array.from()方法是javascript中的一个内置函数,它从给定的数组创建一个新的数组实例。对于字符串,字符串的每个字母表都会转换为新数组实例的元素;对于整数值,新数组实例simple将获取给定数组的元素。
var str="Welcome to here !";
var n=Array.from(str);
console.log(n); // ['W','e','l','c','o','m','e','t','o','h','e','r','e','!']
var arr = 'aa,bb,cc,dd'
var newStr = [...arr]
console.log(newStr)
//打印结果 ["a", "a", ",", "b", "b", ",", "c", "c", ",", "d", "d"]
// 第一种 split拆分
"abc".split('')
==> ["a","b","c"]
// 第二种 [...]
[..."abc"]
==> ["a","b","c"]
Array.from("abc")
==> ["a","b","c"]
数组转化为字符串
1:join()方法用于把数组中的所有元素放入一个字符串
元素是通过指定的分隔符进行分隔的
// join()
var a= ["00", "01", "02", "03", "04"]
var b= a.join()
console.log(b)
console.log( typeof b) //string
//打印结果 00,01,02,03,04
// join('')
var a= ["00", "01", "02", "03", "04"]
var b= a.join('')
console.log(b)
console.log( typeof b)
//打印结果 0001020304
2:toString()方法可把一个逻辑值转换为字符串,并返回结果
var a= ["00", "01", "02", "03", "04"]
var c = a.toString(); //把数组转换为字符串
console.log(c)
console.log(typeof c); //返回字符串string,说明是字符串类型
//打印结果 00,01,02,03,04
toString()方法不可以指定分隔符,但是我们可以通过replace()方法指定替换
var a= ["00", "01", "02", "03", "04"]
var f = a.toString().replace(/,/gi,'-')
console.log(f)
//打印结果:00-01-02-03-04
3:toLocaleString()
把数组转换成本地约定的字符串
var a= ["00", "01", "02", "03", "04"]
var e = a.toLocaleString();
console.log(e)
console.log(typeof e);
//打印结果:00,01,02,03,04
伪数组转化真实数组的方法
伪数组的特点:
伪数组拥有数组的属性,
- 具有 length 属性 但length属性不是动态的,不会随着成员的变化而变化
- 按索引方式储存数据
- 不具有数组的push(), forEach()等方法
伪数组本质是一个 Object,而真实的数组是一个 Array。
伪数组的原型 Object.prototype 通过改变原型指向可以将伪数组转为真数组
常见的伪数组有哪些?
- 函数内部的 arguments,扩展操作符可以将 arguments 展开成独立的参数
- DOM 对象列表 如 通过document.getElementsByTagName() 获取的 dom元素
- dom.querySelectorAll等获取的NodeList类
- jQuery对象 如 $(‘div’)
伪数组转化为真实数组的方法:
1.这个方法的本质是将数组的原型对象上面的方法slice指向了伪数组(call方法的作用改变this的指向)
let arr = [].slice.call(伪数组)
let arr = Array.prototype.slice.call(pagis);
** 思考一下,既然call可以,那么bind和apply可以吗?
答案是bind不行,但是apply可以
let arr = [].slice.bind(obj)();
加个立即执行的话最后的结果也是可以的。
2.简单的循环(将伪数组里面的元素遍历取出来)
var arr1 = [],
len1 = 伪数组.length;
for (var i = 0; i < len1; i++) {
arr1.push(伪数组[i]);
}
3 …解构赋值
function args() {
let newArr = [...arguments];
console.log(newArr);
}
args(1, 2, 3, 23, 2, 42, 34);