个人自学前端17-JS10-ES6常用知识

目录

• ES6常用知识
  • • 一 ES6常用知识
      • 1.1 对象扩展
      • 1.2 数组扩展
        • 1.2.1 展开运算符: ... ,可用于展开具有iterator接口的数据和对象.
        • 1.2.2 js具备iterator接口的数据结构如下:
        • 1.2.3 把iterator接口的数据类型转换成数组：Array.from( iterator接口的数据 )；
        • 1.2.4 for of 循环
        • 1.2.4 数组的遍历器对象
        • 1.2.5 简单的数组去重
      • 1.2.6 数组标准方法
      • 1.2.7 数组缓存
      • 1.3 函数扩展
        • 1.3.1 箭头函数
        • 1.3.2 rest参数
        • 1.3.3 函数默认值
      • 1.4 解构赋值
      • 1.5 数学扩展
    • 二 解构赋值例题

ES6常用知识

一 ES6常用知识

1.1 对象扩展

对象的属性和方法简写：

let name = '幂幂';
let oYm = {
	name:name,
	fn:function(){
		console.log(this.name)
	}
}
// 以上写法可以简写成
let oYm = {
    name,
    fn(){
        console.log(this.name)
    }
}

属性名表达式

let str = 'name';
// 通过变量来充当key
let oYm = {
	[str]:'幂幂'
}

console.log(oYm.name);
console.log(oYm[str]);

对象遍历

1: ES5的for in用于遍历对象

let oYm = {a:1,b:2,c:3}

// 对象有多少个属性,这个forin就循环多少次
// prop就是每次循环的键名

for(let prop in oYm){
	console.log(prop);
	console.log(oYm[prop]);
}

2: ES6提供3个方法可以把对象转换成数组,然后再遍历数组. (其实不止3个,还有一些操作跟原型链相关)

Object.keys(obj);//返回一个obj所有键名组成的数组
Object.values(obj);// 返回一个obj所有键值组成的数组
Object.entries(obj);// 返回一个由键名和键值组成的二维数组

1.2 数组扩展

1.2.1 展开运算符: ... ,可用于展开具有iterator接口的数据和对象.

... => 扩展运算符 => 单目运算符.
...只能用在()中,[]中,以及{}中
可以用于暂开数组,对象,甚至是字符串.
...的操作数除对象外,都是一些可以当成数组看待的数据.

展开后的值,可用于传入函数作为实参,或者传入数组作为元素,或者传入对象作为属性.

// 语法
let arr = [...[1,2,3]];
let obj = {...{a:1,b:2,c:3}};
let arr = [...'abcd'];
let arr = [...aDiv];
let args = [...arguments];
console.log(...arr);

1.2.2 js具备iterator接口的数据结构如下:

• Array
• Map
  Map就是更"神经"的纯对象.
  只有构造的写法.(相当于是一个空对象)

    let m = new Map();

    m.set('name', '幂幂');
    m.set(oDiv, '这时一个div');

    // m.get('name') => 访问name映射的值.(name属性值)
    // m.get(oDiv) => 访问oDiv映射的值.(name属性值)

• Set
  Set就是不重复的数组.
  Set数据结构没有直接量的写法,只有构造的写法.
  可以接收数组作为参数.
  Set的成员,绝对是不重复的.
  size相当于是数组的length.

    let aS = new Set([1,2,3,3]);
    console.log(aS.size);
    // 遍历访问Set的成员.
    for (let item of aS) {
      console.log(item);
    }

• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

这些数据结构都可以通过展开运算符展开.

1.2.3 把iterator接口的数据类型转换成数组：Array.from( iterator接口的数据 )；

Array.from(aDiv) // 得到一个元素是标签的真正数组。
Array.from(arguments) // 得到元素是实参的真正数组。

1.2.4 for of 循环

具备iterator接口的数据结构还可以通过 for of循环来遍历。

// item 既是 数组遍历过程中的元素
for(let item of [1,2,3]){
	console.log(item); // 1,2,3
}

1.2.4 数组的遍历器对象

[1,2,3].keys(); //得到数组的下标数组。
[1,2,3].values(); // 得到数组的元素数组。
[1,2,3].entries(); // 得到下标和数组元素组成的二维数组。

1.2.5 简单的数组去重

ES6提供了Set数据结构，简单理解它就是没有重复元素的 “数组”。

let arr = [1,1,2,2,3,4,4,5];
arr = [...new Set(arr)];// [1,2,3,4,5]

    let arr = [1,1,2,2,3,3];
    let newArr = fn(arr);

	// 去重的函数封装.
    function fn(arr) {
      let newArr = [];
      for (let item of arr) {
        // 判断newArr中是否有当前的元素.
        if (!newArr.includes(item)) {
          newArr.push(item)
        }
      }
      return newArr
    }

1.2.6 数组标准方法

let num1 = Number.parseFloat('44.5');
let num2 = Number.parseInt('44.8px');
let flag = Number.isNaN(NaN);

1.2.7 数组缓存

最优写法
let cloneArr = arr.slice();

1.3 函数扩展

1.3.1 箭头函数

ES6 提供了一种更简单的函数书写，箭头函数。用于替代匿名函数。

无法用箭头函数来书写函数声明，只能用箭头函数来书写函数表达式。

let show = () => {
	console.log(100)
}

arr.forEach((item,i)=>{
    console.log(item)
})

// 如果形参只有一个，可以省略形参的()
let show = x => {
	console.log(100)
}

// 如果函数体只有一个return 语句.可以省略{}和return,这样写的好处就是可以一眼看出函数的形参和出参.
let show = x => x+1;

// 相当于:
let show = function(x){
    return x+1
}

箭头函数的简写:
1.如果参数只有一个,可以省略形参的().
2.形参只有1个x,()可以省略掉.
3.没有参数不能省略();
4.多于1个参数不能省略();
5.如果函数内只有一个return 语句,则return和{}都可以省略.
let fun = () => 100;

函数对象的简写:
如果返回的是一个纯对象,简写后,应该有()包裹对象.
let func = () => ({ name: '幂幂' });
给参数添加一个小括号,就可以让eval知道,这是一个对象的{}
let str = eval('({name: "幂幂"})');

箭头函数和普通函数的区别:

箭头函数内的this指向箭头函数所在作用域内的this.

1.3.2 rest参数

可以通过形参写入...来代替arguments的实参列表获取.

function fn(...args){
	console.log(...args) // 这里的args代替了arguments。
}

1.3.3 函数默认值

// 当第二个实参没有传入，就使用1来做y的值。
// 具有默认值的形参应该写在最后面
function fn(x,y=1){}
fn(2);

1.4 解构赋值

ES6提供了一种更简便的解构赋值操作，在取值和传参时更方便。

1.4.1 数组解构赋值

// 数组解构赋值,按位置匹配
let [x,y,z] = [1,2,3];
// 相当于

let x = arr[0],
	y = arr[1],
	z = arr[2];
// -------------------------------------------------------
let [x,y,[z]] = [1,2,[3]];
// 相当于
let x = arr[0],
    y = arr[1],
    z = arr[2][0]
// -------------------------------------------------------
let [x,y,z] = [1,2];
// 相当于
let x = arr[0],
	y = arr[1],
	z = undefined;

1.4.2 对象解构赋值

// 对象解构赋值,按键名匹配
let {a:x,b:y} = {a:1,b:2};
// 相当于
let x = obj.a,
	y = obj.b
// ----------------------------------------------------------
let {a:a,b:b} = {a:1,b:2};
// 可简写成
let {a,b} = {a:1,b:2};
// ---------------------------------------------------------
let {a,b:{c}} = {a:1,b:{c:3}};
// 相当于
let a = obj.a,
    c = obj.b.c;
// ----------------------------------------------------------
let {a,b:{c},b} = {a:1,b:{c:3}};
// 相当于
let a = obj.a,
    b = obj.b,
    c = obj.b.c;

注意，在任何赋值的地方都可以使用解构赋值，包括系统的自动赋值。例如实参给形参赋值时使用解构赋值。

// 实参是{a:1,b:2}
fn({a:1,b:2});
// 直接通过解构赋值使用实参的a和b属性。
function fn({a,b}){
    console.log(a);
    console.log(b);
}

let arr = [{a:1,b:2},{a:3,b:4}];

// 直接通过解构赋值获取数组元素的a和b属性。
for(let {a,b} of arr){
    console.log(a);
    console.log(b);
}

1.5 数学扩展

    // 向下取整
    let num1 = Math.floor(4.9);// 4
    let num2 = Math.floor(-4.9);// -5

    // 直接把小数部分删掉
    let num3 = Math.trunc(4.9);// 4
    let num4 = Math.trunc(-4.9);// -4

二 解构赋值例题

    let arr = [
      {name: '幂幂', age: 32},
      {name: '超越', age: 23},
      {name: '紫琼', age: 63}
    ];
    arr = arr.map(function(item, i) {
      return {name: item.name, age: item.age + 1}
    });
    // 用箭头函数改写map的回调.
    // 函数内部return的对象写成:
    // {name, age: age + 1}
    // 如果这样写,应该如何解构item?
    arr = arr.map((item, i) => ({name: item.name, age: item.age + 1}));
    arr = arr.map(({name, age}, i) => ({name, age: age + 1}));

    let arr = [
      [100, 200, {num: 300}],
      [400, 500, {num: 600}],
      [700, 800, {num: 900}],
    ];
    arr = arr.map(function(item, i) {
      return item[0] + item[2].num
    });
    // 用箭头函数改写map的回调.
    // 函数内部return的对象写成:
    // first + num
    // 如果这样写,应该如何解构item?
    arr = arr.map((item, i) => item[0] + item[2].num);
    arr = arr.map(([first,,{num}], i) => first + num);

    const obj = {
      person: {
        name: '幂幂',
        age: 32
      }
    }
    // 利用解构赋值改写fn,把打印写成:
    // console.log(age);
    // console.log(name);
    function fn({person: {name, age}}) {
      console.log(age);
      console.log(name);
    }
    fn(obj);