2023-2-14 js复习。

<!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”);
    </script>
</body>
</html>

发表评论