ES6

ES6 基本知识，不用完全掌握，但要会用

1、let && const

初始化

• const 声明常量必须初始化，初始化之后不允许改变

const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

作用域

• var：声明的变量可以越狱
• let：声明的变量有严格局部作用域

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

声明次数

• var：可以声明多次
• let：只能声明一次

var m = 1;
var m = 2;
let n = 3;
let n = 4;
console.log(m); // 2
console.log(n); // Identifier 'n' has already been declared

变量提升

• var：变量提升
• let：不会变量提升

console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

2、解构

数组解构

let arr = [1, 2, 3];

//不使用数组解构
let a = arr[0];
let b = arr[1];
let c = arr[2];

//数组解构写法
let [a, b, c] = arr;
console.log(a, b, c);

对象解构

const person = {
  name: "jack",
  age: 21,
  language: ["java", "js", "css"],
};

//普通写法
const name = person.name;
const age = person.age;
const language = person.language;

//对象解构写法
const { name, age, language } = person;

//解构后修改变量名name为abc
const { name: abc, age, language } = person;

3、字符串

扩展

let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true

模板

//1、字符串模板
let ss = `<div>
       <span>hello world<span>
                </div>`;
console.log(ss);

//2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
function fun() {
   return "这是一个函数"
}

# 使用
let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
console.log(info);

4、箭头函数

函数参数默认值

//b的默认值为1
function add2(a, b = 1) {
  return a + b;
}
console.log(add2(20));

不定参数

function fun(...values) {
    console.log(values.length)
}
fun(1, 2)      //2
fun(1, 2, 3, 4)  //4

箭头函数

• 以前声明函数

print = function (obj) {
  console.log(obj);
};

• 箭头函数

//箭头函数写法
print = (obj) => console.log(obj);

• this 使用注意

此处另外单独整理

• 注意点

//多个参数，用()把参数扩起来
sum = (a, b) => {
  return a + b;
};

//方法体只有一句，且需要返回
sum = (a, b) => a + b;

//箭头函数和解构一起使用
const person = {
  name: "jack",
  age: 14,
  language: ["java", "python", "c++"],
};

hello = ({ name, language: [a, b] }) =>
  console.log("hello, " + name + ", lang: " + a + "," + b);

hello(person); //hello, jack, lang: java,python

5、对象优化

新增 API

const person = {
  name: "jack",
  age: 21,
  language: ['java', 'js', 'css']
}
//快速获取
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]


const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//合并后面的对象到第一个对象
Object.assign(target, source1, source2);
console.log(target);

声明对象简写

const age = 23
const name = "张三"
//普通写法
const person1 = { age: age, name: name }

//简写
const person2 = { age, name }
console.log(person2);

//对象的函数属性简写
let person3 = {
   name: "jack",
   // 以前：
   eat: function (food) {
       console.log(this.name + "在吃" + food);
   },
   //箭头函数this不能使用，对象.属性
   eat2: food => console.log(person3.name + "在吃" + food),
   eat3(food) {
      console.log(this.name + "在吃" + food);
   }
}

扩展运算符

• 1、拷贝对象

//取出参数对象所有可遍历属性拷贝进当前对象
let p1 = { name: "Amy", age: 15 };
let someone = { ...p1 };
console.log(someone); //{name: "Amy", age: 15}

• 2、合并对象

// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 } 
console.log(p2)

map && reduce

map

接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

let arr = ['1', '20', '-5', '3'];
arr = arr.map((item)=>{
    return item*2
});
arr = arr.map(item=> item*2);
console.log(arr); //2 40 -10 6

reduce

方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行)，将其结果汇总为单个返回值

• 1、语法

arr.reduce(callback, [initialValue]);

• callback 四个参数

1. previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2. currentValue （数组中当前被处理的元素）
3. index （当前元素在数组中的索引）
4. array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

• 例子

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function (prev, cur, index, arr) {
  console.log(prev, cur, index);
  return prev + cur;
});
console.log(arr, sum);

• 应用
• 记录某个元素在数组中出现了几次

let arr5 = ["name", "age", "long", "short", "long", "name", "name"];

let arrResult1 = arr.reduce((pre, cur) => {
  console.log(pre, cur);
  if (cur in pre) {
    pre[cur]++;
  } else {
    pre[cur] = 1;
  }
  return pre;
}, {});

console.log(arrResult1); //结果：{name: 3, age: 1, long: 2, short: 1}

• 数组去重

let arrResult2 = arr5.reduce((pre, cur) => {
  if (!pre.includes(cur)) {
    pre.push(cur);
  }
  return pre;
}, []);

console.log(arrResult2); //结果：[ 'name', 'age', 'long', 'short' ]

• 将多维数组转化为一维

let arr6 = [
  [0, 1],
  [2, 3],
  [4, [5, 6, 7]],
];
const newArr = function (arr) {
  return arr.reduce(
    (pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur),
    []
  );
};
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

• 对象中的属性求和

var result = [
  {
    name: "王二",
    age: 10,
  },
  {
    name: "张三",
    age: 20,
  },
  {
    name: " 李四",
    age: 30,
  },
];

var sum = result.reduce(function (prev, cur) {
  return cur.age + prev;
}, 0);
console.log(sum); //60

6、Promise

异步编程的一种解决方案，其实是一个构造函数，自己身上有 all、reject、resolve 这几个方法，原型上有 then、catch 等方法。

详细见博客

7、模块化

• 基本打包

export default {
  let a = 0
  sum = (a,b) => a+b;
}