ES6-ES13学习笔记

      // var
       var a = 10;
       var a = 20;
       console.log(a); // 20 

       // let
       let b = 10;
       // let b = 20; // SyntaxError: Identifier 'b' has already been declared
    
       // const
        const c = 10;
        // const c = 20; // SyntaxError: Identifier 'c' has already been declared

2、let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升）


        console.log(num1)
        var num1 = 10; // undefined

        console.log(num2)
        let num2 = 20; // ReferenceError: Cannot access 'num2' before initialization

        console.log(num3)
        const num3 = 30; // ReferenceError: Cannot access 'num3' before initialization

3、let 和 const 声明的变量会被所有代码块限制作用范围

（var只有函数限制作用域，let、const 声明的变量，除了函数可以限制，所有的代码块都可以限制其作用域（if/while/for/...）

        if(true){
            var numVar = 10;
        }
        console.log(numVar); // 10

        if(true){
            let numLet = 20;
        }
        // console.log(numLet); // ReferenceError: numLet is not defined

        if(true){
            const numConst = 30;
        }
        // console.log(numConst); // ReferenceError: numConst is not defined

4、let声明的变量的值可以改变，const声明的值不可改变

        //let和const区别
        let lnum = 100
        lnum = 200
        console.log(lnum)

        const cnum = 100
        cnum = 200

5、let声明的时候可以不赋值，const声明时必须赋值

解构赋值

对象解构

const Ian = {
            name:'IIIIIan',
            age:0
        }
        // console.log(name,age) // 报错，因为name和age是Ian对象的属性，不是全局变量
        const {name,age} = Ian
        console.log(name,age)

数组解构

        const arr = [1,2,3]
        console.log(arr[0],arr[1],arr[2])// 1 2 3, 传统写法
        console.log(arr)// [1,2,3]
        console.log(...arr)// 1 2 3, 展开运算符
        console.log([...arr])// [1,2,3]
        // 解构赋值
        const [a,b,c] = arr
        console.log('a,b,c',a,b,c)

模版字符串

ES5 中我们表示字符串的时候使用 '' 或者 ""

在 ES6 中，我们还有一个东西可以表示字符串，就是 ``（反引号）

let str = `hello world`
console.log(typeof str) // string

1、``允许字符串换行

2、反引号可以直接在字符串里面拼接变量

// 模版字符串拼接变量
let num = 100
let str = `hello${num}world${num}`
console.log(str) // hello100world100

字符串扩展

includes()

判断字符串中是否存在指定字符

repeat()

返回一个新字符串,表示将原字符串重复n次。

startsWith()

返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()

返回布尔值，表示参数字符串是否在原字符串的尾部。

        let str = 'hello world'
        console.log(str.includes('hello')) // true
        console.log(str.startsWith('hello')) // true
        console.log(str.endsWith('world')) // true
        console.log(str.startsWith('ian')) // false
        console.log(str.repeat(3)) // hello worldhello worldhello world

数值扩展

二进制和八进制表示法

let count1 = 100
let count2 = 0x100
let count3 = 0o100
let count4 = 0b100

（Number.）isFinite()与isNaN()

        // isFinite 和 isNaN
        // isFinite()：用来检查一个数值是否为有限的（finite），即不是Infinity。
        // isNaN()：用来检查一个值是否为NaN。
        console.log('1/3',isFinite(1/3)) 
        console.log('0',isFinite(0)) // true
        console.log('Infinity',isFinite(Infinity)) // false
        console.log('NaN',isFinite(NaN)) // false
        console.log('NaN',isNaN(NaN)) // true
        console.log('0',isNaN(0)) // false
        let num1 = Number.isFinite(100) //true
        let num2 = Number.isFinite(100/0) //false
        let num3 = Number.isFinite(Infinity) // false
        let num4 = Number.isFinite("100") //false
        let num1 = Number.isNaN(100) // false
        let num2 = Number.isNaN(NaN) //true
        let num3 = Number.isNaN("kerwin") //false
        let num4 = Number.isNaN("100") // false

减少全局性方法，使得语言逐步模块化，它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

Number.isInteger()

判断是否为整数

        console.log('NaN',Number.isInteger('NaN')) // false
        console.log('NaN',Number.isInteger(NaN)) // false
        console.log('0',Number.isInteger(0)) // true
        console.log('0.1',Number.isInteger(0.1)) // false

Math.trunc

将小数部分抹掉,返回一个整数。

        console.log(Math.trunc(1.2)) //1
        console.log(Math.trunc(1.8))// 1
        console.log(Math.trunc(-1.8)) //-1
        console.log(Math.trunc(-1.1))//-1

Math.sign

Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。

        console.log(Math.sign(1)) // 1
        console.log(Math.sign(-1)) // -1
        console.log(Math.sign(0)) // 0
        console.log(Math.sign(-0)) // -0
        console.log(Math.sign(NaN)) // NaN
        console.log(Math.sign('ian')) // NaN

数组扩展

...扩展运算符

let arr1 = [1,2,3]
let arr2 = [4,5,6]

console.log([...arr1,...arr2])

Array.from

将类数组对象转换为真正数组

function test(){
        console.log(Array.from(arguments))
}

test(1,2,3)

let oli = document.querySelectorAll("li")
console.log(Array.from(oli))

Array.of

      let arr1 = Array(3)
      console.log('arr1',arr1);

      let arr2 = Array.of(3)
      console.log('arr2',arr2);

find方法

1)该方法主要应用于查找第一个符合条件的数组元素

2)它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined

      let arr = [11,12,13,14,15]
      let res1 = arr.find(function(item){
          return item>13
      })
      let res2 = arr.findIndex(function(item){
          return item>13
      })
      let res3 = arr.find(function(item){
          return item>16
      })
      console.log(res1) //14
      console.log(res2) //3
      console.log(res3) //undefined

fill方法

使用自己想要的参数替换原数组内容,但是会改变原来的数组

方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。

let arr11 = new Array(3).fill("Ian")
let arr22 = ['a', 'b', 'c'].fill("Ian", 1, 2)
console.log(arr11)//['Ian', 'Ian', 'Ian']
console.log(arr22)// ['a', 'Ian', 'c']

// MDN示例

const array1 = [1, 2, 3, 4];

// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]

// Fill with 5 from position 1
console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]

console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]

flat与flatMap方法

flatMap()按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

flat() 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

// MDN示例

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]

 var obj = [{
                name: "A",
                list: ["鞍山", "安庆", "安阳"]
            },
            {
                name: "B",
                list: ["北京", "保定", "包头"]
            }
]
console.log(obj.flatMap(item => item.list))//["鞍山", "安庆", "安阳", "北京", "保定", "包头"]

对象扩展

对象简写

        let name ="moduleA"
        let obj = {
            name,
            test1(){
                console.log('test1',this.name)
            },
            test2(){
                console.log('test2',this.name)
            }
        }
        obj.test1()
        obj.test2()
        console.log(obj)
        console.log(obj.name)
        obj.name = "moduleB"
        console.log(obj.name)

属性名表达式

        let name1 ="moduleA"
        let obj1 = {
            name1,
            [name1+"test1"](){

            },
            [name1+"test2"](){

            }
        }
        console.log(obj1)

Object.assign

Object.assign(target, object1，object2)的第一个参数是目标对象，后面可以跟一个或多个源对象作为参数。

target：参数合并后存放的对象

object1：参数1

object2：参数2

        const a = {
            name:"Ian"
        }
        const b = {
            age:18
        }
        const c = {
            height:180
        }

        Object.assign(a,b,c)
        console.log(a)

Object.is

方法判断两个值是否是相同的值

console.log(NaN===NaN) //false
console.log(+0===-0) //true

console.log(Object.is(NaN,NaN)) //true
console.log(Object.is(+0,-0)) //false

函数扩展

箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式
重点： 箭头函数只能简写函数表达式，不能简写声明式函数

function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
  fn: function () {} // 可以简写
}

语法： (函数的行参) => { 函数体内要执行的代码 }

const fn = function (a, b) {
  console.log(a)
  console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
  console.log(a)
  console.log(b)
}
const obj = {
  fn: function (a, b) {
    console.log(a)
    console.log(b)
  }
}
// 可以使用箭头函数写成
const obj2 = {
  fn: (a, b) => {
    console.log(a)
    console.log(b)
  }
}

箭头函数的特殊性

箭头函数内部没有 this，箭头函数的 this 是上下文的 this

// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
  fn: function () {
    console.log(this)
  },
  // 这个位置是箭头函数的上一行，但是不能打印出 this
  fun: () => {
    // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
    console.log(this)
  }
}

obj.fn()
obj.fun()

按照我们之前的 this 指向来判断，两个都应该指向 obj
但是 fun 因为是箭头函数，所以 this 不指向 obj，而是指向 fun 的外层，就是 window

箭头函数内部没有 `arguments` 这个参数集合

const obj = {
  fn: function () {
    console.log(arguments)
  },
  fun: () => {
    console.log(arguments)
  }
}
obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
obj.fun(1, 2, 3) // 会直接报错

函数的行参只有一个的时候可以不写 `()` 其余情况必须写

const obj = {
  fn: () => {
    console.log('没有参数，必须写小括号')
  },
  fn2: a => {
    console.log('一个行参，可以不写小括号')
  },
  fn3: (a, b) => {
    console.log('两个或两个以上参数，必须写小括号')
  }
}

函数体只有一行代码的时候，可以不写 `{}` ，并且会自动 return

const obj = {
  fn: a => {
    return a + 10
  },
  fun: a => a + 10
}

console.log(fn(10)) // 20
console.log(fun(10)) // 20

函数传递参数的时候的默认值

function fn(a) {
  a = a || 10
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

在 ES6 中我们可以直接把默认值写在函数的行参位置

function fn(a = 10) {
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20
// 箭头函数也可以使用
const fn = (a = 10) => {
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

注意： 箭头函数如果需要使用默认值，那么一个参数的时也需要写（）

Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它属于 JavaScript 语言的原生数据类型之一，其他数据类型是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

1.使用Symbol作为对象属性名

 let name  = Symbol()
        let age = Symbol()
        var obj = {
            [name]: '张三',
            [age]: 18
        }
        age = 20// 这里的 age 是一个普通的字符串，不是 Symbol 类型的
        console.log(obj)
        let a = Symbol('A')
        let b = Symbol('A')
        console.log(a === b) // false</