JavaScript 常用操作

一、Array数组

JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。

1、创建

空数组： var Obj = new Array();

指定长度数组： var Obj = new Array(Size);

指定元素数组： var Obj = new Array(元素1,元素2,...,元素N);

单维数组： var Obj = [元素1,元素2,...,元素N];

多维数组： var Obj = [[元素1,元素2,...,元素N],[元素1,元素2,...,元素N],…]

2、基本操作

存取

• 特性1 - 索引从0开始，索引最大：4个字节长度-1 ==> 2的32次方-1 ==> 4294967295；
• 特性2 - 数组长度可在最大范围内伸缩
• 特性3 - 下标为非数值时，下标可作为对象属性

单维数组获取
var Obj = [元素1,元素2,...,元素N];
数组名[索引]; //Obj[0] --> 元素1;

多维数组获取

​ var Obj = [[元素1,元素2,...,元素N],[元素a,元素b,...,元素T],…]

​ 数组名[外层索引][内层索引]; //Obj[0][1] --> 元素2

增加

使用’[]'运算符指定一个新下标

删除

delete Obj[0];

delete 数组名[索引]

遍历

for(var 元素变量 in 数组)

for(var 元素变量 of 数组)

3、数组属性

• constructor 引用数组对象的构造函数

• length 返回数组的长度

  var arr = [1, 2, 3.14, 'Hello', null, true];
  arr.length; // 6
  

  直接给Array的length赋一个新的值会导致Array大小的变化：

  var arr = [1, 2, 3];
  arr.length; // 3
  arr.length = 6;
  arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
  arr.length = 2;
  arr; // arr变为[1, 2]
  

• prototype 通过增加属性和方法扩展数组定义

4、常用方法

添加

push()

在数组末尾添加新元素，并返回添加后数组长度

var arr = [1];
arr.push('A'); // 返回Array新的长度: 2
arr; // [1,'A']

unshift()

在数组头部添加

var arr = [1];
arr.unshift('A'); // 返回Array新的长度: 2
arr; // ['A',1,]

concat()

将接收到的Array自动拆开后，与当前Array合并，返回一个新Array

var arr = ['A', 'B', 'C'];
var narr = arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

删除

pop()

删除最后一个元素并将其返回

var arr = [1, 2];
arr.pop(); // pop() 返回2
arr; // [1]
arr.pop();
arr; // []

shift()

删除第一个元素并将其返回

var arr = [1, 2];
arr.shift(); // shift() 返回1
arr; // [2]
arr.shift();
arr; // []

修改

splice(起始下标，项数)

从起始下标开始，删除指定项数

splice(起始下标，项数，新元素)

从起始下标开始，删除指定项数(项数为0则不删除)，并插入新元素；

slice(起始下标,结束下标)

已有数组中选取部分元素构成新Array

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // ['A', 'B', 'C']
arr.slice(3); // ['D', 'E', 'F', 'G']
arr.slice(); // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

• 特性1：下标为负数，则用数组长度加上该值以确认位置
• 特性2：选取时含起始下标的元素，不含结束下标的元素
• 特性3：起始下标和结束下标可为空，这时会复制整个数组。

排序

reverse()

翻转数组中的元素

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

sort()

对数组进行排序

• 特性1 默认是按字符串比较
• 特性2 如需按数值大小排序，需要自定义函数

var arr = ['2', '1', '3'];
arr.sort();
arr; // ['1', '2', '3]
----------------------------
var arr = [2, 1, 11];
arr.sort();
arr; //[1, 11, 2]
----------------------------
var arr = [2, 1, 11];
arr.sort(function(x,y) {
  return x-y;
});
arr; //[1, 2, 11]

转化

toString()

数组元素转换为字符串并返回

toLocaleString()

转换为本地格式字符串并返回

join()

用指定分隔符分割数组并转换为字符串返回

var arr = ['1', '2', 'A', 'B'];
arr.join('-'); // '1-2-A-B'

5、ECMAScript5

位置

indexOf(元素,查询起点索引)

从数组的起始位置开始查找，返回指定元素的位置，如果找不到则返回-1，可指定起始索引。

var arr = [1, 2, '3', '4'];
arr.indexOf(1); // 元素1的索引为0
arr.indexOf(3); // 元素3没有找到，返回-1； 
arr.indexOf('3'); // 元素'3'的索引为2

lastIndexOf(元素,查询起点索引)

从数组的结束位置开始查询，返回指定元素的位置，如果找不到则返回-1，可指定起点索引

迭代

every()

如果函数的每一项都返回true，则返回ture

var arr = ['AAA', 'BBB', '111'];
arr.every(x =>x.length > 0); //输出 true

some()

有任意一项返回true，则返回true

var arr = [1, 3, 5, 7, 9];
var newArr = arr.some((num) => num % 2 === 0);
console.log(newArr);// 输出 false
--------------------------------------
var arr = [1, 3, 5, 7, 10];
var newArr = arr.some((num) => num % 2 === 0);
console.log(newArr); // 输出 true

filter()

返回值为true的所有元素

var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter((num) => num % 2 === 0);
console.log(newArr); // 输出 [2, 4]

forEach()

遍历，无返回值

var arr = ['A', 'X', 'C'];
arr.forEach(x => console.log(x));//输出 A X C

map()

返回每次函数调用的结果新Array

var array = [1, 2, 3, 4, 5];
var newArray = array.map(x => x * x)
console.log(newArray)  // [1, 4, 9, 16, 25]

二、String 字符串

JavaScript的String字符串提供了很多操作方法，下面就逐一介绍一下。

1. charAt()

该方法返回指定索引位置处的字符。索引从 0 开始，超出范围返回空字符串

var str = "abcde";
console.log(str.charAt(1)); // b
console.log(str.charAt(5)); // e

2. concat()

该方法用于连接两个或多个字符串。

var str1 = "Hello";
var str2 = "World";
console.log(str1.concat(" ", str2)); // Hello World

3. indexOf()

该方法返回字符串中指定子串首次出现的位置。如果没有找到该子串，则返回 -1。

var str = "Hello World";
console.log(str.indexOf("World")); // 6
console.log(str.indexOf("JavaScript")); // -1

4. lastIndexOf()

该方法返回字符串中指定子串最后一次出现的位置。如果没有找到该子串，则返回 -1。

var str = "Hello World";
console.log(str.lastIndexOf("o")); // 7
console.log(str.lastIndexOf("JavaScript")); // -1

5. slice()

该方法返回字符串的指定部分。可以指定起始和结束位置。

var str = "Hello World";
console.log(str.slice(0, 5)); // Hello
console.log(str.slice(6)); // World
console.log(str.slice(-5)); // World

6. substring()

该方法返回字符串的指定部分。可以指定起始和结束位置。与slice()方法不同的是，substring()方法不接受负数作为参数。

var str = "Hello World";
console.log(str.substring(0, 5)); // Hello
console.log(str.substring(6)); // World

7. substr()

该方法返回从指定位置开始的指定长度的子串。

var str = "Hello World";
console.log(str.substr(6, 5)); // World

8. split()

该方法将一个字符串分割成多个子串，并将结果存放在一个数组中。

var str = "Hello World";
console.log(str.split(" ")); // ["Hello", "World"]

9. replace()

该方法用于将字符串中的一些字符替换成其他字符。

var str = "Hello World";
console.log(str.replace("World", "JavaScript")); // Hello JavaScript

10. toLowerCase()

该方法将字符串中的所有字符都转换成小写字母。

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

11. toUpperCase()

该方法将字符串中的所有字符都转换成大写字母。

var str = "Hello World";
console.log(str.toUpperCase()); // HELLO WORLD

12. trim()

该方法用于去除字符串两端的空格。

var str = " Hello World ";
console.log(str.trim()); // HELLO WORLD

13. trimLift()

该方法用于去除字符串左边的空格。

var str = " Hello World ";
console.log(str.trimLift()); // 'Hello World '

14. trimRight()

该方法用于去除字符串右边的空格。

var str = " Hello World ";
console.log(str.trimRight()); // ' Hello World'

三、Window对象

JavaScript的Window对象表示当前浏览器窗口或标签页，并提供了许多与窗口相关的方法和属性。

常用的Window对象方法包括：

1. alert()

显示一个带有一条消息和一个“确定”按钮的警告框，用于向用户显示一些信息。

示例代码：

window.alert("Hello World!");

2. confirm()

显示一个带有一条消息、一个“确定”按钮和一个“取消”按钮的确认框，用于向用户询问是否执行某个操作。

示例代码：

if (window.confirm("Are you sure?")) {
  // 执行某个操作
} else {
  // 取消操作
}

3. prompt()

显示一个带有一条消息、一个文本框和一个“确定”按钮的提示框，用于向用户收集一些信息。

示例代码：

var name = window.prompt("What's your name?");
alert("Hello, " + name + "!");

4. open()

打开一个新的浏览器窗口或标签页，并返回一个对该窗口的引用。

示例代码：

var newWindow = window.open("http://www.example.com/", "_blank");

5. close()

关闭当前浏览器窗口或标签页。

示例代码：

window.close();

6. setTimeout()

在指定的时间后执行一次指定的函数。

示例代码：

function showMessage() {
  alert("Hello World!");
}
window.setTimeout(showMessage, 5000); // 5秒钟后弹出提示框

7. setInterval()

每隔指定的时间执行一次指定的函数。

示例代码：

function showMessage() {
  console.log("Hello World!");
}
window.setInterval(showMessage, 1000); // 每隔1秒钟在控制台输出一次

8. scrollTo()

滚动窗口到指定的位置。

示例代码：

window.scrollTo(0, 500); // 滚动到纵向坐标为500的位置

9. resizeTo()

改变窗口的大小。

示例代码：

window.resizeTo(800, 600); // 改变窗口的大小为800x600