JavaScript（ES5）

JavaScript（ES5）

基础数据类型

Number、String、Boolean、undefined、object、Null

Number

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

let x1=34.00;      //使用小数点来写
let x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

let y=123e5;      // 12300000
let z=123e-5;     // 0.00123

特殊的Number

// 非Number  NaN  => Not a Number
typeof(NaN) // Number

Number 方法和属性

// 转化为字符串
var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

// 建议使用 + 拼接 "" , 实现
1 + "" // '1'
1 + "2" // '12'

// toFixed() 指定位数的小数的数字
var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66 非常适合处理金钱
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

/* * * * * * * * * * * * * * * * * * * * * * * * 
* 把变量转换为数值                                *
* 这三种 JavaScript 方法可用于将变量转换为数字：     *
* Number() 方法                                 *
* parseInt() 方法                               *
* parseFloat() 方法                             *
* 这些方法并非数字方法，而是全局 JavaScript 方法     *
* * * * * * * * * * * * * * * * * * * * * * * */
x = true;
Number(x);        // 返回 1
x = false;     
Number(x);        // 返回 0
x = new Date();
Number(x);        // 返回 1404568027739
x = "10"
Number(x);        // 返回 10
x = "10 20"
Number(x);        // 返回 NaN

parseInt("10");         // 返回 10
parseInt("10.33");      // 返回 10
parseInt("10 20 30");   // 返回 10
parseInt("10 years");   // 返回 10
parseInt("years 10");   // 返回 NaN

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

String

字符串的属性访问

var str = "I am a coder, also a student!";

// 拿到字符串的长度
str.length // 29

// 字符串可以看作是一个数组，可以根据索引值访问
str[0] // 'I'

// 最常用的字符串转成数组
var str = "a,b,c,d,e";
str.split(",");          // 用逗号分隔 ['a', 'b', 'c', 'd', 'e']

var str = "a b c d e";
str.split(" ");          // 用空格分隔 ['a', 'b', 'c', 'd', 'e']

var str = "a|b|c|d|e";
str.split("|");          // 用竖线分隔 ['a', 'b', 'c', 'd', 'e']

var str = "Hello";
str.split("");          // 用空串分隔  ['H', 'e', 'l', 'l', 'o']

获取子串的位置，判断字符串中是否出现子串

/* * * * * * * * * * * * * * 
* indexOf | lastIndexOf    *
* 1. 用来定位字符串位置       *
* * * * * * * * * * * * * */
var str = "I am a coder, also a student!";

// 找到子串第一次出现的索引值
str.indexOf("de") // 9

// 找到子串最后一次出现的索引值
str.lastIndexOf("de") // 24 注意返回的是最后一次出现该子串的首个字符的索引值

// 如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1（可用来判断字符串是否出现子串）
str.lastIndexOf("money") // -1

/* * * * * * * * * * * * * * * * * *
* startsWith | endsWith            *
* 2. 判断字符串中是否以某子串开头或结尾  *
* * * * * * * * * * * * * * * * * */
var str = "I am a coder, also a student!";

str.startsWith("I") // true

str.startsWith("coder") // false

提取部分字符串

/* * * * * * * * * * * * * * 
* 提取部分字符串             *
* * * * * * * * * * * * * */
var str = "Apple, Banana, Mango";

// 这个例子裁剪字符串中位置 -12 到位置 -6 的片段：
str.slice(7,13); // 'Banana'

// 或者从结尾计数：
str.slice(-13); // 'Banana, Mango'

// substring() 类似于 slice() 不同之处在于 substring() 无法接受负的索引。	
str.substring(7,13); // 'Banana'

// substr() 类似于 slice() 不同之处在于第二个参数规定被提取部分的长度。
str.substr(7,6); // 'Banana'

// slice() | substring() | substr() => 如果省略第二个参数，则将裁剪字符串的剩余部分。
str.substr(7) // 'Banana, Mango'

替换字符串内容

var str = "I am a coder, also a student!";

// replace() 用另一个值替换在字符串中指定的值（只替换第一个）：
str.replace("coder", "worker"); // 'I am a worker, also a student!'

// replaceAll() 替换所有指定的值：
str.replaceAll(" ","") // 'Iamacoder,alsoastudent!'

// 如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：
str.replace(/CODER/i, "worker"); // 'I am a worker, also a student!'

转化大小写

var str = "I am a coder, also a STUDENT!";

// 全部小写
// str.toLowerCase() // 'i am a coder, also a student!'

// 全部大写
// str.toUpperCase() // 'I AM A CODER, ALSO A STUDENT!'

字符串连接方法

var prefixStr = "Hello "
var suffixStr = "World"

// "+" 拼接方式
prefixStr + suffixStr // 'Hello World'

// concat() 拼接方式 concat方法里可以写多个参数值，不断拼接
prefixStr.concat(suffixStr); // 'Hello World'

去除空格

var str = "       Hello  World       ";

// 去除两端的空格
str.trim() // 'Hello  World'

// 用replaceAll的方法去除所有的空格
str.replaceAll(" ","")

// 用正则表达式的方式

字符串模板（建议使用）

// 模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：
var str = `Hello World!`;

// 模板字面量允许字符串中的变量：
let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

// 模板字面量允许字符串中的表达式：
let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

数组和对象

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

var fruits  =  ["Banana", "Orange", "Apple", "Mango"];

// 访问元素
fruits [0] // 'Banana'

// 修改元素
fruits [2] = "Pear"
fruits  // ['Banana', 'Orange', 'Pear', 'Mango']

// 遍历数组
fruits.forEach(item=>{console.log(item)}) // fruits.forEach(item=>console.log(item))

// 弹出栈顶元素，移除最后一个元素（返回值是移除的元素，改变了原数组）
fruits.pop() // 'Mango'
fruits  // ['Banana', 'Orange', 'Pear']

// 移除第一个元素（返回值是移除的元素，改变了原数组）
fruits.shift(); // 'Banana'
fruits // ['Orange', 'Pear']

// 新增一个或多个元素到数组末尾
fruits.push("Strawberry") // 返回数组长度 3
fruits // ['Orange', 'Pear', 'Strawberry']

// 新增一个或多个元素到数组开头
fruits.unshift("Orange") // 返回数组长度 4
fruits // ['Orange', 'Orange', 'Pear', 'Strawberry']

splice() 进行增删改

var arr=['a','b','c','d']

// splice() 方法的返回值为删除掉的元素
arr.splice(1, 1); // 结果arr=['a','c','d']（下标1开始，删除1个）

// spice增加：
arr.splice(1,0,'str'); // 结果arr=['a','str','b','c','d']

// spice替换：
arr.splice(1,1,'str'); // 结果arr=['a','str','c','d']

// spice替换2：
arr.splice(1,2,'str'); // 结果arr=['a','str','d']（就是说：下标1开始2个换成1个“str”）

// spice删除多个：
arr.splice(1,2); // 结果arr=['a','d']

对象的操作

var info = { "name":"Bill Gates", "age":62, "car":null }

// 通过使用点号（.）来访问对象值：
info.name // 'Bill Gates'
info["name"] // 'Bill Gates'

// 修改属性值
info.name = "XMD"
info // {name: 'XMD', age: 62, car: null}

// 对象遍历
for(let key in info){
    console.log(info[key])
}
/* * * * * * *
* Bill Gates *
* 62         *
* null       *
* * * * * * */

// 对象是以键值对的形式存在，值的内容可以是任意的

JSON对象

// JSON对象
myObj = { name:"Bill Gates",  age:62, city:"Seattle" 
         
// 将JSON转换为字符串
myJSON =  JSON.stringify(myObj);

// 将字符串解析成JSON对象
myObjRs = JSON.parse(myJSON)

JS数据类型：null 和 undefined 有什么区别？

Null 只有一个值，是 null。不存在的对象。

Undefined 只有一个值，是undefined。没有初始化。undefined 是从 null 中派生出来的。

简单理解就是：undefined 是没有定义的，null 是定义了但是为空。

// 当声明了a，但对a赋值的时候
let a;
console.log(a) // undefined

函数相关操作

function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}

myFunction("肖迷笛","coder")

// 箭头函数
// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

定时器

// setInterval() 方法 不停地执行指定的代码
setInterval(function(){alert("Hello setInterval")},3000);
// 在创建超时方法中（setInterval）使用全局变量:
var myVar;
function myFunction(){
	myVar=setInterval(function(){alert("Hello setInterval")},3000);
}

// 函数还未被执行，你可以使用 clearInterval() 方法来停止执行函数代码
function myStopFunction(){
	clearInterval(myVar);
}

// setTimeout() 方法 执行指定的代码一次
setTimeout(function(){alert("Hello setTimeout")},3000); // 等待3秒，然后弹出 "Hello":

// 在创建超时方法中（setTimeout）使用全局变量:
var myVar;
function myFunction(){
	myVar=setTimeout(function(){alert("Hello setTimeout")},3000);
}

// 函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码
function myStopFunction(){
	clearTimeout(myVar);
}

基本dom操作

// 创建动态的 HTML 内容：
document.write(Date());

// 获取id选择器值为"p1"，并修改其HTML内容为 "新文本!"
document.getElementById("p1").innerHTML="新文本!"; // 可以插入html片段 如<h1>新文本!<h1/>

document.getElementById("p1").innerText="新文本!"; // 只能插入文本

更多的dom操作进行专题讲解