JavaScript基础&入门
1、快速入门
1.1 引入script
-
内部标签
<script> </script> -
外部应用
aaa.js
//......
test.html
<script src="aaa.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部引入-->
<!-- 注意：script标签必须成对出现 -->
<script src="jk.js"></script>
</head>
<body>
<!-- script标签内 JavaScript代码 一般会放在bady内的最底部 -->
<script>
alert('hello world');
</script>
</body>
</html>
1.2基本变量
基本变量只有一个var
<script>
//1 定义变量 变量类型 变量名 = 变量值
var num =1;
//2.条件控制
if(2>1){
alert("true")
}
</script>
1.3 数据类型
数值，文本，图形，音频，视频…
变量
var a = 1 //不能以数字开头
number
js不区分小数和整数，Number
123//整数
123.123//浮点数
1.223e3//科学计数法
-9932//复数
NaN //not a number
字符串
‘abc’ “abc”
布尔值
true , false
逻辑运算
&& 两个都为证，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符
=
1 "1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于(类型一样，值一样，结果为true)
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
NaN === NaN , 这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来潘多这个数是否是NaN
浮点数问题：
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
Math.abc(1/3-(1-2/3))<0.000000000001
null 和 undefined
null 空
nudefined 未定义
数组
Java中一些列相同类型的对象~，js中不需要这样
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',true,null];
new Array(1,2,3,4,5,'fdsa');
取数组下标：如果越界了，就会
undefined
对象
对象是大括号，属猪是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4,5)
var person = {
name: "hello",
age: 3
}
取对象的值
person.name
> "hello"
1.4 严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA需要支持ES6语法
'use strcit';严格检车模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量都建议使用 let
-->
<script>
'use strcit'
//全局变量
var i = 1;
//ES6 let
let a = 1;
</script>
</head>
<body>
</body>
</html>
2、数据类型
2.1 字符串
1、正常字符串我们使用单引号或者双引号包裹
*2、注意转义字符 *
\`
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascll字符
3、多行字符串编写
//tab 上面 esc下面
var msg =
`
hello
world
dfdsa
12435
`
4、模板字符串
let name = "hello world"
let age = 3;
let msg = `你好, ${
name}`
5、字符串长度
console.log(str.length)
6、字符串的可变性，不可变
7、大小写转换
//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()
8、substring
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3) //[1,3)
2.2 数组
Array可以包含任意的数据类型
var arr = [1,2,34,45,5,] //通过小标取值和赋值
arr[0]
arr[0] = 3
1、长度
arr.length
假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1" 和 数字1是不一样的
3、slice() 截取Array的一部分，返回一个新数组，类似于string中的substring
4、push,pop（）
push: 压入尾部
pop: 弹出尾部的一个元素
5、unshift(),shift() 头部
unshift: 压入到头部
shift： 弹出头部的一个元素
6、排序sort
arr.sort()
7、元素反转
arr.reverse()
[1,2,3] → [3,2,1]
8、concat()
(3)["c","b","a"]
arr.concat([1,2,3])
(6)["c","b","a",1,2,3]
arr
(3)["c","b","a"]
注意：concat（）并没有修改数组，只是会返回一个新的数组
9、链接符join
打印拼接数组，使用特定的字符串连接
10、多维数组
arr = [[1,2],[3,4],["13","14"]]
arr[1][1]
4
数组：存储数据(如何存，如何取，方法都可以自己实现)
2.3 对象
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值，
属性名：属性值
}
var person = {
name: "zhb",
age : 18,
email : "3187311481@qq.com",
score: 0
}
js中对象，{……}表示一个对象，键值对描述属性xxx:xxxxxxx,多个属性之间用逗号隔开，最后一个逗号不加逗号哦
JavaScript中的所有键都是字符串，值是任意对象
1、对象赋值
person.name = "zhb"
"zhb"
person.name
"zhb"
2、使用一个不存在的对象属性，不会报错！undefined
person.haha
undefined
3、动态的删减属性
delete person.name
true
person
4、动态的添加,直接给新的属性添加值即可
person.haha = "haha"
"haha"
person
5、判断属性值是否在这个对象中！
'age' in person
true
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
2.4流程控制
if判断
var age = 3;
if(age > 3){
alert("haha");
} else{
alert("┭┮﹏┭┮");
}
while循环,避免程序死循环
var age = 3
while(age<100){
age = age + 1
console.log(age)
}
//避免while(true) 死循环
for循环
for (let i = 0; i < 100; i++) {
console.log(i);
}
forEach循环
var h = [1,23,32,45,324,53,53,2]
h.forEach(function (value) {
console.log(value)
})
2.5 Map 和 Set
ES6新特性
Map:
var map = new Map([['tom',100],['jack',97]]);
var name = map.get('tom');//通过key获得value
map.set('haha',13245);//添加值
map.delete("haha");//删除
console.log(name)
Set:无序不重复的集合
set.add(1);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含这个元素
2.6 iterator
遍历map
var map = new Map([['tom',100],['jack',97]]);
for (let x of map){
console.log(x)
}
遍历数组
var map = [1,23,4,]
for (let x of map){
console.log(x)
}
遍历set
var set = new set ([1,23,4,])
for (let x of set){
console.log(x)
}
3、函数
3.1定义函数
定义方式一
绝对值方法
function ab(x){
if(x>=0){
return x
} else {
return -x
}
}
一旦执行到return代表函数结果，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式二
var a = function(x){
if(x>=0){
return x
} else {
return -x
}
}
这是一个匿名函数，但是可以吧结果赋值给a，通过a就可以调用函数
方式一和方式二等价
调用函数
a(10) //10
a(-10) //10
参数问题：JavaScript可以串任意个参数也可以不传递参数
rest
以前：
if(argument.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 参数只能写在最后，不许使用…标识
3.2 变量的作用域
局部作用域
function f() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);// i出了作用于还可以使用
}
function f() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);// i出了作用于还可以使用
}
ES6 let关键字，结局了局部作用域的冲突问题！
建议大家都使用let去定义局部作用域
常量 const
在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
var pi='3.14'
console.log(pi);
pi = '242'//可以改变这个值
console.log(pi);
在ES6引入了常量关键字const
const pi='3.14'//只读变量
console.log(pi);
pi = '242'//可以改变这个值
console.log(pi);
3.3 方法
var yehl = {
name:"叶鸿凌",
bitrh: 2002,
//方法
age : function () {
// 今年 - 出生年月
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
//属性
yehl.name
//方法,一定要带括号()
yehl.age()
this.代表什么？ 把代码拆分开如下
function getAge() {
// 今年 - 出生年月
var now = new Date().getFullYear();
return now - this.bitrh;
}
var yehl = {
name:"叶鸿凌",
bitrh: 2002,
age: getAge
}
//yehl.age() 可以 是yehl调用的他
//getAge() NaN window是调用他的
this是无法指向的，是默认指向调用它的对象；
apple
在js中可以控制this的指向
function getAge() {
// 今年 - 出生年月
var now = new Date().getFullYear();
return now - this.bitrh;
}
var yehl = {
name:"叶鸿凌",
bitrh: 2002,
age: getAge
}
getAge.apply(yehl,[]);//this，指向了yehl，参数为空
4、内部对象
标准对象
typeof 123
"number"
typeof "13"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {
}
"object"
4.1 Date
基本使用
var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0~11 月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
4.2 JSON
json是什么
早期，所有的数据传输习惯使用XML文件！
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象，任何s支持的类型都可以用son来表示；
格式
- 对象都用{}
- 数组都用[]
- 所有的键值对 都是用key.value
JSON 字符串 和JS对象的转化
var user = {
name:"jfdlksa",
age: 3,
sex: "男"
}
//对象转化为json字符串
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象 参数为json字符串
JSON.parse('{name: "jfdlksa", age: 3, sex: "男"}')
4.3Ajax
- 原生的js写法 xhr异步请求
- jQuery封装号的方法his ${"#name"}.agaj("")
- axios请求
5、 面向对象编程
5.1 什么事面向对象
javascript、 java、 c#、 … 面向对象 ：javascript有些区别
类：模板
对象：具体的实例
在JavaScript这个需要大家换一下思维方式
原型：
var user = {
name:"jfdlksa",
age: 3,
run : function () {
console.log(this.name + "run");
}
}
var xm = {
name : "xm";
}
//小明的原型是user
xm._proto_ = user;
ES6之前的
function student(name) {
this.name = name;
}
//给student新增一个方法
student.prototype.hello = function () {
alert("hello")
}
class继承
class 关键字实在ES6引入的
//ES6
//定义一个学生的类
class student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
var xiaoming = new student("小明");
var xiaoming = new student("小红");
xiaoming.hello()
继承
<script>
//ES6
//定义一个学生的类
class student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
class xiaoxue extends student{
constructor (name,grade){
super(name)
this.grade = grade;
}
mygrade(){
alert("我是一个小学生");
}
}
var xiaoming = new student("小明");
var xiaohong = new xiaoxue("小红",1);
</script>
原型链
_ proto _
转载：https://blog.csdn.net/HongLingya/article/details/115495831