ES6基础1—面向过程的数据结构

一 .基本数据类型

1.数值

2.字符串

1).字符串处理

2).`` 模版字符串

3.Symbol

1). 创建Symbol的两种方式

2). 对Symbol的操作

二.集合

1.数组 Array

1).数组的定义

2).数组的操作

2.定型数组

1).ArrayBuffer与DataView

2).Int32Array

3.Set

1).Set与Array

2).Set的操作

1>.增删改查

2>.遍历

3>.合交差

4.Map

1).Map与Array

2).Map的操作

1>.增删改查

2>.遍历

3>.Array转Map

4>.复制

5>.合并

三.对象

1).对象的定义

2).对象的操作

合并

比较

四.迭代器

一.基本数据类型

Number,String, Boolean, Object, null, undefined,Symbol

1.数值

进制: 0b/0B(二进制),0o/0O(八进制)
相关类Number,Math

Number.isFinite(NaN) //false
Number.parseInt("12.34") //12
Number.isInteger(12.34) // false

Math.cbrt(9) //1
Math.imul(2,3) //6
Math.sign(-100)

2.字符串

1).字符串处理

.includes()
.startsWith()
.endsWith()
.padStart()
.padEnd()

var str1 = "hello, world"
console.log(str1.includes("hello")) //true
console.log(str1.startsWith("hello")) //true
console.log(str1.endsWith("d")) //true
console.log(str1.repeat(2)) //hello, worldhello, world
console.log(str1.padStart(20, "a")) //aaaaaaaahello, world
console.log(str1.padEnd(20, "a")) //hello, worldaaaaaaaa
console.log(str1.replace("o", "a"))//hella, world

2).`` 模版字符串

``与${}配合

let name = "Mike"
let age = 27
let info = `My name is ${name}, I am ${age}`

标签模版

console.log `info is ${info}` // [ 'info is ', '' ] My name is Mike, I am 27

3.Symbol

表示独一无二的值，最大的用法是用来定义对象的唯一属性名

let sy = Symbol('KK')
console.log("sy = ", sy)

var syObject = {}
syObject[sy] = "kk"
console.log(syObject) //{ [Symbol(KK)]: 'kk' }

1). 创建Symbol的两种方式

let yellow1 = Symbol("Yellow")
let yellow2 = Symbol.for("Yellow")
let yellow3 = Symbol.for("Yellow")
console.log(yellow1 == yellow2) //false
console.log(yellow1 === yellow2) //false
console.log(yellow3 == yellow2)  //true
console.log(yellow3 === yellow2) //true
console.log(Symbol.keyFor(yellow1)) //undefined
console.log(Symbol.keyFor(yellow2)) //Yellow

2). 对Symbol的操作

for并不能遍历出对象中的Symbol 属性
Object.keys()也不能
只能通过
Object.getOwnPropertySymbols() 和Reflect.ownKeys()

var str1 = {[sy]:"abdee", a:"A"}

for(let i in str1) {
	console.log("i = ", i) 
}
//i =  a

console.log("str1 = ", Object.keys(str1)) //str1 =  [ 'a' ]
console.log(Object.getOwnPropertySymbols(str1)) // [ Symbol(KK) ]
console.log(Reflect.ownKeys(str1)) //[ 'a', Symbol(KK) ]

二.集合

1.数组

1).数组的定义

三种方式
1.[]
2.Array.of
3.Array.from 从其它类型转

let arr1 = [1,2]
console.log(arr1)

let arr2 = Array.of(1,2,3,4)
console.log(arr2)

let arr3 = Array.from([1,2], (n) => n*2)
console.log(arr3)

//Array.from(arrayLike[, mapFn[, thisArg]])
let map = {
	do: function(n) {
		return n*2
	}
}
let arrayLike = [1,2,3]
console.log(Array.from(arrayLike, function(n){
	return this.do(n)
}, map))

2).数组的操作

其它类型转数组

对象
set,map
字符串

对象转数组对象需要定义length属性

let arr4 = Array.from( {
0:‘0’,
1:“1”,
2:“2”,
})
console.log(arr4)//[]

let arr5 = Array.from( {
0:‘0’,
1:“1”,
2:“2”,
length:3
})
console.log(arr5)//[ ‘0’, ‘1’, ‘2’ ]
var result = arr[1] is ${arr5[1]}
console.log(result)

增删改查

遍历

遍历方式：
1.for of
2. .entries(),.keys(), .values()

for of

for(let [key, value] of arr6.entries()) {
	console.log(key, value)
}

.entries(),.keys(), .values()

let entries  = arr6.entries()
console.log(entries.next().value)
console.log(entries.next().value)
console.log(entries.next().value)
console.log(entries.next().value)

let keys  = arr6.keys()
console.log(keys.next().value)
console.log(keys.next().value)
console.log(keys.next().value)
console.log(keys.next().value)
let values  = arr6.values()
console.log(values.next().value)
console.log(values.next().value)
console.log(values.next().value)
console.log(values.next().value)

填充

console.log(arr6.copyWithin(0,2,4)) //从0开始，用从2，到4覆盖数组
console.log(arr6.fill(0,1,2))//用0填充数组，从1开始，2结束, [start, end)
console.log(arr6.fill(0,0,4))

嵌套

let arr7 = [5,6,7,8]
console.log([arr6, arr7].flat())
console.log([1,2, [3,4, [5,6]]]) //[ 1, 2, [ 3, 4, [ 5, 6 ] ] ]

复制

let arr8 = [1,2]
let arr9 = [... arr8]
let arr10 = arr8
console.log("arr9 is ", arr9)
arr8[0] = 111

console.log("arr10 is ", arr10) //[ 111, 2 ]
console.log("arr9 is ", arr9) // [1,2]

2.定型数组

与数组的区别：创建时确定了数组的大小

1).ArrayBuffer与DataView

ArrayBuffer，内存中的一段地址
DataView, 对数组缓冲区操作

let buffer1 = new ArrayBuffer(10)
console.log(buffer1.byteLength)
let dataView = new DataView(buffer1)
dataView.setInt8(0,1)
console.log(dataView.getInt8(0))
let dataView2 = new DataView(buffer1, 0, 3)
dataView2.setInt8(0, 100)
console.log(dataView.getInt8(0)) //100
console.log(dataView2.getInt8(0))//100

2).Int32Array

let view = new Int32Array([1,2])
view[10] = 3
console.log("Int32Array")
console.log(view.byteLength)
console.log(view)
console.log(view[0])
console.log(view[10])//undefined
console.log(view.byteLength)
console.log("定型数组不是数组", Array.isArray(view))

let view2 = view.subarray(0,1) //[start, end)
console.log(view2) //Int32Array [ 1 ]

3.Set

1).Set与Array

Set中的元素不可重复

var set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(1)
set1.add(2)
console.log(set1)

2).Set的操作

1>.增删改查

set1.add(4)
set1.add(3)
set1.delete(1)
console.log(set1)
//查？？？
console.log(set1.has(1))

2>.遍历

遍历的两种方式
1.for of
2.Set.forEach()

for (var value of set1) {
	console.log("value = ", value)
}
set1.forEach(function(value) {
	console.log("for each value = ", value)
})

3>.合交差

合集

var set1 = new Set([6, 2, 3]);
var set2 = new Set([4, 3, 2,1]);
var union = new Set([...set1, ...set2])
console.log(union)

交集

var intersect = new Set([...set1].filter(x=>set2.has(x)))
console.log( intersect)

差集

var difference1 = new Set([...set2].filter(x=>!set1.has(x)))
var difference2 = new Set([...set1].filter(x=>!set2.has(x)))
var difference  = new Set([...difference1, ...difference2])
console.log(difference)

4.Map

1).Map与Array

Map,Array,Object都可以看作是键值对的集合
它们之间的区别：
Map的键值是有序的，而Object的并不是，Array的键值是确定的

2).Map的操作

1>.增删改查

var map1 = new Map()
map1.set("a", "A")
map1.set("b", "B")
map1.set("b", "C")
map1.set(1, "One")
map1.set(function(){}, "函数")

console.log(map1)
console.log(map1["a"])
var obj1 = { 1:"One", a:10, "a":"A"} //相同的变量名a会被覆盖
console.log(obj1)
console.log(obj1["a"])
console.log(obj1.a)

2>.遍历

遍历的3种方式
1.for of
2.Map.forEach
3. .entries(), .keys(), values()

map1.forEach(function(value, key) {
	console.log(key+" = " + value)
})

3>.Array转Map

var kvArray = [["key1", "value1"], ["key2", "value2"]]
var map1 = new Map(kvArray)
console.log(map1)

4>.复制

var map2 = new Map(map1)
console.log(map1)
console.log(map2)
console.log(map2===map1)

5>.合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
var merged = new Map([...first, ...second])
console.log(merged)
var merged = new Map([...second, ...first])
console.log(merged)

三.对象

1).对象的定义

var person = {
	age : 10, //不用使用var,const,let,不用等号
	name : "Zang",
	sayHi() {
		console.log("Hi")
	},
	info : function() {
		let info = `My name is ${this.name}, ${this.age} years old`
		console.log(info)
	}

}
person.age = 30
console.log(person.age)
console.log(person.name)
person.sayHi()
person.info()

对象中的属性和方法

var id = 1001
var person = {
	age : 10, //不用使用var,const,let,不用等号
	name : "Zang",
	sayHi() {
		console.log("Hi")
	},
	info : function() {
		let info = `My name is ${this.name}, ${this.age} years old`
		console.log(info)
	}

}
person.age = 30
console.log(person.age)
console.log(person.name)
console.log(person.id)
person.sayHi()
person.info()

属性名表达式

var hello = "hello"
var person  = {
	["he"+"llo1"]() {
		return "Hi"
	},
	[hello]:"hello"
}
console.log(person)

2).对象的操作

合并

合并时，后面属性覆盖前面属性

var age = {age:30, name:"Sundy"}
var name = {name:"Amy", age:20}
var person = {
	...name, ...age
}
console.log("合并对象: ", person)//合并对象:  { name: 'Sundy', age: 30 }
var person = {...name, ...age, name:"Sum", age:2}
console.log("合并对象: ", person) //合并对象:  { name: 'Sum', age: 2 }
var person = Object.assign(person, name, age)
console.log("合并对象: ", person) //合并对象:  { name: 'Sundy', age: 30 }

比较

Object.is,相当于===

var person1 = {
	name:"Sum",
	age:2
}
var person2 = {
	name:"Sum",
	age:2
}
console.log(person1===person2)//false
console.log(Object.is(person1===person2))false

四.迭代器

使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现
遍历数据结构元素的指针（如数据库中的游标）

const items = ["zero", "one", "two"]
const it = items[Symbol.iterator]()
var r1 = it.next()
console.log(r1)
var r1 = it.next()
console.log(r1)
var r1 = it.next()
console.log(r1)
var r1 = it.next()
console.log(r1)

// { value: 'zero', done: false }
// { value: 'one', done: false }
// { value: 'two', done: false }
// { value: undefined, done: true }