128-137JS数组API,删除,排序,字符串,内置对象,Ma
2019-05-09 本文已影响1人
饥人谷_island
let arr = [1, 3, 5, 7, 9];
需求: 要求遍历数组
1.利用传统循环来遍历数组
// for(let i = 0; i < arr.length; i++){
// console.log(arr[i]);
// }
2.利用forin循环来遍历数组
// 注意点: 在企业开发中不推荐使用forin循环来遍历数组
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in
// for(let key in arr){
// // console.log(key);
// console.log(arr[key]);
// }
function Person() {
this.name = "lnj";
this.age = 34;
this.score = 99;
}
// 注意点: 对象中的属性是无序的
// forin循环是专门用于遍历对象的, 但是对象的属性是无序的, 所以forin循环就是专门用于遍历无序的东西的, 所以不推荐使用forin循环来遍历数组
let p = new Person();
console.log(p);
3.利用ES6中推出的for of循环来遍历数组
// for(let value of arr){
// console.log(value);
// }
4.还可以利用Array对象的forEach方法来遍历数组
// forEach方法会自动调用传入的函数
// 每次调用都会将当前遍历到的元素和当前遍历到的索引和当前被遍历的数组传递给这个函数
arr.forEach(function (currentValue, currentIndex, currentArray) {
// console.log(currentValue, currentIndex, currentArray);
console.log(currentValue);
});
Array.prototype.myForEach = function (fn) {
// this === [1, 3, 5, 7, 9]
for(let i = 0; i < this.length; i++){
fn(this[i], i, this);
}
};
arr.myForEach(function (currentValue, currentIndex, currentArray) {
console.log(currentValue, currentIndex, currentArray);
});
// 0 1 2 3 4
let arr = [3, 2, 6, 7, 6];
// 从左往右查找, 找到返回索引, 找不到返回-1
let index1 = arr.indexOf(6);
console.log(index1); // 2
// 从右至左查找, 找到返回索引, 找不到返回-1
let index2 = arr.lastIndexOf(6);
console.log(index2); // 4
// 从左往右查找, 找到返回true, 找不到返回false
let result = arr.includes(6);
console.log(result); // true
1.数组的findIndex方法
// findIndex方法: 定制版的indexOf, 找到返回索引, 找不到返回-1
let index = arr.findIndex(function (currentValue, currentIndex, currentArray) {
// console.log(currentValue, currentIndex, currentArray);
// if(currentValue === 6){
if(currentValue === 10){
return true;
}
});
console.log(index);
2.数组的find方法
// find方法返回索引, find方法返回找到的元素
// find方法如果找到了就返回找到的元素, 如果找不到就返回undefined
let value = arr.find(function (currentValue, currentIndex, currentArray) {
// console.log(currentValue, currentIndex, currentArray);
// if(currentValue === 6){
if(currentValue === 10){
return true;
}
});
console.log(value);
// findIndex实现
Array.prototype.myFindIndex = function (fn) {
for(let i = 0; i < this.length; i++){
let result = fn(this[i], i, this);
if(result){
return i;
}
}
return -1;
}
// findIndex实现
Array.prototype.myFind = function (fn) {
for(let i = 0; i < this.length; i++){
let result = fn(this[i], i, this);
if(result !== undefined){
return result;
}
}
return undefined;
}
// 0 1 2 3 4
let arr = [1, 2, 3, 4, 5];
1.数组的filter方法:
// 将满足条件的元素添加到一个新的数组中
let newArray = arr.filter(function (currentValue, currentIndex, currentArray) {
// console.log(currentValue, currentIndex, currentArray);
if(currentValue % 2 === 0){
return true;
}
});
console.log(newArray); // [2, 4]
2.数组的map方法:
// 将满足条件的元素映射到一个新的数组中
let newArray = arr.map(function (currentValue, currentIndex, currentArray) {
// console.log(currentValue, currentIndex, currentArray);
if(currentValue % 2 === 0){
return currentValue;
}
});
console.log(newArray); // [undefined, 2, undefined, 4, undefined]
filter实现
Array.prototype.myFilter = function (fn) {
let newArray = [];
for(let i = 0; i < this.length; i++){
let result = fn(this[i], i, this);
if(result){
newArray.push(this[i]);
}
}
return newArray;
}
map实现
Array.prototype.myMap = function (fn) {
let newArray = new Array(this.length);
newArray.fill(undefined);
for(let i = 0; i < this.length; i++){
let result = fn(this[i], i, this);
if(result !== undefined){
newArray[i] = result;
}
}
return newArray;
}
let arr = [1, 2, 3, 4, 5];
// 需求: 遍历的同时删除数组中所有元素
// arr.splice(2, 1);
// delete arr[2];
console.log(arr);
// 0 0 < 5
// 1 1 < 4
// 2 2 < 3
// 3 3 < 2
// for(let i = 0; i < arr.length; i++){
let len = arr.length;
// for(let i = 0; i < len; i++){
for(let i = len - 1; i >= 0; i--){
// console.log(arr.length); // 5, 4, 3
// console.log(len);
arr.splice(i, 1);
}
for(let i = 0; i < arr.length; i++){
console.log(arr.length);
// 注意点: 通过delete来删除数组中的元素, 数组的length属性不会发生变化
delete arr[i];
}
console.log(arr);
// let arr = ["c", "a", "b"];
// arr.sort();
/*
如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。
如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前
注意点: 如果元素是字符串类型, 那么比较的是字符串的Unicode编码
*/
/*
arr.sort(function (a, b) {
if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}
});
console.log(arr);
*/
/*
let arr = [3, 4, 2, 5, 1];
// arr.sort();
arr.sort(function (a, b) {
// if(a > b){
// return -1;
// }else if(a < b){
// return 1;
// }else{
// return 0;
// }
// 规律: 如果数组中的元素是数值类型
// 如果需要升序排序, 那么就返回a - b;
// 如果需要降序排序, 那么就返回b - a;
// return a - b;
return b - a;
});
console.log(arr);
*/
/*
let arr = ["1234", "21", "54321", "123", "6"];
arr.sort(function (str1, str2) {
// return str1.length - str2.length;
return str2.length - str1.length;
});
console.log(arr);
*/
let students = [
{name: "zs", age: 34},
{name: "ls", age: 18},
{name: "ww", age: 22},
{name: "mm", age: 28},
];
students.sort(function (o1, o2) {
// return o1.age - o2.age;
return o2.age - o1.age;
});
console.log(students);
在js中字符串可以看做一个特殊的数组, 所以大部分数组的属性/方法字符串都可以使用
1.获取字符串长度 .length
// let str = "abcd";
// console.log(str.length);
2.获取某个字符 [索引] / charAt
// let str = "abcd";
// let ch = str[1];
// let ch = str.charAt(1);
// console.log(ch);
3.字符串查找 indexOf / lastIndexOf / includes
// let str = "vavcd";
// let index = str.indexOf("v");
// let index = str.lastIndexOf("v");
// console.log(index);
// let result = str.includes("p");
// console.log(result);
4.拼接字符串 concat / +
// let str1 = "www";
// let str2 = "it666";
// let str = str1 + str2; // 推荐
// let str = str1.concat(str2);
// console.log(str);
5.截取子串 slice / substring / substr
let str = "abcdef";
// let subStr = str.slice(1, 3);
// let subStr = str.substring(1, 3);
let subStr = str.substr(1, 3);
console.log(subStr);
1.字符串切割
// let arr = [1, 3, 5];
// let str = arr.join("-");
// console.log(str);
// let str = "1-3-5";
// let arr = str.split("-");
// console.log(arr);
2.判断是否以指定字符串开头 ES6
// let str = "http://www.it666.com";
// let result = str.startsWith("www");
// console.log(result);
3.判断是否以指定字符串结尾 ES6
// let str = "lnj.jpg";
// let result = str.endsWith("png");
// console.log(result);
4.字符串模板 ES6
// let str = "";
// let str = '';
// let str = `www.it666.com`;
// console.log(str);
// console.log(typeof str);
// let str = "<ul>\n" +
// " <li>我是第1个li</li>\n" +
// " <li>我是第2个li</li>\n" +
// " <li>我是第3个li</li>\n" +
// "</ul>";
// let str = `<ul>
// <li>我是第1个li</li>
// <li>我是第2个li</li>
// <li>我是第3个li</li>
// </ul>`;
let name = "lnj";
let age = 34;
// let str = "我的名字是" + name + ",我的年龄是" + age;
let str = `我的名字是${name},我的年龄是${age}`;
console.log(str);
1.有哪些基本数据类型?
字符串类型 / 数值类型 / 布尔类型 / 空类型 / 未定义类型
2.通过字面量创建的基本数据类型的数据都是常量
3.常量的特点和注意点
常量是不能被修改的
每次修改或者拼接都是生成一个新的
*/
/*
4.基本类型特点
没有属性和方法
5.对象类型的特点
有属性和方法
6.以前之所以能够访问基本数据类型的属性和方法, 是因为
在运行的时候系统自动将基本数据类型包装成了对象类型
String() / Number() / Boolean()
*/
/*
let str = "abc";
// str[1] = "m";
let newStr = str.replace("b", "m");
console.log(str); // abc
console.log(newStr); // amc
*/
/*
let str1 = "www";
let str2 = "it666";
let str3 = str1 + str2;
console.log(str1);
console.log(str2);
console.log(str3);
*/
/*
let str = "lnj";
str.age = 34;
str.say = function () {
console.log("hello");
}
console.log(str.age); // undefined
str.say(); // str.say is not a function
*/
let str = "www.it666.com";
// let str = new String(str);
console.log(str.length);
str.split(".");
JavaScript中提供三种自带的对象, 分别是"本地对象"/"内置对象"/"宿主对象"
什么是宿主?
宿主就是指JavaScript运行环境, js可以在浏览器中运行, 也可以在服务器上运行(nodejs)
1.本地对象
与宿主无关，无论在浏览器还是服务器中都有的对象
就是ECMAScript标准中定义的类(构造函数)。
在使用过程中需要我们手动new创建
例如：Boolean、Number、String、Array、Function、Object、Date、RegExp等。
2.内置对象
与宿主无关，无论在浏览器还是服务器中都有的对象
ECMAScript已经帮我们创建好的对象。
在使用过程中无需我们手动new创建
例如：Global、Math、JSON
3.宿主对象
对于嵌入到网页中的JS来说，其宿主对象就是浏览器, 所以宿主对象就是浏览器提供的对象
包含: Window和Document等。
所有的DOM和BOM对象都属于宿主对象。
4.自定义对象
我们自己编写的类创建的对象
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入
Math.abs() 绝对值
Math.random() 生成随机数
Math.floor() 向下取整
// 直接砍掉所有的小数位就是向下取整
// let num = 3.9;
// let value = Math.floor(num);
// console.log(value);
Math.ceil() 向上取整
// 只要有小数位就会给整数位+1, 然后砍掉所有小数位
// let num = 3.9;
// let value = Math.ceil(num);
// console.log(value);
Math.round() 四舍五入
// 和小学数学一样, 如果小数位满5就会进1
// let num = 3.5;
// let value = Math.round(num);
// console.log(value);
Math.abs() 绝对值
// 和小学数学一样, 统一变为正数
// let num = -3;
// let value = Math.abs(num);
// console.log(value);
会生成一个0~1的随机数, 但是不包括1
// let value = Math.random();
// console.log(value);
需求: 要求生成一个1~10的随机数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
let value = getRandomIntInclusive(1, 10);
console.log(value);
