ES6详细知识点

1. let const

   {
   } // 块级作用域
   for if while // 都是块级作用域 

没有预解析，不存在变量提升
在代码块内，只要let定义变量，在之前使用报错（先定义，再使用）

function show(){
   
    console.log(a);
    let a = 3; //报错
}

不能重复定义变量（同一个作用域）
for循环for循环里面是父级作用域，里面又一个作用域

for(let i=0;i<3;i++){
    // 两个作用域
    let i= 'abc';
    console.log(i);
    // abc abc abc
}

暂时性死区
const 特性和let一样
const 常量不能修改 const定义完变量，必须有值，不能后赋值

var tmp = 123;
if (true) {
   
  tmp = 'abc'; // ReferenceError
  let tmp;
}
if (true) {
   
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

对象引用可以修改 例如：

const arr = [1,2,2];
arr.push(3);
// 1,2,2,3
Object.freeze([1,2,3]) //不能修改
(function(){
   
})() //用来模拟作用域

2. 结构赋值

注意：左右两边，结构保持一致

let [a,b,c] = [12,5,6];
let [a='默认值',b,c] = [12,5];
let [a,b,c:'默认值'] = [12,5,null];  c = null
let a= 12;
let b= 5;
[a,b] = [b,a]; a = 5,b = 12
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

json 对象结构

let json = {
   
    name: 'xxx',
    age: 18
}
let {
   name,age} = json;
console.log(name,age);// xxx 18

let {
   name:n,age} = json; //n别名
let {
    bar, foo } = {
    foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let {
    baz } = {
    foo: 'aaa', bar: 'bbb' };
baz // undefined

如果变量名与属性名不一致，必须写成下面这样。

let {
    foo: baz } = {
    foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = {
    first: 'hello', last: 'world' };
let {
    first: f, last: l } = obj;
f // 'hello'
l // 'world'
let obj = {
   
  p: [
    'Hello',
    {
    y: 'World' }
  ]
};

let {
    p, p: [x, {
    y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

字符串的解构赋值 解析时候可以给默认值 传参也可以结构

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {
   length : len} = 'hello';
len // 5

3. 字符串模板

优点：随意换行

`${}`
let name = 'xxx';
let age = 18;
let str = `这个人叫${
     name},年龄是${
     age}`

字符串方法 查找

indexOf('') // 返回索引位置
str.includes(要找的东西) //返回true/false
str.startswith() // 以xxx开头
str.endswith() // 以xxx结尾
str.repeat(n) // 重复多少次
str.padStart(整个字符常长度,填充的东西) // 往前填充
str.padEnd() //往后填充

4. 函数

函数默认参数

function show(x='默认值',y='默认值'){
   
    console.log(x,y);
};
show('','a');
show('b');

*结构

function show({
   x=0,0}={
   }){
   
    console.log(x,y);
};
show({
   x:1,y:7});
show();

函数参数默认已经定义，不能再使用let,const声明

function show(x=18){
   
    let x=101; //报错
}
show();

扩展运算符 Rest运算符 … //扩展运算符
即展开又可以重置
展开数组

let arr = [1,2,3];
console.log(arr); //[1,2,3];
console.log(...arr);
// 1,2,3

合并

 function show(...a){
   
     console.log(a) //[1,2,3,4,5]
 }
 show(1,2,3,4,5)

类似

 function show(){
   
     let a = Array.prototype.slice.call(arguments);
     console.log(a); // [1,4,5,2,9,4]
 }
 show(1,4,5,2,9,4);

剩余运算符
展开数组 [1,2,3]->…[1,2.3]->1,2,3 重置 1,2,3-> …1,2,3 -> [1,2,3] 剩余参数：必须放到参数最后

function show(a,b,...c){
   
    // a = 1,
    // b = 2,
    // c= [3,4,5]
}
show(1,2,3,4,5)
let arr = [1,2,3];
let arr2 = [...arr]; // [1,2,3]
或者 let arrs = Array.from(arr); // [1,2,3]
let str = 'a b c'; let arrs = Array.from(str); // ['a','b','c']

箭头函数
注意：
1.this问题，定义函数所在的对象，不再是运行时所在的对象
2.箭头函数没有arguments，用…
3.箭头函数不能当构造函数

 let show = () => 1;
 console.log(show()); // 1
	() => {
   
	    语句
	}
 let show = (a=12,b=8)=>{
   
     console.log(a);
     return a*b;
 }

 let json = {
   
     id: 1,
     show:function(){
   
         alert(this.id); // 1
     }
 }
 json.show();
 let json = {
   
     id: 1,
     show:function(){
   
         setTimeout(function(){
   
         alert(this.id); // undefined
         },200)
         //setTimeout是用window执行的,
         window没有id
     }
 }
 json.show();
var id = 10;
let id = 10; //如果是let定义也是undefined
 let json = {
   
     id: 1,
     show:function(){
   
         setTimeout(function(){
   
         alert(this.id); // 10
         },200)
     }
 }
 json.show();
let json = {
   
     id: 1,
     show:function(){
   
         setTimeout(()=>{
   
            alert(this.id); // 1
         },200)
     }
 }
 json.show();
var id= 6;
let json = {
   
    id: 1,
    show:function(){
   
        setTimeout(()=>{
   
            let id = 10;
            alert(this.id); // 1
        },200)
    }
}
json.show();
var id= 6;
let json = {
   
    id: 1,
    show:()=>{
   
	    alert(this.id) // 6
        setTimeout(()=>{
   
            let id = 10;
            alert(this.id); // 6
        },200)
    }
}
json.show();
let id= 6;
let json = {
   
    id: 1,
    show:()=>{
   
	    alert(this.id) //undefined
        setTimeout(()=>{
   
            let id = 10;
            alert(this.id); // undefined
        },200)
    }
}
json.show();

5. 数组

for循环 2.while
/ /es5新增
(forEach,map,filter,some,every,reduce,reduceRight)

arr.forEach()

 // 以下他们可以接受两个参数（循环回调函数，this指向谁）
let arr=[1,2,3];
for(let i = 0;i < arr.length; i++){
   
    
}
arr.forEach()//代替普通for循环

arr.forEach(function(val,index,arr){
   
    console.log(this)//456 this指向456
},456);

// 箭头形式
arr.forEach((val,index,arr)=>{
   
        console.log(this)// this指向window
},123);
// 箭头函数this指向定义时 window

arr.map()
非常有用，做数据交互，‘映射’ 正常情况下，需要配合return，返回是一个新数组,如果没有return，相当于forEach 注意：平时用map，一定要有return；

let newArr = arr.