一些JS超级基础的知识梳理（三）

数组方法

1.实现数组增删改的方法

这一部分方法都会修改原有的数组

push

/*
 * push : 向数组末尾增加内容
 * @params
 *   多个任意类型
 * @return
 *   新增后数组的长度 
 */
let ary = [10, 20];
let res = ary.push(30, 'AA');
// 基于原生 JS 操作键值对的方法，也可以向末尾追加一项新的内容
ary[ary.length] = 40;
console.log(res, ary); // 4 [10,20,30,'AA',40]

unshift

/*
 * unshift : 向数组开始位置增加内容
 * @params
 *   多个任意类型
 * @return
 *   新增后数组的长度 
 */
let ary = [10, 20];
let res = ary.unshift(30, 'AA');
console.log(res, ary); // 4  [30, 'AA', 10, 20]
// 基于原生 ES6 展开运算符，把原有的 ARY 克隆一份，在新的数组中创建第一项，其余的内容使用原始 ARY 中的信息即可，也算实现了向开始追加的效果
ary = [100, ...ary];
console.log(ary); // [100,30,'AA',10,20]

shift

/*
 * shift : 删除数组中的第一项
 * @params
 * @return
 *   删除的那一项 
 */
let ary = [10, 20, 30, 40];
let res = ary.shift();
console.log(res, ary); // 10  [20, 30, 40]
// 基于原生 JS 中的 DELETE，把数组当做普通的对象，确实可以删除掉某一项内容，但是不会影响数组本身的结构特点（length 长度不会跟着修改）,真实项目中杜绝这样的删除使用
delete ary[0];
console.log(ary); // {1:30, 2:40, length:3}

pop

/*
 * pop : 删除数组中的最后一项
 * @params
 * @return
 *   删除的那一项 
 */
let ary = [10, 20, 30, 40];
let res = ary.pop();
console.log(res, ary); // 40  [10,20,30]
// 基于原生 JS 让数组数组长度干掉一位，默认干掉的就是最后一项
ary.length--; // ary.length = ary.length - 1;
console.log(ary);

splice

/*
 * splice : 实现数组的增加、删除、修改
 * @params
 *   n, m 都是数字  从索引 n 开始删除 m 个元素（m 不写，是删除到末尾）
 * @return
 *   把删除的部分用新数组存储起来返回 
 */
let ary = [10, 20, 30, 40, 50, 60, 70, 80, 90];
let res = ary.splice(2, 4);
console.log(res, ary); // [30, 40, 50, 60]  [10, 20, 70, 80, 90]
// 基于这种方法可以清空一个数组，把原始数组中的内容以新数组存储起来（有点类似数组的克隆：把原来数组克隆一份一模一样的给新数组）
/* res = ary.splice(0);
console.log(res, ary);// [10, 20, 70, 80, 90] [] */
// 删除最后一项和第一项
ary.splice(ary.length - 1);
ary.splice(0, 1);
console.log(ary);
/*

2.数组的查询和拼接

此组学习的方法，原来数组不会改变

slice

/*
 * slice : 实现数组的查询
 * @params
 *   n, m 都是数字 从索引 n 开始，找到索引为 m 的地方（不包含 m 这一项）
 * @return
 *   把找到的内容以一个新数组的形式返回 
 */
let ary = [10, 20, 30, 40, 50];
let res = ary.slice(1, 3);
console.log(res); // [20,30]
// m 不写是找到末尾
res = ary.slice(1);
console.log(res); // [20, 30, 40, 50]
// 数组的克隆，参数0不写也可以
res = ary.slice(0);
console.log(res); // [10, 20, 30, 40, 50]

concat

/*
 * concat : 实现数组拼接
 * @params
 *   多个任意类型值
 * @return
 *   拼接后的新数组（原来数组不变） 
 */
let ary1 = [10, 20, 30];
let ary2 = [40, 50, 60];
let res = ary1.concatx('xxxx', ary2);
console.log(res);

3.把数组转换为字符串
原有数组不变

toString

/*
 * toString : 把数组转换为字符串
 * @params
 * @return
 *   转换后的字符串，每一项用逗号分隔（原来数组不变） 
 */
let ary = [10, 20, 30];
let res = ary.toString();
console.log(res); // "10,20,30"
console.log([].toString()); // ""
console.log([12].toString()); // "12"

join

/*
 * join : 把数组转换为字符串
 * @params
 *   指定的分隔符（字符串格式）
 * @return
 *   转换后的字符串（原来数组不变） 
 */
let ary = [10, 20, 30];
let res = ary.join('');
console.log(res); // "102030"
res = ary.join();
console.log(res); // "10, 20, 30"
res = ary.join('|');
console.log(res); // "10 | 20 | 30"
res = ary.join('+');
console.log(res); // "10 + 20 + 30"
console.log(eval(res)); // 60  eval把字符串变为 JS 表达式执行

4.检测数组中的是否包含某一项

indexOf / lastIndexOf / includes

/*
 * indexOf / lastIndexOf : 检测当前项在数组中第一次或者最后一次出现位置的索引值（在 IE6~8 中不兼容）
 * @params
 *   要检索的这一项内容
 * @return
 *   这一项出现的位置索引值（数字），如果数组中没有这一项，返回的结果是-1
 * 原来数组不变
 */
let ary = [10, 20, 30, 10, 20, 30];
console.log(ary.indexOf(20)); // 1
console.log(ary.lastIndexOf(20)); // 4
// 想验证 ARY 中是否包含'xxxx'
if (ary.indexOf('xxxx') === -1) {
    // 不包含
}
// 也可以直接使用 ES6 新提供的 includes 方法判断
if (ary.includes('xxxx')) {
    // 包含：如果存在返回的是TRUE
}

5.数组的排序或者排列

reverse

/*
 * reverse : 把数组倒过来排列
 * @params
 * @return
 *   排列后的新数组
 * 原来数组改变
 */
let ary = [12, 15, 9, 28, 10, 22];
ary.reverse();
console.log(ary); // [22, 10, 28, 9, 15, 12]

sort

/*
 * sort : 实现数组的排序
 * @params
 *   可以没有，也可以是个函数
 * @return
 *   排序后的新数组
 * 原来数组改变
 */
let ary = [7, 8, 5, 2, 4, 6, 9];
ary.sort();
console.log(ary); // [2, 4, 5, 6, 7, 8, 9]
// SORT 方法中如果不传递参数，是无法处理10以上数字排序的(它默认按照每一项第一个字符来排，不是我们想要的效果)
/* ary = [12, 15, 9, 28, 10, 22];
ary.sort();
console.log(ary); // [10, 12, 15, 22, 28, 9] */
// 想要实现多位数正常排序，需要给 SORT 传递一个函数，函数中返回 a-b 实现升序，返回 b-a 实现降序
ary = [12, 15, 9, 28, 10, 22];
// ary.sort(function(a,b){ return a-b; });
ary.sort((a, b) => a - b);
console.log(ary);

6.遍历数组中每一项的方法
forEach

/*
 * forEach：遍历数组中的每一项内容
 * @params
 *    回调函数
 * @return
 * 
 * 原来数组不变 
 */
let ary = [12, 15, 9, 28, 10, 22];
/* // 基于原生 JS 中的循环可以实现
for (let i = 0; i < ary.length; i++) {
    // i:当前循环这一项的索引
    // ary[i]:根据索引获取循环的这一项
    console.log('索引：' + i + ' 内容：' + ary[i]);
} */
ary.forEach((item, index) => {
    // 数组中有多少项，函数就会被默认执行多少次
    // 每一次执行函数：item 是数组中当前要操作的这一项，index 是当前项的索引
    console.log('索引：' + index + ' 内容：' + item);
});

map

/*
* 6.2 map(function (item, index) {})
* 作用：将原数组映射成一个新数组
* 参数：回调函数，数组有多少项，回调函数就会执行多少回。
* 返回值：由回调函数的返回值组成的新数组
* 原数组：不变
* */
var ary = [1, 3, 5, 7, 9];
var r = ary.map(function (item, index) {
  return item * 2;
});
console.log(r);

filter

let ary = [1, 2, 5, 6, 10];
// 数组.filter(function (item, index) {return 条件})过滤，把满足条件，即回调函数 return true 的项拿出来组成一个新数组；原数组不变；
let r1 = ary.filter((item, index) => item >= 6);
console.log(r1); // 6 10
find
let ary = [1, 2, 5, 6, 10];
// 数组.find(function (item, index) {return 条件})：查找数组中满足条件的第一项，找到第一个就返回，如果有多个都满足条件也只是获取第一个；如果没找到返回 undefined【注意找到返回数组项，不是新数组】
let r3 = ary.find(function (item, index) {
  return item > 30;
});
console.log(r3);

reduce

let ary = [1, 2, 5, 6, 10];
some
let ary = [1, 2, 5, 6, 10];
// 数组.some(function (item, index) {return 条件})：验证数组中是否有一些向满足条件，满足就会返回true，否则false；
let r2 = ary.some(function (item, index) {
  return item > 3
});
console.log(r2);

every

let ary = [1, 2, 5, 6, 10];
// 数组.every(function (item, index) {return 条件}):用来验证数组的每一项是否满足某个条件（条件就是回调函数返回值），如果每一个都满足条件就会返回 true，否则返回 false
let result = ary.every(function (item, index) {
  return item > 3;
});
console.log(result);

字符串方法：

1、toLowerCase(): 把字符串转为小写，返回新的字符串。

var str="Hello World";
var str1=str.toLowerCase();
console.log(str);  //Hello World
console.log(str1); //hello world

2、toUpperCase(): 把字符串转为大写，返回新的字符串。

var str="hello world";
var str1=str.toUpperCase();
console.log(str); //hello world
console.log(str1); //HELLO WORLD

3、charAt(): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间，返回空字符串。

var str="hello world";
var str1=str.charAt(6);
console.log(str1); //w

#4、charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。

var str="hello world";
var str1=str.charCodeAt(1);
var str2=str.charCodeAt(-2); //NaN
console.log(str1); //101
//注意：如果index不在0-str.length(不包含str.length)之间，返回NaN。

 5、indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置

var str="Hello World";
var str1=str.indexOf("o");
var str2=str.indexOf("world");
var str3=str.indexOf("o",str1+1);
console.log(str1);  //2 默认只找第一个关键字位置，从下标0开始查找
console.log(str2);  //-1
console.log(str3);  //7
注意：indexOf()方法对大小写敏感，如果子字符串没有找到，返回-1。
     第二个参数表示从哪个下标开始查找，没有写则默认从下标0开始查找。

6、lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。

var str="Hello World";
var str1=str.lastIndexOf("o");
var str2=str.lastIndexOf("world");
var str3=str.lastIndexOf("o",str1-1);
console.log(str1);  //7
console.log(str2);  //-1
console.log(str3);  //4

注意：lastIndexOf()方法对大小写敏感，如果子字符串没有找到，
     返回-1。第二个参数表示从哪个下标开始查找，没有写则默认从最后一个字符处开始查找。

 7、slice(): 返回字符串中提取的子字符串。

var str="Hello World";
var str1=str.slice(2); //如果只有一个参数，则提取开始下标到结尾处的所有字符串
var str2=str.slice(2,7); //两个参数，提取下标为2，到下标为7但不包含下标为7的字符串
var str3=str.slice(-7,-2); //如果是负数，-1为字符串的最后一个字符。
           提取从下标-7开始到下标-2但不包含下标-2的字符串。前一个数要小于后一个数，否则返回空字符串

console.log(str1);  //llo World
console.log(str2);  //llo W
console.log(str3);  //o Wor

8、substring(): 提取字符串中介于两个指定下标之间的字符。

var str="Hello World";
var str1=str.substring(2)
var str2=str.substring(2,2);
var str3=str.substring(2,7);
console.log(str1);  //llo World
console.log(str2);  //如果两个参数相等，返回长度为0的空串
console.log(str3);  //llo W

注意：substring()用法与slice()一样，但不接受负值的参数。

9、substr(): 返回从指定下标开始指定长度的的子字符串

var str="Hello World";
var str1=str.substr(1)
var str2=str.substr(1,3);
var str3=str.substr(-3,2);
console.log(str1);  //ello World 
console.log(str2);  //ell
console.log(str3);  //rl

注意：如果没有指定length,返回从下标开始处结尾处的所有字符串。

10、split(): 把字符串分割成字符串数组。

var str="AA BB CC DD";
			var string1="1:2:3:4:5";
			var str1=str.split("");//如果把空字符串 ("")用作分割符，那么字符串的每个字符之间都会被分割
			var str2=str.split(" "); //以空格为分隔符
			var str3=str.split("",4); //4指定返回数组的最大长度
			var str4=string1.split(":");
			console.log(str1);  // ["A", "A", " ", "B", "B", " ", "C", "C", " ", "D", "D"]
			console.log(str2);  //["AA" "BB" "CC" "DD"]
			console.log(str3);  //["A", "A", " ", "B"]
			console.log(str4);  // ["1", "2", "3", "4", "5"]

11、replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str="hello WORLD";
var reg=/o/ig; //o为要替换的关键字，不能加引号，否则替换不生效，i忽略大小写，g表示全局查找。
var str1=str.replace(reg,"**")
console.log(str1);  //hell** W**RLD

12、match(): 返回所有查找的关键字内容的数组。

var str="To be or not to be";
var reg=/to/ig;
var str1=str.match(reg);
console.log(str1);  //["To", "to"]
console.log(str.match("Hello")); //null

Math方法

常用的属性和方法：Math 是一个对象，通过对象.属性名调用
•Math.abs([number value]);
获取绝对值（绝对值永远是正数或者0），如果传的不是数字类型的值，通过 Number（）转换为数字再处理

• Math.ceil / floor([number value]);
把一个数向上取整或 / 向下取整

• Math.round([number value]);
四舍五入 负数 . 5 属于舍

• Math.max / min([val1],[val2], …);
获取一堆数中的最大值 / 最小值

• Math.sqrt / pow( )
sqrt：给一个数开平方
pow：计算一个数的多少次幂
Math.pow(2 , 10); 1024

• Math.random()
获取0-1之间的随机小数

• Math.PI 获取圆周率
var PI = Math.PI; // 3.1415926…
var PIFixed = PI.toFixed(2); // toFixed (保留几位小数)
console.log(PI, PIFixed);

扩展：获取 [n ~ m] 之间的随机整数
包含 n 也包含 m，n < m;
Math.round(Math.random()(m - n) + n);*

日期方法

let time = new Date();

 * 获取当前客户端（本机电脑）本地的时间
 *    这个时间用户是可以自己修改的，所以不能作为重要的参考依据
 * 
 * Fri Jul 26 2019 10:02:17 GMT+0800 (中国标准时间)
 *    获取的结果不是字符串是对象数据类型的，属于日期对象(或者说是 Date 这个类的实例对象)
 
typeof time;  // "object"

标准日期对象中提供了一些属性和方法，供我们操作日期信息
• getFullYear() 获取年
• getMonth() 获取月 结果是0~11代表第一月到第十二月
• getDate() 获取日
• getDay() 获取星期 结果是0~6代表周日到周六
• getHours() 获取时
• getMinutes() 获取分
• getSeconds() 获取秒
• getMilliseconds() 获取毫秒
• getTime() 获取当前日期距离 1970/1/1 00:00:00 这个日期之间的毫秒差
• toLocaleDateString() 获取年月日（字符串）
• toLocaleString() 获取完整的日期字符串