JavaScript 基础语法

简介: JavaScript 基础语法

一、了解JavaScript


JavaScript 是一个万能的语言,甚至你拿来刷题都可以!


网页开发

网页游戏 ---> 比如基于 flash 的一些游戏

服务端开发

开发桌面程序

移动端app开发

but JavaScript的主战场还是 网页的前端开发。


JavaScript 是解释语言


编译语言:C / C++ / Go 先把源代码转换成 二进制的机器指令,直接让CPU执行

解释语言:JS / Shell 有对应的引擎来对代码一行一行的解释,一边解释 一边执行

Python \ Java \ PHP 半编译 半执行

而 当前 “编译” 和 “解释” 的概念也是越来越模糊


二、和 HTML 的结合方式

  • 内嵌式,把 JS 代码放到 script标签中
  • 内联式,把 JS 代码放到 标签的特殊属性中
  • 外部式,把 JS 代码单独放到 .js 文件中



三、语法

 

alert  

弹出一个警示对话框,输出内容(真实项目不建议使用,影响体验)



2ba80b83b7c542909eb5e42e7fba65af.png

47fb11d1d1f14dfb9698d678aaaf7716.png


console.log    输出控制台

注意:不是显示在页面上,而是在控制台里!!


023d46147b5b4c4ca43765838231fff8.png

ca8435e28e8746d8b94774397460128c.png


var / let  定义变量

  • var 是老式写法,里面有很多 坑!
  • let 推荐使用,无脑用就行,var 知道有这个就行!
  • JavaScript 不需要显示声明类型,而且变量的类型因为赋值可以随时改变



3fc158b7d1744701ae55b029339650d1.png


number 数字类型:

  • js 中的数字不区分 整数还是浮点数,统一都是 number
  • infinity :表示无穷大,一般就是浮点数 除以0 算出的结果(负无穷大指 无限趋近于0)
  • NaN:not a number  比如 console.log("hello"-19); 控制台就会显示 NaN


String 字符串:

  • 字符串拼接和 Java 一样
  • 字符串比较直接使用 == 即可(C语言使用strcmp   Java使用equals ,但其他大部分语言都可以直接 == 判断)


boolean 类型

js 是弱类型语言,会隐式的把 ture转换成1   false转换成0  

  • 弱类型:不同的数据区分度低 , 界限模糊
  • 强类型:不同的数据区分度高,界限清晰


undefine 无定义的

let a;
console.log(a);
//浏览器的控制台会显示 undefine 而不会报错
console.log(a+"2");
//没有定义的变量,拼接的时候会吧undefine 当成字符串
//控制台显示 undefined2


null 空

null 是一个值,访问的变量是存在的,只不过变量的值 是一个空值


==和===

==,会进行隐式类型转换(类型不同,但结果可能是true)

===,不会进行隐式类型转换(类型不同,直接就false)

注意:比较浮点数的时候有风险,浮点数不是精确的,可能会false


&& 和 ||

JS 中的 与 和 或 返回的是第一个表达式 或者 第二个表达式~~

1. let a = 10;
2. b = a||0;
3. //当左侧表达式(a) 为真,就把a的值赋给b
4. //当左侧表达式(a) 为假,就把右侧表达式(0)赋给b


四、数组

1. 创建数组

//使用字面量方式创建(常用)
var name1 = ["item1", "item2", "item3"];
//使用new关键字
var name2 = new Array("item1", "item2", "item3");


2. 获取数组元素

        var arr = [1, 2, 3, 4, 5];
        console.log(arr.length);//输出 5
        console.log(arr[4]);//输出 5
        console.log(arr[6]);//输出 undefined
        console.log(arr[-1]);//输出 undefined


3. 使用 push 进行追加元素

push 是把 元素 放到数组的最后

        var arr = [1, 2, 3, 4, 5];
        arr.push(6);
        console.log(arr[5]);//输出 6

4. splice 元素替换

  • splice(1,2)  代表从 1 下标 删除两个元素
  • splice(1,2,"111","222")  代表从 1下标 开始的 两个元素 被替换成 “111”和“222”
  • splice(1,1,"111") 代表 在下表为1 的位置 插入一个“111”元素


        var arr = [1, 2, 3, 4, 5];
        arr.splice(2, 2, "name", 66);
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }//结果为[1,2,"name",66,5]

五、函数

1. 语法格式

    //创建函数
    function 函数名(形参列表){
        方法体
        return 返回值;
    }
    //函数调用
    函数名(实参列表)         //不考虑返回值
    返回值 = 函数名(实参列表)//考虑返回值


2. 关于参数

  • 实参 > 形参    多出的参数不参与运算
  • 形参 > 实参   多出来的形参值,按undefined运算
        function sum(a,b,c){
            return a+b+c;
        }
        console.log(sum(1,2,3));// 6 
        console.log(sum(1,2));// NaN  -->not a number

3. arguments 函数表达式

        let add = function(){
            let ret = 0;
            for(let i =0;i<arguments.length;i++){
                ret+=arguments[i];
            }
            return ret;
        }
        console.log(add(1,2,3));// 6 
        console.log(add(1,2));// 3
        console.log(typeof add);// function

六、作用域

js 是全局作用域,当访问一个变量,会先查找当前的代码块,如果当前代码块没有,则继续向上级代码块寻找,一直查找到全局作用域。这种查找规则称为 “作用域链”。

    <script>
        let a = 2;
    </script>
    <script>
        console.log(a);//控制台输出 2
    </script>


七、对象

和Java对象类似,不过功能更加简化

1. 基础格式

        let student = { //注意这里的格式
            name : "小鸡子",
            age : 22,
            gender : "male",
            sing:function(){
                console.log("基尼太美");
            },
            dance:function(){
                console.log("篮球在手中,扭胯!");
            }
        }
        console.log(student.age);//控制台输出 22
        student.dance//控制台输出  篮球在手中,扭胯!


上述对象 只能有一个!但是相似的对象我们想多写几个? 怎么办?

 

 

2. 构造函数

  • JS写构造函数,习惯上首字母大写
  • 构造函数需要用到 this,这里的 this 就表示即将构造出来的对象
        function Student(name, age, gender, singMag, danceMag) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.singMag = singMag;
            this.danceMag = danceMag;
            this.sing = function () {
                console.log(singMag);
            }
            this.dance = function () {
                console.log(danceMag);
            }
        }
        let s1 = new Student("蔡徐坤", 22, "男", "基尼太美", "篮球在手中,扭胯!");
        let s2 = new Student("凡凡", 25, "男", "大碗宽面", "sexlady");


其他注意的地方:

理解 new 关键字(new 的执行过程)


现在内存中创建一个空的对象 { }

this 指向刚才的空对象(将上一步的对象作为 this 的上下文)

执行构造函数的代码,给对象创建属性和方法

返回这个对象(构造函数本身不需要 return,由 new 代劳了)


JS 的对象和 Java 的对象的区别

1. js 没有类的概念


js的对象就是 属性+方法


2. js 对象不区分“属性” 和“方法”


js 函数和普通变量一样 ,我们从创建对象的时候能发现都是   “ ,”隔开       “:”指示


3. js 没有继承


继承的本质就是“让两个对象建立关联” 或者说是“让一个对象能够使用另一个对象的 属性/方法”


而 js 使用 “原型” 机制可以实现类似的效果


相关文章
|
3月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
121 1
|
23天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
28天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
15 0
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
4月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
133 4
|
5月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
35 5
|
4月前
|
存储 JavaScript 前端开发
|
5月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
59 3
|
4月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
553 0