深入理解es6
ES6 第五章：数组的空位
- 数组的空位，数组的某个索引位置没有任何值，undefined不是空位
- 判断一个数组中某一个位置是不是空位 in
- in：判断索引位置上有没有值
let arr = [,,,,,]
console.log(arr.length)
输出: 5
let arr = [,undefined,,,]
console.log(1 in arr)
输出: true
console.log(0 in arr)
输出: false
- 在ES5中数组方法对空位的处理不一致，会跳过空位
let arr = [1,2,,,3]
arr.filter(function(item){
console.log(item)
})
输出: 1 2 3
let arr = [1,2,,,3]
for (let key in arr) {
console.log(key)
}
输出: 1 2 3
- 在ES6中数组方法将空位处理为undefined
let arr = [1,2,,,3]
arr.find(function(item){
console.log(item)
})
输出: 1 2 undefined undefined 3
let arr = [1,2,,,3]
for (let item of arr) {
console.log(item)
}
输出: 1 2 undefined undefined 3
- 得到一个有7个1的数组
console.log(Array(7).fill(1))
输出：[1,1,1,1,1,1,1]
ES6 第六章：函数的扩展
函数参数
参数默认值
function fn(x='张三', y='Es6'){
console.log(x, y)
}
fn(0)
输出: 0 'Es6'
参数使用解构赋值
function fn({name='张三', age=20}={}){
console.log(name, age)
}
fn()
输出: '张三' 20
fn({})
输出: '张三' 20
function fn({name,age}={name:'张三',age:20}) {
console.log(name, age)
}
fn()
输出: '张三' 20
fn({})
输出: undefined undefined
length属性
// 形参的个数，如果形参有默认值length就会失真变成没有默认值形参的个数
function fn(x,y){
}
fn(1,2)
console.log(fn.length)
输出: 2
function fn(x=1,y=2){
}
fn(1,2)
console.log(fn.length)
输出: 0
参数默认位置
// 参数默认值一般放最后面
function fn(x,y=10){
console.log(x,y)
}
fn(1)
输出: 1 10
arguments类数组
function fn() {
console.log(arguments)
}
fn(1,2,3,4,5)
输出: Arguments(5) [1, 2, 3, 4, 5, callee: (...), Symbol(Symbol.iterator): ƒ]
// 一般使用解构赋值拿到参数
// 数组不定参数解构赋值
function fn(...args) {
console.log(args)
}
fn(1,2,3,4,5)
输出: [1, 2, 3, 4, 5]
函数NAME
函数的名称
function fn() {
}
console.log(fn.name)
输出: fn
// 通过bind方法得到一个新的函数，name是"bound 原来函数的名字"
function fn() {
}
let fn1 = fn.bind(null)
console.log(fn1.name)
输出: bound fn
// 通过构造函数方式创建一个函数，name是"anonymous"
// new Function("形参","函数体")
// new Function("函数体")
let fn = new Function('x,y','console.log(x,y)')
fn(10, 100)
输出: 10 100
console.log(fn.name)
输出: anonymous
// 将JSON字符串转成数组
let str = '[{"name":"张三", age:100}]'
console.log(eval(str))
输出: [{"name":"张三", age:100}]
let str = '[{"name":"张三", age:100}]'
let arr = (new Function(`return ${str}`))()
console.log(arr)
输出: [{"name":"张三", age:100}]
参数作用域
函数执行的时候先给形参赋值，形参也是私有变量，如果给形参的默认值是一个变量，先看是不是自己的私有变量，不是自己的私有变量就会在找全局中是否有这个变量，没有就报错
// 参数赋值时私有作用域没有就会网上查询，查找全局作用域中有没有，有就会赋值，没有会报错
let m=10,n=100
function fn(x=m, y=n) {
// 私有作用域：私有变量x,y,m,n
console.log(x, y)
let m='张三'
let n='ES6'
}
fn()
输出: 10 100
// 有参数时会替换等号右边的值
fn(1)
输出: 1 100
// 传参后先给x赋值，私有变量x被赋值后，y赋值的时候x已经有值就不会向上查找
let x=100
function fn(x,y=x) {
console.log(x, y)
let m='张三'
let n='ES6'
}
fn(1)
输出: 1 1
ES6 第七章：扩展运算符和箭头函数
扩展运算符 ...
将非数组变成数组(类数组 length)
let str = '123'
console.log([...str])
输出: 1 2 3
将数组变成非数组
let arr1 = [1,2,3,4]
let arr2 = [10,20,30,40]
console.log(arr1.concat((arr2))
console.log([...arr1,...arr2])
输出: [1,2,3,4,10,20,30,40]
找出数组中最大值
let arr = [1,24,124,122,366,1,5,7]
console.log(Math.max.apply(null,arr))
console.log(eval(`Math.max(${arr})`))
console.log(Math.max(...arr))
输出: 366
箭头函数
匿名函数
let fn = (形参) => {函数体}
// 假如函数体只有一行代码return 可以省略{}和return
let fn = x => x + 1
console.log(fn(1))
输出: 2
let fn = x => {return x+1}
console.log(fn(2))
输出: 3
// 通常函数当做参数的时候使用箭头函数
let arr = ['张三',1,2,3]
arr.filter(item => typeof item === 'number')
输出: [1,2,3]
总结
- 箭头函数没有this指向，里面的this是上一级作用域下的this
let obj = {
fn: function() {
console.log(this)
let f = () => {
console.log(this)
}
f()
}
}
obj.fn()
输出: {fn: ƒ}
- 箭头函数没有arguments，如果要拿到参数可以使用扩展运算符
let fn = (...args) => {
console.log(args)
}
fn(1,2,3,4,5)
输出: [1,2,3,4,5]
- 箭头函数不可以用作构造函数，因为不可以使用new执行
let F = () => {}
console.log(new F)
输出: F is not a constructor
ES6 第八章：对象的扩展
对象的简洁方式
let name='张三',age=100
// let obj={name:name,age:age}
let obj={name,age}
// 属性名是字符串，属性名使用[]，里面可以写变量
let name='张三',age=100,str='name'
let obj={
// fn: function(){}
fn(){},
// 'name': name
[str]:name
}
Object的方法扩展
// Object() 将参数变成对象
console.log(Object(1))
输出: Number {1}
console.log(Object(true))
输出: Boolean {true}
Object.is()
说明:
判断两个值是否是相同的值
语法:
Object.is(value1, value2)
返回值<Boolean>：
表示两个参数是否相同的Boolean
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| value1 | Any | Y | 需要比较的第一个值 |
| value2 | Any | Y | 需要比较的第二个值 |
// === 比较时，NaN不等于NaN -0等于0
// Object.is()比较后的结果除了NaN === NaN 和 -0 === 0 之间的比较不一样，其它的跟 === 一致
console.log(NaN === NaN)
输出: fasle
console.log(-0 === 0)
输出: true
console.log(Object.is(NaN,NaN))
输出: true
console.log(Object.is(0,-0))
输出: false
Object.assgin()
说明:
将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
语法:
Object.assign(target, ...sources)
返回值<Object>：
目标对象
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| target | Object | Y | 目标对象 |
| sources | Object | Y | 源对象 |
let obj = {name:'张三'}
let obj1 = {age:100}
Object.assign(obj,obj1)
console.log(obj)
输出: {name: "张三", age: 100}
扩展运算符合并对象
- ==ES7==中提供了对象的扩展运算符 ...
let obj1 = {name:'张三'}
let obj2 = {age:100}
let obj = {...obj1,...obj2}
console.log(obj)
输出: {name: "张三", age: 100}
<font color='red'>Object.getOwnPropertyDescriptor()</font>
说明:
返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）
语法:
Object.getOwnPropertyDescriptor(obj, prop)
返回值<Object>：
如果指定的属性存在于对象上，则返回其属性描述符对象(property descriptor)，否则返回 undefined
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| obj | Object | Y | 需要查找的目标对象 |
| prop | String | Y | 目标对象内属性名称（String类型） |
/*
* configurable: false 是否可配置 可以删除这个属性
* enumerable: false 是否可枚举
* value: 3
* writable: false 是否可修改
**/
console.log(Object.getOwnPropertyDescriptor('123','length'))
输出: {value: 3, writable: false, enumerable: false, configurable: false}
Object.keys()
说明:
返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致
语法:
Object.keys(obj)
返回值<Array>：
一个表示给定对象的所有可枚举属性的字符串数组
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| obj | Object | Y | 要返回其枚举自身属性的对象 |
let obj = {name:'张三',age:100}
console.log(Object.keys(obj))
输出: ["name", "age"]
Object.values()
说明:
返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )
语法:
Object.values(obj)
返回值<Array>：
一个包含对象自身的所有可枚举属性值的数组
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| obj | Object | Y | 被返回可枚举属性值的对象 |
let obj = {name:'张三',age:100}
console.log(Object.values(obj))
输出: ["张三", 100]
Object.entries()
说明:
返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）
语法:
Object.entries(obj)
返回值<Array>：
给定对象自身可枚举属性的键值对数组
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| obj | Object | Y | 可以返回其可枚举属性的键值对的对象 |
let obj = {name:'张三',age:100}
console.log(Object.entries(obj))
输出: [["name", "张三"],["age", 100]]
对象的Set和Get
let obj = {
_name: '张三',
set name(val) {
return this._name = val
},
get name() {
return this._name
}
}
console.log(obj.name)
输出: '张三'
obj.name = '李四'
console.log(obj.name)
输出: '李四'
ES6 第九章：Symbol
基础用法
Symbol是一个新的基本数据类型，而且是一个值类型。使用Symbol函数执行得到一个Symbol数据类型
Symbol跟字符串差不多，但是使用Symbol得到一个数据，每一个是完全不同的
Symbol可以接受一个参数()，是对这个symbol数据的描述，即使描述一样，但是值也是不同
一般当做对象的属性，任意一个Symbol()得到的值都是不同的
// 数据类型
let sym = Symbol()
console.log(typeof sym)
输出: symbol
// 逻辑比较
let sym1 = Symbol()
let sym2 = Symbol()
console.log(sym1 == sym2)
输出: false
// 赋值
let sym1 = Symbol()
let sym2 = Symbol()
let obj = {
sym1: '张三',
[sym1]: '张三李四'
}
console.log(obj)
输出: {sym1: "张三", Symbol(): "张三李四"}
obj[sym2]='张三'
console.log(obj)
输出: {sym1: "张三", Symbol(): "张三李四", Symbol(): "张三"}
// Symbol值不能跟其他值计算
// Symbol不能转数字，不能和字符串相加
// Symbol可以转为Boolean值
console.log(!Symbol(1))
输出: false
// Symbol可以使用toString转成显示字符串
console.log(Symbol(1).toString())
输出: 'Symbol(1)'
// Symbol.for() 如果之前有相同的参数的Symbol值，找到这个值返回，如果没有就创建一个新的Symbol值
// 使用Symbol.for() 参数相同值就是相同
let sym1=Symbol.for('张三')
let sym2=Symbol.for('张三')
console.log(sym1 == sym2)
输出: true
// Symbol.keyFor(symbol值) 找到使用Symbol.for创建的值的描述
// 如果使用的是Symbol创建的是获取不到的
let sym=Symbol.for('张三')
console.log(Symbol.keyFor(sym))
输出: '张三'
ES6 第十章：Set
类似数组，只有value没有键key
通过构造函数方式创建一个Set实例时，参数是一个数组或者有iterable接口的类似数组
有iterable接口：数组，arguments，元素集合，Set，Map，字符串
console.log(new Set([1,2,3,4]))
输出: Set(4) {1, 2, 3, 4}
console.log(new Set('1234'))
输出: Set(4) {"1", "2", "3", "4"}
function fn() {
console.log(new Set(arguments))
}
fn(1,2,3,4)
输出: Set(4) {1, 2, 3, 4}
去重
- 默认会去重
例一:
let arr = [1,1,2,2,3,3,4,4]
console.log(new Set(arr))
输出: Set(4) {1, 2, 3, 4}
例二:
let str = '12341234'
console.log(new Set(str))
输出: Set(4) {"1", "2", "3", "4"}
例三:
function fn() {
console.log(new Set(arguments))
}
fn(1,2,3,4,1,2,3,4)
输出: Set(4) {1, 2, 3, 4}
Set原型上扩展的方法
add
说明:
向一个 Set 对象的末尾添加一个指定的值
语法:
set.add(value)
返回值<Set>：
Set 对象本身
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| value | Any | Y | 需要添加到 Set 对象的元素的值,不能添加重复的值 |
// add增加时，如果set中没有就加到末尾，如果有就加不上，返回值增加后的Set实例
let set = new Set([1,'张三',null,NaN,true])
console.log(set.add(10))
输出: Set(6) {1, "张三", null, NaN, true, 10}
// 链式写法
let set = new Set([])
console.log(set.add(1).add(2).add('3').add('4'))
输出: Set(4) {1, 2, "3", "4"}
delete
说明:
从一个 Set 对象中删除指定的元素
语法:
set.delete(value)
返回值<Boolean>：
成功删除返回 true，否则返回 false
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| value | Any | Y | 将要删除的元素 |
// 删除Set中的某一项
let set = new Set([1,'张三',null,NaN,true])
console.log(set.delete(1))
输出: true
clear
说明:
清空一个 Set 对象中的所有元素
语法:
set.clear()
返回值<Undefined>：
undefined
// 清空Set
let set = new Set([1,'张三',null,NaN,true])
set.clear()
console.log(set)
输出: Set(0) {}
has
说明:
检查值value是否存在Set对象中
语法:
set.has(value)
返回值<Boolean>：
如果指定的值（value）存在于Set对象当中，返回true; 否则返回 false
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| value | Any | Y | 是否存在于Set的值 |
// 检查值是否存在于Set中
let set = new Set([1,'张三',null,NaN,true])
console.log(set.has(1))
输出: true
forEach
说明:
根据集合中元素的顺序，对每个元素都执行提供的 callback 函数一次
语法:
set.forEach(callback[, thisArg])
参数:
| 名称 | 类型 | 必选 | 描述 |
|---|---|---|---|
| callback | Function | Y | 每个元素都会执行的函数 |
| thisArg | Object | N | 当执行callback函数时候，可以当作this来使用 |
// 遍历forEach：keys values entries
let set = new Set([1,'张三',null,NaN,true])
set.forEach((item, index, input) => {
// Set实例只有value没有key
// item,index: 当前想value
// input: 当前Set实例
})
keys
说明:
返回一个新的 Iterator 对象。它包含按照顺序插入Set对象中每个元素的key值
语法:
set.keys()
返回值<SetIterator>：
返回一个新的 Iterator 对象。它包含按照顺序插入Set对象中每个元素的key值
// key仍然为value
let set = new Set([1,'张三',null,NaN,true])
for(let key of set.keys()) {
console.log(key)
}
输出: 1 "张三" null NaN true
values
说明:
返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值
语法:
set.values()
返回值<SetIterator>：
返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值
// val是value值
let set = new Set([1,'张三',null,NaN,true])
for(let val of set.values()) {
console.log(val)
}
输出: 1 "张三" null NaN true
entries
说明:
返回一个新的迭代器对象 ，这个对象的元素是类似 [value, value] 形式的数组，value 是集合对象中的每个元素，迭代器对象元素的顺序即集合对象中元素插入的顺序。由于集合对象不像 Map 对象那样拥有 key，然而，为了与 Map 对象的 API 形式保持一致，故使得每一个 entry 的 key 和 value 都拥有相同的值，因而最终返回一个 [value, value] 形式的数组
语法:
set.entries()
返回值<SetIterator>：
一个新的包含 [value, value] 形式的数组迭代器对象，value 是给定集合中的每个元素，迭代器 对象元素的顺序即集合对象中元素插入的顺序
// item,val全是values
let set = new Set([1,'张三',null,NaN,true])
for(let [item,val] of set.entries()) {
console.log(item,val)
}
输出: [1,1] ["张三","张三"] [null,null] [NaN,NaN] [true,true]
