ES6(一)

shyi
130 阅读8分钟

新增定义变量方式

let

es6 新增定义变量的方式 let

let 与var

  1. let声明变量不存在变量提升

  2. let不可重复声明变量

  3. let声明的变量在块级作用域内,在定义的作用域内生效

  4. 暂时性死区 在块作用域内 let声明的变量 会形成一个封闭性死区 只能在声明之后调用 否则就会报错

var定义的i=>window.i 全局变量

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var aLi = document.querySelectorAll('li')
for(i = 0; i<aLi.length; i++){
    console.log(i);
}
console.log(i);

es6新增块作用域 {}代码块内部

for(let i = 0;i<aLi.length;i++){
    console,log(i)
}
console.log(i)//报错 在块作用域之外

浏览器不支持es6 转为es5 let转闭包

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

//闭包
for(j = 0;j<aLi.length;j++){
    (function(j){
       aLi[j].onclick = funciton(){//内部作用域调用了外部作用域中的变量
           console.log(j)
       }
    })(j)
}

const

const :关键字定义常量

  1. const 声明变量不存在变量提升

  2. const 不可重复声明变量

  3. const 声明的变量在块级作用域内,在定义的作用域内生效

  4. 暂时性死区 在块作用域内 const 声明的变量 会形成一个封闭性死区 只能在声明之后调用 否则就会报错

const 定义的变量不可二次赋值 且必须在声明时赋值

const obj = {
    name: 'xiaoming',
    age: '16'
}
console.log(obj)
obj.name = 'xiaohong'
console.log(obj)

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

freeze()：冻结

const obj = {
      name:'xiaoming',
      age:'16'
  }
Object.freeze(obj)
obj.name = 'xiaohong'//obj冻结后可以重新赋值 但因为进行了冻结 所以不会生效 也不会报错
console.log(obj)

解构赋值

数组的解构

数组解构按照 顺序 依次赋值

let [a,b,c] = [1,2,3];
console.log(a,b,c)//1,2,3
//等价于
//let a = 1;
//let b = 2;
//let c = 3;
let [i,j,k,l]  = [1,2,[3,4],5]
console.log(i,j,k,l)//1,2,[3,4],5

对象的解构

对象结构按照 key 进行赋值

let {name,age} = {name:'xiaoming',age:18}

console.log(name,age)//xiaoming 18

如果不希望用原来的 key 作为变量名需要用 key:x 取变量名

let {name,age:x} = {name:'xiaoming',age:18}

console.log(name,x)

字符串的解构

let [a,b,c] = 'hello'

console.log(a,b,c);//h e l

两变量交换值

let x = 2;
let y = 3;
[y,x] = [x,y];
console.log(x,y)

let x= 2;
let y = 3
let tmp = y
y = x;
x = tmp;
console.log(x,y)

在变量为 undefined 的情况下会使用默认值

function fun1(x,y,z=4){//设置默认值
  console.log(x,y,z)
}
  fun1(1,2)

扩展运算符

复制数组

let array = [1,2,3]
let a1 = [...array]//[1,2,3]//可实现深拷贝
console.log(a1)
let a2 = [...array,'a','b']//作为数组的一部分
console.log(a2)//[1,2,3,"a","b"]

连接数组

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let a = [...arr1...arr2]
console.log(a)

合并对象

对象合并 不同的属性会合并 相同的属性 后面的会覆盖之前的

let obj1 = {
  name: 'xiaoming',
  age: '18'
}
let obj2 = {
  weight: '60ke'
}
let obj3 = {
  age: '16'
}
let p1 = {...obj1,...obj2}
let p2  = {...obj3,...obj1}
console.log(p1)
console.log(p2)

将类数组转换为数组

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

var oLi = document.querySelectorAll('li');
console.log(oLi)//类数组
var aList = [...oLi]
console.log(aList)//数组

rest: 剩余的

function fun1(x,...rest){
console.log(x)
console.log(rest)
}
fun1(1,2,3,4)//1 [2,3,4]

function fun1(){
console.log(arguments)//arguments接收参数
}
fun1(1,2,3,4)

arguments.callee 当前方法

arguments.callee() 递归调用

函数拓展

函数下的方法

function.length 获取没有设置默认值的形参

function.name 获取方法名

 function fun1(x,y){
   console.log(x,y)
}
console.log(fun1.length)//2
console.log(fun1.name)//fun1
function fun2(a,b=1){
   console.log(a,b)
}
console.log(fun2.length)//1

箭头函数

  var fun1 = function(){
  console.log(this)//window
  console.log('hello')
}
var fun2 = ()=>{
  console.log(this)//window
  console.log('hello')
}
fun1();
fun2();

改变指针

例一

<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

let aLi = document.querySelectorAll('li')
for(let i=0;i<aLi.length;i++){
   aLi[i].onclick = function(){
       console.log(this)//aLi[i]
       setTimeout(function(){
        console.log(this)//window
       },0)
   }
}

for(let j = 0;j<aLi.length;j++){
    aLi[j].onclick =function(){
        console.log(this)//aLi[i]
        setTimeout(()=>{
            console.log(this)aLi[i]
        },)
    }
}

let person = {
   name: 'xiaoming',
   age: '18',
   eating: function(){
        console.log('eating')
        console.log(this)
        setTimeout(function(){
            console.log('eating.........')
            console.log(this)//window
        })
   } 
}
person.eating();//person

箭头函数简写

var fun = (n)=>{
    n>1
}
var fun = ()=> n>1;


//将上述定时器改为如下形式 
setTimeout(()=>{
    console.log('eating.........')
    console.log(this)//指向person
})

箭头函数中不可以使用arguments获取参数，可以使用rest获取参数

let  fun1=(...rest  )=>{
    console.log(rest)
}
  fun1(1,2,3)

注意!!!

箭头函数中的this指向的是父作用域中的this

箭头函数只有一条语句 可以省略{}

字符串拓展

模板字符串放在``中 变量在 ${ } 中

let inner = 'hello world'
let oDiv = '<div>'+inner+'</div>'
let aDiv = `<div>${inner}</div>`
console.log(oDiv)
console.log(aDiv)

includes() 检索字符串 有返回true 没有返回false

let str = 'hello world'
console.log(str.includes('h'))//true
console.log(str.includes('m'))//false

let ua = navigator.userAgent;
console.log(ua)
//判断是否包含iPhone
if(ua.includes('iPhone')){
    window.location.href = 'https://www.baidu.com'
}
else{
    window.location.href = 'https://tmall.com'
}

startsWith() 检索参数字符串是否在字符串头部 返回布尔值

endWith() 检索参数字符串是否在字符串尾部 返回布尔值

let str = 'hello world'
console.log(str.startsWith('h'))//true
console.log(str.endsWith('d'))//true

padStart() 在字符串的开头补全字符串 返回新的字符串 参数(length,string)

padEnd() 在字符串的结尾补全字符串 返回新的字符串 参数(length,string)

let str = 'hello world'    
console.log(str.padStart(14,'s'))
console.log(str.padEnd(14,'l'))

repeat() 重复字符串 返回新的字符串

let str = 'hello'
console.log(str.repeat(2))//hellohello

数值的拓展

Number.isFinite() 判断是否是数字 返回值为boolean

console.log(Number.isFinite(5))//ture
console.log(Number.isFinite('a'))//false

Number.isNaN() 判断是否为NaN 返回值为boolean

 console.log(Number.isNaN(NaN))//true

Number.isInteger() 判断是否是整数 返回boolean

console.log(Number.isInteger(5))//true
console.log(Number.isInteger(5.5))//false

Number.parseFloat() 保留小数部分

Number.parseInt() 保留整数部分

console.log(Number.parseFloat(5))
console.log(Number.parseFloat(5.5))
console.log(Number.parseInt(5.6))

Math.trunc() 返回整数部分

Math.sign() 判断一个数 正数 1 负数 -1 零 0 其他为NaN

console.log(Math.trunc(5.55))//5
console.log(Math.sign(2))//1
console.log(Math.sign(0))//0
console.log(Math.sign(-2))//-1
console.log(Math.sign('hello'))//NaN
console.log(Math.sign('22'))//1

数组的拓展

Array.from() 把类数组转换成数组(...转换) JSON数组格式转换为数组

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var aLi = document.querySelectorAll('li')
console.log(aLi)//类数组
console.log(Array.from(aLi))//数组

Array.of() 把值转换成数组

let arr = new Array(3);
console.log(arr)//长度为3的空数组
console.log(Array.of(4,5,6)) //[4,5,6]

arr.copyWithin( ) 替换数组的内容

let arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr.copyWithin(0,2,3))//索引0开始

Array.find()

 //返回第一个满足条件的内容
let arr = [1,2,5,2,7,8]
let a1 = arr.find(function(val,index,arr){
   return index>2
})
console.log(a1)

Array.fill() 补全数组 第一个参数为补全的内容 第二个参数为开始索引值 第三个参数 到索引之前一个位置结束

let arr = new Array(3)
console.log(arr.fill(7))//[7,7,7]
console.log(['a','b','c','d','e','f'].fill(8,1,4))//从索引1开始到4之前结束 用8补全

Array.includes() 判断数组中是否包含某个值 返回boolea值

console.log([1,2,3,4].includes(4))//true
console.log([1,2,3,4].includes(5))//false

for of 循环数组

let arr = [2,3,4]
for(item of arr){
    console.log(item)
}

.key() 循环索引

for(item of arr.keys()){
        console.log(item)//索引
}

.value() 循环内容

for(item of arr.values()){
    console.log(item)
}

entries() 返回的是[index,value]

for(item of arr.entries()){
    console.log(item)
}

forEach() 数组的index 与value

let arr = [2,3,4]
arr.forEach(function(value,key){
    console.log(value,key)
})

filter() 过滤所有符合条件的内容 返回一个数组,数组里是所有符合条件的元素

 let a = arr.filter(function(value,key){
    return value>2
})
console.log(a)

对象的拓展

简写表示

属性简写与方法简写

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

属性名表达式

obj['name'+'_first'] = 'zhang'
  console.log(obj)//name_first: "zhang"

Object.is() 比较两个值是否严格相等 相当于'==='

console.log(Object.is('aaa','aaa'))//true
console.log(Object.is(22,'22'))//false
console.log(NaN === NaN)//false
console.log(Object.is(NaN,NaN))//true
console.log(+0 === -0)//true
console.log(Object.is(+0,-0))//false

Object.assign() 对象合并

 let obj1 = {
   name: 'xiaoming',
   age:'18'
}
let obj2 = {
   height: '170cm',
   weight:'60kg'
}
console.log(Object.assign(obj1,obj2))
console.log(obj1,obj2)

let obj1 = {
   name: 'xiaoming',
   age:'18'
}
let obj2 = {
   height: '170cm',
   weight:'60kg'
}
let obj3 = Object.assign({},obj1,obj2)
console.log(obj1,obj2,obj3)
//...扩展运算符 合并对象
let obj4 = {...obj1,...obj2}
console.log(obj4)

Object.keys() 对象下的所有属性 返回值为数组

Object.values() 对象下属性的值 返回值为数组

Object.entries() 对象下属性+值 返回值值为数组

let obj = {
   name: 'xiaoming',
   age:'18',
   height: '170cm',
   weight:'60kg'
}
  console.log(Object.keys(obj))
  console.log(Object.values(obj)) 
  console.log(Object.entries(obj))

name in object 判断对象是否包含某个属性

0 in arr 判断数组索引下是否有值

let obj = {
       name: 'xiaoming',
       age:'18',
       height: '170cm',
       weight:'60kg'
   }
 console.log('name' in obj)//true
 console.log('length' in obj)//false
 // 0 in arr
 let arr = [1,2,3,4]
console.log(5 in arr)//false
console.log(2 in arr)//true
avatar
文章
阅读
粉丝