ReactNative碎片之Js查漏

RN

做Android出生的我，在整ReactNative的时候，js是一定要巩固好基础的，Es6新特性也是要会的

本文提供一些传送门，方便学习查找

JavaScrip基础

ES6入门

浅谈JavaScript

Learn JavaScript

JavaScrip秘密花园

Promise迷你书

学习ReactNative笔记整理一___JavaScript基础

等式

1
2
3
4
var foo = 42;
var bar = 42;
var baz = "42";
var qux = "life";

foo == baz //true ，

==运算符，等价性判断之前会尝试转为相同类型

foo === baz //false

=== 全等运算符判断两个变量是否类型和值 都 相等

数组常用方法

  • concat()连接两个或更多的数组，并返回结果
  • join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
  • pop()删除并返回数组的最后一个元素
  • push()向数组的末尾添加一个或更多元素，并返回新的长度
  • reverse()颠倒数组中元素的顺序
  • shift()删除并返回数组的第一个元素
  • slice(start,end)从某个已有的数组返回选定的元素
    • start:必需,规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置
    • end:可选,规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素
  • sort(sortby)对数组的元素进行排序,sortby可选，但必须是函数
  • splice(index,howmany,item1,.....,itemX)删除元素，并向数组添加新元素
    • index:必需。整数，规定添加/删除条目的位置，使用负数可从数组结尾处规定位置
    • howmany:必需。要删除的条目数量。如果设置为 0，则不会删除项目
    • item1,…..,itemX:可选。向数组添加的新项目
  • unshift()向数组的开头添加一个或更多元素

创建数组

Array.from()

  • 用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map，包括字符串）
  • 实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//字符串
Array.from('hello')// ['h', 'e', 'l', 'l', 'o']
//set
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
//
let arr = Array.from({ length: 3 });//扩展运算符就转换不了[null,null,null]
let arr = Array.from({
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        });//['a','b','c']
//
 let arr = Array.from({
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 2
        });//['a','b'] 只取前两位
//
        let arr = Array.from({
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 4
        });//['a','b'，'c',null]长度不够，用null不全

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

1
2
3
4
5
6
7
8
9
10
let arr = Array.from([1, 2, 3], x => x * x);//[1,4,9]
//等同于
let arr = Array.from([1, 2, 3]).map(x => x * x);//[1,4,9]
//等同于
let arr = Array.from([1, 2, 3], (x) => x * x)
//============================================
//只要有一个原始的数据结构，你就可以先对它的值进行处理，
// 然后转成规范的数组结构，进而就可以使用数量众多的数组方法。
        var arr = Array.from({length: 2}, () => 'jack')
        console.warn(arr)//["jack"，"jack"]

Array.of()

用于将一组值，转换为数组

1
2
3
var arr3 = Array.of('a', 'b', 'c')//['a', 'b', 'c']
var arr3 = Array.of('hello')//['hello']
var arr3 = Array.of()//[]

其他

1
2
3
4
5
6
7
8
var arr = Array();
var arr = Array(3) // [, , ,]
var arr = [];
var arr = ['a', 'b', 'c'];
var arr = Array();
arr[0]='hello'
arr[1]=1
arr[1]=2//['hello'，2]

数组查找

find（）

用于找出第一个符合条件的数组成员,没有则返回undefined

1
2
3
4
5
6
7
8
let arr = [0, 1, 2, 3];
       //返回第一个满足条件的值
       let result = arr.find((value, index, arr) => {//当前值，当前位置，原数组
           console.warn("index="+index)//0,1,2(调用3次)
           console.warn("arr="+arr)//arr=0,1,2,3(调用3次) 找到之后不再调用
           return value > 1;
       })
       console.warn("result="+result)//result=2

findIndex（）

返回第一个满足条件值的索引

1
2
3
4
5
let arr = [0, 1, "2", 3];
       let resultIndex = arr.findIndex((value, index, arr) => {
           return value > 2;
       });
       console.warn("resultIndex="+resultIndex)//result=3

数组遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//entries()，keys()和values()，都是遍历方法
let arr = ["r", "e", "a", "c","t"];
for(let key of arr.keys()){
    console.warn("key"+key)//0,1,2,3,4
}
for(let value of arr.values()){
    console.warn("value"+value)//r,e,a,c,t
}
for(let [key,value] of arr.entries()){
    console.warn("key"+key+"value"+value)//key value同时
}
//其他
 for(let count =0;count< arr.length;count++){
            console.warn("value"+arr[count])//value=r,value=e,value=a,value=c,value=t
}
for(i of 'hello') {
      console.log(i);//‘h’,'e','l','l','o'
 }

数组的空位

数组的某一个位置没有任何值，undefined不是空位

es6中的数组空位

1
2
3
0 in [undefined, undefined, undefined] // true 0位置有值
0 in [, , ,] // false 0位置没值
Array(3) // [, , ,]返回一个具有 3 个空位的数组

数组实例的fill()

方法使用给定值，填充一个数组。数组中已有的元素，会被全部抹去。

1
2
3
4
5
6
7
//填充
let arr = [1, 2, "hello"]
arr.fill(9)//[9,9,9]
//填充
new Array(3).fill(7) // [7, 7, 7]
//方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置(包左不包右)。
['a', 'b', 'c'].fill(7, 1, 2)//包括前不包后,['a','7','c']

数组实例的includes()

方法返回一个布尔值，表示某个数组是否包含给定的值。该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置。

1
2
3
4
[1, 2, 3].includes(2);   // true
[1, 2, 3].includes(4);   // false
[1, 2, NaN].includes(NaN); // true
let result  = [1, 2, "hello"].includes(1,1)//false,从0开始查找，是不存在的

另外，Map和Set数据结构有一个has方法，需要注意与includes区分。

Map结构的has方法，是用来查找键名的：

比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set结构的has方法，是用来查找值的：

比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

数组清空

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//【1】splice
var ary = [1,2,3,4];  
ary.splice(0,ary.length);  
console.log(ary); // 输出 []，空数组，即被清空了
//【2】length赋值为0 
int[] ary = {1,2,3,4};  
ary.length = 0;
//【注意】
 let arr = ['a', 'b', 'c'];
 arr.length = 2;//['a', 'b'];
 arr.length = 3;//['a', 'b',null];，再次复制为3，之前的数据是没有了。是null
 arr.length = 0;//[]
//【3】赋值为[]
var ary = [1,2,3,4];  
ary = []; // 赋值为一个空数组以达到清空原数组

Set和Map数据结构

set

ES6提供了新的数据结构Set，类似数组，但是成员的值都是唯一的没，没有重复

1
2
3
4
5
6
//构造，可接受数组参数
let set = new Set([1,2,3,4,5,5,5,5]);
let set = new Set();
//去重复
let arr = [1, 2, 3, 4, 5, 5, 5, 4]
let set = new Set(arr);

向 Set 加入值的时候，不会发生类型转换，所以 5 和“5”是两个不同的值。Set 内部判断两个值是否不同，使用的算法类似于精确相等运算符（===），这意味着，两个对象总是不相等的。唯一的例外是 NaN 等于自身（精确相等运算符认为 NaN 不等于自身）。

1
2
3
4
5
let set = new Set();
set.add({})
set.size // 1
set.add({})
set.size // 2

Arrray.form将Set转为数组

1
2
3
Set转为数组
var items = new Set([1, 2, 3, 4, 5]);
var array = Array.from(items);

去除数组无用元素

1
2
3
4
5
6
//去除数组无用元素
function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1,1,2,3]) // [1, 2, 3]

Set的遍历

Set 结构的实例有四个遍历方法，可以用于遍历成员。

  • keys()：返回一个键名的遍历器
  • values()：返回一个键值的遍历器
  • entries()：返回一个键值对的遍历器
  • forEach()：使用回调函数遍历每个成员

key 方法、value 方法、entries 方法返回的都是遍历器（详见《Iterator 对象》一章）。由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以 key 方法和 value 方法的行为完全一致。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let set = new Set(['red', 'green', 'blue']);
//键
for ( let item of set.keys() ){
  console.log(item);
}
// red
// green
// blue
//================================================
//值
for ( let item of set.values() ){
  console.log(item);
}
// red
// green
// blue
//================================================
//键-值
for ( let item of set.entries() ){
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
//================================================
//直接遍历Set【默认就是遍历values】
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
  console.log(x);
}
// red
// green
// blue
//================================================
//扩展运算符（...）内部使用 for...of 循环，所以也可以用于 Set 结构。
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']
//【补充】这就提供了另一种便捷的去除数组重复元素的方法。
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

数组的 map 和 filter 方法也可以用于 Set 了。

1
2
3
4
5
6
7
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构：{2, 4}

set并集和交集

1
2
3
4
5
6
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集[1, 2, 3, 4]
let union = new Set([...a, ...b]);
//交集[2, 3]
let intersect = new Set([...a].filter(x => b.has(x)));

Set 结构的实例的 forEach 方法，用于对每个成员执行某种操作，没有返回值。

1
2
3
4
5
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
// 2
// 4
// 6

遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法

1
2
3
4
5
6
7
8
9
// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6

// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));
// set的值是2, 4, 6

Map

讲map之前，先了解一下：

Array的key是0，1，2，3。。。。

Set的key是和Value一样

那么Map的key是可自定义键名，并且键可以是任意类型

瞅一个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 let m = new Map();
        m.set("A",'fengan')
        m.set("age",18)
        m.set(3,33)
        m.set(null,33)
        m.set(null,44)//后面会覆盖前面
        console.warn("size="+m.size)//size=4
        console.warn(...m)//['A','fengan']['age',18][null,44]
//通过key取value
 console.warn(m.get("haha"))//undefined，若无对应key，则为undefined
        console.warn(m.get(3))//33
        console.warn(m.get(null))//44
//判断是否有指定key
 console.warn(m.has(null))//true
        console.warn(m.has(3))//true
        console.warn(m.has("age1"))//false

再瞅一个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
var map = new Map();
var k1 = ['a'];
var k2 = ['a'];
map.set(k1, 111);
map.set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222 【注意，这俩key不算同一个key，内存地址不一样，就视为两个键】

//例如
var map = new Map();

map.set(['a'], 555);
map.get(['a']) // undefined【两个['a']地址值不相同】

注意

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键，包括 0 和 -0。另外，虽然 NaN 不严格相等于自身，但 Map 将其视为同一个键。（对象啥的，地址值不同， 则视为不同的键）

实例的属性和操作方法

Map 结构的实例有以下属性和操作方法。

  • size：返回成员总数。
  • set(key, value)：设置 key 所对应的键值，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就新生成该键。
  • get(key)：读取 key 对应的键值，如果找不到 key，返回 undefined。
  • has(key)：返回一个布尔值，表示某个键是否在 Map 数据结构中。
  • delete(key)：删除某个键，返回 true。如果删除失败，返回 false。
  • clear()：清除所有成员，没有返回值。

遍历方法

Map 原生提供三个遍历器。

  • keys()：返回键名的遍历器。
  • values()：返回键值的遍历器。
  • entries()：返回所有成员的遍历器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}

// 等同于使用map.entries()
//表示 Map 结构的默认遍历器接口（Symbol.iterator 属性），就是 entries 方法。
for (let [key, value] of map) {
  console.log(key, value);
}

Map 结构转为数组结构，比较快速的方法是结合使用扩展运算符（…）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

结合数组的 map 方法、filter 方法，可以实现 Map 的遍历和过滤（Map 本身没有 map 和 filter 方法）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

let map1 = new Map(
  //先转成数组
  [...map0].filter(([k, v]) => k < 3)
);
// 产生Map结构 {1 => 'a', 2 => 'b'}

let map2 = new Map(
  //先转成数组
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}

Map 还有一个 forEach 方法，与数组的 forEach 方法类似，也可以实现遍历。

1
2
3
4
5
6
7
8
9
10
11
12
13
map.forEach(function(value, key, map)) {
  console.log("Key: %s, Value: %s", key, value);
};
//forEach 方法还可以接受第二个参数，用来绑定 this。
var reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
});

WeakMap和WeakSet

暂时未整理，暂时不确定RN中是否使用

时间戳

JavaScript获取当前时间戳：

第一种方法：

var timestamp = Date.parse(new Date());

结果：1280977330000
第二种方法：

var timestamp = (new Date()).valueOf();

结果：1280977330748

第三种方法：

var timestamp=new Date().getTime()；

结果：1280977330748

第一种：获取的时间戳是把毫秒改成000显示，

第二种和第三种是获取了当前毫秒的时间戳。

本文标题:ReactNative碎片之Js查漏

文章作者:冯安

发布时间:2018-08-04, 11:24:18

最后更新:2018-08-06, 19:30:16

原始链接:http://www.fengan.info/2018/08/04/ReactNative碎片之查漏补缺/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 等式
  2. 2. 数组常用方法
    1. 2.1. 创建数组
    2. 2.2. 数组查找
      1. 2.2.1. find（）
      2. 2.2.2. findIndex（）
    3. 2.3. 数组遍历
    4. 2.4. 数组的空位
      1. 2.4.1. 数组实例的fill()
      2. 2.4.2. 数组实例的includes()
      3. 2.4.3. 数组清空
  3. 3. Set和Map数据结构
    1. 3.1. set
      1. 3.1.1. Arrray.form将Set转为数组
      2. 3.1.2. 去除数组无用元素
      3. 3.1.3. Set的遍历
      4. 3.1.4. 数组的 map 和 filter 方法也可以用于 Set 了。
      5. 3.1.5. set并集和交集
      6. 3.1.6. Set 结构的实例的 forEach 方法，用于对每个成员执行某种操作，没有返回值。
      7. 3.1.7. 遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法
    2. 3.2. Map
      1. 3.2.1. Map 结构转为数组结构，比较快速的方法是结合使用扩展运算符（…）。
      2. 3.2.2. 结合数组的 map 方法、filter 方法，可以实现 Map 的遍历和过滤（Map 本身没有 map 和 filter 方法）。
      3. 3.2.3. Map 还有一个 forEach 方法，与数组的 forEach 方法类似，也可以实现遍历。
    3. 3.3. WeakMap和WeakSet
  4. 4. 时间戳
    1. 4.1. JavaScript获取当前时间戳：