js+es6的数组方法总结_综合

js的数组方法

1.toString()将数组转为字符串

var arr = ["小红", "小王", "小明"]
var str = arr.toString()
console.log('str: ', str)  // str:  小红,小王,小明

2.join()以特定字符把数组转为字符串

var arr = ["小红", "小王", "小明"]
var str1 = arr.join('|')
var str2 = arr.join()
console.log('str1: ', str1)  // str1:  小红|小王|小明 
console.log('str2: ', str2)  // str2:  小红,小王,小明

3.push()向数组尾部追加元素

var arr = ["小红", "小王", "小明"]
arr.push('李白')
console.log('arr: ', arr) // ["小红", "小王", "小明", "李白"]

4.unshift()向数组头部追加

 var arr = ["小红", "小王", "小明"]arr.unshift('李白')console.log('arr: ', arr) // ["李白", "小红", "小王", "小明"]

5.pop()删除并返回数组的最后一个元素

var arr = ["小红", "小王", "小明"]
var delArr = arr.pop()
console.log('arr: ', arr) // ["小红", "小王"]
console.log('delArr: ', delArr) // 小明

6.shift()删除并返回数组的第一个元素

var arr = ["小红", "小王", "小明"]
var delArr = arr.shift()
console.log('arr: ', arr) //  ["小王", "小明"]
console.log('delArr: ', delArr) // 小红

7. concat()用于连接数组

    var arr = ["小红", "小王", "小明"]var arr1 = ['1','2']var arr2 = ['3','4']var newArr = arr.concat(arr1).concat(arr2).concat('text')console.log('arr: ', arr) // ["小红", "小王", "小明"]console.log('newArr: ', newArr) //   ["小红", "小王", "小明", "1", "2", "3", "4", "text"]

8. splice()向数组添加或者删除元素

    var arr = ["小红", "小王", "小明"]// 一个参数代表，从index=1的位置开始删除元素，一直删到最后一个var arr1 = arr.splice(1)console.log('arr: ', arr)   // ["小红"]console.log('arr1: ', arr1) // ["小王", "小明"]

    // 一个参数代表，从index=1的位置开始删除元素，第二个参数代表要删除的元素个数var arr2 = arr.splice(1, 2)console.log('arr: ', arr)   // ["小红"]console.log('arr2: ', arr2) // ["小王", "小明"]

    var arr = ["小红", "小王", "小明"]// 从index=1的位置开始,替换2个元素，用3（第三个参数）替换var arr2 = arr.splice(1, 2, 3)console.log('arr: ', arr)   // ["小红", 3]console.log('arr2: ', arr2) // ["小王", "小明"]

9. slice()用于从数组选择元素

    var arr = ["小红", "小王", "小明"]// 该方法两个参数，第一个参数代表选择的元素起始位置坐标，第二个代表结束位置坐标// 返回的新数组不包含结束位置的元素// 该方法返回一个新数组，不会改变原有数组var arr2 = arr.slice(1, 3)console.log('arr: ', arr)   // ["小红", "小王", "小明"]console.log('arr2: ', arr2) // ["小王", "小明"]

10. reverse()用于颠倒数组中元素的顺序

    var arr = ["小红", "小王", "小明"]var arr2 = arr.reverse()// 该方法会改变原数组console.log('arr: ', arr)   // ["小明", "小王", "小红"]console.log('arr2: ', arr2) // ["小明", "小王", "小红"]

11. sort()方法用于数组排序

    var arr = [33,1,34,35,8,9]var arr2 = arr.sort()console.log('arr: ', arr)   // [1, 33, 34, 35, 8, 9]console.log('arr2: ', arr2) // [1, 33, 34, 35, 8, 9]

    var arr = [33,1,34,35,8,9]var arr2 = arr.sort(function (a, b) {return a - b})console.log('arr: ', arr)   //  [1, 8, 9, 33, 34, 35]console.log('arr2: ', arr2) //  [1, 8, 9, 33, 34, 35]

    // sort会改变原有数组var arr = [33,1,34,35,8,9]var arr2 = arr.sort(function (a, b) {return b - a})console.log('arr: ', arr)   //  [35, 34, 33, 9, 8, 1]console.log('arr2: ', arr2) //  [35, 34, 33, 9, 8, 1]

ES6中数组的新方法

1. 扩展运算符（...）

    var arr = [33,1,34,35,8,9]console.log('arr: ', ...arr)   //  33 1 34 35 8 9

// 该运算符主要用于函数调用。function push(array, ...items) {array.push(...items);
}function add(x, y) {return x + y;
}const numbers = [4, 38];
add(...numbers) // 42

    var arr = [33,1,34,35,8,9]console.log(Math.max(arr)) // NaN// ES6console.log(Math.max(...arr)) // 35// ES5console.log(Math.max.apply(null, arr)) // 35

2. 扩展运算符来复制数组

数组是复合的数据类型，直接复制的话，复制的是指向底层数据结构的指针，而不是数组。

    const a1 = [1, 2];const a2 = a1;a2[0] = 2;console.log('a2: ', a2) // [2, 2]

ES5的解决办法

    const a1 = [1, 2];const a2 = a1.concat();a2[0] = 2;console.log('a1: ', a1) // [1, 2]

ES6的写法

    const a1 = [1, 2];const a2 = [...a1]a2[0] = 2;console.log('a1: ', a1) // [1, 2]console.log('a2: ', a2) // [2, 2]

    const a1 = [1, 2];const [...a2] = a1a2[0] = 2console.log('a1: ', a1) // [1, 2]console.log('a2: ', a2) // [2, 2]

3. 合并数组

    const a1 = [1, 2];const a2 = ['aa', 'bb', 'cc']const a3 = ['张三', '李四']// ES5const new1 = a1.concat(a2).concat(a3)// ES6const new2 = [...a1, ...a2, ...a3]console.log('new1: ', new1) // [1, 2, "aa", "bb", "cc", "张三", "李四"]console.log('new2: ', new2) // [1, 2, "aa", "bb", "cc", "张三", "李四"]

4. 将字符串转为数组

    var str = 'hello'var arr = [...str]console.log('arr: ', arr) // ["h", "e", "l", "l", "o"]

5. 类数组对象转为数组

    var obj = {'0':'cx','1': 18,'2': '160cm',length: 3  // 必须要有这，否则打印出来是：[]}var toArrObj = [...obj]console.log('toArrObj: ', toArrObj) //  ["cx", 18, "160cm"]var obj = {name:'cx',age: 18,height: '160cm',length: 3}var toArrObj = [...obj]console.log('toArrObj: ', toArrObj) // [undefined, undefined, undefined]

6. Array.from() 将类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）转为真正的数组。

    let arrayLike = {'0': 'a','1': 'b','2': 'c',length: 3};// ES5var arr1 = [].slice.call(arrayLike)// ES6var arr2 = Array.from(arrayLike)console.log('arr1: ', arr1) // ["a", "b", "c"]console.log('arr2: ', arr2) // ["a", "b", "c"]

    // 利用Array.from()方法对数组进行处理var arr = [1,2,4]var newArr = Array.from(arr, x => x * x)console.log('newArr===', newArr) //newArr=== (3) [1, 4, 16]// 函数参数转为数组// arguments对象function foo() {var args = Array.from(arguments);// ...}

    // 利用Array.from()方法对数组进行复制var arr = [1, 2, 4]var newArr = Array.from(arr)newArr[0] = 'tezt'console.log('newArr===', newArr) // ["tezt", 2, 4]console.log('arr===', arr) //[1, 2, 4]

    // Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度var str = 'hello world'var arr = Array.from(str)var len = Array.from(str).lengthconsole.log('arr:', arr) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]console.log('len:', len) // 11

7. Array.of()将一组值转为数组

   // Array.of方法用于将一组值，转换为数组。var arr = Array.of(1,2,3)console.log('arr: ', arr)    // [1, 2, 3]var arr1 = Array.of(1)console.log('arr1: ', arr1)  // [1]var arr2 = Array.of()console.log('arr2: ', arr2)  // []// 之前的Array()构造函数var arr3 = new Array(1,2,3) console.log('arr3: ', arr3)  // [1, 2, 3]var arr4 = new Array(1)console.log('arr4: ', arr4)  // []var arr5 = new Array(3)console.log('arr5: ', arr5)  // [,,]// Array.of方法可以用下面的代码模拟实现。function ArrayOf(){return [].slice.call(arguments);}