深入理解es6（附代码-中）

深入理解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

参数:

名称	类型	必选	描述
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)

返回值