js 函数

js 函数

forEach() 方法

var arr = [1, 2, 3];
arr.forEach(function (item) {
  console.log("item:", item);
});
// item: 1
// item: 2
// item: 3

map() 方法

var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item * 2;
});
console.log("newArr:", newArr); // newArr: [2,4,6]

filter() 方法

var arr = [1, 2, 3];
var newArr = arr.filter(function (item) {
  return item > 1;
});
console.log("newArr:", newArr); // newArr: [2,3]

reduce() 方法

var arr = [1, 2, 3];
var sum = arr.reduce(function (prev, cur) {
  return prev + cur;
}, 0);
console.log("sum:", sum); // sum: 6

every() 方法

var arr = [1, 2, 3];
var isAllBiggerThanOne = arr.every(function (item) {
  return item > 1;
});
console.log("isAllBiggerThanOne:", isAllBiggerThanOne); // isAllBiggerThanOne: false

some() 方法

var arr = [1, 2, 3];
var isAnyBiggerThanOne = arr.some(function (item) {
  return item > 1;
});
console.log("isAnyBiggerThanOne:", isAnyBiggerThanOne); // isAnyBiggerThanOne: true

find() 方法

var arr = [
  { id: "a", name: "aa" },
  { id: "b", name: "bb" },
];
var targetItem = arr.find(function (item) {
  return item.name === "bb";
});
console.log("targetItem:", targetItem); // targetItem: Object { id: "b", name: "bb" }

findIndex() 方法

var arr = [
  { id: "a", name: "aa" },
  { id: "b", name: "bb" },
];
var index = arr.findIndex(function (item) {
  return item.name === "bb";
});
console.log("index:", index); // index: 1

sort() 方法

var arr = ["c", "b", "a"];
arr.sort();
console.log("arr:", arr); // arr: ["a","b","c"]

reverse() 方法

var arr = ["c", "b", "a"];
arr.reverse();
console.log("arr:", arr); // arr: ["a","b","c"]

join() 方法

var arr = ["c", "b", "a"];
var str = arr.join("-");
console.log("str:", str); // str: c-b-a

slice() 方法

var arr = ["c", "b", "a"];
var subArr = arr.slice(1, -1);
console.log("subArr:", subArr); // subArr: Array[2]

splice() 方法

var arr = ["c", "b", "a"];
arr.splice(1, 1, "d");
console.log("arr:", arr); // arr: Array[3]

concat() 方法

var arr = ["c", "b", "a"];
var newArr = arr.concat(["d"]);
console.log("newArr:", newArr); // newArr: Array[4]

pop() 方法

var arr = ["c", "b", "a"];
var lastItem = arr.pop();
console.log("lastItem:", lastItem); // lastItem: a

push() 方法

var arr = ["c", "b", "a"];
arr.push("d");
console.log("arr:", arr); // arr: Array[4]

shift() 方法

var arr = ["c", "b", "a"];
var firstItem = arr.shift();
console.log("firstItem:", firstItem); // firstItem: c

unshift() 方法

var arr = ["c", "b", "a"];
arr.unshift("d");
console.log("arr:", arr); // arr: Array[4]

toString() 方法

var arr = ["c", "b", "a"];
var str = arr.toString();
console.log("str:", str); // str: c,b,a

toLocaleString() 方法

var arr = ["c", "b", "a"];
var str = arr.toLocaleString();
console.log("str:", str); // str: c,b,a

keys() 方法

var obj = { a: 1, b: 2 };
var keys = Object.keys(obj);
console.log("keys:", keys); // keys: Array[2]

values() 方法

var obj = { a: 1, b: 2 };
var values = Object.values(obj);
console.log("values:", values); // values: Array[2]

entries() 方法

var obj = { a: 1, b: 2 };
var entries = Object.entries(obj);
console.log("entries:", entries); // entries: Array[2]

assign() 方法

var objA = { a: "a" };
var objB = { b: "b" };
Object.assign(objA, objB);
console.log("objA:", objA); // objA: Object { a: "a", b: "b" }

setPrototypeOf() 方法

var protoObj = {};
var obj = Object.setPrototypeOf({}, protoObj);
console.log("obj:", obj); // obj: Object {}

getOwnPropertyDescriptors() 方法

var obj = {
  x: 1,
  y: 2,
  z: 3,
};
var descriptors = Object.getOwnPropertyDescriptors(obj);
console.log("descriptors:", descriptors);
/*
descriptors: Object { x: Object {... }, y: Object {... }, z: Object {... } }
*/

proto 属性

var protoObj = {};
var obj = {
  __proto__: protoObj,
};
console.log("obj:", obj); // obj: Object {}

prototype 属性

function Person() {}
Person.prototype.name = "zhangsan";
var person = new Person();
console.log("person:", person); // person: Object { name: "zhangsan" }

class 类

class Person {}
Person.prototype.name = "zhangsan";
var person = new Person();
console.log("person:", person); // person: Object { name: "zhangsan" }

instanceof 操作符

var arr = [];
console.log("arr instanceof Array:", arr instanceof Array); // arr instanceof Array: true

var date = new Date();
console.log("date instanceof Date:", date instanceof Date); // date instanceof Date: true

typeof 操作符

var num = 1;
console.log("typeof num:", typeof num); // typeof num: number

var str = "string";
console.log("typeof str:", typeof str); // typeof str: string

var bool = true;
console.log("typeof bool:", typeof bool); // typeof bool: boolean

var undef;
console.log("typeof undef:", typeof undef); // typeof undef: undefined

var nullVar = null;
console.log("typeof nullVar:", typeof nullVar); // typeof nullVar: object

var obj = {};
console.log("typeof obj:", typeof obj); // typeof obj: object

var func = function () {};
console.log("typeof func:", typeof func); // typeof func: function

var arr = [];
console.log("typeof arr:", typeof arr); // typeof arr: object

var date = new Date();
console.log("typeof date:", typeof date); // typeof date: object

var regExp = /test/;
console.log("typeof regExp:", typeof regExp); // typeof regExp: object

var symbol = Symbol();

console.log("typeof symbol:", typeof symbol); // typeof symbol: symbol

in 操作符

var obj = {
  a: 1,
  b: 2,
};
console.log("a" in obj); // a in obj: true
console.log("c" in obj); // c in obj: false

delete 操作符

var obj = {
  a: 1,
  b: 2,
};
delete obj.a; // 删除对象属性，返回true
console.log("obj:", obj); // obj: Object { b: 2 }

eval() 函数

eval('console.log("hello world")'); // hello world

parseInt() 函数

parseInt("123abc"); // NaN
parseInt("123abc", 10); // 123
parseInt("123abc", 16); // 291
parseInt("123abc", 8); // 83

parseFloat() 函数

parseFloat("123abc"); // NaN
parseFloat("123.45#"); // 123.45
parseFloat("123.45e-2"); // 0.12345
parseFloat("123.45e+2"); // 12345

encodeURI() 函数

encodeURI("http://www.baidu.com?q=hello%20world"); // http://www.baidu.com?q=hello%20world
encodeURI("http://www.baidu.com?q=中文"); // http://www.baidu.com?q=%E4%B8%AD%E6%96%87
encodeURI("http://www.baidu.com?q=中文&from=google"); // http://www.baidu.com?q=%E4%B8%AD%E6%96%87&from=google

decodeURI() 函数

decodeURI("%E4%B8%AD%E6%96%87"); // 中文
decodeURI("%E4%B8%AD%E6%96%87%26from%3Dgoogle"); // 中文&from=google

encodeURIComponent() 函数

encodeURIComponent("http://www.baidu.com?q=hello%20world"); // http%3A%2F%2Fwww.baidu.com%3Fq%3Dhello%2520world
encodeURIComponent("http://www.baidu.com?q=中文"); // http%3A%2F%2Fwww.baidu.com%3Fq%3D%E4%B8%AD%E6%96%87
encodeURIComponent("http://www.baidu.com?q=中文&from=google"); // http%3A%2F%2Fwww.baidu.com%3Fq%3D%E4%B8%AD%E6%96%87%26from%3Dgoogle

decodeURIComponent() 函数

decodeURIComponent("http%3A%2F%2Fwww.baidu.com");
// "http://www.baidu.com"

escape() 函数

escape("http://www.baidu.com?q=hello%20world"); // http%3A%2F%2Fwww.baidu.com%3Fq%3Dhello%2520world
escape("http://www.baidu.com?q=中文"); // http%3A%2F%2Fwww.baidu.com%3Fq%3D%E4%B8%AD%E6%96%87
escape("http://www.baidu.com?q=中文&from=google"); // http%3A%2F%2Fwww.baidu.com%3Fq%3D%E4%B8%AD%E6%96%87%26from%3Dgoogle

unescape() 函数

unescape("http%3A%2F%2Fwww.baidu.com");
// "http://www.baidu.com"

setTimeout() 函数

setTimeout(() => {
  console.log("timeout");
}, 1000);

setInterval() 函数

setInterval(() => {
  console.log("interval");
}, 1000);

clearTimeout() 函数

let timerId = setTimeout(() => {}, 1000);
clearTimeout(timerId);

clearInterval() 函数

let intervalId = setInterval(() => {}, 1000);
clearInterval(intervalId);

Promise 对象

const promise = new Promise((resolve, reject) => {
  if (Math.random() < 0.5) {
    resolve("success");
  } else {
    reject("fail");
  }
});

promise
  .then((value) => {
    console.log(`success:${value}`);
  })
  .catch((reason) => {
    console.log(`fail:${reason}`);
  });

async/await 语法

async function testAsyncAwait() {
  try {
    const result = await fetch("https://api.github.com/");
    const data = await result.json();

    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

testAsyncAwait();

参考资料

• MDN JavaScript Reference