ES6中新加的数组API

html的部分的代码

<

p>123</p>
<p>123465</p>
<p>123456789</p>
<p>123456789123</p>
<p>123456789123456</p>
<p>123465789123456789</p>

<script type="text/javascript">

//1. Array.from() 用于将两类对象转为真正的数组

/* 类似数组的对象（array-like object）

 1.常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象，Array.from都可以将它们转为真正的数组
 2.本质特征只有一点，即必须有length属性
 3.Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组*/
 -----------------------------------------------------------------------------
// 创建一个类数组对象：

// --类似数组的对象-01

let arrayLike = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
};

//ES5的写法：

var arr1 = [].slice.call(arrayLike);
// 这时arr1是类数组
console.log(arr1)

//ES6的写法：

let arr2 = Array.from(arrayLike);
// 这时arr2是数组,可以用作把类数组变成数组
console.log(arr2)

有两个参数

//有两个参数情况一时：

let arr3 = Array.from(arrayLike, x => x + 'char');
console.log(arr3)
// 等同于：
var arr4 = Array.from(arrayLike).map(x => x + "char")
console.log(arr4)

//有两个参数情况二时：前面的是运算的参数，后面的是要做的事情

let arr5 = Array.from([1, 2, 3], (x) => x * 7) //[7, 14, 21]

// --类似数组的对象-02

var arr2_1 = Array.from({ length: 3 }) // [undefined, undefined, undefined]

//当参数是NodeList对象时：

let ps = document.querySelectorAll('p')
var arr_node = Array.from(ps).filter(p => {
    return p.textContent.length > 2;
});
console.log(arr_node)

//参数是字符串的情况

var arr_str = Array.from('hello') // ['h', 'e', 'l', 'l', 'o']字符串变成了数组

// Set

let namesSet = new Set(['a', 'b'])
var arr_obj = Array.from(namesSet) // ['a', 'b']

// 数组

var arr_arr = Array.from([1, 2, 3]) // [1, 2, 3]

// 2.Array.of() 用于将一组值，转换为数组

var arr_of1 = Array.of(3, 11, 8) // [3,11,8]
var arr_of2 = Array.of(3) // [3]
var arr_of3 = Array.of(3).length // 1
var arr_of4 = Array.of() // []
var arr_of5 = Array.of(arr1, arr2) // [Array(3), Array(3)]

//3.copyWithin() 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

/*
它接受三个参数。
    target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
    start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示从末尾开始计算。
    end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

*/
----------------------------------------------------------------------------------------------
//从下标为0的位置开始替换数组元素，所用的元素从数组中下表为3到结尾的地方复制
var arr_cope1 = [1, 2, 3, 4, 5, 6, 7, 8, 9].copyWithin(0, 3) //[4, 5, 6, 7, 8, 9, 7, 8, 9]
// 从下标为-2位置的元素开始复制，到下标为-1的元素，然后，替换掉下标为0位置的元素
var arr_cope2 = [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]

// 将2号位到数组结束，复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
var arr_cope3 = i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]


// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
var arr_cope4 = [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

//4. sort(),实现数组排序

var arr_sort = [1, 2, 4, 5, 6, 7, 8, 5, 8, 7, 1, 2, 3, 4]
console.log(arr_sort.sort())

//new Set(arr)实现数组去重
console.log(new Set(arr_sort))

//5. Array.fill(val, start, end)

// 将从 start 到 end 位置的值用 val 填充
// 返回填充后的数组
// 改变原数组
// 不产生新的数组
var arr_fill = [4, 8, 9, 7, 3, 5]
console.log(arr_fill.fill(1, 1, 3))

// 6.for

let friut_arr = ['apple', 'orange', 'banana'];
// 循环出值
for (let val of friut_arr) {
    console.log(val) //打印的是数组里面的元素
}
//循环出索引
for (let index of friut_arr.keys()) {
    console.log(index) //答应的是数组的索引
}
for (let itme of friut_arr.entries()) {
    console.log(itme) //打印的是索引和元素组成的数组
    /*

     
   [0, "apple"]
   [0, "orange"]
   [0, "banana"]
    */
    }
    // 运用解构赋值，来单独得到元素的下标和元素本身
    for (let [key, val] of friut_arr.entries()) {
        console.log(key, val)
       /* 0 "apple"
        1 "orange"
        "banana"*/
    }

// 7.find()查找，查找并返回第一个符合条件的数组成员，如若没有找到，返回undefind

let find_arr = [23,20,101,80,100];
let res = find_arr.find((val,index,arr)=>{
  console.log(val,index,arr);
  return val>100;
})
console.log(res)//101

// 8.findIndex()查找，查找并返回第一个符合条件的成员的索引

let res_index = find_arr.findIndex((val,index,arr)=>{
    console.log(val ,index,arr)
    return val>100;
})
console.log(res_index)//2

//9.includes；如果数组中包含某个元素，返回true，否则返回false

let bool = find_arr.includes(23)
  console.log(bool)//true