资讯详情

【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() 返回数字，由其参数转换而来。
解析其参数并返回浮点数。
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;

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");

标签： banna变送器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

 锐单商城 - 一站式电子元器件采购平台  

 深圳锐单电子有限公司