js数组的常见属性和方法_计算属性里面能写push方法吗-CSDN博客

属性

length 是Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数，并且总是大于数组最高项的下标，不只是可读。

Array.prototype 属性表示 Array 构造函数的原型，并允许您向所有Array对象添加新的属性和方法。

检查数组

Array.isArray()：最终判断这个值是不是数组

转换方法

valueof()：返回的还是数组本身

toString()：返回的由每个值的字符串形式拼接而成的一个以逗号分隔的字符串

join(),通过使用这个方法则可以使用不同的分隔符来构造这个字符串

alert()：输出数组的时候会自动的调用toString();

栈方法（对数组的本身的修改）

push:代表后进,后面再添加是所以叫后进

push(),把参数渐渐添加的末尾，并且返回添加后的数值长度

pop(),从数组末尾移除最后一项,返回移除的项

从而待到了先进后出，后进push先出pop

队列方法(对数组的修改)

push(),把参数渐渐添加的末尾，并且返回添加后的数值长度

shift(),从数组的前端移除一项，返回移除的项

从而达到了后进push后出也就是前面的先出shift()

外加
unshift()可以在数组前端添加任意个项,并返回数组的长度

重排序方法

reverse():反转

sort():应为这个得到的是toString后的数组的值全是字符串的比较，所以字符串的比较（字符编码值）而不是数值的字面量

所以有了给sort()添加一个比较函数的方法

操作方法

concat()：在没有参数的情况下复制一个原来的数组，如果有参数，则会吧参数（字符串）添加到数组中，就算参数是一个数组也是一项，一项的加载末尾，对原数组无印象

slice（指定的开始位置，结束的位置）：这里面的位置代表的是数组项所在的位置从0开始，该方法会返回一个在这个区间之间的项，不包括最后一项，这个方法不印象原数组

splice（要删除或插入第一项的位置，要删除的项数，和插入任意数量的项）

从而可以达到删除，插入，替换的能力

位置方法

indexOf(要查找的项（全等比较），查找的启始的位置)

在没找的情况下返回-1，如果有就返回找到项所在的位置

迭代和归并的方法

下面是具体是案例操作
创建数组的基本方式有两种
1.使用Array()构造函数

 var colors = new Array(20);
    console.log(colors.length);//20
    创建3个字符串
    var colors = new Array("z","q","x");
    当Array的参数为一个数，为数值和为其他是不同的
    var colors = new Array(3);
    console.log(colors.length);//3
    var colors  =new Array("zqx");
    console.log(colors.length);//1这里也说明了数组不等同于变量不会提前编译;

2.数组字变量表示法(与对象一样，在使用数值字面量表示法时，也不会调用Array构造函数)

    var colors = ["z","q","x"];//创建一个3个字符串的数组
    console.log(colors);//3
    与对象一样,在使用数组字面量的表示法时,也不会调用Array构造函数
    var colors = [];//创建以个空数组
    console.log(colors);//0
    var colors = [1,2,]//不可以这样！这样会创建一个包含2或3项的数组，chrome浏览器是显示3;
    console.log(colors);//2
    在读取和设置数组的值时，用[key]可以显示，修改，新增
    var colors = ["red","blue","green"];
    console.log(colors[0])//显示第一项"red"
    colors[2] = "black";  //修改
    console.log(colors[2])//"black"
    colors[3] = "brown";  //新增
    console.log(colors[3])//"brown"
    注：length并不是只读的可以从数组的末尾或向数组中添加新项
    var colors = ["red","blue","green"];
    colors.length = 2;    //去除
    console.log(colors[2]); //undefined;
    var colors = ["red","blue","green"];
    colors.length = 4;    //添加
    console.log(colors[4]); //undefined;
    给数组最后一项添加一个值
    var colors = ["red","blue","green"];
    colors.length = 4;    //添加
    colors[colors.length] = "black"//给数组最后一项添加值

检查数组

Array.isArray()
if(Array.isArry(value)){}//IE9以上支持

转换方法

每个对象都具有 toLocaleString()，toString(),valueOf();
其中调用valueOf()返回的还是数组的本身，
toString()方法会返回由数组中每个值的字符串形式(就算原来的是数值)拼接而的一个以逗号分隔的字符串；

    var colors = ["red","blue","green",5];
    console.log(colors.toString());//""red","blue","gree","5""
    console.log(colors.valueOf());//(4) ["red", "blue", "green", 5]返回数组本身
    插曲：由于alert()要接受字符串参数所以他会在后台调用toString()方法

join():数组的链接符

如果使用join()方法，则使用不同的分隔符来构造这个字符串

    var colors = ["red","blue","green",];
    console.log(colors.join(","));//"red,blue,green"
    console.log(colors.join("||"));//"red||blue||green"
    这里用的是toString()方式输出

栈方法： 是一种可以限制插入和删除的数据结构(后进先出)，栈的方法走插入和移除只发生在一个位置——栈的顶部
push()和pop()
push():方法可以接收任意数量的参数，把他们逐个添加到数组的末尾，并返回修改后数组的长度;
pop():方法则从末尾移除最后一项(不管怎么样就是最后一项),减少数组的length，返回移除的值;

var colors = ["red","green"]
var cd = colors.push("brown");//返回数值最新长度
console.log(colors[colors.length-1]);//brown
console.log(colors[cd-1]);//brown 这里说明了push()返回的是数值的长度
var move = colors.pop();//返回移除的值
console.log(move);//brown

队列方法(先进先出):

shift(),他能够移除数值中的第一个项，同时将数组长度减1,返回移除的第一项
var colors  = new Array();
var count = colors.push("red","green");//返回修改后的长度
console.log(count);//2
count = colors.push("black");
var item = colors.shift();//返回移除的第一项
console.log(item);//"red"

外加

unshift()可以在数组前端添加任意个项,并返回数组的长度
总结：
添加的都是返回添加后的数组长度;移除的都是返回移除的项

重新排序的方法

1.reverse()方法会反转数值项的顺序;

var values = [1,2,3,4,5];
console.log(values.reverse());//(5) [5, 4, 3, 2, 1]

2.sort()方法按升序排列数组项-即最小的在最前面会调用toString()转型的方法，然后比较得到的字符串，

以确定如何排序

var values = [2,3,14,141,5];
console.log(values.sort());//返回升序[14, 141, 2, 3, 5]
但sort()可以添加参数：一个比较函数compare();//具体怎么用还没搞明白
function compare(value1 , value2){
    if(value1 < value2){
        return -1;
    } else if(value1 > value2){
        return 1;
    } else{
        return 0;
    }
}
var value = [8,0,1,5,10];
value.sort(compare); //其实就是要移动是时候给sort函数返回一个为正的参数值,的这样一个机理
console.log(value);//[0, 1, 5, 8, 10]
reverse()和sort()返回的都是经过了排序后的数组

数组的操作方法

1.concat():返回基于当前数组所复制的一个新数组，当方法有参数的时候是向新数组的某位添加数组项，而push()是返回原数组添加后的长度,因为实际他就是在复制一个数值的同时,判断他是否要在末尾添加一些项

var values = [1,2,3,4,5];
console.log(values.push("1213",12,"zqx"));//8

var values = [1,2,3,4,5];
console.log(values.concat("1213",12,"zqx"));
//0: 1
//1: 2
//2: 3
//3: 4
//4: 5
//5: "1213"
//6: 12
//7: "zqx"
//length: 8

2.slice():他能基于当前数组中的一个或多个来创建一个新的数值,并不影响原来的数组
参数是数值在数组中的位置,该方法返回包含起始项,但不包含结尾项的新数组

                0      1      2       3        4
var colors = ["red","green","blue","yellow","purple"];
var colors3 = colors.slice(1,4);
console.log(colors3);//["green", "blue", "yellow"]有第1项没第4项

3.splice():他可以向数组中部插入项，但使用这种方式有3中情况,
返回的值是删除的项的数组,如果没有删除项,那么返回一个空数值,所以对实际的数组有影响
参数3个：第一要删除的插入的(数组项所在的)位置，第二要删除的项数，第三和要查入的项

删除：splice(0,1)，从第一项开始删除一项
var colors = ["red","green","blue"]
console.log(colors.splice(0,1));//["red"]
console.log(colors);// ["green", "blue"]
插入：splice(0,0,"red","blue"),从第一项开始删除零项，在第一项后面插入"red","blue";
var colors = ["red","green","blue"]
console.log(colors.splice(0,0,"reg","red"));//[]因为没有删除项
console.log(colors);//["reg", "red", "red", "green", "blue"]
替换：splice(0,2,"red","blue")，从第一项开始删除二项，在第一项后面插入"red","blue"，相当于替换;
var colors = ["red","green","blue"]
console.log(colors.splice(0,2,"reg","red"));// ["red", "green"]
console.log(colors);//["reg", "red", "blue"]

数组的位置方法

indexOf()和lastIndexOf()都接收俩个参数：要查找的项和表示查找位置的索引，索引代表从什么位置开始找
返回项所在数组中的位置，当搜索不到的时候返回-1

删除：splice(0,1)，从第一项开始删除一项
var colors = ["red","green","blue"]
console.log(colors.splice(0,1));//["red"]
console.log(colors);// ["green", "blue"]
插入：splice(0,0,"red","blue"),从第一项开始删除零项，在第一项后面插入"red","blue";
var colors = ["red","green","blue"]
console.log(colors.splice(0,0,"reg","red"));//[]因为没有删除项
console.log(colors);//["reg", "red", "red", "green", "blue"]
替换：splice(0,2,"red","blue")，从第一项开始删除二项，在第一项后面插入"red","blue"，相当于替换;
var colors = ["red","green","blue"]
console.log(colors.splice(0,2,"reg","red"));// ["red", "green"]
console.log(colors);//["reg", "red", "blue"]

关键（引用类型的位置值的比较）

：在比较第一个参数的时候与数值中的每一项的时候，会使用全等符号

关于引用类型的比较,查找，因为为全等所以,不但值要相同，而且值所在的位置也要相同

var person = { name: “Nicholas” };
var people = [{ name: “Nicholas” }];
var morePeople = [person];
console.log(people.indexOf(person))//-1找不到返回-1
console.log(morePeople.indexOf(person))//0，第0位

为什么会找不到返回-1呢？因为值一样但不是同一个对象，相当于person的值在另一个对象的里面，但people对象中有一个一样的值，但二者不相同对象不一样所以===比较的时候就会返回flast；

补充ES6 2019.4.16

扩展运算符

扩展运算符用三个点(…)表示,从字面上理解，它的功能就是把数组扩展开来,具体形式如下：

let arr = [1, 2, 3];
console.log(...arr);  //打印结果 1 2 3
//等价于
console.log(1,2,3);

本质： 他可以吧数组以join(",")的形式分开

作用1： 可以用这个扩展运算符把数组里面的元素展开，分别传给函数的形参

let arr = [4, 5, 6];
function Fn(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
    return a + b + c;
}
result = Fn(...arr);
console.log(result);

其实这个也没必要我们可以用解析赋值，其实在这个情况下会更简单

扩展运算符可以和正常参数结合起来使用，非常的灵活（根据K值一一对应）

let arr = [4, 5, 6];
function Fn(a, b, c, d, e, f) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d, e, f)
}
Fn(1,...arr, 2, 3);  //注意一一对应关系：1->a;...arr->b,c,d;2->e; 3->f

但是需要注意的是：在解析赋值的时候扩展运算符只可以放最后

作用2： 复制数组

如果把一个数组直接赋值给另一个数组，那么会产生引用，相互影响，在es5中，只能通过变通的方式复制数组，但在es6中，我们可以通过扩展运算符来实现数组复制

//直接赋值 产生引用
let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr)  // [1, 2, 3, 4]
 
//es5 中复制数组
let arr3 = arr.concat();
console.log(arr3)
 
//es6中复制数组
let arr4 = [...arr];
arr4.push(5);
console.log("arr4",arr4);  //[1,2,3,5]
console.log("arr",arr)   //[1,2,3]  和arr4并不会相互影响

作用3： 合并数组

let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr,...arr2])  // [1, 2, 3, 4, 5, 6]

作用4： 和解构赋值结合,用于生成数组，但是这里的数组必须放在最后

let [a, b, ...rest] = [1, 2, 4, 5, 6, 7]
console.log(rest);  //[4, 5, 6, 7]

Array.from

本质： Array.from可以把类数组转成真正的数组

<ul>
    <li>nodeing_1</li>
    <li>nodeing_2</li>
    <li>nodeing_3</li>
    <li>nodeing_4</li>
    <li>nodeing_5</li>
    <li>nodeing_6</li>
</ul>
<script>
    let aLi = document.getElementsByTagName('li')
    for(let i in aLi){
        aLi[i].style.color = "red"  //执行报错
    }
</script>

这里的aLi并不是真正的数组他只是包含了0，1，2…但是他还有length属性，也就是因为他有length属性所以i就会有可能等于length就会报错，也同时当我们用遍历的时候虽然他不是数组但是也可以返回length的长度，所以也说明了不是说可以返回length长度的值就说明有是一个数组

我们就可以使用.from()方法

let aLi = document.getElementsByTagName('li')
for(let i in Array.from(aLi)){
    aLi[i].style.color = "red"
}

Array.of

本质： 这个方法可以将一组数值转换成数组

let arr = Array.of(1, 2, 3,4)
console.log(arr) // [1,2,3,4]

题外话： 不知道大家这里有没有注意到这里的Array没有new 为什么没有nwe呢？其实就是因为他其实就已经是返回了一个对象了，那个对象是会根据我们的参数返回一个数组给我们，new(工厂模式）其实效果是一样的，没有什么区别

当构造函数自己有return的时候： 当构造函数中自身的retuen的是数值那么只是会结束函数执行，但是返回值还是那个定义的{}，如果自带的return是一个函数，那么返回的是那个自带的函数

但是这里我们直接用Array()不就好了吗？为什么还要of?其实这里只是为了解决一个冲突，只有在Array的参数大于2个的时候，才是返回数组的，当参数为1个的时候是返回length为多少的数组，而of就完美的解决了这个冲突

//Array的行为不统一，根据参数的不同返回的结果不一样
let arr = Array(4)
let arr2 = Array(1, 3)
let arr3 = Array(1,3,4,5);
console.log(arr, arr2, arr3)      // [empty × 4] 、[1, 3]、 [1, 3, 4, 5]

let arr = Array.of(4)
let arr2 = Array.of(1, 3)
let arr3 = Array.of(1,3,4,5)
console.log(arr, arr2, arr3) // [4]  [1, 3]  [1, 3, 4, 5]

copyWithin

本质： 将数组内部指定位置的元素复制，在替换掉指定的目标

let arr = [1, 2, 3, 4, 5]
//第一个参数为目标起始位置 第二个参数为被复制元素的开始位置，第三个参数为被复制元素的结束位置
//将下标3到4的元素 复制到下标为1的位置 原来位置的元素被覆盖
arr.copyWithin(0, 3, 4)  //[4,2,3,4,5]
console.log(arr)

find和findIndex

find方法用来查找数组中符合条件的第一个元素，接收一个回调函数，返回那个值

findIndex的用法和find类似，返回的是索引位置，而不是具体的值

let arr = [1, 2, 3, 4, 5]
    let num = arr.find(function (v,i,a) {
        return v > 3
    })
    console.log(num)  //4

let arr = [1, 2, 3, 4, 5]
    let num = arr.findIndex(function (v,i,a) {
        return v > 3
    })
    console.log(num)  //3

fill

本质： 填充吧数组中是全部项都改为fill中参数的值

let arr = [1,2,8,8,8]
arr.fill(1)
console.log("arr",arr)

.entries、keys和values

let arr = [1, 2, 3, 4, 5];
//遍历键名
for(let index of arr.keys()){
    console.log(index)
}
 
//遍历值
for(let v of arr.values()){
    console.log(v)
}
//遍历键/值对
let arr = [1, 2, 3, 4, 5];
for(let index of arr.keys()){
    console.log(index)
}

解释：这个也就是for in 与 for of 的区别这里大家打印一下就知道3种的区别了

includes

本质： 判断是否含有某一个值,返回boolear

区别： 比indexOf好，至少再语义化上

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(7)) //false
console.log(arr.includes(1)) //true