es6常用语法

1.let 和 const

var 问题？？

1.可以重复声明

2.不能定义常量

3.不支持块级作用域  （js 以前只有全局作用域，块级作用域）

 

2.解构赋值

 

/*
 结构  分解一个对象的结构
 */

let arr = [1, 2, 3];
//结构的时候，等号两边结构类似，右边还必须是一个真实的值
let [a, b, c] = arr;
console.log(a, b, c)

let arr2 = [{'name': 'david', 'age': 30}, [1, 2], 3];
// let [{name, age}, [d, e], f] = arr2;
let [json, arr3, f] = arr2;
console.log(json, arr3, f);


let obj = {'name': 'david', 'age': '30'};
let {name: myName, age: myAge, sex = '男'} = obj;
console.log(myName, myAge, sex);   //默认解构


//省略赋值
let arr4 = [1, 2, 3, 4];
let [, , , j] = arr4;
console.log(j);

//rest 运算符
let testArr = [1, 2, 3, 4];
let [a, ...rest] = testArr;
console.log(a, rest);

3.字符串方法

 

let name = 'david', age=30
let des = name + ' 今年 ' + age + ' 岁'
console.log(des)

//模板字符串用法
let d = `${name} 今年 ${age} 岁`
console.log(d)

//模板字符串可以换行
 let users = [{'name': 'david'}, {'name': 'qinqin'}];
 let lis = users.map(function (el) {
   return `<li>${el.name}</li>`;
 }).join('');
 let ul = (
   `<ul>
     ${lis}
   </ul>`
 )
 console.log(ul);
 
 
 //原理实现
 
//模板字符串
// let desc = "${name} 今年 ${age} 岁";
//
// function replace(desc) {
//
//   return desc.replace(/\$\{([^}]+)\}/g, function ($0, $1) {
//     console.log(arguments);
//     console.log($0, $1)
//     return eval($1);
//   });
// }
// console.log(replace(desc));

4.函数

 

//默认参数 1.必填项不填写报错 2.有些参数没有传参的话可以有默认值
// function ajax(url = new Error('url 不能为空'), method = 'POST', dataType = 'json') {
//   // if(typeof url === 'undefined') throw Error('url 不能为空');
//   console.log(url);
//   console.log(method);
//   console.log(dataType);
// }
// ajax('/user','GET');

//展开运算符
/*
 let arr1 = [1,2,3]
 let arr2 = [4,5,6]
 // let arr3 = [].concat(arr1,arr2);
 let arr3 = [...arr1,...arr2];
 console.log(arr3);

 // let max = Math.max(1,2,3);
 // let max = Math.max.apply(null,arr1);
 let max = Math.max(...arr1);
 console.log(max);*/
 
 
 let obj1 = {id: 1}
 let obj2 = {id: 2}
 let obj3 = {...obj1, ...obj2}   
 console.log(obj3)   //注意是 浅拷贝 效果和 Object.assign({}, obj1, obj2)
 
 //深度拷贝？？？？
 
 // let obj6 = JSON.parse(JSON.stringify(obj5));

function deepClone(parent,c) {
  let child = c || {}
  for(var key  in parent) {
    if(parent.hasOwnProperty(key)) {
      let val = parent[key]
      if(typeof val === 'object') {
        child[key] = Object.prototype.toString.call(val) === '[object Array]' ? [] : {}
        deepClone(parent[key],child[eyk])
      }else {
        child[key] = parent[key]
      }
    }
  }
  return child
}

//lodash  cloneDeep 方法

 

5.箭头函数

 声明函数更加简洁的方法

 

let sum = (a,b)=> a+b
console.log(sum(1,3));

//有并只有一个参数，可以省略小括号
//如果只有返回值，没有函数体代码，可以省略{}

//this
//箭头函数没有自己的this， 会使用上层的this

// let obj = {
//   name :' david',
//   getName(){
//     setTimeout(()=>{
//       console.log(this.name);
//     },1000);
//   }
// };
//
// obj.getName();


// this 定死的，指向外层this
let obj2 = {
  name: 'david',
  getName: ()=>{
    console.log(this.name);
  }
}
obj2.getName();  //undefined

 

6.数组

 

常用方法

filter

find

findIndex

some every

map、forEach

reduce、reduceRight

flat

7.object

 

let name = 'david'
let age = 30

//对象的属性名和变量名如果一样合二为一
let obj = {
  name,
  age
}
console.log(obj)

let obj = {
  age: 1,
  getFood() {
    return '面包'
  }
}

let obj2 = {
  __proto__: obj,
  getFood() {
    return '牛奶'+super.getFood()  //super 调用父类
  }
}

console.log(obj2.age)
console.log(obj2.getFood())

 

8.class

  定义一个类，和以前js中构造函数一个意思

 类里面可以定义构造函数，创建一个类的实例的时候就会调用构造函数

 

class Parent {
  constructor(name) {
    this.name = name   //实例的私有属性
  }
  //类上的属性，静态属性，不需要实例化 类似react中 static defaultProps
  static hello() {
    console.log('hello')
  }
  //实例的共有属性，相当于原型链上的属性
  getName() {
    console.log(this.name)
  }
}

//调用hello方法
Parent.hello()

class Child extends Parent {
  constructor(name, age) {
    //指的是父类的构造函数
    super(name)
    this.age = age
  }
  getAge() {
    console.log(this.age)
  }
}

let p = new Parent('david')
let c = new Child('30')
p.getName()
c.getAge()

 

9. Map/Set数据结构

set是一种新的数据格式，成员的值都是唯一，没有重复，可以用来去重

 

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}

//其他方法
add()、delete()、has()、size、clear

 

Map 本质是键值对的结合（Hash结构）

 

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

 

求和：reduce();

过滤：.filter( i => i<4);

拷贝： .assign   （浅拷贝）

 

10.模块化

模块体系，Python有import，css有@import，但是js一直没有，

es6之前，模块化只要有

1.CommonJS  服务器

2.AMD            浏览器

 

es6的模块很简单，完全取代CommonJS和AMD，成为浏览器和服务器的标准

 

实现命令：

import  表示输入其他模块的功能

export  表示对外模块的其他接口

 

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

 

默认导出：

export default

默认导出的时候，对应的import不需要加 {} 

其他导出的时候，可以使用{} 作为解构赋值使用