js数组篇--常用方法

js数组篇--常用方法

1、创建数组的2种方式

// 第一种创建方式
let colors= new Array()
let colors= new Array(20) //length为20的数组
let colors= new Array('red', 'blue', 'green')//创建3个字符串的数组
// 第二种创建方式
let colors = []
let colors = ['red', 'blue', 'green'] //创建3个字符串的数组

2、用数组length为末尾移除或者新增 

let colors = ['red', 'blue', 'green']
colors.length = 2  //移除末尾一项
console.log(color[2]);  //undefined
// /*数组新增 */
let colors = ['red', 'blue', 'green']
colors.length = 4
console.log(color[3]);  //undefined
let colors = ['red', 'blue', 'green']
colors[color.length] = 'black'  //在index3新增
colors[color.length] = 'brown' //在index4新增

3、检测数组

ECMAScript3 问题在于假定只有全局执行环境，一个网页多个框架多个不同的全局执行环境，就会存在存在不同的本版的Arra构造函数比如一个框架传向两一个框架传入数组，传入的数组在第二个数组创建数组分别具有不同构造函数

   if( value instanceof Array){

   }

  ECMAScript5新增了Array.isArray

  if(Array.isArray){

  }

4、转换方法

let names = ['a', 'b', 'c']
console.log(names.toString())  
console.log(111, names.valueOf())
console.log(names)
let person1={
    toString: function(){
        return "apple-1"
    },
    toLocaletoString: function(){
        return "banana-1"
    }
}
let person2={
    toString: function(){
        return "apple-2"
    },
    toLocaletoString: function(){
        return "banana-2"
    }
}
let people = [person1, person2]
console.log(33, people)
console.log(44, people.toString())
console.log(55, people.toLocaleString())

5、栈方法 队列方法 

 

数据结构访问规则LIFO(Last-In-First-Out)
let fruit = []
let count = fruit.push('apple', 'watermelon', 'strawberry') //count增加的数量
console.log(count, fruit)
let item = fruit.pop() // 取得删除的最后一项得值
console.log(item, fruit, fruit.length) //
队列数据结构访问规则FIFO(First-In-First-Out)
let fruit = ['apple', 'watermelon', 'strawberry']
let item = fruit.shift() //count 增加的数量  shift区删除前面第一项的值
console.log(item, fruit)
let count = fruit.unshift('grape','pear') // 获取推入的数量最后一项得值
console.log(count, fruit, fruit.length) //

6、重排序方法

let value = [1,2,3,4,5]
value.reverse()//反数组项的顺序[5,4,3,2,1]
console.log(value)
// sort方法调调用每个数组项的toString()转型方法，然后比较得到的字符串
let values = [0,1,5,10,15]
values.sort()//反数组项的顺序 [0, 1, 10, 15, 5]
console.log(values)  //
升序排序   [0, 1, 5, 10, 15]
function compare(val1, val2){
    console.log(222, val1, val2)
    if(val1 < val2){
        return -1
    } else if(val1 > val2) {  
        return 1
    } else{
        return 0
    }

}
let values = [0,1,5,10,15]
values.sort(compare)
console.log(11, values)  //[0, 1, 5, 10, 15]

    降序排序
 function compare(val1, val2){
    console.log(222, val1, val2)
    if(val1 < val2){
        return 1
    } else if(val1 > val2) {  
        return -1
    } else{
        return 0
    }

}
       
let values = [0,1,5,10,15]
values.sort(compare)
console.log(11, values)   // [15, 10, 5, 1, 0]
function compare(value1, value2){
    return value2-value1   //降序
}
let values = [0,1,5,10,15]
values.sort(compare)
console.log(33, values)   // [15, 10, 5, 1, 0]

7、数组的操作的方法

结束位置小于结束位置返回空数组，经过测试0除外， colors.slice(0, -4)并没有返回空数组colors.slice(-6, -4)

 

/**  slice（）接受不了一到两个参数，一个参数指定位置到数组末尾所有项
*  两个参数：起始位置，结束位置（不包括结束位置），不影响原数组
*/
let colors = ["red", "green", "blue", "yellow", "black", "brow"]
let colors2 = colors.slice(1)
let colors3 = colors.slice(1, 4)
console.log(11, colors2) // ["green", "blue", "yellow", "black", "brow"]
console.log(22, colors3)  //["green", "blue", "yellow"]
let colors3 = colors.slice(0, -4)   // ["red", "green"]
let colors3 = colors.slice(-6, -4) //["red", "green"]
let colors3 = colors.slice(4, 3)  //[]
let colors3 = colors.slice(4, 3)
console.log(55, colors3) 

/**  splice  
*  删除  指定2个参数： 删除开始位置和删除项
*  插入  3个参数： 开始位置， 0（要删除的项数），插入的项数0-项
*  替换  3个参数： 开始位置， 要删除的项数，插入的项数可以删除项数不一致
*/
let colors = ["red", "green", "blue", "yellow", "black", "brow"]
let remove = colors.splice(0, 1)
console.log(colors) //["green", "blue", "yellow", "black", "brow"]
console.log(remove) //["red"]
let colors = ["red", "green", "blue", "yellow", "black", "brow"]
let remove = colors.splice(0, -1)// 看到源码有着用法好奇打印了一下["red", "green", "blue", "yellow", "black", "brow"]

//插入
let colors = ["red", "green", "blue"]
let remove = colors.splice(1, 0, "blue", "yellow")
console.log(colors) //  ["red", "blue", "yellow", "green", "blue"]
console.log(remove) // []
//替换
let colors = ["red", "green", "blue"]
let remove = colors.splice(1, 1, "black", "yellow")
console.log(colors) //  ["red", "black", "yellow", "blue"]
console.log(remove) // ["green"]

8.位置方法

位置方法前后索引从0开始 indexOf数组0开头向后查找，lastIndexOf数组末尾开始向前查找

 两个方法都是接受两个参数：要查找的项和（可选）表示查找起点位置的索引

 两个方法都要返回查找项在数组的位置，或者没找到返回数组-1

let numbers = [1,2,3,4,5,4,3,2,1]
console.log(numbers.indexOf(4)) //3
console.log(numbers.lastIndexOf(4)) //5
console.log(numbers.indexOf(4, 4)) //5
console.log(numbers.lastIndexOf(4, 4)) //3

补充知识点

Array.prototype.slice.call(arguments)理解

 Array.prototype.slice.call(arguments)能将具有length属性的对象(key值为数字)转成数组。[]是Array的示例，所以可以直接使用[].slice（）方法。

var obj = {0:'hello',1:'world',length:2};
console.log(Array.prototype.slice.call(obj,0));//["hello", "world"]

var obj = {0:'hello',1:'world'};//没有length属性
console.log(Array.prototype.slice.call(obj,0));//[]

数组的判断方法

1、从原型入手，Array.prototype.isPrototypeOf(obj);
利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false
2.Array.isArray()方法
Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false