提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript快速入门

JavaScript入门 快速
2023-06-13 09:15:52 时间

目录

什么是JavaScript？

JavaScript是世界上最流行的脚本语言 Javascript的历史 大部分浏览器支持es5代码，开发环境–线上环境，版本不一致

在HTML中写JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    alert('hello');
  </script>
</body>
</html>

单独写JavaScript

外部引入

<script src="js/hello.js"></script>

注释

  1. 内部
  1. 外部
//。。。
  1. 多行注释
/*
*
*
*
*/

基本语法入门

变量

弱类型语言

var num = 1;
var name = qiumingshan;

条件控制

if(2>1){
      alert('true');
    }

规则和c++一样，也允许嵌套

if(2>1){
      if(3>2){
        alert('3max');
      }
if(scor>=60){
      if(score>60&&score<70){
        alert('及格');
        if(score>=70&&score<80){
          alert('良好');
          if(score>=80&&score<90){
            alert('优秀');
            if(score>=90){
              alert('非常优秀')
            }
          }
        }
      }
    }else {
      alert('不及格');
    }

调试

用浏览器调试F12，进入调试，

可以在控制台，来打印

console.log(score)

相当于cout<<score<<endl;

断点

可以一步一步来看

数据类型

数值，文本，图形，音频，视频……

number： js不区分小数和整数

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN//not a number
Infinity//表示无限大

字符串

‘abc’ “abc”

转义字符

字符串拼接：

    let name = "qinjiang";
    let age = 3;
    let msg = 'hello,${name}';

字符串的长度

name.length

字符串的可变性，不可变，和Java，c++一样

大小写转换：

//这里是方法，不是属性了
name.toUpperCase()
name.toLowerCase()

字符串截取：

[)
name.substring(1)//从第一个到最后一个
name.substring(1,3)//[1……3）

布尔值 true，false

逻辑运算

&&
||
！

与c++或Java一样

比较运算符

=
==//等于，类型不一样，值一样，也会判断为true
====//绝对等于（类型一样，值一样，结果为true

NaN === NaN，这个与所有数字都不相等，包括它自己

null和undefined

null空 undefined未定义

数组

JS中可以是一系列不同类型的对象

var arr = [1,2,3,'hello',null,true]
  1. 长度
arr.length

假如给arr.length赋值，数组大小就会发生变化~

  1. 通过下标来取值赋值

3.slice()截取Array的一部分，返回一个新数组

也是[) 包头不包尾

  1. push,pop

push，尾部压入 pop，尾部弹出

  1. unshift（），shift（）头部

unshift（）头部插入，shift（）尾部插入

  1. 排序sort arr.sort()
  2. 元素反转 arr.reverse()
  3. concat() 拼接

concat（）

  1. 连接符号join 打印拼接数组，使用特定的字符串连接
  1. 多维数组 
arr = [[1,2],[3,4],[5,6]];
arr[1][1];
4

对象 对象是大括号，数组是中括号

var person = {
	name: "jj",
	age: 18,
	work: ['student','cs']
}

每个属性之间使用逗号，最后一个不需要添加逗号

var 对象名 = { 属性名： 属性值， 属性名：属性值， 属性名：属性值 }

键值对描述属性xxx ：xxx，多个属性之间使用都逗号隔开，最后一个属性不加逗号

  1. 对象赋值

person.name = “qin”

  1. 使用一个不存在的对象属性不会报错
  2. 动态的删减属性

delete person.name

  1. 动态的添加

person.hhh = “hahaha”;

  1. 判断属性值是否在这个对象中
'age' in person   //判断age是否在person中

Map和Set ES6才出来

map

let map = new Map([['tom','99'],['jake','100']]);
    let name = map.get('tom');//通过get获得value
    console.log(name);

set

无序不重复的集合

var set = new Set([3,1,1,1,1];//set可以去除重复
set.delete(1);
console.log(set.has(3));

iterator

var set = Set([6,7,8]);
for(let x of set){ //循环
	console.log(x);
}

函数

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

函数中的代码将在其他代码调用该函数时执行：

  1. 当事件发生时（当用户点击按钮时）
  2. 当 JavaScript 代码调用时
  3. 自动的（自调用）

当 JavaScript 到达 return 语句，函数将停止执行。 如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。 函数通常会计算出返回值。这个返回值会返回给调用者：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

let，const，var

ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。

题目1：
var a = 99;            // 全局变量a
f();                   // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后，默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 输出结果：
undefined
10
99

ES6可以用let定义块级作用域变量

在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。 ES6新增的let，可以声明块级作用域的变量。

{ 
  let i = 9;     // i变量只在 花括号内有效！！！
} 
console.log(i);  // Uncaught ReferenceError: i is not defined

方法

把函数放到对象的里面，对象只有俩个东西： 属性和方法

var person = {
	name: 'ymm',
	birthday: 2020,
	//方法
	age: function(){
		var now = new Date().getFullYear();
		return now - this.birthday;
	}
}

person.name;//属性
person.age();//方法一定要带（）

日期Date

//data对象
var now = new Date();
now.getHours();

对应的年，月，日我就不再赘述

这里要说一个时间戳 电脑本地的时间可以修改，但是时间戳全世界都是统一的，

1970 .1. 1 0：00：00毫秒数

now.getTime();
//时间戳转换为时间，，1651157723736
console.log(new Date(1651157723736));

JSON对象

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

  1. JSON是一种轻量级的数据交换格式。
  2. 简洁和清晰的层次结构使得ISON 成为理想的数据交换语言。
  3. 易干人阅读和编写，同时也易干机器解析和生成，并有效地提升网络传输效率，

在JS中一切代码皆为对象，然后js支持的类型都可以用JSON来表示

格式：

  1. 对象都用{}
  2. 数组都用【】
  3. 所有的键值对都用key:value

JSON字符串JS对象的转化

var person = {
      name: "ymm",
      age: 18,
      sex: 'man'
    }

    //对象转换为JSON字符串
    var jsonPerson = JSON.stringify(person);

    //JSON字符串转换为对象
    var obj = JSON.parse('{"name":"ymm","age":3,"sex":"man"}');

面向对象编程，与其他语言的区别

类：模板 对象：具体的实例

可以说类是对象的抽象，对象是类的具体实现，也可以想为，女生是一个类，你的女朋友是这个大类中的具体一员

JS中： 不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）—–es6以前是这样的。所以es5只有使用函数模拟的面向对象。

var Car = {
    color: 'red',//车的颜色
    wheel: 4,//车轮数量
}
var Car2 = {
    color: 'blue',
    wheel: 4,
}
alert(Car.color);//red
  1. 原始模式：这样的写法有两个缺点，一是如果多生成几个（100个！）实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出没有什么联系。
function createCar(color,wheel) {
    return {
        color:color,
        wheel:wheel
    }
}
//然后生成实例对象，就等于是在调用函数：
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");

alert(cat1.color);//红色
  1. 原始模式的改进：通过写一个函数，解决代码重复的问题。
function createCar(color,wheel){//createCar工厂
    var obj = new Object;//或obj = {} 原材料阶段
    obj.color = color;//加工
    obj.wheel = wheel;//加工
    return obj;//输出产品
}
//实例化
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");

alert(cat1.color);//红色
  1. 工厂模式
function CreateCar(color,wheel){//构造函数首字母大写
    //不需要自己创建对象了
    this.color = color;//添加属性，this指向构造函数的实例对象
    this.wheel = wheel;//添加属性

    //不需要自己return了
}

//实例化
var cat1 = new CreateCar("红色","4");
var cat2 = new CreateCar("蓝色","4");
alert(cat1.color);//红色
  1. 构造函数模式：为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。 所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。加new执行的函数构造内部变化：自动生成一个对象，this指向这个新创建的对象，函数自动返回这个新创建的对象

ES6面向对象class继承

直接定义，以学生类举例：

class Student{
	constructor(name){
		this.name = name;
	}
	hello(){
		alert('hello');
	}
}
//继承
class pupil extends Student{
	constructor(name,grade){
		super(name);
		this,grade = grade;
	}
	myGrade(){
		alert('I am a pupil');
	}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new pupil("xiaohong");
xiaoming.hello();

最后

本文就到这里，由于作者能力有限，如有纰漏还请指出，不胜感激！

相关文章