【无标题】es6常用语法

es6常用语法

1. let

声明变量，只在代码块内有效。原来var是全局变量
例如：for (let i = 0; i < 10; i++) {}

2.const

声明只读常量，一旦声明，常量值就不能变，意味着一旦声明，就必须立即初始化，如果不赋值，会报错。

例：

let 与 const
1.都不能重复声明
2.都只在声明所在的块级作用域内有效。

3.模板字符串

一种字符串的表现形式

let s1 = `hello`   //字符串

let s2 = `abc${s1}`  // 拼接字符串

let s3 = `<div>
           <p>
             <span>123</span>
           </p>
           <p>${a1}</p>
        </div>`     // 字符串换行

4.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

1.对象

var obj ={ name:"abc",age:18 };
    //用解构赋值的方式获取name、age

    let { name } = obj; //创建了一个变量name，值=obj.name
    console.log(name);  //"abc"
    
    let a = '12'
    let b = '13'
    
    let c = {a,b}
    console.log(c)  //Object {a:'12',b:'13'}

2.函数参数

    function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等价于
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})

5.rest参数

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

es6箭头函数内部不能使用arguments，为了弥补这个问题，rest参数应孕而生

function fn(){
        //arguments是函数内部的一个局部变量，
        //arguments.length表示函数的实参的个数
        console.log(arguments.length);

        for(var i =0 ; i<arguments.length; i++){
            console.log(arguments[i]);
        }

    }
    fn(1,3,5)       //3
    // fn("a","b","c","d","e") //5


//...args就是rest参数
    //-->产生了一个变量，这个变量是一个数组，数组里面包含了这个函数调用时传递的所有实参
    function q(...args){
        //验证args是不是数组？
        console.log(args instanceof Array);//true
        console.log(Object.prototype.toString.call(args));//"[object Array]"
        console.log(Array.isArray(args));   //true es5中的新方法

        console.log(args);
    }
    q(1,3,5);
    q(2,3,4,5,6,7,8);

注意Rest参数与arguments有以下几点区别

Rest参数是未指定变量名的参数数组
arguments是全部参数的集合
Rest参数是真正的数组
arguments对象只是有length属性的类数组

6. 箭头函数

使用“箭头”（=>）定义函数。

//匿名函数
    div.onclick=()=>{
        console.log("你好")
    }
    
    var fn=(a)=>{
        console.log("abc");
    }
    //等价于：
    var fn=a=>{
        console.log("abc");
    }
    
    var f=(a,b,c)=>{
        console.log("abc")
    }
    
    var p={
        age:18,
        //es6中对象方法的箭头函数表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推荐使用的方式☆☆☆：es6中对象方法的简写形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say内部的延迟函数：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();
    
    

箭头函数的this指向是其定义时的上下文环境。

7. 函数默认参数

面对默认参数会让很多人感到痛苦
大家会采用各种hack
比如：arr = arr || []

function foo(name = 'payen'){
    console.log('my name is ' + name);
}
foo(); //my name is payen

8. …操作符

也叫展开/收集运算符（也被叫做延展操作符 － spread operator）

1. 展开

const a = [2, 3, 4]
const b = [1, ...a, 5]
console.log(b);// [1, 2, 3, 4, 5]

const obj = { name: 'jack', age: 30 }
const result = { ...obj, sex: '男', height: '178cm' }
console.log(result); // {name: "jack", age: 30, sex: "男", height: "178CM"}

const a = [1, 2, 3];
const b = [4, 5, 6];
const result = [...a, ...b]; //  [1, 2, 3, 4, 5, 6] 

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女'
};
const base = {
    age: 22,
    job: 'teacher',
    height: '168cm'
}
const all = { ...people, ...base }; 
console.log(all); // {name: "Lucy", age: 22, sex: "女", job: "teacher", height: "168cm"}

相同的属性会覆盖掉

2. 收集

function foo(a, b, ...c) {
    console.log(a, b, c)
}
foo(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5]

3. 把类数组转换为数组

const nodeList = document.getElementsByClassName("test");
const array = [...nodeList];
  
console.log(nodeList); // HTMLCollection [ div.test, div.test ]
console.log(array); // Array [ div.test, div.test ]

类数组定义
1）拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）；
2）不具有数组所具有的方法；
javascript中常见的类数组有 arguments对象和 DOM方法的返回结果。

3. 复制引用类型的数据

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女',
    hobbies: ['play games', 'basketball', 'swim']
};
const result = { ...people, ...people.hobbies };
console.log(result); // {0: "play games", 1: "basketball", 2: "swim", name: "Lucy", age: 30, sex: "女", hobbies: Array(3)}

4.增加条件属性

const people = {
    name: 'Lucy',
    age: 30,
    sex: '女',
    hobbies: ['play games', 'basketball', 'swim']
};
const attrs = ['basketball', 'swim']
const result = attrs ? { ...people, attrs } : people
console.log(result); // {name: "Lucy", age: 30, sex: "女", hobbies: Array(3), attrs: Array(2)}

9. 对象词法扩展

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value

    // 属性可以使用表达式计算值
    ['make' + make]: true,

    // 忽略 `function` 关键词简写对象函数
    depreciate() {
      this.value -= 2500;
    }
  };
}

let car = getCar('Barret', 'Lee', 40000);

// output: {
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeBarret: true,
//     depreciate: function()
// }

10. 对象超类

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}

var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}

Object.setPrototypeOf(child, parent);//将child的原型指向parent
child.foo(); // Hello from the Parent
             // Hello from the Child

11.Map 和 WeakMap

ES6 中两种新的数据结构集：Map 和 WeakMap。事实上每个对象都可以看作是一个 Map。

一个对象由多个 key-val 对构成，在 Map 中，任何类型都可以作为对象的 key

var myMap = new Map();

var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};

// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");

myMap.size; // 3

// 获取值
console.log(myMap.get(keyString));    // "value 与 'a string' 关联"
console.log(myMap.get(keyObj));       // "value 与 keyObj 关联"
console.log(myMap.get(keyFunc));      // "value 与 keyFunc 关联"

WeakMap 就是一个 Map，只不过它的所有 key 都是弱引用，意思就是 WeakMap 中的东西垃圾回收时不考虑，使用它不用担心内存泄漏问题。

另一个需要注意的点是，WeakMap 的所有 key 必须是对象。

let w = new WeakMap();
w.set('a', 'b');
// Uncaught TypeError: Invalid value used as weak map key

var o1 = {},
    o2 = function(){},
    o3 = window;

w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);

w.get(o3); // undefined, because that is the set value

w.has(o1); // true
w.delete(o1);
w.has(o1); // false

12.Set 和 WeakSet

Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });
可以通过 forEach 和 for...of 来遍历 Set 对象：

mySet.forEach((item) => {
  console.log(item);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
});

for (let value of mySet) {
  console.log(value);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

WeakSet
类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次

var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功

ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

13.类

ES6 中有 class 语法

class Task {
  let id, name, gender;

  constructor() {
    console.log("task instantiated!");
  }

  setId(id) {
    this.id = id;
    retrun this;
  }

  setName(name) {
    this.name = name;
    return this;
  }

  setGender(gender) {
    this.gender = gender;
    return this;
  }

  print() {
    const {id, name, gender} = this
    console.log({
      id, name, gender
    })
  }

  showId() {
    console.log(23);
  }

  static loadAll() {
    console.log("Loading all tasks..");
  }
}

console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."
普通方法可链式调用。

//类中的继承和超集
class Car {
  constructor() {
    console.log("Creating a new car");
  }
}

class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}

let c = new Porsche();
// Creating a new car
// Creating Porsche

extends 允许一个子类继承父类，需要注意的是，子类的 constructor 函数中需要执行 super() 函数。

当然，你也可以在子类方法中调用父类的方法，如 super.parentMethodName()。

在 这里 阅读更多关于类的介绍。

有几点值得注意的是：

类的声明不会提升（hoisting)，如果你要使用某个 Class，那你必须在使用之前定义它，否则会抛出一个 ReferenceError 的错误

在类中定义函数不需要使用 function 关键词

14.import & export

• 情景1:单个变量

输出 export const less = 'less'
引用 import {less} from '../index.js'

• 情景2:多个变量

输出：
const sass = 'sass'
const stylus = 'stylus'
export {sass,stylus}

相对应的引用：
import {less,sass} from '../index.js'

ES6中输出函数的写法

• 情景1:单个函数

方法一：
export function add (x,y) {
return x+y
}

方法二：
funciton add (x,y) {
return x+y
}
export {add}

相对应的引用
import {add} from '../index.js'

方法三：
function add (x,y) {
return x+y
}
export default add

相对应的引用
import add from '../index.js'

• 情景2:多个函数

function add (x,y) {
return x+y
}
function reduce (x,y) {
return x-y
}
export {add,reduce}

相对应的引用
import {add,reduce} from '../index.js'

15. 迭代器

Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：

• 迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。
• 迭代器是用于遍历数据结构元素的指针（如数据库中的游标）。

	const items = ["zero", "one", "two"];
	const it = items[Symbol.iterator]();
	 
	it.next();
	>{value: "zero", done: false}
	it.next();
	>{value: "one", done: false}
	it.next();
	>{value: "two", done: false}
	it.next();
	>{value: undefined, done: true}

16. for

• for of遍历的是键值对中的值
• for in遍历的是键值对中的键

17. 数组常用方法

• array.concat(array1, array2,…arrayN);
  合并多个数组，返回合并后的新数组，原数组没有变化

  const array = [1,2].concat(['a', 'b'], ['name']);
  // [1, 2, "a", "b", "name"]

• array.every(callback[, thisArg])
  检测数组中的每一个元素是否都通过了callback测试，全部通过返回true，否则返回false

// callback定义如下： element:当前元素值；index：当前元素下标； array:当前数组
function callback(element, index, array) {
  // callback函数必须返回true或者false告知every是否通过测试
  return true || false;
}

• array.includes(searchElement, fromIndex)
  includes() 方法用来判断一个数组是否包含一个指定的值，返回 true或 false。searchElement：要查找的元素；fromIndex：开始查找的索引位置。

[1, 2, 3].includes(2, 2);
// false

• array.filter(callback[, thisArg])
  返回一个新数组，包含通过callback函数测试的所有元素。

// callback定义如下，三个参数： element:当前元素值；index：当前元素下标； array:当前数组
function callback(element, index, array) {
  // callback函数必须返回true或者false，返回true保留该元素，false则不保留。
  return true || false;
}
const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];

• array.slice(begin, end)
  返回一个新数组，包含原数组从begin 到 end(不包含end)索引位置的所有元素。
  负值从右往左开始

const newArray = ['zero', 'one', 'two', 'three'].slice(1, 3);
// newArray: ['one', 'two'];

• array.splice(start[, deleteCount, item1, item2, …]);
  通过删除现有元素和/或添加新元素来更改一个数组的内容。start:指定修改的开始位置；deleteCount：从 start位置开始要删除的元素个数；item…：要添加进数组的元素,从start 位置开始。
  可传多个，每次索引重新计算

  返回值是由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

  如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）

const myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

const deleted = myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]，deleted为[]

• array.sort([compareFunction])
  对数组中的元素进行排序，compareFunction不存在时，元素按照转换为的字符串的诸个字符的Unicode位点进行排序，慎用！
  请使用时一定要加compareFunction函数。

[1, 8, 5].sort((a, b) => {
  return a-b; // 从小到大排序
});
// [1, 5, 8]

若compareFunction返回值小于0，a排在b前面，即a与b的位置不变。
若compareFunction返回值等于0，a与b的位置不变。
若compareFunction返回值大于0，a排在b的后面，即a与b的位置交换。
即若返回值大于0的时候交换a与b的位置，其他情况位置不变。

所以，得出结论：

升序：return a - b

降序：return b - a

• array.pop() 与 array.shift()

pop为从数组中删除最后一个元素，并返回最后一个元素的值，原数组的最后一个元素被删除。数组为空时返回undefined。

[1, 2, 3].pop();
// 3

shift删除数组的第一个元素，并返回第一个元素，原数组的第一个元素被删除。数组为空返回undefined。

const shifted = ['one', 'two', 'three'].shift();
// shifted: 'one'

• array.push(element1, element2, …elementN) 与 array.unshift(element1, element2, …elementN)

push是将一个或多个元素添加到数组的末尾，并返回新数组的长度; unshift将一个或多个元素添加到数组的开头，并返回新数组的长度。唯一的区别就是插入的位置不同。

const arr = [1, 2, 3];
const length = arr.push(4, 5);
// arr: [1, 2, 3, 4, 5]; length: 5