ES6

lionxxxxxx
196 阅读7分钟

let

说明：es6中新增的定义变量的方式。（之前的是var）

let变量与var变量的区别

1.用let 声明的变量不存在变量提升
2.用let 声明的变量不可以重复声明
3.用let 声明的变量在（块级作用域）内，在定义的作用域外部获取不到对应的变量
4.暂时性死区在（块作用域内）let声明的变量会形成一个封闭性的死区只能在声明之后调用，否则就会报错

作用域

1.全局作用域：全局作用域在任何地方都可以访问，就是函数外的变量具有全局作用域 所有window对象上的属性都具有全局作用域（比如定时器）。
2.局部作用域：只能在函数的内部进行访问，在函数内部用var定义的变量和用function声明的函数，都有局部作用域，局部变量在函数执行完之后会被垃圾回收机制清理掉。
3.es6中的新增块级作用域 需用{}表示在代码块内部 外层的作用域无法获取内层的内容 。
  for(let m=0; m<aLi.length; m++) {
    aLi[m].onclick = function(){
      console.log(m); // m  内部块级作用域调用了外部的块级作用域中的变量 m 会存在内存中
    }
  }

外部不可以调用内部。

  for(let m=0; m<aLi.length; m++) {
    aLi[m].onclick = function(){
      console.log(m); // m  内部块级作用域调用了外部的块级作用域中的变量 m 会存在内存中
    }
  }

内部可以调用外部。

用let解决闭包

es5中 
for(var i=0;i<10;i++){
    arr[i]=function(){
        return i;
    }
}
console.log(arr[3]());//10

返回10 而不是3.因为访问全局作用域for已经循环完毕，需要用函数立即调用才能解决。

for(let i=0;i<10;i++){
    arr[i]=function(){
        return i;
    }
}
console.log(arr[3]());//3

此时返回3. 我们可以直接用let声明，在块作用域中，每次的返回的值都是其对应块作用域的变量。

const

说明：const定义的常量不可以重新赋值，而且必须在声明时直接赋值。

const 定义引用类型的常量 栈里存储的指针地址是常量不可以修改 但是堆里对应的具体的内容是可以修改的

const obj = {
    name: 'xiaoming',
    age: '2'
}
console.log(obj)
    obj.name = 'wxzuishuai';
    console.log(obj);//wxzuishuai
    obj = {
     name: 'wx',
     age: '18'
     }
    console.log(obj) // 会报错 因为重新赋值会修改指针 const不允许修改指针

const 的特性

1.const 声明的变量不存在变量提升
2.const 声明的变量不可以重复声明
3.const 声明的变量在块级作用域内，在定义的作用域外部获取不到对应的变量 暂时性死区 在块作用域内 const声明的变量 会形成一个封闭性的死区 只能在声明之后调用，否则就会报错

冻结

Object.freeze(obj) 函数被冻结后可以重新赋值，但是因为冻结，不会生效也不会报错。

  • 定义变量： var let const

  • 作用域：全局作用域 局部作用域 块级作用域（let）

解构赋值

说明： 我们把从数组和对象中提取值，对变量进行赋值，称为解构。
  • 数组解构按照顺序依次赋值
   let [a,b,c] = [1,2,3]
    console.log(a,b,c);//1 2 3
    
    let [d,e,[f,g],h] = [1,2,[3,4],5]
    console.log(d,e,f,g,h)//1 2 3 4 5

    let [i,j,k,l,m] = [1,2,[3,4],5]
    console.log(i,j,k,l,m)//1 2 Array(2){3 4} 5 undefined

可以实现两个变量值的互换。

function fun([x,y,z=4]){ 
   console.log(x,y,z)
 }

可以设置默认值 只有是undefined的时候才会使用默认值

  • 对象解构按照key进行赋值 如果不希望用原来的key作为变量名需要用key：x的方式取别名
let {age:x, name} = {name: 'xm', age: 4}
console.log(name, x)//xm 4
let obj1 = {
  name: 'xm',
  age: '4',
  eating: function(){
    console.log('eating')
  }
}
let {name,age,eating} = obj1;
console.log(name,age,eating)//xm 4 ƒ ()
eating();//eating
  • 字符串解构把字符串中的每一个字符提取分别进行赋值
 let [n,p,q] = 'hello'
    console.log(n,p,q)//h e l

扩展运算符

  • 可以复制一个数组
let array = [1,2,3]
var a1 = [...array]; 
console.log(a1); //[1,2,3]
let a3 = array;
console.log(a3) //[1,2,3]
array[0] = 4;
console.log(a3) //[4,2,3]
console.log(a1); //[1,2,3]

也可以实现数组的深拷贝。

  • 作为数组的一部分
let a2 = [...array,'a','b'] 
console.log(a2);//[1,2,3,'a','b']
  • 实现数组的合并
let a4 = [4,5,6]
let a5 = [...array,...a4]
console.log(a5)// 4 2 3 4 5 6
  • 可以实现对象的合并 不同的属性会合并，相同的属性 后面的会把前面的覆盖
let p1 = {
  name: 'xm',
  age: '4'
}
let p2 = {
  weight: '8kg',
  age: '2'
}

let p3 ={...p2,...p1}
console.log(p3);
  • 将类数组转化为数组

querySelectorAll 拿到的为NodeList getElementsByTagName 拿到的为HTMLCollection

let aList = [...aLi];
  • rest 表示剩余的
function fun(x,...rest)
  console.log(x);//1
  console.log(rest);//2 3 4
}
fun(1,2,3,4)
  • arguments.callee 表当获取前方法
function fun1(){
    console.log(11111)
    arguments.callee() //递归调用小心死机！
}

函数的扩展

方法

fun.length
获取没有赋值的默认值的形参的个数

描述

fun.name
获取函数名

箭头函数

var fun = function（）{
    
} 
var fun = () =>{

}

1.在箭头函数中this指向的是父作用域中的this
2.箭头函数中不可以使用arguments获取参数,可以使用rest获取参数
3.在箭头函数中如果只有一行语句 可以把{}省略

字符串的扩展 应用：模版字符串 字符串放在``中， 变量用${}表示

let _start = 0;
let _count = 10;
let url = 'https://douban.uieee.com/v2/movie/in_theaters?start=' + _start + '&count=' + _count;
console.log(url);
let _url = `https://douban.uieee.com/v2/movie/in_theaters?start=${_start}&count=${_count}`
console.log(_url);

结果相同。

方法
描述

str.indexOf 检索字符串 有返回索引 没有返回-1

str.includes 检索字符串 有返回ture 没有返回flase

str.startsWith 检索参数字符串是否在字符串的头部 => boolean

str.endsWith 检索参数字符串是否在字符串的尾部 => boolean

str.padStart 在字符串的开头补全字符串 返回一个新的字符串

str.padEnd 在字符串的结尾补全字符串 返回一个新的字符串

str.repeat 重复字符串 返回一个新的字符串

检索字符串应用

if (ua.includes('iPhone') ){
  console.log(111)
} else {
  console.log(2222)
}

for of 循环数组 .keys拿到的是数组的索引 values 对应索引的值 entries 返回的是[index,value] forEach（function（value,key）{}）循环数组 value 对应索引的值 key拿到的是数组的索引

对象的扩展

let定义对象可以简写 
let name = 'zs'
let age = 18

let obj = {
  name, // 属性的简写
  age,
  eating() { // 方法的简写
    console.log(this.name)
  }
}

Object.is（）判断值和类型是否相等 NaN===NaN//正常flase 方法ture +0===-0//正常ture 方法 flase Object.assign（a，b）把b合并到a上 可以有多个参数 ...扩展运算符也可以实现 可以for of 循环 keys 对应对象的key values 对应对象的value 属性 in 对象 返回值为布尔值

我们所学：

对象的深拷贝
  1. JSON.stringify() JSON.parse()
  2. deepClone()
  3. ... 扩展运算符

数组的深拷贝

  1. ... 扩展运算符
  2. deepClone()

this指针指向

function fun(){
  console.log(this) // window
}
var fun1 = function(){
  console.log(this) // window
}

let obj = {
  name: 'xx',
  eating(){
    console.log(this) // obj
  }
}

oDiv.onClick = function(){
  console.log(this) // oDiv
}

// 构造函数/类
function Person(name){
  this.name = name // this -> 实例化对象
}
var p1 = new Person()

setTimeout(function(){
  console.log(this) // window
},0)

symbol

说明：es6中新增基本数据类型。

目前所学基本数据类型：

number string boolean undefined null symbol(es6)
let a = Symbol()
console.log(a)//Symbol()
console.log(typeof a)//symbol

symbol去给对象赋值

let height = Symbol() obj[height] = '180cm'

复制代码对象下的属性如果是Symbol 不会在for in 循环中 循环出来

set

set是一个类数组，其中有size属性相当于数组中的length属性。 可以完成数组的去重操作 let array = [1,2,3,3,4,4,4,5,5,6] let a1 =new Set(array) console.log(a1); //Set(6){1, 2, 3, 4, 5,6}

复制代码再根据所学的类数组转化数组（扩展运算符...或者Array.from）。

map

 let p3 = new Map()

map是一个类对象，size也表示长度

p3.set('name', 'aa')
p3.set('age', 1)

p.set(key, value) 设置一个值 p.get(key) 获取一个值 清除所有值p.clear() 把类对象转化为对象

let p4 = {}
p3.forEach(function(value, key){
  console.log(value)
  console.log(key)
  p4[key] = value
})
console.log(p4)

for of 循环输出对应每项的数组

let p5 = {}
for(item of p3){
  console.log(item) //["name", "aa"]
  p5[item[0]] = item[1]
}

for in 输出 key for(item in p5){ console.log(item) }

avatar
文章
阅读
粉丝