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

文章目录

- Array.from(类数组)
- sort中的a，b代表的每一项
- JSON
- - 浅克隆
  - 深克隆
es6
- - let
  - const
  - 对于对象中属性名与属性值一样的只写一个就可以
- 解构赋值
- - 数组的解构赋值
  - 对象的解构赋值
  - 函数参数运用解构赋值
  - 展开运算符与剩余运算符
- 箭头函数
- class类

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);//undefinedvar 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:fnfn
}
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 3var [a,,b]=ary;
console.log(a,c);//1 3var [a,b,c]=[1,2];
console.log(a,b,c);//1 2 undefinedvar [a,b,c=10]=[1,2,null];
console.log(a,b,c);//1 2 nullvar [a,b,c=10]=[1,2,3];
console.log(a,b,c);//1 2 3var [a,b,c=10]=[1,2];
console.log(a,b,c);//1 2 10var [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" undefinedlet {age,name,sex=100}={name:"li",age:10};
console.log(age,name,sex);//10 "li" 100let {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,2function fn(x = 1, y = 2) {console.log(x, y);
}
fn(5);//5,2function 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();//undefinedvar 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类不能当成普通函数执行

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

js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数
js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...
ES6基础：变量的解构赋值
ES6基础系列之变量的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.这种方式的出现大大提高了代码的扩展性前言一.数组的解构赋值二.对象的解构赋值三.函 ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
JS 语法糖 0 —— 解构
文章目录 1.数组解构 1.1 简介 1.2 完全解构 1.3 不完全解构 1.4 数组解构的条件 1.5 默认值 2.对象解构 2.1 简介 2.2 解构对象方法 2.3 默认值 2.4 注意点 3 ...
ES6解构赋值有这一篇就够了
文章目录 1.什么是解构赋值 2. 为什么会出现解构 3.解构赋值的类型 3.1 数组的解构赋值 3.2 对象的解构赋值 3.3 函数参数的解构赋值 3.4其他的解构可以参考阮大的文章 4.解构的用途 ...
es6学习 -- 解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c ...
ES6的新特性（3）——变量的解构赋值
变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...
ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
[ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象本质上,这种写法属于"模式 ...

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

文章目录

Array.from(类数组)

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

JSON

浅克隆

深克隆

es6

let

const

对于对象中属性名与属性值一样的只写一个就可以

解构赋值

数组的解构赋值

对象的解构赋值

函数参数运用解构赋值

展开运算符与剩余运算符

箭头函数

class类

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

最新文章

热门文章