关于前端:02ES6-变量解构对象数组

28次阅读

共计 6271 个字符，预计需要花费 16 分钟才能阅读完成。

1. 变量

1.1 let 特点(用于申明变量)

(1) 变量申明不会被晋升，即在变量申明之前无奈应用该变量
(2) 具备部分作用域，即 let 申明的变量只能在对应代码块中应用
(3) 不容许反复申明

1.2 const 特点(用于申明常量)

const 用于申明一个常量
(1) 变量的申明不会被晋升，即在变量申明之前无奈应用该变量
(2) 不容许反复申明
(3) 具备部分作用域，即 const 申明的变量只能在对应代码块中应用。(4) const 申明的变量在申明的时候就要赋值，并且只能赋值一次，不能批改。

2. 解构

ES6 容许依照肯定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构得实质属于“模式匹配”，只有等号两边得模式雷同，右边得变量就会被赋予对应得值。如果解构不胜利，变量得值就等于 undefined。

2.1 数组解构

等号右边的变量放到中括号外部，匹配右侧数组中的元素。(1) let [a,b,c] = [1,2,3];
    console.log(a,b,c);//1,2,3
(2) let [a,b,c,d,e] = [1,2,3,[4,5],6];
    console.log(a,b,c,d,e);//1,2,3,[4,5],6
(3) 不齐全解构
    let [a,b,c,[d],e] = [1,2,3,[4,5,6],7];
    console.log(a,b,c,d,e);//1,2,3,[4],7
(4) 汇合解构 应用... 扩大运算符，用在 = 右边聚合作用，返回一个新数组
    let [a, ...b] = [1,2,3];
    console.log(a,b);//1,[2,3]
(5) 默认值解构(当匹配值严格等于 undefined 时，默认值失效)
    let [a,b,c=6]=[4,5];
    console.log(a,b,c);//2,5,6
    let [a=1, b=2, c=3] = [];
    console.log(a,b,c);//1,2,3
(6) 默认值也能够是函数
    function test(){console.log("hello");
    }
    let [a=test()] = [1];
    console.log(a);//1
    let [a] = [test()];
    console.log(a);//"hello" undefiend
    // 产生 undefined 的起因是函数 test 没有返回值。(7) let arr = [1,2,3,4];
    let [...a] = arr;
    console.log(a===arr);//false

2.2 对象解构

等号右边的变量放到大括号外部，匹配右侧对象中的元素。对象的属性没有秩序，变量名必须与属性同名，能力取到正确的值。(1) let {foo,bar} = {foo:"hello",bar:"world"};
    console.log(foo,bar);//helloworld
(2) 如果变量名和属性名不统一，须要重命名
    let {foo:baz} = {foo:"hello",baz:"world"};
    console.log(baz);//hello
(3) 对象的解构赋值是上面模式的简写，后面属性名前面变量名
    let {foo:foo,bar:bar} = {foo:"hello",bar:"world"};
(4) 嵌套构造
    let obj = {p:["hello",{y:"world"}]
    }
    let {p:[a,{y:b}]} = obj;
    console.log(a,b);//hello world
(5) 默认值构造
    let {x:y=3}={};
    console.log(y);//3

面试题：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,f1,g,h);//1,2,3,[11,999],undefined,undefined,5,{i:6,j:7}

2.3 字符串解构

(1) 能够应用对象解构或者是数组解构，应用数组解构能够获取指定字符；应用对象解构能够获取实例属性办法。let [a,b,c] = "hello";
    console.log(a,b,c);//h e l
(2) 将字符串转换为数组
    let [...arr] = "hello";
    console.log(arr);//["h","e","l","l","o"]
(3) 应用对象解构
    let {toString,valueOf,length}="hello";// 相当于把“hello”当成 String 根本包装器类型
    console.log(toString,valueOf,length);//[Function: toString] [Function: valueOf] 5
    
    let str = "hello";
    let {length, toString} = str;
    console.log(length === str.__proto__.length);//false   
    console.log(toString === str.__proto__.toString);//true

2.4 数值解构

能够获取到数值包装器构造函数原型中指定的办法
let {toString,valueOf} = 10;
console.log(toString,valueOf);//[Function: toString] [Function: valueOf]

2.5 布尔解构

能够获取到布尔包装器构造函数原型中指定得办法
let {valueOf} = true;
console.log(valueOf);//[Function: valueOf]

3. 对象（ES6 中对于 Object 的扩大次要是静态方法的扩大）

3.1 对象的简写

ES6 中规定能够间接在对象中写入变量和函数作为对象的属性和办法，此时属性名为变量名，属性值为变量的值。对象简写在将来的应用频率极其高。let name = "zhangsan";
let age = 12;
let gender = "male";

let obj = {
    name,
    age,
    gender
}

3.2 对象 API 拓展

(1) Object.is(a,b); 判断 a 和 b 的值是否相等 相似于 ===
    console.log(1===1);//true
    console.log(Object.is(1,1));//true
    console.log(Object.is(1,2));//false
    console.log(+0 === -0);//true
    console.log(Object.is(+0,-0));//false
    console.log(NaN === NaN);//false
    console.log(Object.is(NaN,NaN));//true
(2) Object.assign(o, obj); 实现对象深复制、拷贝。第一个参数是指标对象，将 obj 的值复制给 o
    let o = {};
    let obj {
        name:"zhangsan",
        age: 12
    }
    let result = Object.assign(o,obj);// 把 obj 中的内容复制到 o 对象当中，并返回 o 对象
    console.log(o);//{name:"zhangsan",age:12}
    console.log(result);//{name:"zhangsan",age: 12}
    console.log(o === result);//true

    Object.assign(o,obj,obj1); 三个参数代表的是合并对象 obj,obj1 到 o 当中并返回 o 对象
        let o = {};
        let obj = {
            name:"zhangsan",
            age:12
        }
        let obj1 = {
            name:"lisi",
            gender:1
        }
        let result = Object.assign(o,obj,obj1);
        console.log(o);{name:'lisi',age:12,gender:1}
        console.log(result);//{name:'lisi',age:12,gender:1}
        let result1 = Object.assign(o,obj1,obj);
        console.log(result1);//{name:"zhangsan",age:12,gender:1}
(3) Object.getPrototypeOf() 获取原型对象中的办法
    let obj = {
        name:"",
        age:1
    }
    console.log(obj.__proto__);//[Object: null prototype] {}
    console.log(obj.constructor.prototype);//[Object: null prototype] {}
    console.log(Object.getPrototypeOf(obj));//[Object: null prototype] {}
(3) 设置原型对象中的办法 Object.setPrototypeOf(obj,obj1) 设置 obj 的原型对象为 obj1
    let obj = {
        name:"zhangsan",
        age:12
    }
    let obj1 = {gender:"male"}
    Object.setPrototypeOf(obj,obj1);
    console.log(obj.__proto__);//{gender: "male"}
    console.log(obj.constructor.prototype);// [Object: null prototype] {}
    console.log(obj.constructor.prototype === obj1);//false
    console.log(Object.getPrototypeOf(obj));//{gender: "male"}
(4) Object.keys() 返回对象属性名组成的数组
    Object.values() 返回对象属性值组成的数组
    Object.entries() 返回对象 [属性名，属性值] 组成的二维数组

    let obj = {
        name:'terry',
        age: 12
    }
    // 获取所有属性名组成的数组
    console.log(Object.keys(obj));//['name', 'age']
    // 获取所有属性值组成的数组
    console.log(Object.values(obj));// ['terry', 12]
    // 获取键值对组成的数组
    console.log(Object.entries(obj));//[[ 'name','terry'], ['age', 12]]

4. 数组(静态方法和实例办法都有所扩大)

4.1 扩大运算符

(1)... 用在 = 右边，聚合的作用(对象，数组的解构)
    let [a, ...b] = [1,2,3,4,5]
    console.log(a,b);//1,[2,3,4,5]

(2)... 用在 = 左边，开展（剥离）的作用
    let obj1 = {
        name:"tom",
        age: 20
    }
    let obj2 = {
        ...obj1,
        gender: "male",
        age:18
    }

4.2 数组 API

(1) Array.from(); 将类数组对像或其余数据类型 (可迭代的) 转成数组
    ES5 将类数组对象或其余数据类型 (可迭代的) 转成数组的办法：Array.prototype.slice.call("类数组对象",0);
    
    ES6 转数组的办法：let arrObj = {
        0:"tom",
        1: "12",
        3: "男",
        4: ['jacky','terry']
        length:4
    }
    let arr = Array.from(arrObj);
    console.log(arr);//["tom","12","男",['jacky','terry']]        
    如果将下面代码中的 length 属性去掉，答案会是一个长度为 0 的空数组
    而后再把代码改一下，就是具备 length 属性，然而对象的属性名不再是数字类型，而是其余字符串型的，代码如下
    let arrObj = {
        name:"tom",
        age:12,
        sex:"男",
        friends:['jacky','terry'],
        length: 4
    }
    let arr = Array.from(arrObj);
    console.log(arr);//[undefined, undefined, undefined, undefined]
    由上可知，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：a. 该类数组对象必须具备 length 属性，用于指定数组的长度。如果没有 length 属性，那嚒转换后的数组是一个空数组。b. 该类数组对象的属性名必须为数值或字符串型的数字。该类数组对象的属性名能够加引号，也能够不加引号。将字符串转换为数组：let str = "hello";
    console.log(Array.from(str));//['h','e','l','l','o']

(2) Array.of()  创立数组实例 实参就是数组的元素, 为了解决 new Array(10)传递一个数组，创立 length
    创立数组
    let arr1 = new Array(1,2,3,4);
    console.log(arr1);//[1,2,3,4]
    let arr2 = new Array(3);
    console.log(arr2);//[<3 empty items>]
    let arr3 = Array.of(3);
    console.log(arr3);//[3]
(3) Array.prototype.find((item) => {}) find 办法返回第一个满足条件的元素或者 undefined，参数是回调函数
    let arr = [1,2,3,2,3];
    let result = arr.find((item) => {return item>2;})
    console.log(result);//3
(4) Array.prototype.findIndex();  // 参数回调函数
    findIndex 返回第一个满足条件的元素的索引或者 -1
    let arr = [1,2,3];
    let result = arr.findIndex((item) => {return item>2;})
    console.log(result);//2
(5) Array.prototype.includes(); includes 是否蕴含某个元素，返回 true/false
    let arr = [1,2,3]
    console.log(arr.includes(3));//true
(6) Array.prototype.fill() 用来填充数组，批改原数组
    let arr = [1,2,3];
    let result = arr.fill(4);
    console.log(arr,result, arr===result);//[4,4,4]  [4,4,4] true
(7) Array.prototype.keys();
    Array.prototype.values()
    Array.prototype.entries()
    //keys,values,entries 变量以后是迭代器对象
    let arr = [2,3,4];
    let keys = arr.keys();
    let values = arr.values();
    let entries = arr.entries();
    console.log(keys,values,entries);//Object [Array Iterator] {} Objcet [Array Iterator] {} Object [Array Iterator] {}
    迭代器实现了 Iterator 接口，只有有实现了 Iterator 接口就能够 for-of 遍历

正文完
前端
发表至： 前端
2021-09-29
 0
关于前端:冒泡排序
关于前端:YonMaster开发者认证线上赋能培训班定档4月18日
关于前端:Fabricjs-使用图片遮盖画布前景图
关于前端:如何通过docker编译vue项目