js进阶--JSON，克隆，解构赋值,class类与箭头函数 06

外婆桥卖汤
182 阅读6分钟

Array.from(类数组)

Array.from(类数组) 将类数组转换为数组

var ary = [];
function A() {
    ary = Array.from(arguments);
}
A(1, 2, 3, 10, 9);
console.log(ary);

sort中的a，b代表的每一项

var ary=[{age:10},{age:20},{age:1}];
ary.sort(function(a,b){
    console.log(a,b);
	//第一次a为第一项 b为第二项
	//第二次a为第二项 b为第三项
	//我们让它根据age排序
	return a.age-b.age;
})
console.log(ary);//[ { age: 1 }, { age: 10 }, { age: 20 } ]

JSON

JSON是一种常用的数据格式，不是数据类型（前端和后台需要来回的传递数据，一般传递的数据格式就是JSON数据类型） 属性名必须得用双引号引起来，属性值可以是任意的数据类型

  • JSON对象转为普通对象 JSON.parse(JSON对象)
  • 普通对象转JSON对象 JSON.stringify(普通对象)
var obj='{"name":"li","age":10}';
var res=JSON.parse(obj);//JSON.parse(json格式的属性)   转为普通对象
console.log(res);//{ name: 'li', age: 10 }
console.log(obj.name);//undefined

var obj2=JSON.stringify(res);//JSON.stringify(普通对象)   普通对象转为JSON格式
console.log(obj2);//"{"name":"li","age":10}"
浅克隆

共用一个引用地址,改变的其中的引用数据类型的话，会有连带作用，基本数据类型没事

var obj={name:"li",age:10,aa:{c:100}};
var obj2={};
for(var key in obj){
    obj2[key]=obj[key];
}
console.log(obj,obj2);//{ name: 'li', age: 10, aa: { c: 100 } } { name: 'li', age: 10, aa: { c: 100 } }
obj2.aa.c=200;
obj.name="wang";
console.log(obj,obj2);//{ name: 'wamg', age: 10, aa: { c: 200 } } { name: 'li', age: 10, aa: { c: 200 } }
深克隆

用JSON.parse(JSON.stringify(普通对象))可以克隆一份一模一样的，而且没有任何关联

var obj={name:"li",age:10,aa:{c:100}};
var obj2={};
obj2=JSON.parse(JSON.stringify(obj));
console.log(obj,obj2);//{ name: 'li', age: 10, aa: { c: 100 } } { name: 'li', age: 10, aa: { c: 100 } }
obj2.aa.c=200;
console.log(obj,obj2);//{ name: 'li', age: 10, aa: { c: 100 } } { name: 'li', age: 10, aa: { c: 200 } }

es6

  • 声明的变量不会进行变量提升
  • 在同一个作用域，不允许变量重名
  • 有块级作用域的概念
  • 暂时性死区,let与const都有
let
console.log(typeof b);//undefined
console.log(typeof a);//报错a is not defined
let a=1;
const
const f;//Missing initializer in const declaration      意思const设置初始的时候必须要赋值
f=2;
console.log(f);

const f=2;
f=2;//Assignment to constant variable  常量的值不能改
console.log(f);

特殊记忆

  • 如果const声明的是一个引用数据类型,那么只要空间地址不变，改里面的话不会报错
const a={b:2};
a.b=12;
console.log(a);{b=12};

const a=[1,3];
a.push(5);
console.log(a);
对于对象中属性名与属性值一样的只写一个就可以
function fn(){
    console.log(1);
}
let obj={
    // fn:fn
    fn
}
obj.fn();//1

解构赋值

数组的解构赋值
  • 左边结构要与右边解构相同
  • 如果取个别项，不用的项要用,占位
  • 右边没有对应的值就是undefined
  • 右边的值如果为undefined就为我们手动设置的值
  • 我们可以手动给左边的值设值，如果右边没有值就是手动的，如果有就是右边的
var ary=[1,2,3];
// var a=ary[0];
// var b=ary[1];
// var c=ary[2];


var [a,b,c]=ary;
console.log(a,b,c);//1 2 3

var [a,,b]=ary;
console.log(a,c);//1 3

var [a,b,c]=[1,2];
console.log(a,b,c);//1 2 undefined

var [a,b,c=10]=[1,2,null];
console.log(a,b,c);//1 2 null

var [a,b,c=10]=[1,2,3];
console.log(a,b,c);//1 2 3

var [a,b,c=10]=[1,2];
console.log(a,b,c);//1 2 10

var [a,[b,c],d]=[1,[2,3],4];
console.log(a,b,c,d);//1 2 3 4
对象的解构赋值
  • 左边的顺序可以打乱，但是左边的属性名要与右面的对应
  • 如果右面没有，左边的值就为undefined
  • 右边为绝对的undefined，左边才为手动设置的值，null都不行
  • 左边可以改名字，但要在左边对应的:后面加起的别名
let {age,name}={name:"li",age:10};
console.log(age,name);//10 "li"

let {age,name,sex}={name:"li",age:10};
console.log(age,name,sex);//10 "li" undefined

let {age,name,sex=100}={name:"li",age:10};
console.log(age,name,sex);//10 "li" 100

let {age,name,sex=100}={name:"li",age:10,sex:null};
console.log(age,name,sex);//10 "li" null
//要绝对等于undefin才走默认值
let {age,name,sex=100}={name:"li",age:10,sex:undefined};
console.log(age,name,sex);//10 "li" 100

//改名字 在左边的名字后面加:然后写上别名
let {age:a,name,sex=100}={name:"li",age:10};
console.log(a,name);//10 "li"
函数参数运用解构赋值
function fn([x, y]) {
    console.log(x, y);
}
fn([1, 2]);//1,2

function fn(x = 1, y = 2) {
    console.log(x, y);
}
fn(5);//5,2

function fn({ name: a }) {
    console.log(a);
};
fn({age:10,name:"li"});//"li"
展开运算符与剩余运算符
  • 展开

把值展开

//数组展开重复不会替换
var ary1=[1,2,3];
var ary2=[1,4,5,6];
var ary3=[...ary1,...ary2];
console.log(ary3);//[ 1, 2, 3, 1, 4, 5, 6 ]

//对象中展开后以后面为主，重复会替换
var obj1={name:"li"};
var obj2={name:"wang",age:10};
var obj3={...obj1,...obj2};
console.log(obj3);//{ name: 'wang', age: 10 }
  • 剩余

把剩余的给一个变量

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

箭头函数

  • 箭头函数内没有this，如果用了this，就向上级作用域查找
  • 箭头函数中没有arguments，但是可以用展开运算符
  • 箭头函数，如果返回值是一个对象，简写的时候，需要加一个小括号，不然返回值不是此对象，而是undefined
  • 箭头函数不能当构造函数
//箭头函数不能当构造函数
let B=()=>{console.log(1)}; //B is not a constructor
let f=new B();

//在箭头函数中,形参只有一个值时()可以省略，函数体只有return时,return与{}可以省略
var fn=function(a){
    return function(b){
        return function(c){
            return a+b+c;
        }
    }
}
//两者相等
var fn=a=>b=>c=>a+b+c;

//箭头函数，如果返回值是一个对象，简写的时候，需要加一个小括号，不然返回值不是此对象，而是undefined
var fn=a=>{name:1};
fn();//undefined

var fn=a=>({name:1});
fn();//{name:1}

class类

//老式的
function fn(a,b){
    this.a=b;
    this.b=a;
};
fn.prototype.getA=function(){
    console.log("getA");
}
var fn1=new fn();




class Fn{
    //constructor相当于老版的构造函数类,用来给实例赋值的,可以接受传参
    constructor(a,b){
        this.a=a;
        this.b=b;
        // this.c=100;
    }
    //在ES7中支持此语法，等同于在constructor中创建的this.c=100;不过只限与有确定值的量
    //变量=任意值 代表的是在实例上添加私有属性
    c=100;

    //原型上的"公共方法",只能是方法，公共属性不能这样写
    //原型上的公共属性还得用老办法 Fn.prototype.d=1;这样写而且要写在{}外面
    getA(){
        console.log("getA");
    }

    //把其当成"普通对象"设置属性和方法(也可以称之为静态的属性和方法),要与static来声明
    static getB={name:"li",age:11};
    static f=10;
}
//extends是继承其他类的私有属性的
//配套的要在自己的constructor中加super()
class An extends Fn{
    constructor(){
        super();
        this.g=1;
        this.p=2;
    }
}
let a1=new An();
console.log(a1);


let fn1=new fn(9,8);
Fn.prototype.d=1;


fn();//Class constructor fn cannot be invoked without 'new'   class类不能当成普通函数执行
avatar
文章
阅读
粉丝