一. 数组
创建数组的方式
- 字面量方式
const arr = [1, 2, 3, 4, 5]
- 使用Array构造方法
const arr = new Array()
; 若传入一个参数
代表该数组的长度 ; 若传入一个非数值的参数
或1个以上参数
则代表该数组的元素 - Array.of方法创建数组
const arr = Array.of(1)
该方法传入的值就代表数组的元素
1. 数组的插入
- arr.push(item1,item2,...,itemN) ; 向数组的末尾添加一个或多个元素,并返回新的长度
- arr.unshift(item1,item2,...,itemN) ; 向数组的开头添加一个或更多元素,并返回新的长度
- arr.splice(索引,要删除的项目数量,item1,.....,itemN) ; item为要增加的元素,返回被删除的元素
- 展开运算符;
const arr2 = [...arr1,'name']
2. 数组的删除
- arr.pop() ; 删除最后一个元素,并返回删除的元素
- arr.shift() ; 删除数组的第一个元素,并返回删除的元素
- arr.splice(索引,要删除的项目数量,item1,.....,itemN) ; item为要增加的元素,返回被删除的元素
- 可通过展开运算符和arrayObject.slice(start,end)配合使用来指定进行删除元素
const arr1= [...arr2.slice(1,2)]
3. 数组的查找
- arr.includes(要查找的元素,开始查询的索引) ; 索引为可选参数,默认为0,若包含返回值为true,否则为false;
includes使用===运算符来进行值比较,仅有一个例外:NaN被认为与自身相等
- arr.indexOf(要查找的元素,开始查询的索引) ; 返回数组中第一个指定的元素索引位置,如果在数组中没找到指定元素则返回 -1
- arr.lastIndexOf(要查找的元素,开始查询的索引) ; 返回数组中最后一个指定的元素索引位置
- arr.find(function(currentValue, index, arr){ return 操作 }) ; 方法返回通过测试(函数内判断)的数组的第一个元素的值
- array.findIndex(function(currentValue, index, arr){ return 操作 }) ; 返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1
4. 数组的排序
- array.sort(fun(a,b){return a-b}) 对数组中的元素进行排序,这种方法会改变原始数组
- array.reverse() 返回值为颠倒顺序后的数组
const arr1 = arr2.reverse()
5. 数组的筛选
- array.filter(function(currentValue,index,arr){ return 操作 }) ; 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
- array.every(function(currentValue,index,arr){ return 操作 }); 布尔值。如果所有元素都通过检测返回 true,否则返回 false。
- array.some(function(currentValue,index,arr){ return 操作 }) ; 布尔值。如果数组中有任意一个元素满足条件返回 true,否则返回 false
- array.map(function(currentValue,index,arr)) ; 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
6. 累加器
- array.reduce(function(初始值或者计算结束后的返回值, currentValue, currentIndex, arr), 传递给函数的初始值) ; 返回计算结果
- array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) ; 从数组的末尾向前将数组中的数组项做累加,返回计算结果
7. 将伪数组转换为真数组
- 常见的伪数组有哪些 : arguments、通过document.getElements..获取到的内容
- 伪数组有什么特点 : 具有length属性,也是一个一个的元素组成的,但是构造器不是Array,不能使用数组的方法
- Array.prototype.slice.call(arr)
- Array.from(arr)
8. 数组的填充
- arr.fill(value, start, end) ;将一个固定值替换数组的元素, 返回数组
9. 数组的截取
- array.slice(start, end) ; 从已有的数组中返回选定的元素 ,返回一个新的数组,包含从 start 到 end (不包括该元素)的 array 中的元素
10. 数组的连接
- array1.concat(array2,array3,...,arrayX) ;该参数可以是具体的值,也可以是数组对象。可以是任意多个, 用于连接两个或多个数组,
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组
11. 数组与字符串的相互转换
- arr.join(separator) ; 返回一个字符串。该字符串是通过把 arr 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成
- str.split(separator) ; 返回一个数组。
12. 对数组的判断
- Array.isArray(obj);用于判断一个对象是否为数组。 如果对象是数组返回 true,否则返回 false。
13. 清空数组
- arr.length = 0
- arr..splice(0); 若只有一个参数, 此方法将删除此索引位开始数组中的所有元素
14.遍历数组
- for循环
for(let i; i < array.length; i++){}
代表的是索引 - for..of 循环
for(const item of items)
items代表是值 - array.forEach(function(currentValue, index, arr))
- for(var index in arr){} ; index 为arr的索引
- Object.keys(arr) 返回数组形式的index 值
- Object.getOwnPropertyNames(arr) ; 返回为为数组对象的index 值和数组长度的属性值,
例 [0,1,2,"length"]
15. 其他判断方法
- instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
object instanceof class
- Object.prototype.toString.call(arr) 准确判断一个数据的类型
二. 对象
对象的创建
- 字面量 : var obj = {}
- 构造形式 : var obj = new Object()
- 构造形式和字面形式的结果是完全同种类的对象
1. 属性描述符
-
Object.defineProperty(obj, prop, descriptor)
var person = {}; Object.defineProperty(person, 'legs', { value: 2, //属性值 writable: true, //该属性是否可写 configurable: true, //该属性是否可被删除 enumerable: true //该属性在for in中是否可被枚举 });
-
在定义了set()和get()之后,描述符会认为存取操作已被定义了,其中再定义value和writable会引起错误。
var person2 = {}; Object.defineProperty(person2, 'legs', { set:function(v) { //该属性的更新操作所调用的函数 return this.value = v; }, get: function() { //获取属性值时所调用的函数 return this.value; }, configurable: false, enumerable: true });
-
Object.defineProperties(obj, props) 定义多个属性
var class = Object.defineProperties({}, { 'name1': { value: 'transparent', writable: true }, 'name2': { value: 'half', writable: false } });
2. in操作符
- "prop" in obj 判断属性是否属于此对象 ; 属于返回true,否则为false
3. 循环遍历对象
- for(var prop in obj){} ; prop 为obj的属性名; 可遍历对象的可枚举属性,包括自有属性和继承自原型的属性
- Object.keys(obj) ; 遍历对象自有的可枚举属性,不包括继承自原型的属性和不可枚举的属性 ,返回一个数组
- Object.getOwnPropertyNames(obj) ; 用于返回对象的自有属性,包括可枚举和不可枚举的属性,不包括继承自原型的属性。返回一个数组
获取该对象的原型
- Object.getPrototypeOf(obj)
比较两个值是否严格相等
- Object.is(value1, value2) ; 若相等返回true,否则为false;
- 其与严格比较运算符(===)的行为基本一致。 不同之处只有两个:一是+0不等于-0,二是NaN等于自身
Object中的其他属性方法
- Object.assign(target, ...sources)
- Object.values(obj) 返回一个给定对象自己的所有可枚举
属性值
的数组 - Object.entries(obj) 返回一个给定对象自己的可枚举属性[key,value]对的数组;
例 [['a',1],['b',2],['c',3]]
- obj.hasOwnProperty('prop') ; 法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)
Es6构造函数
-
constructor 方法,是构造方法,this 关键字则代表实例对象。 一个类必须要有 constructor 方法,如果没有显示定义,一个空的 constructor 方法会被默认添加
// 传统写法 function Animal(type, name) { this.type = type; this.name = name; } Animal.prototype.toString = function () { return '(' + this.type + ',' + this.name + ')'; }; var m = new Animal('monkey', 'yuan'); // class 写法 class Animal { constructor (type, name) { this.type = type; this.name = name; } toString() { return '(' + this.type + ',' + this.name + ')'; } } var m = new Animal('monkey', 'yuan');
-
如果在一个方法钱加上 static 关键字,就表示该方法不会被实例继承,而是通过类调用,成为静态方法。
class Foo { static calssMethod() { return 'hello'; } } Foo.classMethod(); // hello var foo = new Foo(); foo.classMethod(); // TypeError: foo.calssMethod is not function class Bar extends Foo { } //父类的静态方法可以被子类继承 Bar.classMethod(); // hello, too class Bar extends Foo { static classMethod() { return super.classMethod() + ', too'; //静态方法也可以从 super 对象上调用 } } Bar.classMethod(); // hello, too
-
extends 关键字
class Monkeyi extends Animal { constructor(type, name) { super(type, name); } toString() { return "monkey is" `${this.type}` ",name is "`{ this.name}`; } }
-
super 关键字
当你想在子类中调用父类 的函数时,super 关键字就很有作用了,并且使用 super 关键字的时候,必须显示指定是作为函数还是作为对象使用,否则会报错
-
//super 作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类 class Parent { static myMethod(msg) { console.log('static'); } myMethod(msg) { console.log('instance'); } } class Child extends Parent { static myMethod() { super.myMethod(); } myMethod(msg) { super.myMethod(); } } Child.myMethod(); // static var child = new Child(); child.myMethod(); // instance
-
//通过 super 调用父类的方法时,super 会绑定子类的 this class A { constructor() { this.x = 1; } print() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; } m() { super.print(); } } let b = new B(); b.m() // 2