【JavaScript总结】之数组

创建数组

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() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

1. 删除功能，第一个参数为删除的起始位置，第二个参数为要删除几个。（用法：array.splice(index,num)，返回值为删除内容，array为结果值。）
2. 插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。（用法：array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值。）
3. 替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。（用法：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);