使用环境与Hello World(本课程使用codesandbox演示)
JavaScript最大的优点是可以直接执行在浏览器中
·本地生成一个空的html文件,然后通过script标签引入js文件
·一些简单的语句,可以直接使用开发者工具的console面板
·输出经典的 “Hello,world”
·console.log : 将值输出到控制台上
·document.body.innerHTML : 将网页body元素的内容替换为新的HTML内容
·基本数据类型与类型转换:(1)字符串string:通过单引号或双引号定义。
(2)数字number:只有一种类型,浮点数
(3)布尔类型boolean:true或false
(4)typeof操作符
(5)undefined与null
(6)自动类型转换: +、 == 与 ===
(7)falsy值:false 0空字符串 null undefined NaN
//在js中只有一种类型:浮点数
console.log(1 == 1.0) //所以1.0和1是相等的
//在js中,没有单独的char类型(双引号或单引号里面写一个或多个字符都认为是一个字符串),可用单引号或双引号。
console.log("hello world" == 'hello world');
console.log('say "hello world"'); //在单引号里面加双引号
console.log("say 'hello world'"); //在双引号里面加单引号
console.log('say \'hello world\''); //在单引号里面使用单引号就需要转义,用反斜杠再加单引号就不 会被认为是终止字符
//true false
console.log(1 > 0,true == false);
//typeof操作符(获取值的类型)
console.log(typeof 1, typeof(''), typeof false); //输出结果为:number string boolean
//两个空值,undefined 与 null
//访问一个没有赋值过的变量(属性),会返回undefined
console.log(undefined,typeof undefined); //输出结果为:undefined"undefined"
//使用null,通常是想强调说,这里本应该是一个对象,但这个对象还不存在的时候
console.log(null,typeof null); //输出结果为:null"object"
//字符创与别的类型相加会转换为字符串
console.log(1 + "1",null + "is not" + undefined); //输出结果为:11 null is not undefined
// + 也可用于字符串转数字
console.log(+'1', +(1 + '1'), +'不是一个数字'); //输出结果为:1 11 NaN
//NaN表示一个数字运算出错时的处理,它是一个number
console.log(typeof NaN); //输出结果为number
//不建议使用 ==,因为会进行类型转换再进行比较
console.log(
1 == 1,
1 == "1",
1 == true,
0 == false,
'' == false,
null == undefined,
); //它们的返回结果都是true
//最好使用 === 三等号,不相等就是 !== ,它们不转换类型
console.log(
1 === "1",
1 === true,
0 === false,
null === undefined,
); //它们的返回结果都为false
//false值:在循环或判断语句中期望遇到一个布尔值
if(false || 0 || '' || undefined || null || NaN) //如果被给与这里面的值,会被认为是一个false
{
console.log('不应该走到这里!!!'); //若给的是1或任一true的值则会调到else
}
else
{
console.log('false 值');
} //输出结果为:false值
·变量定义:(1)使用let、const,不建议使用var
(2)变量名:必须是合法的标识符,不能以数字开头
(3)表达式:返回一个值,与语句区别
(4)动态类型:类型运行时可变,可动态检测
(5)使用let或const会生成块级作用域
(6)变量屏蔽与作用域
let a = 1 +2;
//let是关键字,注意不是使用int、string之类的类型关键字
//a是变量名(必须是合法标识符,不能以数字开头或包含空格)
// = 是赋值符
//1 + 2 是表达式
//上面整行是一个语句(语句和表达式的区别在于:表达式返回一个值,而语句他本身就是一条语句不会返回任何东西)
//在同一个作用域下,同一个变量名不能重复声明
//变量可以修改类型
a += 3;
console.log(typeof a); //输出结果为number
// a 不限制类型
a = "33";
console.log(typeof a); //输出结果为string
//也可以用const定义变量,但由const定义的变量的值不能改变
const b = 1;
//使用方括号{},定义块级作用域,并且在不同作用域下同一个变量名可以重复声明
//内部作用域的优先级更高,为屏蔽掉外部但不会删掉。
let num = 100;
let str = ".";
console.log('作用域1',num,str);
{
let str = "-";
console.log('作用域2',num, str);
{
let num = 200;
num = 10;
str += "-";
console.log('作用域3',num, str);
}
}
//作用域不会相互叠加,也不会覆盖,永远优先使用内层直到访问不到才会使用外层
let sum = 0;
for(let i = 0; i < 3; ++i)
{
for(let i = 0; i < 3; ++i)
{
sum += i;
}
}
console.log(sum);
·函数:(1)函数声明:function关键字、参数、返回值
(2)函数声明提升
(3)函数表达式
(4)箭头函数
(5)函数作为值
(6)闭包与作用域
实践:输出任意层级的文件树
//函数作用域还包括参数
function add(a,b)
{
return a + b;
}
console.log(typeof add);
console.log(add(1.2));
function voidFunc(a,b)
{
console.log('voidFunc 参数',a,b); //等于return undefined
}
console.log(voidFunc(1,2));
//传入更多、更少的参数
voidFunc()
voidFunc(1);
voidFunc(1,2,3);
//function addWithDefoult(a,b)
{
if(typeof b === 'undefined')
{
b = 0;
}
if(typeof a === 'undefined')
{
a = 0;
}
}
//js可以先调用再声明
console.log(minius(10,2));
//function 定义提升(在js里会把所有定义的函数进行提升到文件头部,所以调用可以不用考虑所在位置)
function minius(a,b)
{
return a - b;
}
//也可以把函数赋给一个变量,后续通过调用变量来使用函数(这种方法无关定义提升,必须先声明后调用)
const minius1 = function minius2(a,b){
return a - b;
} ;
//箭头函数(等于号加大于号)
const minius4 = (a,b) => {
return a - b;
};
//如果函数体只是一个表达式,可以把大括号和return省略掉
const minius5 = (a,b) => a - b;
//如果只有一个参数,可以把小括号省略掉
const returnSelf = x => x;
//函数作为参数
function binaryOperator(Operand1,Operand2,func){
const res = func(operand1,operand2);
console.log(res);
return res;
}
binaryOperator(2,5,'+'); //表示2+5
//把空格重复多次,返回
const repeatspace(4) + '空格');
//如果需要别的函数把空格重复多次呢,或者感叹号!
//写一个生成函数的函数
const buildRepeatChar = char => {
return num => {
let res = '';
while(num--) {
res += char;
}
return res;
}
}