ES6&JS笔记以及部分运行问题记录

ES6&JS

Array.from

下面是一个类似数组的对象，Array.from将它转为真正的数组。

let arrayLike = {
   
'0': 'a',
'1': 'b',
'2': 'c',
length: 3};
// ES5的写法var arr1 = [].slice.call(arrayLike); // ['a', 'b','c']
// ES6的写法let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

Array.from({
    length: 3 });
// [ undefined, undefined, undefined ]

上面代码中，Array.from返回了一个具有三个成员的数组，每个位置的值都是undefined。扩展运算符转换不了这个对象。
Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

上面代码中，Array.from的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。

Array.from({
    length: 2 }, () => 'jack')
// ['jack', 'jack']

Array.of()

Array.of()方法用于将一组值，转换为数组。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

bind()方法

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj,并将创建的函数返回（不会立即执行）

concat

var arr1 = [1,2,3]
var arr2 = [4,5,6]
arr1.concat(arr2) //输出 [1,2,3,4,5,6]
同 [...arr1, ...arr2 n]
arr1.concat(arr2,arr3,arr4) 里面不限数量
不会改变原数组会返回新数组

Array.some, Array.every()

Some():方法用于检测数组中的元素是否有满足指定条件的，若满足返回true，否则返回false；
every():方法用于检测数组中所有元素是否都符合指定条件，若符合返回true，否则返回false；

定义class类

export default class gasComprehensive {
   
    //实时空气质量
    static async realQuality(params: Record<string, any>) {
   
        return request.get(`${
     base.aimsService}/web/api/v1/analyze-map/grid-detail`,params)
    }
    //空气质量累计数据
    static async airQualityPanel(params?: Record<string, any>) {
   
        return request.get(`${
     base.aimsPrjService}/web/api/v1/comprehensive-situation/air-quality-panel`,params)
}
}
使用gasComprehensive.airQualityPanel()

Date()

let 函数名 =new Date(); Tue Aug 10 2021 16:01:03 GMT+0800 (中国标准时间)
2.1 Date().toDateString() Tue Aug 10 2021
2.2 Date().toTimeString() 16:09:53 GMT+0800 (中国标准时间)
2.3 Date().toLocaleDateString() 2021/8/10
2.4 Date().toLocaleTimeString() 下午4:10:27
2.5 Date().toUTCString() Tue, 10 Aug 2021 08:10:42 GMT
只列举常见方法，具体参考手册
3.1 getTime() 返回日期的毫秒，与valueOf相同
3.2 getFullYear() 返回4位年数 2021
3.3 getMonth() 返回月(0表示1月...) 7
3.4 getDate() 返回日 10
3.5 getDay() 返回周几(0表示周日，6表示周六) 2

Doc. addEventListener

// 监听浏览器隐藏显示
document.addEventListener('visibilitychange', function() {
   
    var isHidden = document.hidden;
    // console.log(document.visibilityState) // visible hidden
    if (isHidden) {
    // '隐藏'
        .......
    } else if(codeFlag) {
    // '显示'
       .......
    }
});

function

解构参数

const greet = ({
     greeting, firstName, lastName }) => {
   
  return `${
     greeting}, ${
     firstName}${
     lastName}`;
}

function的长度:

function fn1 () {
   }
function fn2 (name) {
   }
function fn3 (name, age) {
   }

console.log(fn1.length) // 0
console.log(fn2.length) // 1
console.log(fn3.length) // 2
-----------------------------------------------------------
function fn1 (name) {
   }
function fn2 (name = '林三心') {
   }
function fn3 (name, age = 22) {
   }
function fn4 (name, age = 22, gender) {
   }
function fn5(name = '林三心', age, gender) {
    }

console.log(fn1.length) // 1
console.log(fn2.length) // 0
console.log(fn3.length) // 1
console.log(fn4.length) // 1
console.log(fn5.length) // 0
-----------------------------------------------------------
function fn1(name, ...args) {
   }

console.log(fn1.length) // 1

length 是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。形参的数量不包括剩余参数个数，仅包括第一个具有默认值之前的参数个数

For循环

简单 for 循环

const arr = [1, 2, 3];
for ( let i = 0; i　< arr.length; i++) {
   
     console.log(arr[i]);
}
// 不可以const 因为i要++改变

for-in

const arr = [1, 2, 3];
let index;
for (index in arr) {
   
     console.log( "arr[" + index + "] = " + arr[index]);
}
一般情况下，运行结果如下：

for-in 循环遍历的是对象的属性，而不是数组的索引。因此， for-in
遍历的对象便不局限于数组，还可以遍历对象。例子如下：

const person = {
   
     fname: "san" ,
     lname: "zhang" ,
     age: 99
};
let info;
for (info in person) {
   
     console.log( "person[" + info + "] = " + person[info]);
}

我们可以发现 for-in 并不适合用来遍历 Array
中的元素，其更适合遍历对象中的属性，这也是其被创造出来的初衷。却有一种情况例外，就是稀疏数组。考虑下面的例子：

let key;
const arr = [];
arr[0] = "a" ;
arr[100] = "b" ;
arr[10000] = "c" ;
for (key in arr) {
   
     console.log(arr[key]);
}
输出：a,b,c

for-in 只会遍历存在的实体，上面的例子中， for-in
遍历了3次（遍历属性分别为"0″、 "100″、 "10000″的元素，普通 for
循环则会遍历 10001 次）。所以，只要处理得当， for-in 在遍历 Array
中元素也能发挥巨大作用。

for-of

for-in循环用来遍历对象属性。
for-of循环用来遍历数据—例如数组中的值。

const arr = [ 'a' , 'b' , 'c' ];
for ( let data of arr) {
   
     console.log(data);
}
输出：a,b,c

之前的缺陷：

• forEach 不能 break 和 return；
• for-in

  缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。
  那 for-of 到底可以干什么呢？

• 跟 forEach 相比，可以正确响应 break, continue, return。
• for-of 循环不仅支持数组，还支持大多数类数组对象，例如 DOM nodelist 对象。
• for-of 循环也支持字符串遍历，它将字符串视为一系列 Unicode 字符来进行遍历。
• for-of 也支持 Map 和 Set （两者均为 ES6 中新增的类型）对象遍历。
  总结一下，for-of 循环有以下几个特征：
• 这是最简洁、最直接的遍历数组元素的语法。
• 这个方法避开了 for-in 循环的所有缺陷。
• 与 forEach 不同的是，它可以正确响应 break、continue 和 return 语句。
• 其不仅可以遍历数组，还可以遍历类数组对象和其他可迭代对象。
  for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。
  for-of循环也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历：

const myData = 'dsa'
    for(let i of myData) {
   
      console.log(i);
    }
输出： d,s,a

break，continue,return

break会跳出一个循环可以配合if使用不会只跳出if
continue跳出循环的此次操作执行循环的下一个
Return直接结束
break，continue 配合outer :

outer: // outer只是一个标识符 随便命名
outer: for (let i = 0; i < 10; i++) {
   
        for (let j = 0; j < 10; j++) {
   
          console.log("i:" + i + " j:" + j);
          if (j == 1) {
   
            continue outer;
          }
          if (i == 1) {
   
            break outer;
          }
        }
        console.log("i:" + i);
      }
输出：
i:0 j:0
i:0 j:1
i:1 j:0

outer: for (var i = 0; i < 10; i++) {
   
   for (var j = 0; j < 10; j++) {
   
       if (i > 5) {
   
          console.log(i);
          break outer;
        }
    }
}
输出： 6

break，continue会直接跳出到你的标识符的那层循环位置，如上面的位置就是break可以跳出两层for循环
其还可以在内部使用，跳到任意循环的指定位置，如跳到内部

forEach

forEach() 方法对数组的每个元素执行一次提供的函数。forEach
方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用
delete 方法等情况）或者从未赋值的项将被跳过（那些值为 undefined 或 null
的项会被读取）

var array = ['a', 'b', 'c'];
array.forEach(function(element) {
   
    console.log(element);
});
输出为：
a;
b;
c;

forEach方法中的function回调有三个参数：
第一个参数是遍历的数组内容，
第二个参数是对应的数组索引，Number类型
第三个参数是数组本身
foreach 语法：

[ ].forEach(function(value,index,array){
   
　　//code something
});
var arr = [1,2,3,4];