JavaScript入门笔记5

写在前面

本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转JavaScript 视频教程,整理、精炼其配套笔记总结而来的。附上视频教程地址:

https://study.163.com/course/courseMain.htm?courseId=1005973001

以下是我的所有js入门笔记
JavaScript入门笔记1:https://www.jianshu.com/p/ab044eb35c56
JavaScript入门笔记2:https://www.jianshu.com/p/348805d50b77
JavaScript入门笔记3:https://www.jianshu.com/p/2146931d6706
JavaScript入门笔记4:https://www.jianshu.com/p/e95f00b53343
JavaScript入门笔记5:https://www.jianshu.com/p/97a241434881
JavaScript入门笔记6:https://www.jianshu.com/p/fc091ce8924e
JavaScript入门笔记7:https://www.jianshu.com/p/ea33bfb83da1

本章节内容
1、instanceof
2、Array对象
---2.1、join()
---2.2、push(),pop()
---2.3、shift(),unshift()
---2.4、reverse()
---2.5、concat()
---2.6、indexOf(),lastIndexOf()
---2.7、forEach()
---2.8、sort()
---2.9、map()
---2.10、filter()
---2.11、every()
---2.12、some()

1、instanceof

检测是否属于某个对象(包括祖先对象)

var arr = ["张三" , "李四"];
console.log(arr instanceof Array);  //true
console.log(arr instanceof Object);  //true
console.log(arr instanceof Function);  //false

如果只是检查一个对象是否为数组,可以用Array.isArray()

console.log(Array.isArray(arr));  //true

2、Array对象

https://www.w3school.com.cn/jsref/jsref_obj_array.asp

2.1、join()

  1. 作用连接数组中的元素形成字符串
  2. 使用方法:join(以什么符号连接)
var arr = ["张三", "李四", "王五"];
var str = arr.join(",");
console.log(str);  //张三,李四,王五

2.2、push() pop()

作用:push()从数组末尾添加新元素,pop()移除数组末尾元素

var arr = ["张三", "李四", "王五"];
console.log(arr.push("UJ")); // 4  返回新数组长度
console.log(arr); //["张三", "李四", "王五", "UJ"]
console.log(arr.pop()); // UJ  返回弹出的元素
console.log(arr); //["张三", "李四", "王五"]

2.3、shift() unshift()

作用:shift()从数组开头添加新元素,unshift()移除数组开头元素

var arr = ["张三", "李四", "王五"];
console.log(arr.shift()("UJ")); // 4  返回新数组长度
console.log(arr); //["UJ","张三", "李四", "王五"]
console.log(arr.unshift()); // UJ  返回弹出的元素
console.log(arr); //["张三", "李四", "王五"]

2.4、reverse()

作用:反转数组的顺序

var arr = [1, 2, 3];
arr.reverse();
console.log(arr);  // [3, 2, 1]

2.5、concat()

作用:合并数组

var arr = ["张三", "李四", "王五"];
var arr1 = ["钱七", "孙八"];
var arr2 = ["杨九", "吴十"];
newArr = arr.concat(arr1, arr2, "David");
console.log(newArr);  //["张三", "李四", "王五", "钱七", "孙八", "杨九", "吴十", "David"]

2.6、indexOf() lastIndexOf()

  1. 作用:
    indexOf(),从头开始找,找到符合的就停止寻找,并返回符合元素的下标,找不到就返回-1
    lastIndexOf(),从尾开始找,找到符合的就停止寻找,并返回符合元素的下标,找不到就返回-1
  2. 使用:
    indexOf(找谁,从数组开始第几个开始找)
    lastIndexOf(找谁,从数组倒数第几个开始找)
var arr = [2, 4, 6, 8, 8, 6, 4, 2];
console.log(arr.indexOf(4, 2))  // 6
console.log(arr.lastIndexOf(2, 1))  // 0
console.log(arr.indexOf(9))  // -1
console.log(arr.lastIndexOf(9))  // -1

2.7、forEach()

  1. 作用:遍历数组。相比于for循环遍历数组,value, index, array都是局部变量,可以避免全局变量污染。
  2. 使用方法:forEach(回调函数);

回调函数内容见《JavaScript入门笔记3》中的匿名函数部分
https://www.jianshu.com/p/2146931d6706

var arr = ["张三", "李四", "王五"];
arr.forEach(function (value, index, array){
    console.log(value);
    console.log(index);
    console.log(array);
});

2.8、sort()

默认按字符串编码排序(即使是数字也按照字符串方式排列),按每位的字母或数字大小排序,第一位比完比第二位,第二位比完比第三位,以此类推......

var arr1 = ["Tim", "Andy", "John", "Kobe", "James"];
console.log(arr1.sort());  // ["Andy", "James", "John", "Kobe", "Tim"]
var arr2 = [10, 20, 5, 1000, 50];
console.log(arr2.sort());  // [10, 1000, 20, 5, 50]

如果希望数字按值排序,需要指定排序方式
从小到大

var arr = [10, 20, 5, 1000, 50];
function smallToLarge(a, b){
     return a - b;
}
console.log(arr.sort(smallToLarge));  // [5, 10, 20, 50, 1000]

从大到小

var arr = [10, 20, 5, 1000, 50];
function largeToSmall(a, b){
     return b - a;
}
console.log(arr.sort(largeToSmall));  // [1000, 50, 20, 10, 5]

这个案例涉及到同步和异步问题,两个输出结果相同且以最后的arr.sort(largeToSmall)结果为准。可见console.log()方法输出的结果都以最后一次改变后的值

var arr = [10, 20, 5, 1000, 50];
function smallToLarge(a, b){
     return a - b;
}
function largeToSmall(a, b){
     return b - a;
}
console.log(arr.sort(smallToLarge));  // [1000, 50, 20, 10, 5]
console.log(arr.sort(largeToSmall));  // [1000, 50, 20, 10, 5]

2.9、map()

回调函数设定一个规则,数组中的元素按指定规则做运算

//所有数组元素乘二
var arr = [10, 20, 5, 1000, 50];
var newArr = arr.map(function(value, index, array) {
    return value * 2;
});
console.log(newArr);  //[20, 40, 10, 2000, 100]

2.10、filter()

回调函数设定一个规则,数组中的元素按指定规则进行保留

//保留数组中为偶数的元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
var newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0;
});
console.log(newArr);  // [2, 4, 6, 8]

2.11、every()

回调函数设定一个规则,数组中的所有元素都满足该规则返回true,否则返回false

//判断数组里的所有元素是否大于1
var arr = [11, 2, 3, 4, 15];
var result = arr.every(function (value, index) {
    return value > 1;
});
console.log(result);  // true

2.12、some()

回调函数设定一个规则,数组中至少有一个元素满足该规则返回true,否则返回false

//判断数组中是否至少有一个元素大于10
var arr = [11, 2, 3, 4, 15];
var result = arr.some(function (value, index) {
    return value > 10;
});
console.log(result);  // true

写在最后

如果您觉得文章对您有帮助,不要吝惜您的“点赞”呀!

你可能感兴趣的:(JavaScript入门笔记5)