前端学习笔记js篇（3）

1.数组方法

1.join

join将数组以传入的参数进行分割，但不改变原数组

var arr = [1, 2, 3, 4, 5]
console.log(arr.join('-'))
console.log(arr)

2.push和pop

push将参数添加到数组的末尾，其返回值为push后的数组长度；而pop会删除数组的最后一项，其返回值为删除的元素

var arr = [1, 2, 3, 4, 5]
console.log(arr.push(7))
console.log(arr)
console.log(arr.pop())

3.shift和unshift

unshift将参数添加到数组的开头，其返回值为unshift后的数组长度；而shift会删除数组的第一项，其返回值为删除的元素

var arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(7))
console.log(arr)
console.log(arr.shift())

4.sort

sort会将数组元素转化为字符串进行升序排序，因此会造成数字排序并非是真的升序，可以用以下方法解决

var arr = [4, 5, 6, 3, 1,]
arr.sort(function (a, b) {
	return a-b
})
console.log(arr)

若要降序，则return b-a即可

5.reverse

reverse用于将数组反序，并且会改变原数组

var arr = [4, 5, 6, 3, 1,]
console.log(arr.reverse())
console.log(arr)

6.concat

concat用于连接两个数组，并返回新数组，不会改变原数组；当连接的数组为二维数组时，仅会将其作为元素进行连接

var arr = [1, 2, 3]
// var arr2 = [4, 5]
var arr2 = [4, [5, 6]]
console.log(arr.concat(arr2))
console.log(arr)

7.slice

slice用于获取指定位置开始的指定个数的元素

var arr = [1, 2, 3, 4, 5]
console.log(arr.slice(0,3))

slice可用于数组深拷贝

var arr = [1, 2, 3, 4, 5]
var arr2 = arr.slice(0)
arr2[4] = 6
console.log(arr)
console.log(arr2)

8.splice

splice用于从指定位置开始删除，插入，替换元素，并改变原数组

var arr = [1, 2, 3, 4, 5]
//删除
console.log(arr.splice(0, 2))
console.log(arr)
//插入
console.log(arr.splice(0,0,1,2))
console.log(arr)
//替换
console.log(arr.splice(0,2,10,20))
console.log(arr)

9.indexOf和lastIndexof

indexOf用于从头开始查找获取指定元素的索引，不存在则返回-1；lastIndexof则是从末尾开始查找

var arr = [1, 2, 3, 4, 5]
console.log(arr.indexOf(1))
console.log(arr.lastIndexOf(1))
console.log(arr.indexOf(6))

10.forEach

forEach用于循环遍历数组

var arr = [1, 2, 3, 4, 5]
arr.forEach(function (index, item) {
	console.log("index:"+index+",item:"+item)
})

11.map

map用于映射每个元素，返回映射后的数组，并且不改变原数组

var arr = [1, 2, 3, 4, 5]
var arr2 = arr.map(function (item) {
	return item * item
})
console.log(arr)
console.log(arr2)

12.filter

filter用于过滤元素，返回过滤后的数组，并且不改变原数组

var arr = [1, 2, 3, 4, 5]
var arr2 = arr.filter(function (item) {
	return item > 3
})
console.log(arr)
console.log(arr2)

13.every

every用于检查是否所有元素满足条件，存在一个元素不满足即返回false

var arr = [1, 2, 3, 4, 5]
var isLarge = arr.every(function(item) {
	return item > 1
})
console.log(isLarge)

14.some

some用于检查是否存在元素满足条件，存在一个元素满足即返回ture

var arr = [1, 2, 3, 4, 5]
var isLarge = arr.some(function (item) {
	return item > 4
})
console.log(isLarge)

2.对象继承

常见的继承方式参考点击打开链接

这里讲一下ES6新增的继承方式：extends

ES6新增的对象定义方式：class

class Animal {
	constructor() {
		this.name = name || 'animal'
	}
	sleep () {
		console.log(this.name + ' is sleeping')
	}
}
var animal = new Animal();
animal.sleep()

class Cat extends Animal {
	constructor(type) {
		super()
		this.type = type
		this.name = name || 'cat' 
	}
	shout () {
		console.log(this.name + ' is shouting')
	}
}
var cat = new Cat()
cat.name = 'Tom'
cat.shout()

前端学习笔记js篇（3）

猜你喜欢