写在前面
本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转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()
- 作用连接数组中的元素形成字符串
- 使用方法: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()
- 作用:
indexOf(),从头开始找,找到符合的就停止寻找,并返回符合元素的下标,找不到就返回-1
lastIndexOf(),从尾开始找,找到符合的就停止寻找,并返回符合元素的下标,找不到就返回-1 - 使用:
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()
- 作用:遍历数组。相比于for循环遍历数组,value, index, array都是局部变量,可以避免全局变量污染。
- 使用方法: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
写在最后
如果您觉得文章对您有帮助,不要吝惜您的“点赞”呀!