<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS学习</title>
</head>
<body>
<script>
//JS复习学习 2023-2-8
// js 有时容易忘，不断温习下。
//==JavaScript 输出
window.alert(1);
console.log(1);
document.write(1);
//==JavaScript 语句
var x = 1;
function studenjs(){
console.log(1);
}
//
var a=1,b=2,c=3,d=5;
//==JavaScript 对象
// ..........................
//==全局作用域
var carName = 'wulei';
publifun();
function publifun(){
document.getElementById("demo").innerHTML= "I can display " + carName;;
}
// 函数作用域
var carName = 'wulei';
publifun();
function funname(){
var fname = "函数作用域";
document.getElementById("demo").innerHTML= "I can display " + carName;;
}
console.log(fname); //在函数外，函数作用域不能使用。
// == ===
var x = 5;
x==5; //等于 true;
x==="5" //等值，等型。不等于 false
//==JavaScript 事件
onclick=""
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载
//==JavaScript 字符串
// 长度
var str = "dsafsafadsfads";
str.length;
// JavaScript 字符串方法
var str = "dsafsafadsfads";
var str1 = "11111111";
var str2 = " dsafsafadsfads ";
console.log(str.length);
console.log(str.indexOf("fs"));
console.log(str.lastIndexOf("ds"));
console.log(str.search("fa"));
// 提取部分字符串
console.log(str.slice(0,5));
console.log(str.substring(0,5));
console.log(str.substr(7,6));
console.log(str.replace("dsaf","111"));
console.log(str.toUpperCase(str));
console.log(str.toLowerCase(str));
console.log(str.concat("----",str1));
console.log(str2.trim());
console.log(str.charAt(0));
console.log(str.split("f"));
//==JavaScript 字符串模板
var a = "wueli";
var b = "huxue";
console.log(`11111${a}22222${b}`);
//==JavaScript 数字
// ------------------------
//==JavaScript 数组
var ar = ["11","22","33"];
var ar1 = new Array("11","2","3");
console.log(ar1[0])
console.log(ar1[0]="11111");
// 数组属性和方法
var sum;
for(var i = 0; i<ar.length; i++){
console.log(i) + "<br>";
}
var arr = [1,2,3,4];
var sum =0;
arr.push(6);
arr.forEach(function(value,index,array){
array[index] == value; //结果为true
sum+=value;
});
console.log(sum); //结果为 10
// arr.push(6);
// arr[arr.length] = "7777";
//==JavaScript 数组方法
var ar = ["1111","2222","3333","55555"];
console.log(ar.toString());
console.log(ar.join(" "));
console.log(ar.pop());
console.log(ar.push("655555"));
console.log(ar.shift());
console.log(ar.unshift("9999"));
console.log(ar.toString());
console.log(ar.length);
console.log(ar.splice(2,0,"aaaa","bbbb"));
console.log(ar.toString());
ar.splice(0,1);
// cosole.log(ar.toString());
var ar1 = ["1111","2222","3333","55555"];
var ar2 = ["4444","6666","7777","8888"];
var ar3 = ar1.concat(ar2);
console.log(ar3.toString());
//==JavaScript 数组排序
var ar1 = ["1111","2222","3333","55555"];
// ar1.sort();
console.log(ar1.sort());
console.log(ar1.reverse());
var fsort = ar1.sort(function(a,b){
return a-b;
})
console.log(fsort);
console.log(Math.random());
ar1.sort(function(a,b){
return 0.5 - Math.random();
});
console.log(ar1.toString());
var ar2 = ar1.sort(function(a,b){
return a-b;
});
console.log(ar1.toString());
console.log(ar1[0]);
var ar3 = ar1.sort(function(a,b){
return b-a;
});
console.log(ar3.toString());
console.log(ar3[0]);
console.log(Math.min.apply(null,ar1));
console.log(Math.max.apply(null,ar2));
//==JavaScript 数组迭代
var numbers = [45, 4, 9, 16, 25];
var txt = "";
numbers.forEach(fornumber);
function fornumber(value,index,arr){
txt = txt + value + "<br>";
}
console.log(txt);
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(newar);
function newar(val,index,arr){
return val*3;
}
console.log(numbers2);
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduce(myFunction);
document.getElementById("demo").innerHTML = "总和是：" + sum;
function myFunction(total, value, index, array) {
return total + value;
}
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
document.getElementById("demo").innerHTML = "所有大于 18 的是：" + allOver18;
function myFunction(value, index, array) {
return value > 18;
}
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
document.getElementById("demo").innerHTML = "某些值大于 18 是：" + someOver18;
function myFunction(value, index, array) {
return value > 18;
}
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Orange");
console.log(a);
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
//==JavaScript 数组 Const
关键字 const 有一定误导性。
它不定义常量数组。它定义的是对数组的常量引用。
因此，我们仍然可以更改常量数组的元素。
//==JavaScript 日期
var da = new Date(); //注意大写。
console.log(da);
var d = new Date(2018, 11, 24, 10, 33, 30, 0); //重新订时间。
console.log(d);
//==JavaScript 日期格式
// 数组和对象的区别
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
// JavaScript 对象属性
var ob = {"a":"aaa","b":"bbbb","c":"cccc","d":"ddddd"}
delete ob.a;
// JavaScript for...in 循环
for(x in ob){
console.log(ob[x]) + "<br>";
}
//==JavaScript 对象属性
var ob = {"a":"aaa","b":"bbbb","c":"cccc","d":"ddddd"}
delete ob.a;
// JavaScript for...in 循环
for(x in ob){
console.log(ob[x]) + "<br>";
}
var ob1 = Object.values(ob); //转换为数组。
console.log(ob1);
// 对象，日期，函数，数组。都可以字符串化：
var str1 = JSON.stringify(ob);
console.log(str1);
console.log(typeof(ob1));
console.log(typeof(str1));
//==JavaScript 对象访问器
// JavaScript 对象访问器
var ob = {
"name":"wulei",
"age":41,
"sex":"boy",
get gname(){
return this.name;
}
}
console.log(ob.gname);
var ob1 = {
"name":"wulei",
"age":41,
"sex":"boy",
set sname(value){
this.name = value;
}
}
ob1.sname = "huxue";
console.log(ob1.name);
// 给对象填加属性和值
var ob = {};
var count=12;
Object.defineProperty(ob,"name",{
get:function(){
return count;
},
set:function(val){
count = val + 1;
}
})
console.log(ob.name);
console.log(ob.name = "修改");
//==JavaScript 对象构造器
// JavaScript 条件
if(x>6 ){
//...........
}
if(x>6 ){
//...........
}else{
//............
}
// if else if else if
switch(x>10){
case n:
// ........
break;
case n:
// ........
break;
case n:
// ........
break;
default:
// .......
}
//==JavaScript For 循环
var cars = ["BMW", "Volvo", "porsche", "Ford", "Fiat", "Audi"];
var text = "";
for(var i = 0; i<cars.length; i++){
text += cars[i] + "<br>";
}
console.log(text);
// 适合循环对象
for( x in objectname){
console.log(x);
}
while(x <= 10){
console.log(x++);
}
do{
}while(x>1000);
// 循环可迭代数组、字符串、映射、节点列表等：
for(x of array){
console.log(x);
}
//==跳出循环
break;
continue;
// JavaScript typeof 查询数据类型。
var a = "asdfsdafdas";
typeof(a);
//==JavaScript 类型转换
Number(); String(); Boolean();
//==JavaScript 位运算符 web开发用的不多。
//==JavaScript 正则表达式
// web开发中查看开发过程中总结的正则手册
var rep = /w3school/i;
search();
replace();
var str = "fadsfdsafdasfdsafsdf";
var sears = str.search(/dsafdas/i);
console.log(sears);
var str = "fadsfdsafdasfdsafsdf";
var sterep = str.replace("safdas","11111111");
console.log(sterep);
var reg = '/whos/i';
reg.test("asdfaswhosafdasfsdafdaf");
var reg = '/whos/i';
reg.exec("The best things in life are free!");
/e/.exec("The best things in life are free!");
//==JavaScript 错误 - Throw 和 Try to Catch
try //语句使您能够测试代码块中的错误。
catch //语句允许您处理错误。
throw //语句允许您创建自定义错误。
finally //使您能够执行代码，在 try 和 catch 之后，无论结果如何。
try{
aldd(1);
}catch(err){
err.message;
}
throw "Too big"; // 抛出文本
throw 500; //抛出数字
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "输入：" + err;
}finally{
//执行代码块。
}
// 错误 - Error 对象 2个属性 name message;
// JavaScript 作用域
//局部作用域
//全局作用域
//==JavaScript Hoisting 变量提升
//在 JavaScript 中，可以在使用变量之后对其进行声明。
//换句话说，可以在声明变量之前使用它。
var a;
console.log(a);
var a =1;
//==JavaScript 严格模式
//声明严格模式
//通过在脚本或函数的开头添加 "use strict"; 来声明严格模式。
//在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）
"use strict";
x = 3.14; // 会引发错误（x 未定义）
// 复习的教程为：https://www.w3school.com.cn/js/js_strict.asp
//==JavaScript this 关键词
// 在方法中，this 指的是所有者对象。
// 单独的情况下，this 指的是全局对象。
// 在函数中，this 指的是全局对象。
// 在函数中，严格模式下，this 是 undefined。
// 在事件中，this 指的是接收事件的元素。
// 像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
//==JavaScript 箭头函数
var funame = function funname(){
return 1;
}
funame = ()=>{
return 1;
}
var funame = function functi(val){
return val;
}
funname = (val) => {
return val;
}
//==JavaScript 类
class Rem {
constructor(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
chifan() {
this.name
}
shuijiao() {
}
zoulu() {
}
let nanren = new Rem("namea", 2025);
}
// =========================
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age(year) + " years old.";
//==JavaScript JSON
// JSON 的两种结构：
// JSON 对象 JSON数组
// JSON数组
[key1 : value1, key2 : value2, ... keyN : valueN ]
// json对象
var study = {
yinianji:[
{"name":"wulei","age":30,"set":"nan"},
{"name":"huxue","age":40,"set":"nan"},
{"name":"suntao","age":50,"set":"nv"}
]
}
服务器-> 是 json
->服务器 是 string
// JSON - 转换为 JavaScript 对象
// JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
// 由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
// JavaScript 创建 JSON 对象
var JSONObject= {
"name":"菜鸟教程",
"url":"www.runoob.com",
"slogan":"学的不仅是技术，更是梦想！"
};
// 使用 JSON
// 读取 JSON 字符串
// 用 eval() 处理 JSON 字符串
JSON.parse() json 转换为 JavaScript 对象;
// 标准的json格式
{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
JSON.parse() //将其转换为 JavaScript 对象; 老可以在网页中使用。
JSON.stringify()
// JSON 通常用于与服务端交换数据。
// 在向服务器发送数据时一般是字符串。
// 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。再向服务器发送
// 例如我们向服务器发送以下数据：
var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
// 我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：
var myJSON = JSON.stringify(obj);
//==JSONP 教程
本章节我们将向大家介绍 JSONP 的知识。
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
//==JavaScript 调试
console.log();
设置断点
debugger;
//==JavaScript ES6
let a = 1;
const b = 2;
function funname(x,y="默认值"){
// 代码块
}
//ar.find
var ar = ["19","1","10"];
var va = ar.find(funselect);
function funselect(value,index,arr){
return value > 18
}
console.log(va);
// 箭头函数
function funname(x){
console.log(x);
}
var funa = (x)=>{
console.log(x);
}
//==JavaScript 对象
// JavaScript 对象定义
在 JavaScript 中，几乎“所有事物”都是对象。
布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
//==JavaScript 对象属性
var ob = "duixiang";
var ob = {"wulei","huxue","sulia"};
var ob = new Object();
ob.name = "wulei";
ob.age = 30;
// JavaScript for...in 循环
var person = {fname:"Bill", lname:"Gates", age:62};
for(x in person){
console.log(x);
console.log(person[x]);
}
//==JavaScript 对象方法
var person = {
fname:"Bill",
lname:"Gates",
age:62,
getname: function(){
return this.fname + this.lname;
}
};
console.log(person.getname());
//==JavaScript 显示对象
var person = {
fname:"Bill",
lname:"Gates",
age:62,
getname: function(){
return this.fname + this.lname;
}
};
console.log(person.getname());
console.log(person);
// 在循环中显示对象
const person = {
name: "Bill",
age: 19,
city: "Seattle"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
const person = {
name: "Bill",
age: 19,
city: "Seattle"
};
console.log(Object.values(person)); //["Bill", 19, "Seattle"]
var jsonname = JSON.stringify(person);
console.log(jsonname);
// JSON.stringify 不会对函数进行字符串化：
const arr = ["Bill", "Steve", "Elon", "David"];
document.getElementById("demo").innerHTML = JSON.stringify(arr);
//==JavaScript 对象访问器
var ob = {
name:"wulei",
age:40,
get gname(){
return this.name;
}
}
console.log(ob.gname);
var person1 = {
firstName: "Bill",
lastName : "Gates",
language : "en",
set lang(value) {
this.language = value;
}
};
// 使用 set 设置属性：
person.lang = "zh";
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
language : "en",
get lang() {
return this.language.toUpperCase();
}
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
//==JavaScript 对象构造器
Array.prototype
Object.prototype
//==JavaScript ES5 对象方法
// 以现有对象为原型创建对象
Object.create()
// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// 添加或更改对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 以数组返回所有属性
Object.getOwnPropertyNames(object)
// 访问原型
Object.getPrototypeOf(object)
// 以数组返回可枚举属性
Object.keys(object)
// 防止向对象添加属性
Object.preventExtensions(object)
// 如果属性可以添加到对象，则返回 true
Object.isExtensible(object)
// 防止更改对象属性（不是值）
Object.seal(object)
// 如果对象被密封，则返回 true
Object.isSealed(object)
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结，则返回 true
Object.isFrozen(object)
//==JavaScript Map 对象
本篇文章将给大家介绍关于如何创建Map对象以及如何使用Map对象进行添加，获取，删除和迭代，所以下面我们就来看看具体的内容。首先我们来看一下如何创建Map对象？通过创建关联数组，通常可以更容易地理解Map对象。
我们首先用new创建一个实例。
var map = new Map();
要添加元素，我们使用set()方法.
map.set('name', 'Tom');
在此示例中，字符串“Tom”值被添加到“name”中。
顺便说一下，在创建实例时也可以如下设置初始值。
new Map([['name', 'Tom'], ['name', 'Jerry']]);
如何获取和删除元素
例如，创建一个这样的Map对象：
var map = new Map(); map.set('name', 'Tom');map.set('age', 18);
要获取此Map对象的“name”值，可以使用get()方法。如下所示
console.log(map.get('name'));
顺便说一下，如果执行「size」的话，可以取得存储的元素数，使用has()的话可以确认是否存在任意的值。
console.log(map.size);console.log(map.has('age'));
要删除元素，只需在delete（）中指定要删除的元素的值。
map.delete('name');map.clear();
对于Map 对象，执行clear将删除所有存储的元素。
Map对象的迭代处理
通常，迭代使用for-of语句很容易，但是Map对象提供了有用的属性。
例如，您可以使用key()来检索存储元素的所有“键”。
请看下面的示例
for(var key of map.keys()) { console.log(key);}
在此示例中，可以看到我们使用keys()对Map对象存储所存储的键进行反复处理
因此Map对象的所有键都可以列举出来。
此外，使用values()这次将获得所有的值。
for(var val of map.values()) { console.log(val);}
//==JavaScript Set 对象
// 创建新的变量
const a = "a";
const b = "b";
const c = "c";
// 创建 Set
const letters = new Set();
// Add the values to the Set
letters.add(a);
letters.add(b);
letters.add(c);
new Set() 创建新的 Set 对象。
add() 向 Set 添加新元素。
clear() 从 Set 中删除所有元素。
delete() 删除由其值指定的元素。
entries() 返回 Set 对象中值的数组。
has() 如果值存在则返回 true。
forEach() 为每个元素调用回调。
keys() 返回 Set 对象中值的数组。
values() 与 keys() 相同。
size 返回元素计数。
//==JavaScript 函数定义
function functionName(parameters) {
要执行的代码
}
const x = (x, y) => { return x * y };
//==JavaScript 函数参数
Arguments 模拟重载函数。
var s = "";
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
s += arguments[i] + ",";
}
return s;
}
test("name", "age");
// call
var ob1 = {
funname:function (){
return this.fistname + this.lastname;
}
}
var ob2 = {
fistname : "ob2name1",
lastname : "ob2name2"
}
var ob3 = {
fistname : "1111",
lastname : "2222"
}
var ob4 = ob1.funname.call(ob2);
console.log(ob4);
// JavaScript 函数 Apply
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
//==JavaScript 闭包
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();// 计数器目前是 1
add();// 计数器目前是 2
add();// 计数器目前是 3
//==JavaScript 类
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
class Ren{
constructor(name,age){
this.name=name;
this.age=age;
}
paobu(){
return this.name + "正在跑步";
}
say(){
return this.name + "正在说话";
}
}
var boyRen = new Ren("wulei",40);
console.log(boyRen.paobu());
//==JavaScript 类继承
class Ren{
constructor(name,age){
this.name=name;
this.age=age;
}
paobu(){
return this.name + "正在跑步";
}
say(){
return this.name + "正在说话";
}
}
class Shenx extends Ren{
constructor(name,age,vip){
super(name,age); //继承属性和方法
this.vip = vip;
}
fly(){
return this.name + "飞走了";
}
sdear(){
return this.name + "vip等级是" + this.vip;
}
}
var boyRen = new Shenx("wulei",40,"司令");
console.log(boyRen.paobu());
// JavaScript 类继承
class Ren{
constructor(name,age){
this.name=name;
this.age=age;
}
paobu(){
return this.name + "正在跑步";
}
say(){
return this.name + "正在说话";
}
}
class Shenx extends Ren{
constructor(name,age,vip){
super(name,age); //继承属性和方法
this.vip = vip;
}
fly(){
return this.name + "飞走了";
}
sdear(){
return this.name + "vip等级是" + this.vip;
}
set name(x){
"您正在设置" + x;
}
get name(){
"您正在获取"
}
}
var boyRen = new Shenx("wulei",40,"司令");
console.log(boyRen.paobu());
boyRen.name = "wuleiwulei";
console.log(boyRen.name);
</script>
</body>
</html>