13 - 商城排序前瞻

一、“…”的作用

• 拓展运算符（多用在解构赋值中）
• 展开运算符（多用在传递实参中）
• 剩余运算符（多用在接收实参中）

// 解构赋值
let [n, ...m] = [12, 23, 34];
// n:12
// m:[23, 34]
// 传递实参
let ary = [12, 23, 13, 24, 10, 25];
let min = Math.min(...ary);
// 数组克隆（浅克隆）
let cloneAry = [...ary];
// 对象克隆（浅克隆）
let obj = {name:'园园', age:16};
let cloneObj={...obj, sex:'girl', age:17};
// 接收实参
let fn=(n, ...arg) => {
    // n:10
    // arg:[20,30]
};
fn(10, 20, 30);

二、class 创建类

// 传统 ES3 / ES5 中创建类的方法
function Fn(){
    this.x = 100;
};
Fn.prototype.getX = function(){
    console.log(this.x);
};
var f1 = new Fn();
f1.getX();
// 也可以把它当做普通函数执行
Fn();
// 还可以把Fn当做普通的对象设置键值对
Fn.queryX = function(){};
Fn.queryX();

// ES6 中类的创建
class Fn{
    // 等价于之间的构造函数体
    constructor(n, m){
        this.x = 100;
    }
    // 给实例设置的私有属性
    y=200
    // 直接写的方法就是加在原型上的 === Fn.prototype.getX...
    getX () {
        console.log(this.x);
    }
    // 前面设置 static 的：把当前 Fn 当做普通对象设置的键值对
    static queryX () {}
    static z = 300
}
// 也可以在外面单独这样写
Fn.prototype.y = 200;
Fn.z = 300;
let f = new Fn(10, 20);
f.getX();
Fn.queryX();
Fn(); // Uncaught TypeError: Class constructor Fn cannot be invoked without 'new'  => 
// class 创建的类只能 new 执行，不能当做普通函数执行

三、ES6中的模板字符串

let year = '2019',
    month = '08',
    day = '09';
// "你好，小伙伴！今天是2019年08月09日，今天天气很糟糕，马上就要下大雨了，呵呵呵~~~"
let res = "你好，小伙伴！今天是" + year + "年" + month + "月" + day + "日，今天天气很糟糕，马上
就要下大雨了，呵呵呵~~~";
let ID = "box";
let html = '<ul class="list clear" id="'+ID+'">';
// 我们真实项目中会大量进行字符串拼接操作（尤其是需要动态绑定数据：把现有的 HTML 代码拼接成有数据的 HTML 字符串），传统的 ES3 语法模式下字符串拼接是一个非常苦逼的任务 ┭┮﹏┭┮

let year = '2019',
    month = '08',
    day = '09';
// 反引号（撇） TAB 键上面的 （ES6 模板字符串语法）
// ${} 模板字符串中书写 JS 表达式的方式（凡是有输出结果的都可以被称为JS表达式，一般都是一行搞定的）
let res = `你好，小伙伴！今天是${year}年${month}月${day}日，今天天气很糟糕，马上就要下大雨了，呵呵
呵~~~`;
let ID = "box";
let HTML = `<ul class="list clear" id="${ID}">
    <li><a href="javascript:;">
        <img src="img/1.jpg" alt="">
        <p></p>
        <span>￥3899</span>
    </a></li>
</ul>`;
// 传统方式拼接一套 HTML 字符串，还需要一行行的处理，非常麻烦

四、THIS 和面向对象的深入理解

function sum(){
   // ARGUMENTS:内置的实参集合（箭头函数中没有），不是数组是类数组（它不是数组的实例，不能直接使用数组的方法  arguments.__proto__===Object.prototype）
   let total = null;
   for(let i = 0;i < arguments.length; i++){
      total += arguments[i];
   }
   return total;
}
let total = sum(10, 20, 30, 40);

// ARG:存储传递的实参信息（数组）
// eval:把字符串转换为 JS 表达式执行
let sum = (...arg => eval(arg.join('+'));
let total = sum(10, 20, 30, 40);

如果 ARGUMENTS 是一个数组就好了~~~

~function () {
    function slice (n) {
        // n:0 把数组克隆一份新的出来
        let newAry = [];
        for(let i = 0; i < this.length; i++){
            newAry.push(this[i]);
        }
        return newAry;
    }
    Array.prototype.slice = slice;
}();
let ary = [10, 20, 30, 40];
let newAry = ary.slice(0); // 数组克隆
//--------------------------
function sum () {
   // 把 ARGUMENTS 转换为数组：借用数组原型上的 SLICE 方法，只要让 SLICE 中的 THIS 指向 ARGUMENTS，就相当于把 ARGUMENTS 转换为新数组
   // let arg = Array.prototype.slice.call(arguments,0);
   let arg = [].slice.call(arguments, 0);
   // 数组求和
   return eval(arg.join('+'));
}
let total = sum(10, 20, 30, 40);

不仅仅是一个方法可以这样调用，很多数组的方法，类数组都能用~~

function sum () {
   let total = null;
   [].forEach.call(arguments,item => {
      total += item; 
   });
   return total;
}
let total = sum(10, 20, 30, 40);

五、UI 组件库

有结构、样式、功能的库，里面提供很多开发中常用的组件，开发中直接把组件调取过来使用即可，无需从头开发（可能需要二次开发）

• bootstrap（经常配合 JQ 一起用）：支持响应式布局开发（栅格系统）
• vue：vue element / iview
• react：antd
• EasyUI / AmazeUI ….
  https://www.bootcss.com/
  Bootstrap
• v3.x
• v4.x : https://v4.bootcss.com/

六、JSON 格式的数据

我们基于 AJAX 等其它方式从服务器获取的数据结果一般都是：JSON 格式或者 XML 格式

• JSON 格式的字符串
• JSON 格式的对象

// 普通对象
let obj = {
    name:"珠峰"
};
// JSON 格式对象（其实就是把属性名用双引号包起来）
obj = {
    "name":"珠峰"
};
// JSON格式的字符串
let str = '{"name":"珠峰"}';

把 JSON 格式的字符串转换为对象：window.JSON.parse

let str = '{"name":"珠峰"}';
let obj = JSON.parse(str);
// { name:"珠峰" }
// 在IE 低版本浏览器中，全局对象 window中没有 JSON 这个对象，也就没有所谓的 parse 等方法了
obj = eval('('+str+')'); // 基于 eval 可以实现，但是为了保证转换格式正确，我们需要把字符串用小括号包起来转换

把对象转换为JSON格式字符串：JSON.stringify

let obj = {
    name:"珠峰"
};
let str = JSON.stringify(obj); // '{"name":"珠峰"}'

七、关于 SORT 排序的

// 把数组中的每一项按照 AGE 进行升序排列
// ORT中传递一个函数，函数中有 A / B
// A当前项的后一项
// B当前项
// 果当前函数返回的是一个小于零的值，让 A 和 B 的位置互换，如果返回的是大于等于零的值，位置保持不变
let ary = [{
    id: 1,
    age: 25,
    name: '张三'
}, {
    id: 2,
    age: 32,
    name: '李四'
}, {
    id: 3,
    age: 23,
    name: '张五'
}];
// 按照 NAME 排序 : localeCompare 能够进行字符串比较
/* ary.sort((a, b) => {
    return a.name.localeCompare(b.name);
}); */
// 按照 AGE 升序和降序
/* ary.sort((a, b) => {
    return a.age - b.age;
});
ary.sort((a, b) => {
    return (a.age - b.age) * -1;
}); */
console.log(ary);