JavaScript入门教程

大润发第一渔夫

已于 2022-08-07 11:05:26 修改

阅读量558

点赞数

文章标签： javascript 前端开发语言

于 2022-08-03 14:26:36 首次发布

本文链接：https://blog.csdn.net/qq_69401634/article/details/126139670

版权

文章目录

一.什么是JavaScript
二.引用方法
三.数据类型和运算符
四.严格检查模式
五.字符串详解
六.数组详解
六.函数
七.var,let和const
八.方法
九.内部对象
十.面向对象

本文为JavaScript入门教程第一部分，包括JavaScript概述、JavaScript引用方法、JavaScript的数据类型和运算符、JavaScript的严格检查模式、以及JavaScript字符串和数组的详解

一.什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

主要功能:

嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

二.引用方法

<script> </script>标签写在<head> 或<body> 末尾

1.内部引用

<script>
<!--这里写JavaScript代码-->
</script>

2.外部引用

<script src="这里写.js文件路径"></script>

三.数据类型和运算符

变量

let a = 1;

number

js不区分整数和小数
NaN:表示不是一个数字
infinity:表示无限大

字符串

'abc’和"abc"

布尔值

true
false

逻辑运算符

比较运算符

== 等于,类型不一样,值一样也会判断true
=== 绝对等于,类型和值都一样才会判断true
NaN和任何数都不相等,包括自己,只能通过isNaN(值)判断这个值是否是NaN
浮点数比较会出现精度损失,避免使用浮点数比较

null和undefined

null:空
undefined:未定义

数组

使用中括号括起
数组值不必为相同类型
下标越界显示undefined

对象

定义方法:

var person = {
name:"yufu",
age:3,
tages:[1,2,'js']
}

取值:

person.name
>yufu

四.严格检查模式

<!--必须写在第一行-->
'use strict';

严格检查模式，预防avascript的随意性导致产生的一些问题

五.字符串详解

1.多行字符串编写

//tab 上面esc键下面 ``
var msg =
`hello 
world
yufu`

2.模板字符串

let name = "yufu";
let age = 19;
let msg =`你好呀，${name}`

3.常用方法和属性

str.length//打印字符串长度
str[1]//获取字符串第1个位置的值
str.toUpperCase()//转化为大写
str.toLowerCase()//转化为小写
str.indexOf('s')//获取指定元素的下标
str.substring(1,3)//截取第一个到第三个元素,前闭后开,只有一个参数时表示从参数位置到末尾

六.数组详解

数组可以包含任意数据类型

常用属性和方法:

arr.length//数组长度,可以通过等于号赋值,数组变大则多出空项,变小则去掉后面项
arr.indexof(2)//通过元素获得下标索引
arr.slice()//截取一部分,返回新数组
arr.push(a)//在尾部添加元素a
arr.pop()//弹出尾部的一个元素
arr.unshift(a)//在头部添加元素a
arr.shift()//弹出头部的一个元素
arr.sort()//排序
arr.reverse()//反转
arr.concat([1,2,3])//拼接数组并形成新数组,原数组不会变
arr.join('-')//打印数组,元素间使用特定字符连接

3.对象详解

定义方法:若干个键值对

let 对象名{
属性名:属性值,
属性名:属性值,
属性名:属性值
}

Js中对象，{…}表示一个对象，键值对描述属性xxx:xxx，多个属性之间使用逗号隔开，最后一个属性不加逗号!
JavaScript中的所有的键都是字符串，值是任意对象!

1.对象赋值:

对象名.属性=值//可以给原本没有的属性赋值

2.使用不存在的属性不会报错,而是提示undefined

3.删减属性

delete 对象名.属性

4.判断一个属性是否在这个对象中

'属性名' in 对象名//该属性可能是继承父类的
对象名.hasOwnProperty('属性')//判断是否是该对象本身的属性

4.循环详解

forEach循环

var age = [10,20,30,40,50];
age.forEach(function (value) {
console.log(value)
}

for…in循环

var age = [10,20,30,40,50];
for(var num in age){
console.1og(age [num])
}

for…of循环(可以遍历Map和Set)

var age = [10,20,30,40,50];
for(var num of age){
console.1og(num)
}

5.Map和Set

Map:

let map=new Map([['xiaomin',100],['xiaohua',90],['xiaohon',80]])
let name=map.get('xiaomin');//通过key获得value
map.set('xiaoli',90);//修改或新增
map.delete('xiaohua');//删除

Set:无序不重复的集合

set.add(2)//新增
set.delete(1)//删除
set.has(3)//判断是否包含特定值

六.函数

定义方法:

function 函数名(形参){...}//方法1
var 函数名 = function(形参){...}//方法2:匿名函数

参数问题: JavaScript可以传任意个参数

参数不存在时处理方法:手动抛出异常

var fun = function(x){
  if(typeof x !=='number'){
    throw 'Not a number'
  }
}

参数超出时处理方法:可以捕获多余参数

方法一:arguments

arguments代表所有传递进来的参数,是一个数组

举例:打印所有传递进来的参数

var fun = function(x){
for(let i=0;i<arguments.length;i++)
  {console.log(arguments[i]);}
}

缺陷:会连同原本所需的参数一起处理

方法二:rest

rest是es6新特性.获取除了已经定义的参数之外的所有参数

举例:打印多余参数

var fun = function(x,...rest){
console.log(rest);
}

七.var,let和const

关键字	作用域	特点
var	变量在局部/全局任何地方被声明，在对应的局部/全局的其他任何地方都可以直接使用(甚至在声明之前使用)，但是使用时若未定义，则出现undefined。函数作用域	可以反复修改
let	变量只能在被声明语句的后面才可以使用。块作用域	可以反复修改
const	变量只能在被声明语句的后面才可以使用。	不可修改

八.方法

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

var fun = {
  name : 'yufu'，
  bitrh: 2000,
  //方法
  age: function() {
  //今年-出生的年
  var now = new Date().getFu17Year(;
  return now-this.bitrh;
} 
//属性
fun.name
//方法,一定要带()
fun.age()

apply:

var fun = function(){
  return this.name;
}
var yufu={
  name:'yufu'
}
//现有一个函数fun和对象yufu
fun.apply(yufu,[]);
//使用apply关键字,作用为控制函数中的this指向
//此例为fun函数中的this指向yufu,参数为[]

九.内部对象

标准对象:

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

Date:

基本使用:

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)
now. getFu17Year();//年
now.getMonth();//月0~11 代表月
now. getDate();//日
now. getDay();//星期几
now.getHours();// 时
now. getMinutes();//分
now. getseconds();//秒
now.getTime();// 时间戳全世界统一19701.1 0:00:00毫秒数
console.log(new Date(1578106175991))//时问戳转为时间

转换:

now = new Date(1578106175991)
sat Jan 04 2020 10:49:35 GMT+0800(中国标准时间)
now.toLocalestring()
"2020/1/4上午10:49:35"
now.toGMTstring()
"sat，04 Jan 2020 02:49:35 GMT"

JSON:

json是什么:

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

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

在JavaScript 一切皆为对象、任何js支持的类型都可以用JSON来表示;
格式:

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

json字符串和js对象转换:

var user = {
  name : "yufu"，
  age: 18，
  sex: '男'
}
//对象转化为json字符串 { "name " : "yufu" , "age " : 18 , "sex":"男"}
var jsonUser = JSON.stringify(user);
//json字符串转化为对象参数为json字符串
var obj = JSON.parse( ' { "name " : "yufu" , "age" : 18, "sex":"男"}');

十.面向对象

原型:使用语句对象a.__proto__=对象b 表示对象a的原型为对象b,即对象a可以使用可以对象b中的方法,对象b可以理解为java中的父类

举例:

var Student={
  study:function(){
    console.log(this.name+"study...")
  }
};
var Teacher={
  teach:function(){
    console.log(this.name+"teach...")
  }
};
var yufu={
  name:"yufu"
};
//当对象yufu的原型是Student时,yufu可以使用Student中的study方法
yufu.__proto__=Student;
yufu.study();
//当对象yufu的原型是Teacher时,yufu可以使用Teacher中的teach方法
yufu.__proto__=Teacher;
yufu.teach();

class:

//定义一个学生的类
class Student{
constructor (name){
this.name = name;
}
hello(){
alert('he11o')
}
var xiaohong=new Student("xiaohong");
var xiaohua=new Student("xiaohua");

继承:

class XiaoStudent extends Student{
  constructor(name,grade){
    super(name);
    this.grade=grade;
  }
  myGrade()}{
    alert('我是小学生')
  }
}

本质:查看对象原型

原型链:任何对象的原型都是object,object的原型最终也是object;一个对象的原型是一个闭合链

大润发第一渔夫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫