likes
comments
collection
share

ES6的一些常用语法

作者站长头像
站长
· 阅读数 56

“...”的作用

  • 拓展运算符（多用在解构赋值中）
  • 展开运算符（多用在传递实参中）
  • 剩余运算符（多用在接收实参中）
//=>解构赋值
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:'boy',age:26};

//=>接收实参
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 ....

www.bootcss.com/

Bootstrap

JSON格式的数据

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

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

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

let str = '{"name":"aaa"}';
let obj = JSON.parse(str);
//=>{ name:"aaa" }

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

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

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

关于SORT排序的

//=>把数组中的每一项按照AGE进行升序排列
//SORT中传递一个函数，函数中有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);
转载自:https://juejin.cn/post/6844903950177550349
评论
请登录