自学总结:ES6新特性(一)

目前各大浏览器基本上都支持 ES6 的新特性,其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好,IE7~11 基本不支持 ES6。

对于浏览器的兼容问题ES6可以通过 babel 转化成ES5.

webpack里面有添加babel进行转化

1. let和const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量,一旦声明,常量的值就不能改变。

let var的区别

  1. let:在代码块内有效,声明的变量只会声明在当前作用域内.
    var: 在全局范围内有效.

    {
      let a = 0;
      var b = 1;
    }
    a  // ReferenceError: a is not defined
    b  // 1
    

    for循环中加入异步交互时,先同步后异步,for循环执行完之后,就行setTimeout方法。

     for(var i=0;i<3;i++){
             setTimeout(function(){
                 console.log(i) // 3个3
             })
     }
    

    let和{}配合可以产生一个作用域,每次遍历会生成新的变量,一旦生成新的变量 就执行seTimeout方法。

    for(let i=0;i<3;i++){
             setTimeout(function(){
                 console.log(i)  //0 1 2
            })
     }
     console.log(i)//i is not undifined
    
  2. let只能声明一次。var可以重复声明

    let a = 1;
    let a = 2;
    var b = 3;
    var b = 4;
    a  // 'a' has already been declared
    b  // 4
    
  3. let不做变量提升,var可做变量提升

    console.log(a);  //ReferenceError: a is not defined
    let a = 1;
     
    console.log(b);  //undefined
    var b = 2;
    

const 命令

  1. 通过const声明的变量不能被修改,不能修改引用空间
    	  const a = 1;
    	 a = 2;//Assignment to constant variable.
    
  2. 暂时性死区
    ES6 明确规定,代码块内如果存在 let 或者 const,代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。代码块内,在声明变量 PI 之前使用它会报错。
     var a =1
     {
         console.log(a)  //a is not undifined
         let a = 2
     }
    	  ```
    

解构赋值

它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。声明和赋值都放到一起了
let 解构目标 = 解构的源
解构表示等号左边右边结构类似
解构数组或者对象都可忽略、可嵌套、不完全解构、剩余运算符、结构默认值。

1.数组的必须位置相同

	let [a,b] = [1,2]
	console.log(a,b) //1 2
	//1.可忽略
	let [,b] = [1,2]
	console.log(b) //2
	//2.可嵌套
	let [a,[[b],c]] = [1,[[2],3]]
	console.log(a,b,c) //1 2 3
	//3.不完全解构
	let [a = 1, b] = []; 
	console.log(a,b)//1 undefined
	//4.剩余运算符
	let [a, ...b] = [1, 2, 3]
	console.log(a,b)//1  [2, 3]
	//5.解构默认值
	let [a = 2] = [undefined]
	console.log(a)//2
	
	let [a = 3, b = a] = [];     // a = 3, b = 3
	let [a = 3, b = a] = [1];    // a = 1, b = 1
	let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
	//a 与 b 匹配结果为 undefined ,触发默认值:a = 3; b = a =3
	//a 正常解构赋值,匹配结果:a = 1,b 匹配结果 undefined ,触发默认值:b = a =1
	//a 与 b 正常解构赋值,匹配结果:a = 1,b = 2

注意:在数组的解构中,解构的目标若为可遍历对象,皆可进行解构赋值。

	//如字符串等
	let [a, b, c, d, e] = 'hello';
	// a = 'h'
	// b = 'e'
	// c = 'l'
	// d = 'l'
	// e = 'o'

2.对象解构时名字必须相同

	let {length} = [1,2]
	console.log(length) //2

3.如果有关键字 可以采用’:'的形式进行更改名字

let {a,b,default:c} = {a:1,b:2,default:3}
console.log(a,b,c) //1 2 3

问题1
//取到下列数组中的arr[1]项 //2
let [] = [{name:1},{age:2,arr:[1,2,3]}]

let [,{arr:[,a]}] = [{name:1},{age:2,arr:[1,2,3]}]
console.log(a)// 2

4.如果想设置某个属性的默认值,必须采用’='的方式

let[ ,{arr:[,a]},hobby='游泳'] = [{name:1},{age:2,arr:[1,2,3]}]
console.log(hobby) // 游泳

5. 解构的应用

function ajax({url=new Error('no url'),type='get', data='no data'}){
	console.log(url,type,data)// /test get {}
}
ajax({
    url:'/test',
    type:'get',
    data:{}
})
function test() {
    return [1,2,3]
}
let [a,b,c] = test()
console.log(a,b,c) // 1 2 3

字符串新增方法

includes 是否包含

let str = 'aabbcc'
console.log(str.includes('a'))  //true

startWith 以xxx开头

console.log(str.startsWith('aa')) //true

endWith 以xxx结尾

console.log(str.endsWith('cc')) //true

注意:这三个方法如果传入了正则表达式而不是字符串,会抛出错误。而 indexOf 和 lastIndexOf 这两个方法,它们会将正则表达式转换为字符串并搜索它。

padStart padEnd 补全

常用于进制转化

setInterval(function(){
  let date = new Date()
  let hour = date.getHours()
  let minutes = date.getMinutes()
  let seconds = date.getSeconds()
  let str = `${hour.toString().padStart(2,0)}:`
  str += `${minutes.toString().padStart(2,0)}:`
  str += `${seconds.toString().padStart(2,0)}:`
  console.log(str) //11:02:01
},1000)

字符串重复

repeat():返回新的字符串,表示将字符串重复指定次数返回

console.log("Hello,".repeat(2));  // "Hello,Hello,"

//如果参数是小数,向下取整

console.log("Hello,".repeat(3.2));  // "Hello,Hello,Hello,"

//如果参数是 -1到0 之间的小数,会进行取整运算,取整得到 -0

console.log("Hello,".repeat(-0.5));  // "" 

//如果参数是 NaN,等同于 repeat 零次

console.log("Hello,".repeat(NaN));  // "" 

//如果参数是负数或者 Infinity ,会报错:
//如果传入的参数是字符串,则会先将字符串转化为数字

console.log("Hello,".repeat("hh")); // ""
console.log("Hello,".repeat("2"));  // "Hello,Hello,"

模板字符串

模板字符串与普通字符串的区别?
模板字符串中的换行和空格都是会被保留的,
普通字符串需加入代码,比如\n,\t, ,才能对字符串进行换行或空格。

可以自定义模板字符串的实现

 //hello~*xiao*今年*9*岁了
 let name ="xiao"
 let age = 9
 function jw() {//第一个参数是字符串的数组  第二个参数是第一个变量...
    let strings = arguments[0]
    let values=[].slice.call(arguments,1)
    let str = ''
     console.log(strings,values)
     for(let i = 0;i < values.length;i++) {
        str += `${strings[i]}*${values[i]}*`
     }
     str += strings[strings.length - 1]
     return str
 }
 let str = jw`hello~${name}今年${age}岁了`
 return str

你可能感兴趣的:(es6/es7)