【JavaScript】重温第一次

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素【 如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。】
• 使用 console.log() 写入浏览器控制台

---

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）【(_id)全局变量】
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

---

JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型

---

JavaScript 逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

---

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
|=	x |= y	x = x | y
**=	x **= y	x = x ** y

提示：**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。

---

访问对象属性

您能够以两种方式访问属性：objectName.propertyName或者objectName["propertyName"]

---

replace()：
str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School")

---

toUpperCase()：
var text1 = "Hello World!";       // 字符串toUpperCase()：
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

---

concat():
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

---

String.trim():
var str = "       Hello World!        ";
alert(str.trim());

---

var str = "HELLO WORLD";
str[0];                   // 返回 H

---

split():
var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

---

用于搜索字符串的 JavaScript 方法：

• String.indexOf()
• String.lastIndexOf()
• String.startsWith()
• String.endsWith()

---

模板字面量:
let text = `Welcome ${firstName}, ${lastName}!`;

---

toString(): //以字符串返回数值
var x=123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123

---

toFixed(): //返回字符串包含指定数小数的数字
var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

---

valueOf()：//以数值返回数值
var x = 123;
x.valueOf();            // 从变量 x 返回 123
(123).valueOf();        // 从文本 123 返回 123
(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

---

全局方法

JavaScript 全局方法可用于所有 JavaScript 数据类型。

这些是在处理数字时最相关的方法：

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

---

遍历数组元素

遍历数组的最安全方法是使用 "for" 循环：

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
} 

您也可以使用 Array.foreach() 函数：

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

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

---

push():  //添加元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)

---

Popping(): //删除最后一个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

---

splice(): //数组添加新项
//第一个位置2表示：定义应添加新元素的位置
//第二个位置0表示：定义删除多少元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.splice(0, 1); // 删除 fruits 中的第一个元素

---

slice(): //切数据
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);  //表示丢弃Banna，保留其余项
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);  //(1,3)表示1不要3之后的不要，也就是不包括3

---

sort(): //排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

---

reverse()://反转元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

---

Math.max.apply()://找出数组中最大的值
function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

---

forEach()://每个数组元素调用一次函数
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

---

map():// number2会创建新数组
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
  return value * 2;
}

---

Array.filter():// 遍历
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
  return value > 18;
}

---

创建 Date 对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)

---

日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

---

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,...,n)	返回最高值
min(x,y,z,...,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

---

Math.random()://
Math.floor(Math.random() * 10);	 //返回0~9之间的数
Math.floor(Math.random() * 10) + 1;	// 返回 1 至 10 之间的数

---

正则表达：// /pattern/modifiers;搜索中使用(pattern)，i是修饰符(将搜索改为大小写不敏感)
var patt = /w3school/i;

---

JS对象方法：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 648,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

---

JSON.stringify()://日期转为字符串
const person = {
  name: "Bill",
  today: new Date()
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

---

getter与setter：

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};

// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

###object.defineProperty()
// 定义对象
var obj = {counter : 0};

// 定义 setters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});

// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

---

call()://call()方法可以在不同对象上用
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

---

apply()与call()://方法相似
//之间的区别call()接受参数
//apply()接受数组形式的参数
var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

---

闭包函数：//
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器目前是 3 

[嵌套函数]function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();     
    return counter; 
}

---

Class类：//
class ClassName {
  constructor() { ... }
}
//class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}
//有类时用New创建对象
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

//[有函数调用]class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}// mystr.methoed_1()

---

Extend://类的继承
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);//引用父类
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

---

Static：//在类本身上定义的
class Car {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}

let myCar = new Car("Ford");

// 您可以在 Car 类上调用 'hello()' ：
document.getElementById("demo").innerHTML = Car.hello();

// 但不能在 Car 对象上调用：
// document.getElementById("demo").innerHTML = myCar.hello();
// 此举将引发错误。

---

回调：//
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

---

Promise://
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）

  myResolve(); // 成功时
  myReject();  // 出错时
});

// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

---

Asnyc://acync使函数返回Promise await使函数等待Promise
async function myFunction() {
  return "Hello";
}===async function myFunction() {
  return Promise.resolve("Hello");
}

[ 超时等待 ]async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();

[等待文件]async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("File not Found");}
    };
    req.send();
  });
  document.getElementById("demo").innerHTML = await myPromise;
}
getFile();

---

window.history.back()://
<html>
<head>
<script>
function goBack() {
    window.history.back()
 }
</script>
</head>
<body>

<input type="button" value="Back" οnclick="goBack()">

</body>
</html>

---

确认框：
window.confirm("sometext");

提示框：
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天过的怎么样？";
}

---

setInterval()://
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

---

返回游览器所在位置：
const myElement = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    myElement.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  myElement.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

---

webStorage：//
localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

---