js-MediumGrade-base.js

时间:2021-11-12 17:15:07
// 1.JavaScript 中的类型包括

    Number(数字)
String(字符串)
Boolean(布尔)
Symbol(符号)(第六版新增)
Object(对象)
Function(函数)
Array(数组)
Date(日期)
RegExp(正则表达式)
Null(空)
Undefined(未定义) // 2.数字 Math.sin(3.5);
var d = Math.PI * r * r; parseInt("123", 10); //10进制
parseInt("120", 8); //8进制
parseInt("120", 16); //16进制
parseInt("hello", 10); // NaN parseFloat() isNaN(NaN); // true
Infinity(正无穷)
-Infinity(负无穷) isFinite(1/0); // false
isFinite(-Infinity); // false
isFinite(NaN); // false // 3.字符串 "hello".length; //
"hello".charAt(0); // "h"
"hello, world".replace("hello", "goodbye"); // "goodbye, world"
"hello".toUpperCase(); // "HELLO" // 4.变量 var a;
var name = "simon"; // 5.运算符 x += 5; // 等价于 x = x + 5;
"hello" + " world"; // hello world
"3" + 4 + 5; //
3 + 4 + "5"; // 123 == "123" // true
1 == true; // true 1 === true; //false
123 === "123"; // false // 6.控制结构 var name = "kittens";
if (name == "puppies") {
name += "!";
} else if (name == "kittens") {
name += "!!";
} else {
name = "!" + name;
}
name == "kittens!!"; // true /////////////////////////////////////////// while (true) {
// 一个无限循环!
}
var input;
do {
input = get_input();
} while (inputIsNotValid(input)) /////////////////////////////////////////// for (var i = 0; i < 5; i++) {
// 将会执行五次
} /////////////////////////////////////////// switch(action) {
case 'draw':
drawIt();
break;
case 'eat':
eatIt();
break;
default:
doNothing();
} // 7.运算符 var name = o && o.getName();
var name = otherName || "default";
var allowed = (age > 18) ? "yes" : "no"; //三元操作符 // 8.对象 var obj = new Object();
var obj = {}; var obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}
obj.details.color; // orange
obj["details"]["size"]; // // 9.数组 var a = new Array();
a[0] = "dog";
a[1] = "cat";
a[2] = "hen";
a.length; // // 遍历数组的三种方法 依次更好
for (var i = 0; i < a.length; i++) {
// Do something with a[i]
} for (var i = 0, len = a.length; i < len; i++) {
// Do something with a[i]
} for (var i = 0, item; item = a[i++];) {
// Do something with item
} array方法名称 描述 a.toString() //返回一个包含数组中所有元素的字符串,每个元素通过逗号分隔。
a.toLocaleString() //根据宿主环境的区域设置,返回一个包含数组中所有元素的字符串,每个元素通过逗号分隔。
a.concat(item1[, item2[, ...[, itemN]]]) //返回一个数组,这个数组包含原先 a 和 item1、item2、……、itemN 中的所有元素。
a.join(sep) //返回一个包含数组中所有元素的字符串,每个元素通过指定的 sep 分隔。
a.pop() //删除并返回数组中的最后一个元素。
a.push(item1, ..., itemN) //将 item1、item2、……、itemN 追加至数组 a。
a.reverse() //数组逆序(会更改原数组 a)。
a.shift() //删除并返回数组中第一个元素。
a.slice(start, end) //返回子数组,以 a[start] 开头,以 a[end] 前一个元素结尾。
a.sort([cmpfn]) //依据 cmpfn 返回的结果进行排序,如果未指定比较函数则按字符顺序比较(即使元素是数字)。
a.splice(start, delcount[, item1[, ...[, itemN]]]) //从 start 开始,删除 delcount 个元素,然后插入所有的 item。
a.unshift([item]) //将 item 插入数组头部,返回数组新长度(考虑 undefined)。 // 10.函数 function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
add(2, 3, 4, 5); // // --------------------加法的函数--------------------- function avg() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum / arguments.length;
}
avg(2, 3, 4, 5); // 3.5 // --------------------平均数的函数--------------------- function avgArray(arr) {
var sum = 0;
for (var i = 0, j = arr.length; i < j; i++) {
sum += arr[i];
}
return sum / arr.length;
}
avgArray([2, 3, 4, 5]); // 3.5 // --------------------平均数的函数【逗号连接的变量串】--------------------- var avg = function() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum / arguments.length;
}; // --------------------匿名函数--------------------- // 11.自定义对象 function makePerson(first, last) {
return {
first: first,
last: last
}
}
function personFullName(person) {
return person.first + ' ' + person.last;
}
function personFullNameReversed(person) {
return person.last + ', ' + person.first
}
s = makePerson("Simon", "Willison");
personFullName(s); // Simon Willison
personFullNameReversed(s); // Willison, Simon // --------------------一般写法--------------------- function makePerson(first, last) {
return {
first: first,
last: last,
fullName: function() {
return this.first + ' ' + this.last;
},
fullNameReversed: function() {
return this.last + ', ' + this.first;
}
}
}
s = makePerson("Simon", "Willison");
s.fullName(); // Simon Willison
s.fullNameReversed(); // Willison, Simon // --------------------对象概念 更优--------------------- function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
}
this.fullNameReversed = function() {
return this.last + ', ' + this.first;
}
}
var s = new Person("Simon", "Willison"); // --------------------this 改进已有的 makePerson函数--------------------- // 12.内部函数 function betterExampleNeeded() {
var a = 1;
function oneMoreThanA() {
return a + 1;
}
return oneMoreThanA();
} // 13.闭包 function makeAdder(a) {
return function(b) {
return a + b;
}
}
x = makeAdder(5);
y = makeAdder(20);
x(6); //
y(7); // // 14.内存泄露 // 闭包很容易发生无意识的内存泄露 function addHandler() {
var el = document.getElementById('el');
el.onclick = function() {
el.style.backgroundColor = 'red';
}
} // 这个问题有很多种解决方法,最简单的一种是不要使用 el 变量 function addHandler(){
document.getElementById('el').onclick = function(){
this.style.backgroundColor = 'red';
};
} // 有趣的是,有一种破坏因为闭包引入循环引用的窍门是添加另外一个闭包: function addHandler() {
var clickHandler = function() {
this.style.backgroundColor = 'red';
};
(function() {
var el = document.getElementById('el');
el.onclick = clickHandler;
})();
}