ES6_有关数组的函数_note

循环:

es5新增的一些东西:

循环:

1.for

for(let i=0;i<arr.length;i++){}

2.while

while

arr.forEach()

arr.map()

arr.filter()

arr.some()

arr.every()

arr.reduce()

arr.reduceRight()

forEach()函数:

//forEach()是用来代替for的

// 以下几个使用方法一样

// arr.forEach()

// arr.map()

// arr.filter()

// arr.some()

// arr.every()

//接收两个参数:

//forEach(回调函数,this)

// 此时this是指定forEach()中的this,例如:

<script > let arr = ['apple', 'banana', 'orange', 'tomato']; for (let i = 0; i < arr.length; i++) {
     console.log(arr[i]); } console.log("------------"); //此处的forEach()接收三个参数: //val:数组当前遍历的元素,默认从左往右依次获取数组元素 //index:数组当前元素的索引,第一个元素索引为0,依次类推 //arr:当前遍历的数组 //this:回调函数中this指向 arr.forEach(function (val, index, arr) {
     console.log(val, index, arr); },this); </script>

forEach()中可以指定this对象:
如:

<script > let arr = ['apple', 'banana', 'orange', 'tomato']; //此时没有指定this: {
     arr.forEach(function (val, index, arr) {
     console.log(this, val, index, arr); }); } ///指定this后输出 {
     arr.forEach(function (val, index, arr) {
     console.log(this, val, index, arr); }, 123); } </script>

使用forEach()循环输出数组,如:

<script > let arr = ['apple', 'banana', 'orange', 'tomato']; //要依次输出数组中全部对象时 {
     arr.forEach(function (val, index, arr) {
     console.log(arr[index]); }) } </script>

在forEach()中使用箭头函数无法指定this对象,如:

<script > let arr = ['apple', 'banana', 'orange', 'tomato']; //使用箭头函数时: {
     arr.forEach((val, index, arr) => {
     console.log(arr[index]); }); } console.log("-----------------"); //但是此时在箭头函数中输出this时,指定的是此时的window对象(此时无法指定this): {
     arr.forEach((val, index, arr) => {
     console.log(this, val, index, arr); },123) } </script>

map()函数:

arr.map()非常有用,用以做数据映射,正常情况下,需要配合return,如:

<script > let arr=[ {
    title:'aaa',read:100,hot:true}, {
    title:'bbb',read:100,hot:true}, {
    title:'ccc',read:100,hot:true}, {
    title:'ddd',read:100,hot:true} ] let newArr = arr.map((item, index, arr) => {
     console.log(item, index, arr); return 1; }) console.log(newArr); </script>

如果没有return,那么功能相当于forEach()

注意:使用map()了,就一定要用return,要不然还不如用forEach()

map()可以用来重新整理数据结构,如:

<script > let arr = [ {
    title: 'aaa', read: 100, hot: true}, {
    title: 'bbb', read: 100, hot: true}, {
    title: 'ccc', read: 100, hot: true}, {
    title: 'ddd', read: 100, hot: true} ] let newArr = arr.map((item, index, arr) => {
     let json = {
    } json.t = `^_^{item.title}----------`; json.r = item.read + 200; json.hot = item.hot == true && "真棒!!!"; return json; }); console.log(newArr); </script>

filter()函数:

过滤,过滤掉一些不合格的元素,如果回调函数返回true,就留下来,如:

<script > let arr = [ {
    title: 'aaa', read: 100, hot: true}, {
    title: 'bbb', read: 100, hot: false}, {
    title: 'ccc', read: 100, hot: true}, {
    title: 'ddd', read: 100, hot: true} ] let newArr = arr.filter((item, index, arr) => {
     // return item.hot == true; return item.hot; }) console.log(newArr); </script>

some()函数:

类似查找,数组里面某一个元素符合条件就返回true,如:

<script > let arr = ['apple', 'banana', 'orange']; let b = arr.some((val, index, arr) => {
     return val == 'banana'; }) console.log(b); </script>

关于some()的应用:

<script > {
     // 实现查找某一元素是否属于该数组 let arr = ['apple', 'banana', 'orange']; function findInArray(arr, item) {
     return arr.some((val, index, arr) => {
     return val == item; }); } console.log(findInArray(arr, 'orange')); } </script>

every()函数:

数组里面所有的元素符合条件才返回true,如:

<script > let arr = [1, 3, 5, 7, 9] var b = arr.every((val, index, arr) => {
     return val % 2 == 1; }); console.log(b); </script>

reduce()函数:

用于求数组的和 / 阶乘,并接收四个参数

<script > // 求和: let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] /* prev:前一个元素 cur:当前循环的元素 index:当前循环索引 arr:整个循环的数组 * */ let res = arr.reduce((prev, cur, index, arr) => {
     return prev + cur; }) console.log(res); </script>

<script > // 求阶乘 let arr = [2, 2, 3]; let res = arr.reduce((prev, cur, index, arr) => {
     //Math.pow(a,b) ,a的b次方 // return Math.pow(prev, cur); // 或者: return prev ** cur; }); console.log(res); </script>

reduceRight()函数:

就是reduce从右到左开始的序列,如:

<script > let arr = [2, 2, 3]; let res = arr.reduceRight((prev, cur, index, arr) => {
     return prev ** cur; }); console.log(res); </script>

for…of…循环:

for…of…中,数组多了几个对象:

arr.keys() 数组下标

arr.entries() 数组某一项

<script > let arr = ['apple', 'banana', 'orange'] for (let val of arr) {
     console.log(val); } console.log("--------"); // 循环索引: for (let index of arr.keys()) {
     console.log(index); } console.log("--------"); // 循环值和index for (let item of arr.entries()) {
     console.log(item); } console.log("或者"); //或者: for ([key, value] of arr.entries()) {
     console.log([key, value]); } </script>

补充:

ES2017新增一个运算符: ** 幂
如: 2**3 相当于 Math.pow(2,3)

数组新增的东西:

Array.from():

作用:把类数组(获取的一组元素,arguments…)对象转成数组,如:

    <body>
    <script> window.onload = function () {
     let aLi = document.querySelectorAll("ul li"); //ES5之前使用: // let arrLi = [].slice.call(aLi); // 快速转为数组,方便操作 let arrLi = Array.from(aLi); arrLi.pop(); arrLi.push('items'); console.log(arrLi); } </script>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
    </ul>
    </body>

将类数组转为数组,如:
一般具备length这个属性就靠谱

    <script > // 不使用Array.from(),并且此时不是数组,无法使用push等: function show() {
     console.log(arguments); } show(1,2,3,4,5) </script>

<script> // 使用Array.from(),此时是数组,可以使用push: function show() {
     // console.log(arguments); let arr = Array.from(arguments); arr.push('6') console.log(arr); } show(1, 2, 3, 4, 5) </script>

fill()函数:

arr.fill() 用以填充,

参数: arr.fill(填充的东西,开始的位置,结束的位置),如:

<script > let arr = new Array(10); arr.fill("默认值",1,3) console.log(arr); </script>

includes()函数:

为es2016新增

<script > let arr=['apple','banana','orange','peach'] console.log(arr.includes('orange')); </script>

Object.is()函数与 == 和 ===:

Object.is():比较两个东西是否相等

<script > // console.log(NaN == NaN); // console.log(Number.isNaN(NaN)); let b = Object.is(NaN, NaN); console.log(b); </script>

1. == ：等于，两边值类型不同的时候，先进行类型转换，再比较；
1. === ：严格等于，只有当类型和值都相等时，才相等；
1. Object.is() ：与 === 的作用基本一样，但有些许不同。
对于严格相等，有以下规则，如果 x === y，那么：

a、如果x的类型和y的类型不一样，返回false；

b、如果x的类型是数字，那么：

(1)：如果x是NaN，返回false；

(2)：如果y是NaN，返回false；

(3)：如果x和y是同一个数字值，返回true；

(4)：如果x是+0，y是-0，返回true；

(5)：如果x是-0，y是+0，返回true；

(6)：其余返回false。

c、如果x和y的类型都为undefined或者null，返回true；

d、如果x和y的类型都为字符串类型，那么如果x和y是完全相同的字符编码序列，返回true，否则返回false；

e、如果x和y的类型都为布尔类型，那么如果x和y同为true或者false，返回true，否则返回false；

f、如果x和y是同一个对象值，返回true，否则返回false

=== 和 Object.is() 的区别

Object.is() 的行为与 === 基本一致，但有两处不同：

　　a、+0 不等于 -0；

　　b、NaN 等于自身

详细的可以对照下表

该表来自于

ES6_有关数组的函数_note

循环:

forEach()函数:

map()函数:

filter()函数:

some()函数:

every()函数:

reduce()函数:

reduceRight()函数:

for…of…循环:

Array.from():

fill()函数:

includes()函数:

Object.is()函数与 == 和 ===:

对于严格相等，有以下规则，如果 x === y，那么：

=== 和 Object.is() 的区别