目录
快速入门
引入javascript文件
1.内部标签:
<script></script标签>
2.外部引入
外部引入
<script src="文件路径"></script>
语法入门
基本语法
//网页弹窗
alert("hello world");
//定义变量 var 变量名 = 变量值
var num = 1;
//条件控制
//if语句(与Java相同)
if(2<1){
alert("yes");
}else{
}
数据类型
数值,文本,图形,音频,视频。。。。
// number 数值型
//js不区分小数和整数
NaN //not a number 不是一个数字
Infinity //无限大
//字符串
'abc'
"abc"
//布尔值
true,false
//逻辑运算
&& || !
//比较运算符
=
== //若类型不一样但是结果一样,也会判断为一样,如1==="1"会判断为true
=== //绝对等于,类型益阳值一样,才为true
//NaN===NaN,NaN与所有值都不相等
//使用 isNaN()方法测试某数值是否为NaN
//浮点数存在精度丢失,尽量避免浮点数运算
Math.abs(1/3-(1-2/3)<0.000000001);//结果为true,用此判断浮点数是否相等
//null和undefined
//null 空值 undefined 未定义
//数组(中括号) 可以是不相同类型的对象
var arr = [1,2,3,'null',true,NaN];
new Array(1,2,3,'hello');
//取数组下表越界了,就会显示undefined
对象(大括号)
//属性间用逗号隔开,最后一个不用加逗号
var person={
name :"songyi",
age:3,
tags:["js",'java','wed'];
}
//取值
person.age
控制台调试
Console 控制台(调试javascript)
在控制台的处输入javascript代码可以执行
如:
console.log(变量名) 打印变量值
alert(变量名) 打印输出
Sources 源码(打断点)
在界面调试代码(可打断点,debug,刷新即为运行)
Network 网络(刷包)
Application 应用(查看cookie)
严格检查模式
预防script的随意性造成的问题
ES6中,局部变量用let定义
let a = 1;
严格检查模式:在代码第一行加入一句'use strict',前提是编译软件支持es6
'use strict'
数据类型
字符串
1.正常字符串用单引号或者双引号包裹
2.使用转义字符 \ 来打印特殊字符
\n 换行
\' 打印单引号
\t
\u4e2d 中文“中”字
\x41 Ascll字符
3.多行字符串编写
使用``(tab键上侧)
var msg = `
???
Nihao
颜色
`
4.模板字符串
let name = "sy";
let msg = `你好呀,${name}`
5.字符串长度
.length 方法输出字符串长度
6.字符串的可变性:不可变
7.大小写转换:
.toUpperCase(); 大写
.toLowerCase();小写
8.获取指定字符串的下标
.indexOf('t');
9.截取字符串
.substring(1);从第一个截到最后一个
.substring(1,3); 包含前边不包含后边即[1,3)
数组
Array可以包含任意的数据类型
var a=[1,2,3,'1',true]
1.长度
若给数组赋值,数组大小就会发生变化,
若大于原数组,就会赋空值
如果小于原数组,元素丢失
2.indexOf(元素),通过元素获得下标索引
区分字符串和数字0-9;
3.slice()截取数组的一部分,返回一个数组
可放两个参数,如slice(1,3); 范围为[1,3)
4.push,pop 尾部
.push() 数据加入到尾部
pop() 弹出尾部一个元素
5.unshift()。shift() 头部
unshift() 在头部加入元素
shift() 弹出头部元素
6.排序 sort()
7.元素反转排序 reverse()
8.concat()
var a =[1,2,3]
undefined
a.concat([3,4,2])
(6) [1, 2, 3, 3, 4, 2]
a
(3) [1, 2, 3]
concat没有修改数组,只是返回一个新的数组
9.连接符join
打印拼接数组,使用特定的字符串链接
(3) [1, 2, 3]
a.join('`')
"1`2`3"
10.多维数组
arr = [[1,2][3,4]["3","hello"]]
arr[1][1]
4
对象
若干个键值对
var 对象名{
属性名:属性值,
属性名:属性值
}
1.对象赋值
persion.name = 'qinjiang'
2.使用一个不存在的对象属性不会报错,会提示undefined(未定义)
3.动态的删减属性
var s = {
name = "sy",
age = 19
}
delete s.name //动态删除
true
4.动态添加
var s = {
name = "sy",
age = 19
}
s.sex = '男'
true
5.判断属性是否在这个对象中 '属性名' in 对象名 (包括父类的属性)
属性名 用引号包住
'name' in s
true
6.判断属性是否是其自身拥有而不是其父类的或者不存在的
hasQwnProperty();
流程控制
if,while,for语句,与java相同
forEach循环
var a =[12,424,246,6567,234]
a.forEach(function (value)){
console.log(value)
}
for in循环(获得下标)
var g =[1,3,4,2,426,36,365,5]
for(var num in g){
if(g.hasOwnProperty(num){
console.log(g[num])
}
}
Map 和Set
map
var map = new Map([['tom',100]['jack',90]['sy',110]]);
var name = map.get('tom');//通过key获得value
map.set("admin",150);
set:无序不重复集合
var set =new Set([3,3,2,1,4]);//会直接去重
set.add(5);//添加
set.delete(2);//删除
console.log(3 in set);//判断值是否在set集合中 1
console.log(set.has(2));//判断值是否在set集合中 2
Array.from(set);//输出set所有元素
iterator迭代
遍历数组
var arr =[1,2,3,4]
for (var x of arr){
console.log(x);
}
遍历set
var set =new Set([3,3,2,1,4]);//会直接去重
for (var x of set){
console.log(x);
}
遍历map
var map = new Map([['one',1],['two',2],['three',3],['four',4]]);//Map集合
for (var x of map){
console.log(x);
}
函数
方法和函数的区别:
方法在类中
函数在类外
定义函数
方式1:
function 函数名(参数){
函数体
}
function abc(x){
if(x>=0){
return x;
}else{
return -x;
}
}
//调用
abc(10);
如果没有return,也会返回结果为undefined
方式2:
var 函数名 = function(参数){
函数体
}
var abc = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
是一种匿名函数,但是可以吧函数值赋给abc,调用方式和方式一相同
参数问题:
传入方法的参数类型如何过滤
function abc(x){
//手动抛出异常
if(typeof x!=='number'){//判断参数是否是number类型
throw 'not a number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
//调用
abc(10);
第二种:
arguments 关键字
代表传递进来的所有的参数,是一个数组。
function abc(x){
for(var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
//调用
abc(10);
问题:
arguments会包含所有参数,有时候想使用多余的参数进行操作。需要排除已有参数:使用rest
rest
获取除了已经定义参数之外的所有参数
function aaa(a,b,...rest) {
console.log(a);
console.log(b);
console.log(rest);
}
rest参数只能写在最后边,必须用 ... 标识;
变量的作用域
var定义的变量是有作用域的
1.在函数体中声明,则函数体外不能使用(想要使用需要 闭包)
2.两个不同函数定义的相同名变量不冲突
js的执行引擎,会先初始化变量,所以建议编程时把所有变量的声明都放在头部
全局函数
默认所有的全局变量都会绑定在windows对象下
var x = 1;
alert(windows.x);
alert()函数本身也是一个windows变量
js只有一个全局作用域,任何变量(函数),假设没有在函数作用范围内找到,就会向外查找,在外面找到就使用,如果没有找到继续向外,直到windows,若还是没有找到,则报错refrenceError
规范
所有全局变量会绑定到windows,若不同的js文件使用相同的全局变量,则就会冲突,为了减少冲突,产生了规范:
唯一全局变量:
var SY = { }
//定义全局变量
SY.name="songyi";
SY.age = 20;
把自己的变量全部放入自己定义的唯一空间名字中,降低全局命名的冲突
局部作用域 let
局部变量建议使用let定义。
let a = 1;
常量const
const PI = 3.14;
方法
定义方式:
把函数放在对象内
var songyi= {
name: 'songyi',
bitrh:2020,
//方法
age:function () {
var now =new Date().getFullYear();//获取当前年份
return now-this.bitrh;
}
}
上述代码中this关键字代表什么?上述代码拆开如下:
var songyi= {
name: 'songyi',
bitrh:2020,
age:getage
}
function getage() {
var now =new Date().getFullYear();//获取当前年份
return now-this.bitrh;
}
this指向调用它的人,不能直接调用getage,因为直接调用会指向windows。
apply
在js中可以控制this的指向
var songyi= {
name: 'songyi',
bitrh:2020,
age:getage()
//方法
}
function getage() {
var now =new Date().getFullYear();//获取当前年份
return now-this.bitrh;
}
getage.apply(songyi,[]);//this指向了songyi,参数为空