JS语法中
Object、Array、Set、Map数据结构与原型介绍
Object对象
-
Object的定义
用 {} 来定义Object
let c = `c`
let foo = {
a: 'string',
b: true,
c,
d: 1.52,
f: function(a, b) {
return a+b
},
g(a, b) {
return a-b
}
}
console.log(foo); // { a: 'string', b: true, c: 'c', d: 1.52, f: [Function: f], g: [Function: g] }
console.log(foo.f(3, 2)); // 5
console.log(foo.g(4, 2)); // 2
-
Json字符串和对象相互转换
使用JSON.parse()和JSON.stringify()
// 字符串转json
let jsonStr = `{ "name": "douyu", "department": "research and development" }`;
let obj = JSON.parse(jsonStr);
console.log(obj); // { name: 'douyu', department: 'research and development' }
// json转字符串
let str = JSON.stringify(obj);
console.log(str); // {"name":"douyu","department":"research and development"}
- 属性取值
let foo = {
a: 'string',
g(a, b) {
return a-b
}
}
console.log(foo.a); // string
console.log(foo['a']); // String
console.log(foo['g']); // [Function: g]
console.log(foo['g'](5, 2)); // 3
-
Object相关API
这里列出一些RN开发中可能会用的，详细API可参见文档MDNJs文档
- Object.assign()
通过复制一个或多个对象来创建一个新的对象。 - Object.create()
使用指定的原型对象和属性创建一个新对象。 - Object.defineProperty()
给对象添加一个属性并指定该属性的配置。 - Object.entries()
返回给定对象自身可枚举属性的[key, value]数组。 - Object.values()
返回给定对象自身可枚举值的数组。 - Object.keys()
返回一个包含所有给定对象自身可枚举属性名称的数组。 - Object.is()
比较两个值是否相同。所有 NaN 值都相等（这与和=不同）。 - Object.setPrototypeOf()
设置对象的原型（即内部[[Prototype]]属性）。
- Object.assign()
Array
-
数组的定义
用[ ]来定义数组, 数组里面可以存放多种类型的值
let array1 = [1, 2, 3, 4, 'a', [1, 2]]
array1['outer'] = 'outer'
array1['foo'] = 'foo'
console.log(array1);
// [ 1, 2, 3, 4, 'a', [ 1, 2 ], outer: 'outer', foo: 'foo' ]
for (let entry of array1.entries()) {
console.log(entry);
}
// [ 0, 1 ]
// [ 1, 2 ]
// [ 2, 3 ]
// [ 3, 4 ]
// [ 4, 'a' ]
// [ 5, [ 1, 2 ] ]
array1[7] = 'sss'
for (let entry of array1.entries()) {
console.log(entry);
}
// [ 0, 1 ]
// [ 1, 2 ]
// [ 2, 3 ]
// [ 3, 4 ]
// [ 4, 'a' ]
// [ 5, [ 1, 2 ] ]
// [ 6, undefined ]
// [ 7, 'sss' ]
- Json字符串和数组相互转换
let jsonStr = `[
{ "name": "douyu", "department": "research and development" },
{ "name": "douyu", "department": "research and development" }
]`
let obj = JSON.parse(jsonStr)
console.log(obj.__proto__) // []
let str = JSON.stringify(obj)
console.log(str) // [{"name":"douyu","department":"research and development"},{"name":"douyu","department":"research and development"}]
-
Array相关API
这里列出一些RN开发中可能会用的，更多API详情可参见文档MDNJs文档
- Array.prototype.includes()
判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false。 - Array.prototype.slice()
抽取当前数组中的一段元素组合成一个新数组。 - Array.prototype.find()
找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。 - Array.prototype.findIndex()
找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1。 - Array.prototype.entries()
返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。 - Array.prototype.values()
返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。 - Array.prototype.keys()
返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。 - Array.prototype.map()
返回一个由回调函数的返回值组成的新数组。 - Array.prototype.forEach()
为数组中的每个元素执行一次回调函数 - Array.prototype.some()
如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。 - Array.prototype.indexOf() 返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。
- Array.prototype.lastIndexOf() 返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。
- Array.prototype.includes()
Set
Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。
let set = new Set()
set.add(1)
set.add(1)
set.add('a')
console.log(set); // Set { 1, 'a' }
for (let entry of set.entries()) {
console.log(entry);
}
// [ 1, 1 ]
// [ 'a', 'a' ]
- Set 相关API 这里列出一些RN开发中可能会用的，更多API详情可参见文档MDNJs文档
- Set.prototype.add(value)
在Set对象尾部添加一个元素。返回该Set对象。 - Set.prototype.clear()
移除Set对象内的所有元素。 - Set.prototype.delete(value)
移除Set的中与这个值相等的元素，返回Set.prototype.has(value)在这个操作前会返回的值（即如果该元素存在，返回true，否则返回false）。Set.prototype.has(value)在此后会返回false。 - Set.prototype.has(value)
返回一个布尔值，表示该值在Set中存在与否。
Map
键值对存储结构， es6以后的规范中，key和value可以是任意类型的值，包括对象，数组等
let obj = { foo: 'foo'}
let array = [1, 2, 3, 4]
let map = new Map()
map.set('string', 'string')
map.set(obj, 'obj')
map.set(array, 'array')
console.log(map.size); //3
console.log(map);
// Map {
// 'string' => 'string',
// { foo: 'foo' } => 'obj',
// [ 1, 2, 3, 4 ] => 'array'
// }
- Map相关API 这里列出一些RN开发中可能会用的，更多API详情可参见文档MDNJs文档
- Map.prototype.clear()
移除Map对象的所有键/值对 。 - Map.prototype.delete(key)
移除任何与键相关联的值，并且返回该值，该值在之前会被Map.prototype.has(key)返回为true。之后再调用Map.prototype.has(key)会返回false。 - Map.prototype.get(key)
返回键对应的值，如果不存在，则返回undefined。 - Map.prototype.has(key)
返回一个布尔值，表示Map实例是否包含键对应的值。 - Map.prototype.set(key, value)
设置Map对象中键的值。返回该Map对象。
原型
原型，顾名思义，原来的类型，表示的是对象从何而来。
JavaScript 中，万物皆对象！但对象也是有区别的。对象可以分为普通对象和函数对象：object和function。下面举例说明
var o1 = {};
var o2 = new Object();
var o3 = new f1();
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function
f3('sss') // sss
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
在上面的例子中 o1 o2 o3 为普通对象，f1 f2 f3 为函数对象, 区分一个对象是普通对象还是函数对象：凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象
prototype是函数对象的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向函数的原型对象。
function Sum(a, b) {
return a+b
}
console.log(Sum.prototype); // Sum {}
// 给Sum函数的原型对象添加一个属性 multiply函数
Sum.prototype.multiply = function(a, b) {
return a * b
}
console.log(Sum.prototype); // Sum { multiply: [Function] }
console.log(Sum.prototype.constructor === Sum); //true
__proto__是一个普通对象（上面提到的函数对象也属于普通对象）拥有的内置属性，指向创建它的构造函数的原型对象, 是JS内部使用寻找原型链的属性。
function Sum(a, b) {
return a+b
}
console.log(Sum.prototype); // Sum {}
// 给Sum函数的原型对象添加一个属性 multiply函数
Sum.prototype.multiply = function(a, b) {
return a * b
}
console.log(Sum.prototype); // Sum { multiply: [Function] }
console.log(Sum.prototype.constructor === Sum); //true
console.log(Sum.__proto__); // [Function] 函数对象也有__proto__属性
let sum = new Sum(2, 3)
console.log(sum.__proto__ === Sum.prototype); // true 普通对象的__proto__属性指向创建它的构造函数的原型对象
console.log(sum.multiply(2, 3)); // 6
在以下代码中，我们查看一个数组对象的__proto__属性，值为 [ ], 而数组的__proto__属性是{}, 这说明js里面的数组实际上是从对象扩展而来。同理Set、Map也是如此。
let array = [1, 2, 3, 4]
console.log(array.__proto__); // []
console.log(array.__proto__.__proto__); // {}
const set = new Set([1, 2, 3, 4]);
console.log(set.__proto__); // set {}
console.log(set.__proto__.__proto__); // {}
console.log(set.__proto__.__proto__.__proto__); // null
const map = new Map([['a', 'a'],['b', 'b']，['c', 'c']]);
console.log(map.__proto__); // map {}
console.log(map.__proto__.__proto__); // {}
console.log(map.__proto__.__proto__.__proto__); // null
使用__proto__实现继承
let foo = {
a: 'a',
sum(a, b) {
return a+b
}
}
let bar = {
b: 'b'
}
console.log(foo.__proto__); // {}
// Object.setPrototypeOf(bar, foo);
bar.__proto__ = foo
console.log(bar); // { b: 'b' }
console.log(bar.a); // a
console.log(bar.sum(1, 2)); // 3
在上面的例子中foo.__proto__的值是{}，foo是一个Object对象
js的继承就是通过原型链来实现的: 实际上js没有继承，但是__proto__却起到了类似继承的作用。js中所有的对象起源都是一个空对象，我们把这个空对象叫做原始对象。所有的对象通过__proto__回溯最终都会指向（所谓的指向类似C中的指针，这个原始对象是唯一的，整个内存中只会存在一个原始对象）这个原始对象。
let people = {
name: 'foo',
getName() {
return this.name
}
}
let student = {
sex: `1`,
}
let threeGood = {
grader: `100`
}
// Object.setPrototypeOf(student, people);
student.__proto__ = people
threeGood.__proto__ = student
console.log(threeGood.name, threeGood.sex, threeGood.grader); // foo 1 100
console.log(threeGood.getName()); // foo
解构赋值
解构赋值是指变量赋值的一种常用方式，包含两部操作：
- 在从对象、数组中提取值
- 将提取的值赋给变量
先看下面一段代码，
function getUserInfo() {
return {
id: 1003,
name: 'foo',
sex: 1,
firends: [
{
name: 'foo1',
sex: 1,
},
{
name: 'foo2',
sex: 2
}
]
}
}
const {id, name, sex:isMan, firends, isVip = 0} = getUserInfo()
console.log(id); // 1003
console.log(name); // true
console.log(isMan); // 1
for (let firend of firends) {
console.log(firend);
}
// { name: 'foo1', sex: 1 }
// { name: 'foo2', sex: 2 }
console.log(isVip); // 0
- 嵌套对象解构
解构时，可以通过指定 ‘属性:{xx}’ 的方式从对象的属性对象中解构出想要的值，在赋值时，可以给默认值
const user = {
id: 1,
name: 103,
account: {
money: 131.5,
registerDate: '2017-07-31',
from: {
platfrom: 'wexin',
accessToken: 'avcsdf2341'
}
}
}
let { id, account:{ money, defaultvalue=3 }, account:{from}, account:{from:{accessToken}} } = user
console.log(money); // 131.5
console.log(defaultvalue); //3
console.log(from); // { platfrom: 'wexin', accessToken: 'avcsdf2341' }
console.log(accessToken); // avcsdf2341
console.log(account); // account is not defined
- 数组解构
let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2
let [a, [b], d] = [1, [2, 3], 4];
console.log(a); // 1
console.log(b); // 2
console.log(d); // 4
let m = 1;
let n = 2;
[m, n] = [n, m];
console.log(m, n); // 2 1
- 函数传参解构
let foo = {
a: 'a',
b: 'b',
printf: function(a, b) {
console.log(a, b);
}
}
function show({a, b, printf}) {
printf(a, b)
}
show(foo) // a b
- 导入模块
import { View, Image, Text, StyleSheet } from 'react-native'
- RN开发中用法举例
个人信息Component
// Example1Header.js
import React from 'react'
import { View, Image, Text, StyleSheet } from 'react-native'
class Example1Header extends React.PureComponent {
render () {
// const {name, sex, avator, isVip} = this.props.userInfo
return (
{this.props.name}
{this.props.sex===1 ? '男':'女'}
{this.props.isVip && VIP用户 }
)
}
}
const styles = StyleSheet.create ({
container: { flexDirection:'row', justifyContent:'flex-start', alignItems:'center', backgroundColor: '#dcdcdc', height: 100, marginTop: 10 },
avator: {width: 60, height: 60, marginLeft: 15},
name: {marginLeft: 15, fontSize: 18, fontWeight: 'bold', color: '#000000'},
info: {marginLeft: 15, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center'},
sex: {marginLeft: 15, fontSize: 15, color: '#999'},
vip: {marginLeft: 15, fontSize: 15, color: '#ff0000'}
})
export default Example1Header
好友信息Component
// Example1Firends.js
import React from 'react'
import { View, Image, Text, StyleSheet } from 'react-native'
class Example1Firends extends React.PureComponent {
_renderFirends(firends) {
return (
firends.map( (item, index) => {
return (
{item.name}
{item.sex===1 ? '男':'女'}
)
})
)
}
render () {
const number = `共有${this.props.firends.length}位好友：`
return (
{number}
{this._renderFirends(this.props.firends)}
)
}
}
const styles = StyleSheet.create ({
container: { flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: '#dcdcdc', marginTop: 10 },
firendsNumber: { color: '#333', fontSize: 15 },
firendItem: { flexDirection:'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, height: 30 }
})
export default Example1Firends
测试数据js文件
GetUserInfo = () => {
return {
id: 1003,
isVip: true,
name: 'zhangsan',
sex: 1,
avator: 'https://www.baidu.com/img/bd_logo1.png',
firends: [
{
name: 'lisi',
sex: 1,
},
{
name: 'wangwu',
sex: 2
}
]
}
}
export { GetUserInfo }
整体页面Component
import React from 'react'
import { View } from 'react-native'
import { GetUserInfo } from './data/Example1Data'
import Example1Header from './component/Example1Header'
import Example1Firends from './component/Example1Firends'
class Example1 extends React.PureComponent {
render () {
let {sex, name, isVip, avator, firends} = GetUserInfo()
return (
)
}
}
export default Example1
//index.js文件中注册Example1 component
import { AppRegistry } from 'react-native'
import Example1 from './App/Example1'
AppRegistry.registerComponent('helloreactnative', () => Example1)