阅读 72
JavaScript 回顾(五)

JavaScript 回顾(五)

这是我参与更文挑战的第28天,活动详情查看: 更文挑战

1, 数组遍历

一般我们都是使用for循环去遍历数组, JS中还为我们提供了forEach, 支持IE8以上的浏览器。

  • forEach()需要一个函数作为参数,像这种函数,由我们创建但是不由我们调用的,我们称为回调函数。

  • 数组中又几个元素,函数就回执行几次, 且每次执行时,浏览器会将遍历的元素以实参的形式传递进来,我们可以来定义形参,读取内容

  • 浏览器会在回调中传递三个参数

    (1) 第一次参数就是当前站在遍历的元素

    (2) 第二个参数就是当前正在遍历的索引

    (3) 第三个正在遍历的数组

var arr = [1,2,3,4,5,6]
arr.forEach(value, index, obj) {
   console.log(value)
}
复制代码

2, 数组去重

(1) 获取数组中的每一个元素,第二个循环获取当前数组后面的所有的元素

  获取数组中的每一个元素
for(var i=0; i<arr.length; i++) {
   // 获取当前元素后的所有元素
    fo(j=i+1; j<arr.length; j++) {
    // 判断两个元素的值是否相等
     if (arr[i] == arr[j]) {
         // 如果相等则证明出现了重复元素,则删除j对应的元素
         arr.splice(j, 1)
         // 当删除了当前j所在的元素之后,后边的元素会自动补充
         // 此时将不会再比较这个元素了,需要再次比较一次j所在位置元素
         j--
     }
    }
}
复制代码

3, 数组连接

(1) concat() 可以连接两个或多个数组,并返回新的数组, 不会对元素组产生影响

var arr= [12,34,5]
var arr2 = [6,7,8,9]
var arr3 = [6,7,8,9]
var result = arr.concat(arr2, arr3, '99', '100')
复制代码

(2) join()数组转字符串

该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回,

join()中也可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,如果不指定连接符,默认是,

var arr= [12,34,5]
var result = arr.join(‘-)
复制代码

4, 数组排序

(1) sort() 可以用来对数组中的元素进行排序,会影响到元素组,默认是按照Unicode编码进行排序

(2) 所以,即使对于纯数字的数组,如果使用sort()排序,也是按照Unicode排序,所以结果很有可能是错误的。

(3) 我们可以自己指定排序规则,在sort()中添加一个回调函数, 并指定排序规则

(4) sort()中的回调函数需要定义两个形参,浏览器会分别使用数组中的元素作为实参去调用回调函数,浏览器会根据回调函数的返回值决定元素的排序,规则如下:

  • 如果返回一个大于0的值, 则元素会交换位置
  • 如果返回一个小于0的值,则元素位置不变
  • 如果返回一个0,则认为两个元素相等,位置也不交换
var arr = [1,3,55, 77, 222, 44, 77, 0] 
arr.sort(function(a, b) {
    if (a>b) {
       return 1
    } else {
        return -1;
    } else {
       return 0
    }
)
​
优化写法
​
arr.sort(function(a, b) {
     // 升
    return a -b;
    // 降序
    // return b - a 
})
复制代码

5, call/apply

call()和apply()两个都是函数对象方法,需要通过函数对象来调用。

(1) 当对函数调用call()和apply()都会调用函数执行

function fun() {
  console.log('我是fun函数')
}
fun.call()
fun.apply()
fun()
// 上面函数都会执行
复制代码

(2) 区别是:在调用call()和apply() 可以传递一个对象作为参数,此时这个对象就回成为函数执行时的this

function fun() {
  console.log(this)
}
var obj = { name:'zlm'}
fun()
// 输出 window
fun.call(obj)
func.apply(obj) 
//输出 Object
复制代码

(3) call()方法可以将实参在对象只有一次传递

fun.call(abj, 2,3)
复制代码

(4) apply()方法需要将实参封装到一个数组中传递

fun.apply(obj, [1,2,3])
复制代码

注意:

  • 以函数形式调用, this永远都是window
  • 以方法形式调用, this是调用方法的对象
  • 以构造函数的形式调用,this是新创建的那个对象
  • 使用call和apply调用, this是指定的那个对象

5, arguments

在调用函数的时候,浏览器每次都会传递两个隐含的参数

1, 第一个是:函数的上下文对象this

2,第二个是:封装的实参对象:arguments

arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度,

arguments.length可以用来获取实参的长度

function fun() {
    console.log(arguments.length)
}
​
复制代码

注意: arguments里面有一个属性: callee

这个属性对应一个函数对象,就是当前正在指向的函数的对象

6, 类数组对象转换数组

(1) Array.from()

(2) Array.prototype.slice.call()

数组的slice()方法可以从已有数组中返回一个新数组,它接受两个参数arr.slice(start,end),第一个参数规定从何

处开始选取,第二个参数表示从何处选取结束(不包括),如果不传参将返回原数组的一个副本,但该方法不会修改原

数组,而是返回截取的新数组,根据这个就可以将类数组转化成数组对象啦!


复制代码

(3) Array.prototype.splice.call(类数组, 0)

splice(start,count,item)方法传入的参数不同,第一个参数代表开始选取的元素位置,第二个说明选取的元素数量
(不传说明从第一个参数位置开始到数组的最后一个元素),第三个参数代表需要添加的元素(将会添加到第一个参数位
置上)
复制代码

(4) 扩展运算符

// 类数组:arguments对象
function fun() {
    var arr = [...arguments]
}
// NodeList对象
[...document.querySelectorAll('div')]
复制代码

(5) 循环遍历类数组对象,push到新创建的数组对象里

var length = arrayLike.length;
var arr = [];
for (var i = 0; i < length; i++) {
    arr.push(arrayLike[i]);
    return arr;
}
复制代码
文章分类
前端
文章标签