JavaScript学习笔记（二）

最新推荐文章于 2024-03-30 14:55:53 发布
最新推荐文章于 2024-03-30 14:55:53 发布
阅读量157 收藏 1
点赞数
分类专栏： =====前端===== javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37823003/article/details/104994080
版权

4、函数

4.1、定义函数

定义方式一

绝对值函数

    function abs(x) {
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }

function指出这是一个函数定义；

  • abs是函数的名称；
  • (x)括号内列出函数的参数，多个参数以,分隔；
  • { ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

一旦执行到 return 代表函数结束，返回结果！
如果没有执行 return ，函数执行完也会返回结果，结果就是 undefined

定义方式二

var abs = function(x){
        if(x>=0){
            return x;
        }else{
            return -x;
        }
}

function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

调用函数

abs(10)    //10
abs(-10)   //10

参数问题：JavaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在的问题？
假设不存在参数，如何规避？

function abs(x) {
        //手动抛出异常来判断
        if (typeof x !== 'number') {
            throw 'Not a Number';
        }
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

arguments

特性：

  • arguments对象和Function是分不开的。

  • 因为arguments这个对象不能显式创建。

  • arguments对象只有函数开始时才可用。

arguments是一个js免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！

function abs(x) {
        console.log("x=>" + x);
        
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        
        if (x >= 0) {
            return x;
        } else {
            return -x;
        }
    }

结果：

>abs(10)
x=>10
10
<-10

Javascript并没有重载函数的功能，但是Arguments对象能够模拟重载。Javascrip中每个函数都会有一个Arguments对象实例arguments，它引用着函数的实参，可以用数组下标的方式"[]"引用arguments的元素。arguments.length为函数实参个数，arguments.callee引用函数自身。

问题：arguments 包含所有的参数，我们有时想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：

if(arguments.length>2)
 {
     for(var i = 2 ;i<arguments.length;i++){
         //....
     }
 }

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~

function aaa(a,b,...rest) {
        console.log("a->"+a);
        console.log("b->"+b);
        console.log(rest);
    }

rest 参数只能写在最后面，必须用…标识。
注意return语句：JavaScript引擎有一个在行末自动添加分号的机制

function f() {
    return { name: 'f' };
}

f(); // { name: 'f' }

如果把return语句拆成两行：

function f() {
    return
        { name: 'f' };
}

f(); // undefined

由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：

function f() {
    return; // 自动添加了分号，相当于return undefined;
        { name: 'f' }; // 这行语句已经没法执行到了
}

所以正确的多行写法是：

function f() {
    return { // 这里不会自动加分号，因为{表示语句尚未结束
        name: 'f'
    };
}

4.2、变量的作用域

在javascript中，var 定义变量实际使用作用域的。
假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）

function yyc() {
        var x = 1;
        x = x + 1;
    }

    x = x + 1;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数的内部，就不冲突

function yyc() {
        var x = 1;
        x = x + 1;
    }

function yyc2() {
        var x = 'AS';
        x = x + 1;
    }

内部函数可以访问外部函数的成员，反之则不能

function yyc() {
        var x = 1;
        
        //内部函数可以访问外部函数的成员，反之则不能
        function yyc2() {
            var y = x + 1;//2
        }

        var z = y + 1;//Uncaught ReferenceError: y is not defined
    }

假设，内部函数变量和外部函数变量，重名！

function yyc() {
        var x = 1;

        //内部函数可以访问外部函数的成员，反之则不能
        function yyc2() {
             var x = 'A';
             console.log('inner'+x);//innerA
        }
        console.log('outer'+x);//outer1
        yyc2();
    }

假设在javascript中函数查找变量从自身函数开始~，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数变量。

提升变量的作用域

function y () {
        var x ="x"+y;
        console.log(x);
        var y = 'y';
    }

结果：xundefined
说明：js执行引擎，自动提升了y的声明，但不会提升变量y的赋值；如下所示：

function y2 () {
        var y;
        var x ="x"+y;
        console.log(x);
        var y = 'y';
    }

这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function y2() {

        var y = 1,
            x = y + 1,
            z, i, a;//undefined
        //之后随意用
    }

全局函数

var x = 1;
function f() {

    console.log(x);
}
f();
console.log(x);

全局对象 window

var x = 'sss';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下；

alert()这个函数本身也是一个window变量，即：window.alert() 等价于 alert()

var x = 'sss';
window.alert(x);
 var old_alert = window.alert;//old_alert(x);

 window.alert = function(){

 };
 //发现alert()失效了
 window.alert(123);//123出不来

 //恢复
 window.alert  = old_alert;
 window.alert(456);//456可以出来

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找如果在全局作用域都没有找到，报错RefrencceError

规范

由于所有的全局变量都会绑定到我们的window 上。如果不同的js文件，使用相同的全局变量，冲突—>如何能够减少冲突？

//唯一全局变量
    var y = {};

    // 定义全局变量
    y.name = 'yyc';
    y.add = function (a, b) {
        return a + b;
    }

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
jQuery

局部作用域 let

function aaa() {
        for(var i = 0; i<100;i++){
            console.log(i);
        }
        console.log(i+1);//问题： i出来这个作用域还可以使用？

    }

因此 ES6引入 let 关键字，解决局部作用域冲突问题！

function aaa() {
        for(let i = 0; i<100;i++){
            console.log(i);
        }
        console.log(i+1);//Uncaught ReferenceError: i is not defined
    }

建议都用 let 去定义局部作用域的变量;

常量 const

在 ES6 之前，常量都是用大写字母命名的；建议不要修改这样的值；

var PI = 3.14;
console.log(PI);

PI  = 123;//这个值是可以改变的
console.log(PI);

在 ES6 引入了常量这个关键字const

const PI =  3.14;//只读变量
console.log(PI);
PI  = 123;//Uncaught TypeError: Assignment to constant variable.

4.3、 方法

定义方法

方法就是把函数放在对象 的里面， 对象 只有两个东西：属性和方法

var yyc = {
        name: '大王',
        birth:2000,
        //方法
        age: function () {
          // 今年  -  出生的年
            var now = new Date().getFullYear();//getFullYear() 方法可返回一个表示当下年份的 4 位数字。
            return now-this.birth;
        }
    }
    // 属性
    yyc.name;
    //方法，一定要带()
    yyc.age();

this.代表什么？可以拆开成下面这样：

function getAge() {
        var now = new Date().getFullYear();
        return now - this.birth;
    }

    var yyc = {
        name:'大王',
        birth:2000,
        age:getAge
    }
    //这样是可以调用到的
    //yyc.age()
    //20

    //这样是调用不到的
    //getAge()   window调用
    //NaN   not a number

注意：请使用 isNaN() 来判断一个值是否是数字。原因是 NaN 与所有值都不相等，包括它自己。

this是无法指向的，是默认指向调用它的那个对象；

apply()

在js中可以控制 this 指向

function getAge() {
        var now = new Date().getFullYear();
        return now - this.birth;
    };

    var yyc = {
        name:'大王',
        birth:2000,
        age:getAge
    }

    var cyy = {
        name:'老大',
        birth:1999,
        age:getAge
    }
    //通过apply将
    getAge.apply(yyc,[]);//this指向了yyc，参数为空
    getAge.apply(cyy,[]);

5.内部对象

标准对象

typeof 123
"number"
typeof 1.1
"number"
typeof '132'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1 Date

基本使用

var now = new Date();//Sun Mar 22 2020 19:24:11 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日
    now.getDay();// 星期几
    now.getHours(); //时
    now.getMinutes();// 分
    now.getSeconds();//秒

    now.getTime();//时间戳   全世界统一  1970  1.1 0:00:00 到现在的毫秒数
    console.log(new Date(1584876606480));时间戳转化为时间

转换

now = new Date(1584876606480)
Sun Mar 22 2020 19:30:06 GMT+0800 (中国标准时间)
now.toLocaleString()//注意：调用时一个方法   本地时间
"2020/3/22 下午7:30:06"
now.toGMTString()
"Sun, 22 Mar 2020 11:30:06 GMT"

5.2、JSON

json是什么？

早期，所有数据传输习惯使用 XML 文件！

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 javascript 中一切都是对象，任何 js 支持的类型都可以用 JSON 来表示;number、string …
格式：

  • 对象都用 { }
  • 数组都用 [ ]
  • 所有的键值对都是用 key:value

JSON字符串和JS对象的转化：

var user = {
        name:'yyc',
        age:3,
        sex:'男'
    }

    //对象转化为json字符串
    var jsonUser = JSON.stringify(user);

    //json 字符串转化为对象  参数为json字符串
    var obj = JSON.parse('{"name":"yyc","age":3,"sex":"男"}');//如果里面是双引号外面就用单引号

很多人搞不清楚，JSON和js对象的区别

var obj = {a:'hello',b:'h'};
vvar json = '{"a":"hello","b":"ssm"}';

6、面向对象编程

原型对象

javascript、java、c#…面向对象；javascript有些区别！
类：模板 原型对象
对象：具体的实例
在javascript这个需要换一下思维方式！
原型：

var Sutdent = {
        name: 'sss',
        age: 3,
        run: function () {
            console.log(this.name + "run ...")
        }
    };

    var lihua = {
        name: "lihua"

    };
    //原型对象
    yyc.__proto__ = Sutdent;

    var Bird = {
        fly: function () {
            console.log(this.name + "flying...")
        }
    };
    lihua.__proto__ = Bird;

function Student(name) {
        this.name = name;
    }

     // 在ES6 之前给Student新增一个方法
    Student.prototype.hello = function () {
        alert("hello");
    };

class 继承

class 关键字，实在ES6引入的
1.定义一个类，属性，方法

//定义一个学生类
class Student{
       // constructor 构造器
        constructor(name) {
            this.name = name;
        }

        hello(){
            alert("hello");
        }
    }
    var lihua = new Student("lihua");
    var xiaohong = new Student("xiaohong");
    lihua.hello();

2.继承

<script>
    //定义一个学生类
    class Student{
        constructor(name) {
            this.name = name;
        }

        hello(){
            alert("hello");
        }
    }
        class XiaoStudent extends Student{
            constructor(name , grade) {
                super(name);
                this.grade = grade;
            }

            myGrade(){
                alert('我是小学生');
            }
        }
    
    var lihua = new Student("lihua");
    var xiaohong = new XiaoStudent("xiaohong",1);
</script>

本质：查看对象原型
在这里插入图片描述

原型链

__proto__:
在这里插入图片描述

南宫梦沉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript学习笔记二 之 变量
12-11
一.关于Javascript变量声明 在Javascript中，声明一个变量 var a=1; 也可以直接 a=1; 这两种表达是有区别的， 一个是当前作用域的局部变量，另一个则是当前作用域的全局变量；... // error 二.Javascript变量作用域
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
es6箭头函数--基础的this指向
caipital的博客
08-24 372
第一组比较： const obj = { name: '张三' } function fn() { console.log(this);//{ name: '张三' } return () => { console.log(this);//{ name: '张三' } } } const resFn = fn.call(obj);//改变了fn的this指向，指向obj这个对象 resFn(); 结果显示：两次打印的this都指向obj这个对象，输出结果都是{
关于循环的一些操作
LiuBo_1999的博客
01-18 518
//找出数据出现的次数 let res = {} let aaa=["s", "s", "a"] aaa.forEach((key) => { if (res[key]) { res[key]++ } else { res[key] = 1 } }) console.log(res) //输出a:1,s:2 //文本域中输入的内容按行进行切割，之后在通过tab在进行切割 //miangzi这个是名字 //this.state.in.
let a = 1; (function a(){ a = 2; console.log(a); })();
qq_33462132的博客
12-06 5005
let a = 1; (function a(){ a = 2; console.log(a); })() console.log(a); what? f a(){...} 1 why? 首先，不存在变量提升和函数提升的问题，因为 (function (){}){} 是自执行函数，(function (){})是表达式； 这里的重点很明显是 a=2; 这行代码， 因为 {}...
【前端】JS复习、巩固
编程学习集装箱
08-09 414
参考：https://www.jianshu.com/p/b61a680d5c14 行为层（JavaScript） JavaScript 一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。 Native 原生 JS 开发 原生 JS 开发，也就是让我们按照 【ECMAScript】 标准的开发方式，简称是 ES，特点是所有浏览器都支持。截止到当前博客发布时间（2018 年 12 月 04 日），ES 标准已发布如下版本： ES3 ES4（内
Javascript 学习 笔记二
勿忘初心
08-28 1322
1、查找HTML元素         通常，通过 JavaScript，您需要操作HTML 元素。         为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：         通过id找到HTML元素（本例查找 id="intro" 元素） var x=document.getElementById("intro");         通过标签名找到HTML元素（本例
Javascript入门学习笔记
weixin_61370021的博客
04-27 4591
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
最新发布
qq_53388077的博客
03-30 1526
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 5652
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
JavaScript新手入门学习笔记
qq_43389754的博客
12-04 4万+
JavaScript介绍 1.1 前端三要素 HTML 超文本标记语言 决定了网页中的视图内容 CSS 层叠样式表 决定了网页中的视图效果 JavaScript 赋予网页动态功能 1.2 JavaScript简介 JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言 基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念 事件驱动：脚本语言代码需要由网页中的事件来触发执行 脚本语言：JS作为寄生语言，写在HTML网页中 JavaScript在1995年
JavaScript 学习笔记二 字符串拼接
12-07
在JavaScript编程语言中，字符串是不可变的，这意味着一旦创建了一个字符串，就不能修改它的内容。因此，当进行字符串拼接时，尤其是频繁拼接...此外，持续关注和学习编程语言的最佳实践，对于优化代码性能至关重要。
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
JavaScript 学习笔记（五）
10-29
在这一部分的学习笔记中，我们将深入探讨JavaScript中的本地对象、内置对象以及宿主对象，同时也会涉及作用域和关键字`this`的使用。 首先，我们来看本地对象。本地对象是JavaScript引擎自身提供的对象，它们直接由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值