js方法总结(供自己查询使用)

628 阅读29分钟

(按照字母排序)

Array.prototype.concat()

用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组

语法:

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

concat方法不会改变this或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本。 原始数组的元素将复制到新数组中

示例:

// 连接三个数组
var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];
var nums = num1.concat(num2, num3);
console.log(nums); 
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 将三个值连接到数组
var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric); 
// results in ['a', 'b', 'c', 1, 2, 3]
var num1 = [[1]];
var num2 = [2, [3]];
var nums = num1.concat(num2);
console.log(nums);
// [[1], 2, [3]]

// 给num1增加元素,nums也会增加
num1[0].push(4);
console.log(nums);
// [[1, 4], 2, [3]]
// 合并数组并保留引用

兼容: ES5

更多...


Array.prototype.entries()

返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对

语法:

arr.entries()

遍历迭代器取得原数组的[key,value]

示例:

// 使用 for ... of 循环
var arr = ["a", "b", "c"];
var iterator = arr.entries();

for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]
var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

兼容: ES2015

更多...


Array.prototype.every()

测试一个数组内的所有元素是否都能通过某个指定函数的测试,它返回一个布尔值

若收到一个空数组,此方法在一切情况下都会返回 true

语法:

遍历

arr.every(callback[, thisArg])
参数:
callback
  用来测试每个元素的函数,它可以接收三个参数:
  element: 用于测试的当前值
  index(可选): 用于测试的当前值的索引
  array(可选): 调用 every 的当前数组
thisArg: 执行 callback 时使用的 this 值

every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到

示例:

// 检测数组中的所有元素是否都大于 10
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

兼容


Array.prototype.filter()

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素(遍历),没有任何数组元素通过测试,则返回空数组

语法:

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数:
callback:
  用来测试数组的每个元素的函数。返回 true表示该元素通过测试,保留该元素,
  false 则不保留,它接受以下三个参数:
    element: 数组中当前正在处理的元素
    index(可选): 正在处理的元素在数组中的索引
    array(可选): 调用了 filter 的数组本身
thisArg(可选): 执行 callback 时,用于 this 的值

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到

示例:

// 筛选数组
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// [12, 130, 44]
// 根据条件筛选数组
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query) {
  return fruits.filter(function(el) {
    return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

兼容:ES5

更多....


Array.prototype.find()

返回数组中满足提供的测试函数的第一个元素的。否则返回 undefined

语法:

(遍历)

arr.find(callback[, thisArg])
callback
  在数组每一项上执行的函数,接收 3 个参数:
    element: 当前遍历到的元素。
    index(可选): 当前遍历到的索引。
    array(可选): 数组本身。
thisArg(可选): 执行回调时用作this 的对象

find方法对数组中的每一项元素执行一次 callback 函数,直至有一个 callback 返回 true。当找到了这样一个元素后,该方法会立即返回这个元素的值,否则返回 undefined

兼容: ES6


Array.prototype.findIndex()

返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1 其他同Array.prototype.findIndex()

兼容: ES6


Array.prototype.forEach()

对数组的每个元素执行一次提供的函数(遍历),不可链式调用

语法:

arr.forEach(callback[, thisArg]);
callback
  数组中每个元素执行的函数,接收 3 个参数:
    currentValue: 当前遍历到的元素
    index(可选): 当前遍历到的索引
    array(可选): 正在操作的数组
thisArg(可选): 执行回调时用作this 的对象
如果 thisArg 参数有值,则每次 callback 函数被调用的时候,this 都会指向 thisArg 参数上的这个对象。
如果省略了 thisArg 参数,或者赋值为 null 或 undefined,则 this 指向全局对象

返回值: undefined 没有办法中止或者跳出 forEach() 循环,除了抛出一个异常。如果你需要这样,使用 forEach() 方法是错误的

兼容: ES5,IE9


Array.from()

从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例

语法:

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike: 想要转换成数组的伪数组对象或可迭代对象

mapFn (可选参数): 如果指定了该参数,新数组中的每个元素会执行该回调函数,让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg)

thisArg (可选参数): 可选参数,执行回调函数 mapFn 时 this 对象

返回值:一个新的数组实例

示例:

// String
Array.from('foo'); 
// ["f", "o", "o"]
// 类数组
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);
// [1, 2, 3]
// 在Array.from中使用箭头函数
Array.from([1, 2, 3], x => x + x);  
// 箭头的意思表示从当前数组中取出一个值,然后自加,并将返回的结果添加到新数组中
// 可以看出,Array.from也可以对数组进行操作
// [2, 4, 6]
// 数组合并去重
function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));                     
// [1, 2, 3]

兼容性:ES2015

更多...


Array.prototype.includes()

用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false

语法:

arr.includes(valueToFind[, fromIndex])
valueToFind: 需要查找的元素值
fromIndex(可选): 默认为 0。从`fromIndex` 索引处开始查找 `valueToFind`
如果为负值,则按升序从 array.length + fromIndex 的索引开始搜 (即使从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)

示例:

[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false,大于数组长度,返回false
[1, 2, 3].includes(3, -1); // true,从索引为1处开始搜寻
[1, 2, NaN].includes(NaN); // true

它不要求this值是数组对象,所以它可以被用于其他类型的对象 (比如类数组对象)

// 注意,依然是用数组调用includes方法
(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

兼容: ES2016


Array.prototype.indexOf()

返回在数组象中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

语法:

数组:

arr.indexOf(searchElement[, fromIndex = 0])
searchElement: 要查找的元素
fromIndex: 开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1
-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找

示例:

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
// 找出指定元素出现的所有位置
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

兼容: ES5


Array.isArray()

用于确定传递的值是否是一个 Array

语法:

Array.isArray(obj)

obj: 需要检测的值

返回值:

如果对象是 Array,则为true; 否则为false

示例:

// 下面的函数调用都返回 true
Array.isArray([])
Array.isArray([1])
Array.isArray(new Array())
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype)
// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

兼容:ES5

严格判断数组

更多

Array.prototype.join()

将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符

语法:

如果一个元素为 undefined 或 null,它会被转换为空字符串

arr.join([separator])
separator:
  指定一个字符串来分隔数组的每个元素,
  如果separator是空字符串(""),则所有元素之间都没有任何字符,
  默认为 ","

示例:

// 连接类数组对象
f(1, 'a', true);
function f(a, b, c) {
  var s = Array.prototype.join.call(arguments);
  console.log(s); // '1,a,true'
}

返回值:

一个所有数组元素连接的字符串。如果 arr.length 为0,则返回空字符串


Array.prototype.keys()

返回一个包含数组中每个索引键的Array Iterator对象(遍历)

示例:

// 索引迭代器会包含那些没有对应元素的索引
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr); // 对象的keys()方法
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

兼容: ES2016


Array.prototype.lastIndexOf()

返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始

示例:

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

兼容: ES5


Array.prototype.map()

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

语法:

遍历

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])
callback: 
  生成新数组元素的函数,使用三个参数:
    currentValue: callback数组中正在处理的当前元素。
    index(可选): callback数组中正在处理的当前元素的索引。
    array(可选): map方法被调用的数组。
thisArg(可选): 执行 callback 函数时使用的this 值

callback 函数只会在有值的索引上被调用

示例:

// 求数组中每个元素的平方根
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
// 在一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组
var map = Array.prototype.map
var a = map.call("Hello World", function(x) { 
  return x.charCodeAt(0); 
})
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

更多使用技巧...

兼容: ES5


Array.prototype.pop()

从数组中删除最后一个元素,并返回该元素的值(当数组为空时返回undefined),此方法更改数组的长度


Array.prototype.push()

将一个或多个元素添加到数组的末尾,并返回该数组的新长度

push 方法有意具有通用性。该方法和 call()apply() 一起使用时,可应用在类似数组的对象上

更多使用技巧...


Array.prototype.reduce()

待更...


Array.prototype.reverse()

将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组


Array.prototype.shift()

从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度

shift 方法并不局限于数组:这个方法能够通过 callapply 方法作用于类似数组的对象上


Array.prototype.slice()

返回一个新的数组对象,这一对象是一个由 beginend 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变

语法:

arr.slice([begin[, end]])
begin(可选): 
  提取起始处的索引,从该索引开始提取原数组元素,默认为 0,
  如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取
  如果省略 begin,则 slice 从索引 0 开始
  如果 begin 大于原数组的长度,则会返回空数组
end(可选):
  提取终止处的索引
  slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素
  如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取
  如果 end 被省略,则slice 会一直提取到原数组末尾
  如果 end 大于数组的长度,slice 也会一直提取到原数组末尾

拷贝规则:
  1. 如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。
  如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变
  2. 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),
  slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组
  3. 如果向两个数组任一中添加了新元素,则另一个不会受到影响

示例:

// slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组,你只需将该方法绑定到这个对象上
function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
// 除了使用 Array.prototype.slice.call(arguments),你也可以简单的使用 [].slice.call(arguments) 来代替
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

更多...


Array.prototype.some()

测试是否至少有一个元素可以通过被提供的函数方法,返回一个Boolean类型的值

语法:

遍历

arr.some(callback(element[, index[, array]])[, thisArg])

callback: 用来测试每个元素的函数,接受三个参数:
  element: 数组中正在处理的元素。
  index(可选): 数组中正在处理的元素的索引值。
  array(可选): 被调用的数组。
thisArg(可选): 执行 callback 时使用的 this 值

callback 只会在那些”有值“的索引上被调用

对于空数组上的任何条件,此方法返回false

示例:

// 检测在数组中是否有元素大于 10
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
// 箭头函数
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

兼容: ES5


Array.prototype.sort()

对数组的元素进行排序,并返回数组,默认排序顺序是根据字符串Unicode码点

语法:

arr.sort([compareFunction])

compareFunction (可选):
  用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
    firstEl: 第一个用于比较的元素
    secondEl: 第二个用于比较的元素

如果没有指明 compareFunction ,那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序

如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前
如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前

示例:

var stringArray = ["Blue", "Humpback", "Beluga"];
var numericStringArray = ["80", "9", "700"];
var numberArray = [40, 1, 5, 200];
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b)
{
  return a - b;
}

console.log('stringArray:' + stringArray.join());
console.log('Sorted:' + stringArray.sort());

console.log('numberArray:' + numberArray.join());
console.log('Sorted without a compare function:'+ numberArray.sort());
console.log('Sorted with compareNumbers:'+ numberArray.sort(compareNumbers));

console.log('numericStringArray:'+ numericStringArray.join());
console.log('Sorted without a compare function:'+ numericStringArray.sort());
console.log('Sorted with compareNumbers:'+ numericStringArray.sort(compareNumbers));

console.log('mixedNumericArray:'+ mixedNumericArray.join());
console.log('Sorted without a compare function:'+ mixedNumericArray.sort());
console.log('Sorted with compareNumbers:'+ mixedNumericArray.sort(compareNumbers));
// 输出
stringArray: Blue,Humpback,Beluga
Sorted: Beluga,Blue,Humpback

numberArray: 40,1,5,200
Sorted without a compare function: 1,200,40,5
Sorted with compareNumbers: 1,5,40,200

numericStringArray: 80,9,700
Sorted without a compare function: 700,80,9
Sorted with compareNumbers: 9,80,700

mixedNumericArray: 80,9,700,40,1,5,200
Sorted without a compare function: 1,200,40,5,700,80,9
Sorted with compareNumbers: 1,5,9,40,80,200,700

更多...


Array.prototype.splice()

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

语法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start: 指定修改的开始位置,如果超出了数组的长度,则从数组末尾开始添加内容,
       如果是负值,则表示从数组末位开始的第几位,如果负数的绝对值大于数组的长度,则表示开始位置为第0位
deleteCount(可选): 整数,表示要移除的数组元素的个数,
                   如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)
                   如果 deleteCount 被省略了,那么start之后数组的所有元素都会被删除
                   如果 deleteCount 是 0 或者负数,则不移除元素,这种情况下,至少应添加一个新元素
item1, item2, ...(可选): 要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素

返回值:

由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组

示例:

// 从第 2 位开始删除 0 个元素,插入“drum”
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除
// 从第 3 位开始删除 1 个元素
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素: ["mandarin"]

Array.prototype.toString()

返回一个字符串,表示指定的数组及其元素

var array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

Array.prototype.unshift()

将一个或多个元素添加到数组的开头,并返回该数组的新长度,该方法修改原有数组

语法:

arr.unshift(element1, ..., elementN)

elementN: 要添加到数组开头的元素或多个元素

unshift 特意被设计成具有通用性;这个方法能够通过 call 或 apply 方法作用于类数组对象上

返回值:

返回其 length 属性值

示例:

let arr = [1, 2];

arr.unshift(0); 
// arr is [0, 1, 2]

arr.unshift(-2, -1); 
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-4, -3]); 
// arr is [[-4, -3], -2, -1, 0, 1, 2]

arr.unshift([-7, -6], [-5]); 
// arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]

Array.prototype.values()

返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值

示例:

遍历

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value); // expected output: "a" "b" "c"
}
// 另一种迭代方式
let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
console.log(eArr.next().value); // w
console.log(eArr.next().value); // y
console.log(eArr.next().value); // k
console.log(eArr.next().value); // o
console.log(eArr.next().value); // p

兼容: ES2016, 不支持IE


for 语句

for ([initialization]; [condition]; [final-expression])
   statement

for...in

任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性,

不能保证for ... in将以任何特定的顺序返回索引。

因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环(或者使用 Array.prototype.forEach() 或 for...of 循环)

如果你只要考虑对象本身的属性,而不是它的原型,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

示例:

// hasOwnProperty()用法
var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

// Output:
// "obj.color = red"

for...of

语法:

一个数据结构只要部署了Symbol.iterator属性,就被视为具有 iterator 接口,就可以用for...of循环遍历它的成员

对于for...of的循环,可以由break, throw continue 或return

示例:

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"
// 迭代argument 对象
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

for...of与for...in 区别:

// for...of只遍历自身属性
Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

兼容: ES2015


JSON.parse()

解析JSON字符串,构造由字符串描述的JavaScript值或对象,不允许用逗号作为结尾

语法:

JSON.parse(text[, reviver])
text: 要被解析成JavaScript值的字符串
reviver(可选): 转换器, 如果传入该参数(函数),可以用来修改解析生成的原始值,调用时机在parse函数返回之前

返回值:

Object类型, 对应给定JSON文本的对象/值

示例:

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
JSON.parse('1');               //  1

更多关于reviver...


JSON.stringify()

将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,并返回此JSON字符串

语法:

JSON.stringify(value[, replacer [, space]])
value: 将要序列化成 一个JSON 字符串的值
replacer(可选): ?
space(可选): 指定缩进用的空白字符串

undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略,NaN和Infinity格式的数值及null都会被当做null,不可枚举的属性默认会被忽略

示例:

JSON.stringify([1, "false", false]);       // '[1,"false",false]'

JSON.stringify({ x: 5 });                  // '{"x":5}'

JSON.stringify({x: undefined, y: Object, z: Symbol("")});  // '{}'

JSON.stringify([undefined, Object, Symbol("")]);  // '[null,null,null]' 

Object.assign()

用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

语法:

Object.assign(target, ...sources)
target: 目标对象(目标对象自身也会改变)
sources: 源对象

如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性

方法只会拷贝源对象自身的并且可枚举的属性到目标对象

示例:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// target对象会被修改
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
// 深拷贝
// 假如源对象的属性值是一个对象的引用,那么它也只指向那个引用
let obj1 = { a: 0 , b: { c: 0}}; 
let obj2 = Object.assign({}, obj1); 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj1.a = 1; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} 

obj2.a = 2; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
 
obj2.b.c = 3; 
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} 
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} 

// Deep Clone 
obj1 = { a: 0 , b: { c: 0}}; 
let obj3 = JSON.parse(JSON.stringify(obj1)); 
obj1.a = 4; 
obj1.b.c = 4; 
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
// 原始类型会被包装为对象
const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")

const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// 原始类型会被包装,null 和 undefined 会被忽略。
// 注意,只有字符串的包装对象才可能有自身可枚举属性。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

待更...

更多...


Object.create()

创建一个新对象,使用现有的对象来提供新创建的对象的__proto__

待更...


Object.defineProperty()

直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象

语法:

Object.defineProperty(obj, prop, descriptor)
obj: 要在其上定义属性的对象。
prop: 要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符

通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for...inObject.keys 方法), 这些属性的值可以被改变,也可以被删除

默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的

属性描述符:

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者

数据描述符和存取描述符均具有以下可选键值:

  1. configurable: 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false
  2. enumerable: 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false

数据描述符同时具有以下可选键值:

  1. value: 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined
  2. writable: 当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false

存取描述符同时具有以下可选键值:

  1. get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined,默认为 undefined
  2. set: 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined,默认为 undefined

待更...

更多...


Object.defineProperties()

直接在一个对象上定义新的属性或修改现有属性,并返回该对象

语法:

Object.defineProperties(obj, props)
obj: 在其上定义或修改属性的对象
props: 要定义其可枚举属性或修改的属性描述符的对象

待更...


Object.entries()

返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同

示例:

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// 顺序?
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

待更...

兼容


Object.freeze()

可以冻结一个对象,返回值:被冻结的对象

一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改

待更...

更多...

Object.getOwnPropertyDescriptor()

待更...

Object.getOwnPropertyNames()

返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。数组中枚举属性的顺序与通过 for...in 循环(或 Object.keys)迭代该对象属性时一致

示例:

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); 
// ["0", "1", "2", "length"]
// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); 
// ["0", "1", "2"]
// 使用Array.forEach输出属性名和属性值
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + " -> " + obj[val]);
});
// 输出
// 0 -> a
// 1 -> b
// 2 -> c

如果你只要获取到可枚举属性,查看Object.keys或用for...in循环(还会获取到原型链上的可枚举属性,不过可以使用hasOwnProperty()方法过滤掉

兼容: ES5

更多...


Object.getPrototypeOf()

返回指定对象的原型(内部[[Prototype]]属性的值)

更多...


Object.is()

待更...


Object.isExtensible()

待更...


Object.isFrozen()

判断一个对象是否被冻结

待更...


Object.keys()

返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组

示例:

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

兼容: ES5, IE9


Object.preventExtensions()

待更...


Object.prototype.hasOwnProperty()

返回一个布尔值,指示对象自身属性中是否具有指定的属性,该方法会忽略掉那些从原型链上继承到的属性

示例:

// 检测了对象 o 是否含有自身属性 prop
o = new Object();
o.prop = 'exists';

function changeO() {
  o.newprop = o.prop;
  delete o.prop;
}

o.hasOwnProperty('prop');   // 返回 true
changeO();
o.hasOwnProperty('prop');   // 返回 false

更多...


Object.prototype.isPrototypeOf()

用于测试一个对象是否存在于另一个对象的原型链上

更多...


Object.prototype.valueOf()

更多...


Object.values()

返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )

示例:

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']  

兼容... NO SUPPORT IE


String.prototype.charAt()

从一个字符串中返回指定的字符

语法:

str.charAt(index)
index: 一个介于0 和字符串长度减1之间的整数,如果没有提供索引,charAt() 将使用0,如果指定的 index 值超出了该范围,则返回一个空字符串

示例:

var anyString = "Brave new world";

console.log("The character at index 0   is '" + anyString.charAt(0)   + "'");
console.log("The character at index 1   is '" + anyString.charAt(1)   + "'");
console.log("The character at index 2   is '" + anyString.charAt(2)   + "'");
console.log("The character at index 3   is '" + anyString.charAt(3)   + "'");
console.log("The character at index 4   is '" + anyString.charAt(4)   + "'");
console.log("The character at index 999 is '" + anyString.charAt(999) + "'");
// console
The character at index 0 is 'B'
The character at index 1 is 'r'
The character at index 2 is 'a'
The character at index 3 is 'v'
The character at index 4 is 'e'
The character at index 999 is ''

String.prototype.charCodeAt()

返回指定位置的字符的 Unicode 编码

语法:

str.charCodeAt(index)
index: 一个大于等于 0,小于字符串长度的整数。如果不是一个数值,则默认为 0

如果索引超出范围,则返回 NaN


String.prototype.concat()

将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回

示例:

var hello = "Hello, ";
console.log(hello.concat("Kevin", " have a nice day.")); 
/* Hello, Kevin have a nice day. */

强烈建议使用赋值操作符+代替concat


String.prototype.endsWith()

用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false

语法:

这个方法是大小写敏感的

str.endsWith(searchString[, length])
searchString: 要搜索的子字符串
length: 可选。作为 str 的长度。默认值为 str.length

示例:

const str1 = 'Cats are the best!';
console.log(str1.endsWith('best', 17));
// expected output: true

const str2 = 'Is this a question';
console.log(str2.endsWith('?'));
// expected output: false

兼容:ES2015


String.prototype.includes()

用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false

语法:

区分大小写

str.includes(searchString[, position])
searchString: 要在此字符串中搜索的字符串
position: 可选。从当前字符串的哪个索引位置开始搜寻子字符串,默认值为0

示例:

var str = 'To be, or not to be, that is the question.';

console.log(str.includes('To be'));       // true
console.log(str.includes('question'));    // true
console.log(str.includes('nonexistent')); // false
console.log(str.includes('To be', 1));    // false
console.log(str.includes('TO BE'));       // false

兼容: ES2015


String.prototype.indexOf()

返回调用 String 对象中第一次出现的指定值的索引,开始在 fromIndex进行搜索,如果未找到该值,则返回-1

语法:

str.indexOf(searchValue[, fromIndex])
searchValue: 一个字符串表示被查找的值
fromIndex: 
    表示调用该方法的字符串中开始查找的位置。可以是任意整数。默认值为 0
    如果 fromIndex < 0 则查找整个字符串(如同传进了 0)
    如果 fromIndex >= str.length,则该方法返回 -1
    当被查找的字符串是一个空字符串,fromIndex <= 0时返回0,0 < fromIndex <= str.length时返回fromIndex,fromIndex > str.length时返回str.length

示例:

"Blue Whale".indexOf("Blue");     // returns  0
"Blue Whale".indexOf("Blute");    // returns -1
"Blue Whale".indexOf("Whale", 0); // returns  5
"Blue Whale".indexOf("Whale", 5); // returns  5
"Blue Whale".indexOf("", 9);      // returns  9
"Blue Whale".indexOf("", 10);     // returns 10
"Blue Whale".indexOf("", 11);     // returns 10

String.prototype.lastIndexOf()

同上


String.prototype.match()

待更


String.prototype.repeat()

示例:

"abc".repeat(-1)     // RangeError:  重复次数不能为负数
"abc".repeat(0)      // ""
"abc".repeat(1)      // "abc"
"abc".repeat(2)      // "abcabc"
"abc".repeat(3.5)    // "abcabcabc" 参数count将会被自动转换成整数.
"abc".repeat(1/0)    // 重复次数必须小于 infinity,且长度不会大于最长的字符串

兼容: ES2015

更多...


String.prototype.replace()

待更


String.prototype.search()

待更


String.prototype.slice()

提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串

语法:

str.slice(beginIndex[, endIndex])
beginIndex: 
  从该索引(以 0 为基数)处开始提取原字符串中的字符
endIndex(可选):
  在该索引(以 0 为基数)处结束提取字符串
  如果省略该参数,slice() 会一直提取到字符串末

返回值

返回一个从原字符串中提取出来的新字符串

示例:

var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // 输出:he morn
console.log(str3); // 输出:morning is upon u
console.log(str4); // 输出:is upon us.
console.log(str5); // 输出:""
// 负值
var str = 'The morning is upon us.';
str.slice(-3);     // 返回 'us.'
str.slice(-3, -1); // 返回 'us'
str.slice(0, -1);  // 返回 'The morning is upon us'

String.prototype.split()

使用指定的分隔符字符串将一个String对象分割成字符串数组

语法:

str.split([separator[, limit]])
separator: 
  指定表示每个拆分应发生的点的字符串。separator 可以是一个字符串或正则表达式
limit:
  一个整数,限定返回的分割片段数量

当字符串为空时,split()返回一个包含一个空字符串的数组,而不是一个空数组,如果字符串和分隔符都是空字符串,则返回一个空数组

示例:

var str = 'The quick brown fox jumps over the lazy dog.';

var words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

var chars = str.split('');
console.log(chars[8]);
// expected output: "k"

var strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

更多...


String.prototype.startsWith()

判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或 false

语法:

str.startsWith(searchString[, position])
searchString: 要搜索的子字符串
position(可选): 在 str 中搜索 searchString 的开始位置,默认值为 0

示例:

var str = "To be, or not to be, that is the question.";

alert(str.startsWith("To be"));         // true
alert(str.startsWith("not to be"));     // false
alert(str.startsWith("not to be", 10)); // true

兼容: ES2015


String.prototype.substring()

返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集

语法:

str.substring(indexStart[, indexEnd])
indexStart:  需要截取的第一个字符的索引
indexEnd(ends): 一个 0 到字符串长度之间的整数,以该数字为索引的字符不包含在截取的字符串内

如果 indexStart 等于 indexEnd,substring 返回一个空字符串

如果任一参数小于 0 或为 NaN,则被当作 0

如果任一参数大于 stringName.length,则被当作 stringName.length

如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样

示例:

var anyString = "Mozilla";

// 输出 "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));

// 输出 "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));

// 输出 ""
console.log(anyString.substring(4,4));

// 输出 "Mozill"
console.log(anyString.substring(0,6));

// 输出 "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));

更多...


String.prototype.toLowerCase()

将调用该方法的字符串值转为小写形式,并返回

示例:

// 非字母不受影响
console.log('中文简体 zh-CN || zh-Hans'.toLowerCase());
// 中文简体 zh-cn || zh-hans

console.log( "ALPHABET".toLowerCase() ); 
// "alphabet"

String.prototype.toUpperCase()

将调用该方法的字符串值转换为大写形式,并返回

console.log( "alphabet".toUpperCase() ); // "ALPHABET"

String.prototype.trim()

会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR),不影响原字符串本身,它返回的是一个新的字符串

var orig = '   foo  ';
console.log(orig.trim()); // 'foo'

String.prototype.trimRight()/String.prototype.End()

从一个字符串的右端移除空白字符

兼容: IE no support'


String.prototype.trimLeft()/String.prototype.trimStart()

从字符串的开头删除空格

兼容: IE no support'


String.prototype.valueOf()

返回一个String对象的原始值?