ES6基础语法

目录

解构

数组解构

对象解构

 基本数据解构

对象

对象简写

箭头函数

扩展运算符

函数参数解构

 对象API拓展

Object.is()

Object.assign()

Object.getPrototypeOf()

Object.setPrototypeOf()

Object.keys() Object.values() Object.entries()

Object.fromEntries()

 数组方法拓展


解构

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。

数组解构

// 等号左右两侧模式匹配才可以进行解构
// 完全解构
let [a,b,c] = [1,2,3];
console.log(a,b,c);
let [d,e,f,g,h] = [1,2,3,[4,5],6];
console.log(d,e,f,g,h);
// 不完全解构
let [i,j,[k],l] = [1,2,[3,4,5],6];
console.log(i,j,k,l);
// 集合解构
let [m,...n] = [1,2,3,4,5];
console.log(m,n);
// 默认值解构
let [o,p=1,q] = [];
// let [o,p=1,q] = [1,2,3];
console.log(o,p,q);
// 默认值可以是函数
function test(){
    console.log('hello');
}
let [r=test(),s] = [1,2];
console.log(r,s);
let [t=test(),u] = [];
console.log(t,u);   //函数没有返回值 是undefined

ES6基础语法_第1张图片

对象解构

// 等号左右两侧模式匹配才可以进行解构
// 对属性解构 变量名和函数名必须相同

// 1
// let {name,age} = {name:'jemmy',age:21};
// console.log(name,age);
// 完全写法
// let {name:name,age:age} = {name:'jemmy',age:21};
// console.log(name,age);

// 变量名和属性名不同 给属性名重命名
// let {name:name1,age} = {name:'jemmy',age:21};
// console.log(name1,age);

// 嵌套解构
// let obj = {p:['hello',{y:"world"}]};
// let {p:[a,{y:b}]} = obj;
// console.log(a,b);

// 默认值解构
// let {x:y=3} = {}
// console.log(y);

// 集合解构
// let {a,b,...c} = {a:1,b:2,d:3,e:4};
// console.log(a,b,c);

// 练习
const [a,b,c,...d] = [1,2,3,11,999];
const {e,f,f1,g,...h } = {f:4,g:5,i:6,j:7};
console.log(a,b,c,d,e,f,f1,g,h);
结果:1,2,3,[11,999],undefined,4,undefined,5,{i:6,j:7}

ES6基础语法_第2张图片

 基本数据解构

// 字符串
let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);
let [...arr] = 'world';
console.log(arr);

let {toString,valueOf,length} = 'hello';
console.log(toString,valueOf,length);

// 数字
// let {toString,valueOf} = 10;
// console.log(toString,valueOf);

// 布尔值
// let {toString,valueOf} = true;
// console.log(toString,valueOf);

对象

对象简写

ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法,此时属性名为变量名, 属性值为变量的值。对象简写在未来的使用频率极其高。

let name='larry';
	let age=12;
	let obj={
		name,
		age,
    	//es5 sayName:function(){}
    	// sayName(){
        //     console.log(this.name) --按照这种形式写this依然指向调用者
        // },
		// sayName:()=>{
		// 	console.log(this)
		// }
		sayName(){
            //this-->obj
			return ()=>{
				console.log(this)
			}
		}
	}
	obj.sayName()();
----------------------------------------------------------
	let name='larry';
    let age=12;
    let sayName=()=>{
        console.log(this)
    }
        let obj={
            name,
            age,
            //es5 sayName:function(){}
            // sayName(){
            //     console.log(this.name)
            // },
            // sayName:()=>{
            // 	console.log(this)
            // }
            sayName(){
                return sayName
            }
        }
        // obj.sayName()()
    //箭头函数没有自己的this,内部this指向声明箭头函数时外部作用域中的this。
    obj.sayName()()

箭头函数

es5函数内部属性有this和arguments,箭头函数内arguments不再保存实参,如果想接受实参,可以使用rest参数

let test=(a,...b)=>{
		//console.log(this,arguments);
        console.log(a,b); //a--1 b--[2,3,4,5]
    }
    test(1,2,3,4,5)

扩展运算符

let arr = [1,2,3,4,5];
let [...a] = arr;
console.log(a);
// 用到左侧是聚合 用到右侧是展开
let obj = {
    name:'jemmy',
    age:27,
    gender:'male'
}
let {...b} = obj;
let temp = {...obj};
// 不影响原来的obj
delete temp.name;
console.log(b,temp,obj);

函数参数解构

function test1({name,age,...gender}){
    console.log(name,age,gender);
}
test1({name:'jemmy',age:21,gender:'male'});

function test2({name,age=21,...gender}){
    console.log(name,age,gender);
}
test2({name:'jemmy',gender:'male'});

// ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。通常情况下,定义了默
// 认值的参数, 应该是函数的尾参数,函数的length属性,将返回没有指定默认值的参数个数

function log1(a,b,c,d=1,e,f,g){}
console.log(log1.length);
function log2(h,i,j,k,l,m,n){}
console.log(log2.length);

 对象API拓展

Object.is()

Object.assign()

Object.getPrototypeOf()

Object.setPrototypeOf()

Object.keys() Object.values() Object.entries()

Object.fromEntries()

详细看下面代码

// Object.is()  判断两值是否相等或全等
// 特殊案例
console.log(+0 === -0);                 //true
console.log(Object.is(+0,-0));      //false
console.log(NaN === NaN);               //false
console.log(Object.is(NaN,NaN));    //true

// Object.assign() 
// 参数两个或三个 两个为复制对象 三个为合并对象 返回目标对象
// 复制是基本数据类型是值的复制,即深拷贝:引用数据类型是值的引用,即浅拷贝
// 复制对象
let o = {};
let obj = {
    name:'jemmy',
    age:21,
    gender:'male',
    address:{
        home:'1703'
    }
}
var res = Object.assign(o,obj);
console.log(res,obj);
res.name = 'JP';
res.address.home = '1702'
console.log(res,obj);

// 合并对象 
let obj1 = {
    name:'cammy',
    age:18,
}
let obj2 = {
    gender:'female'
}
let obj3 = {
    home:'1703'
}
var res1 = Object.assign(obj1,obj2,obj3);
console.log(res1,obj1,obj2,obj3);

// 访问原型对象 Object.getPrototypeOf() 参数:目标对象
console.log(obj.__proto__);
console.log(obj.constructor.prototype);
console.log(Object.getPrototypeOf(obj));

// 设置原型对象 Object.setPrototypeOf() 参数:目标对象 新原型
Object.setPrototypeOf(obj,obj2)
console.log(obj.__proto__);
console.log(obj.constructor.prototype);
console.log(Object.getPrototypeOf(obj));

// Object.keys() Object.values() Object.entries()
// 将属性名         属性值        属性名和属性值(二维数组)   转为数组
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));

// Object.fromEntries()  将二维数组变为对象
var res = Object.entries(obj);
console.log(Object.fromEntries(res));

ES6基础语法_第3张图片

 数组方法拓展

// 静态方法
// Array.from() 将类数组变为数组  Array.of()  创建数组

// 实例方法
// find()  参数回调函数 返回第一个满足条件的元素/undefined    不修改原数组
// let arr = [1,2,3,4,5,4,3,2,1];
// let res = arr.find((item,index,arr)=>{
//     return item > 3;
// })
// console.log(res,arr);

// findIndex()  参数回调函数   返回第一个满足条件的元素的下标/-1    不修改原数组
// let arr = [1,2,3,4,3,1,2];
// let res = arr.findIndex((item,index,arr)=>{
//     return item > 2;
// })
// console.log(res,arr);

// includes() 参数查找的数组元素 返回true/false 不修改原数组
// let arr = [1,2,3,4];
// let res = arr.includes(2);
// console.log(res,arr);

// fill() 用于填充数组 参数要填充的数组元素  修改原数组
// let arr = [1,2,3,2,1];
// let res = arr.fill(4);
// console.log(res,arr);

// keys() values() entries() 参数无  返回一个可迭代对象 不修改原数组
// let arr = [1,2,3,4,5];
// let keys = arr.keys();
// let values = arr.values();
// let entries = arr.entries();
// console.log(keys,values,entries,arr);

// flat 参数可写可不写 n/Infinity 返回展开后的数组  不修改数组
// let arr = [1,2,[3,4,[5,6,[7]]]];
// let res1 = arr.flat();
// console.log(res1);
// let res2 = arr.flat(Infinity);
// console.log(res2);
// console.log(arr);

// flatmap flat和map集合 参数回调函数  返回展开并被操作的结果 不修改原数组
let arr = [1,2,3,4,[5,6,7]];
let res = arr.flatMap((item)=>{
    if(typeof item === 'number'){
        return item*2;
    }else{
        // return item.map((item)=>{return item*2})
        return item.map(item=>item*2);
    }
})
console.log(res,arr);

你可能感兴趣的:(HTML+CSS+JS,es6,前端,ecmascript,javascript)