打印你的第一个hello world
- 使用console.log()打印东西到控制台
console.log("hello world");
变量
在ES6出现之前使用var来定义变量,但var定义变量作用域是全局的,对于编程语言来说这是比较不规范的。
if(1){
var i=0;
}
console.log(i);
对于C++这样的静态语言,则会报错i没有定义,在javascript中则是输出了0,而我们使用let定义变量。
if(1){
let uselet=0;
}
//console.log(uselet);
//Uncaught ReferenceError: uselet is not defined
//则会产生异常
可见我们能使用let 就不要使用 var
定义常量(不过多阐述对有编程基础的学习者)
const num=1000;
//num=999;
//Uncaught TypeError: Assignment to constant variable.
console.log("num:",num);
JavaScript两种类型变量
值类型与引用类型
值类型:String Number Boolean undefined null
引用类型:Object Array Function
if(1){
//String
let name="gaowanlu";
//Number
let m=30;
//Boolean
let k=true;
//undefined
let u=undefined;
//null
let n=null;
}
编程语言有两种:动态语言 静态语言
JavaScript属于前者,也就是说我们定义了变量,什么时候想改变它的数据类型就可以改变。
在C++中、一旦编码 int variable=1; 我们就无法把variable当float使用 在Javascript中 let i="javascript"; i=10; 这是完全可行的操作
if(1){
let v=1;
console.log(typeof(v));
v="string"
console.log(typeof(v));
}
JavaScript一切皆对象
Object
if(1){
let person={
name:"gaowanlu",
age:11
};
console.log(person.name);
console.log(person["name"]);
person.phone="133466377";
console.log(person);
console.log(person.phone);
let key="phone";
console.log(person[key]);
}
Array
if(1){
let array=['red',1,'guy'];
console.log(array[0]);
array[0]="yellow";
console.log(array);
//得到数组长度
console.log(array.length);
}
Function
if(1){
function hello(name){
if(typeof(name)=="string"){
console.log(name+" hello.");
return true;
}else{
return false;
}
}
hello("gaowanlu");
}
操作符、运算符(不详细介绍、这是编程很基础的东西)
/*
+ - * / 加减乘除
= 赋值
+= -= *= /= 加减乘除
% 取余
** 指数
++ -- 自加1 自减1
> >= < <= != == === 比较运算符
&& || ! 与 或 非
*/
三元运算符
if(1){
let output=2>1?"2>1":"2<1";
console.log(output);
}
JavaScript中的类假值
/*
Falsy(false)
undefined
null
0
false
''
NaN
*/
位运算符
if(1){
console.log(1|2);//位或
console.log(1&2);//位或
}
运算符优先级
(省略)
if语句
/*
因为与大多数编程风格一样(Python除外):省略
if(){
if(){
}
}else if(){
if(){
}else{
}
}else{
}
*/
switch case语句
/*
与C/C++相同
switch(){
case __:_________;break;
case __:_________;break;
default:—————————break;
}
*/
JavaScript 循环
for 、 while、 do while、 for in、 for of
if(1){
for(let i=0;i<5;i++){
console.log(i);
}
let i=0;
while(i<5){
i++;
}
i=0;
do{
i++;
}while(i<5);
}
if(1){
let person={
name:"gaowanlu",
age:19
};
for(let key in person){
console.log(key," : ",person[key]);
}
let colors=['red','green','blue'];
for(let index in colors){
console.log(colors[index]);
}
for(let val of colors){
console.log(val);
}
}
break 与 continue
省略
详细学习Object
if(1){
let person={
name:"gaowanlu",
phone:"133466377",
call:function(){
console.log(this.name,this.phone);
this.class_sum+=1;
},
class_sum:0,
};
console.log(person);
person.call();
console.log(person);
}
工厂函数
function create_obj(){
let person={
name:"gaowanlu",
phone:"133466377",
call(){//call()是class:function()的缩写
console.log(this.name,this.phone);
this.class_sum+=1;
},
class_sum:0,
};
return person;
}
if(1){
let obj=create_obj();
console.log(obj);
}
构造函数(函数即对象)
function Circle(radius){
this.radius=radius;
this.show=function(){
console.log(this.radius);
}
}
if(1){
let cir=new Circle(10);
//如果没写new那么Circle内的this指向window,致命行为
cir.show();
}
对象动态性
if(1){
let person={
name:"gaowanlu"
};
person.phone="133";//添加属性
delete person.name;//删除属性或者方法
console.log(person);
}
枚举对象成员
if(1){
let person={
name:"gaowanlu",
age:19
};
for(let key in person){
console.log(person[key]);
}
for(let key of Object.keys(person)){
console.log(person[key]);
}
for(let entry of Object.entries(person)){
console.log(entry);
}
/*
Object.entries(person)=
[["name", "gaowanlu"],["age", 19]]
*/
}
克隆对象
if(1){
let person={
name:"gaowanlu",
age:19
};
let another={};
for(let key in person){
another[key]=person[key];
}
console.log(another);
//使用Object.assign()
another= Object.assign({color:"yellow"},person);
console.log(another);//{color: "yellow", name: "gaowanlu", age: 19}
//使用{...objname}
another={...person};
}
垃圾回收
内存自动管理
Math对象
String对象
if(1){
const message="gaowanlu";
常用方法
//concat()
let name="gaowanlu";
console.log(name.concat(" hello ","YES"));
模板语法
let show=`${name}fdfd${name}`;
.split()将字符串切为数组
let numbers="1 2 3 4 5 6";
numbers=numbers.split(' ');
console.log(numbers);//[1,2,3,4,5,6]
}
Date对象
省略
Array对象
Adding Elements 添加元素
if(1){
const numbers=[3,4,5];
//const数组我们不能修改,numbers但能修改数组的内部
.push()在后面添加新元素
numbers.push(6,7,8);
console.log(numbers);//[3,4,5,6,7,8]
.unshift()在前面添加新元素
numbers.unshift(1,2);
console.log(numbers);//[1, 2, 3, 4, 5, 6, 7, 8]
.splice()在中间插入新元素
numbers.splice(2,0,'a','b');//从下标2开始,删除0个,插入a b
console.log(numbers);//[1, 2, "a", "b", 3, 4, 5, 6, 7, 8]
// .splice()第一个参数是插入位置下标,第二个参数删除几个元素,后面为新元素
}
Finding Elements(Primitives)查找元素(值类型)
if(1){
const numbers=[1,2,3,4,5,1,2,3,4,5];
.indexOf(el,start)查找第一个符合要求的元素
console.log(numbers.indexOf(5));//start为从那个下标开始查找
/* 4 即第一个符合要求的元素的下标,找不到返回-1 */
.lastIndexOf()查找最后一个符合要求的元素
console.log(numbers.lastIndexOf(5));
/* 输出: 9 */
.includes() 检查数组中有没有某个元素返回布尔值
console.log(numbers.includes(1));
}
Finding Elements(Object)查找元素(对象)
if(1){
const course=[
{id:1,name:'a'},
{id:2,name:'b'}
];
.find() 方法 返回第一个匹配的对象
var found=course.find(function(el){
return el.id==1&&el.name=='a';
});
console.log(found);
//{id: 1, name: "a"}
.findIndex() 方法 返回第一个匹配的对象的下标
found=course.findIndex(function(el){
return el.id==1;
});
console.log(found);//输出:0
}
箭头函数
if(1){
const courses=[
{id:1,name:'a'},
{id:2,name:'b'}
];
const course=courses.find((el)=>{
return el.name==='a';
});
/*
(参数列表)=>{函数体},当只有一个参数是可以写为
参数列表=>{函数体}
*/
console.log(course);
}
Removing Elements(删除元素)
if(1){
const array=[1,2,3,4,5,6,7,8,9];
.splice(index,count)
array.splice(2,3);//从下标2开始删除后面3个元素
console.log(array);//[1,2,6,7,8,9]
}
Emptying an Array(清空数组)
if(1){
let numbers=[1,2,3,4];
console.log(numbers);
=[] 赋值清空
numbers=[];
.length=0 清空
numbers=[1,2,3];
numbers.length=0;
console.log(numbers);
.splice(0,numbers.length) 清空
numbers=[1,2,3];
numbers.splice(0,numbers.length);
.pop()清空
numbers=[1,2,3,4];
while(numbers.length>0){
numbers.pop();
}
}
Combining Arrays(组合和切割数组)
if(1){
.concat() 数组合并
let array_1=[1,2,3];
let array_2=[4,5,6];
let array_concat=array_1.concat(array_2);
console.log(array_concat);
//[ 1, 2, 3, 4, 5, 6 ]
.slice(start_index,end_index_after)切割数组
array_1=[1,2,3,4,5,6,7,8,9];
array_1=array_1.slice(2,4);
console.log(array_1);
[...__,...__] 拼接数组
array_1=[1,2,3];
array_2=[4,5,6];
console.log([...array_1,"a",...array_2]);
//[ 1, 2, 3, 'a', 4, 5, 6]
}
遍历数组
if(1){
let array=[1,2,3,4,5,6,7,8,9];
传统for循环
for(let i=0;i<array.length;i++){
array[i]=2*array[i];
}
.forEach(function)
array.forEach(function(el){
console.log(el);
});
}
Joining Arrays(连接数组元素)
if(1){
let numbers=[1,2,3];
let string=numbers.join(",");
console.log(string);//1,2,3
}
Sorting Arrays(数组排序)
if(1){
let numbers=[1,2,5,3,2,7,8];
.sort() 方法
numbers.sort();
/*
[
1, 2, 2, 3,
5, 7, 8
]*/
console.log(numbers);
.reverse()方法 反转数组元素序列
numbers.reverse();
console.log(numbers);
/*[8, 7, 5, 3, 2, 2, 1]*/
数组根据对象属性排序
let courses=[
{id:1,name:'gaowanlu'},
{id:2,name:'ming'}
];
courses.sort(function(obj_a,obj_b){
if(obj_a.id<obj_b.id) return 1;
if(obj_a.id>obj_b.id) return -1;
return 0;
});
console.log(courses);
//[ { id: 2, name: 'ming' }, { id: 1, name: 'gaowanlu' } ]
}
检测数组中的元素
if(1){
let numbers=[1,2,3];
.every()
let result=numbers.every(function(el){//全部都是数组返回true
return typeof(el)=="number";
});
console.log(result);//true
numbers=[1,"ds"];
.some()
result=numbers.some(function(el){
return typeof(el)=="string";
});
console.log(result);//true
}
过滤数组元素
if(1){
.filter(function)
let numbers=[1,-1,2,3];
numbers=numbers.filter(function(el){
return el>=0;
});
console.log(numbers);//[ 1, 2, 3 ]
}
数组映射
if(1){
let numbers=[1,-1,2,3];
.map()
let items=numbers.map(function(el){
return `'<li>'+el.toString()+'</li>';`
});
console.log(items);
//`[ '<li>1</li>', '<li>-1</li>', '<li>2</li>', '<li>3</li>' ]`
items=items.join("\n");
console.log(items);
/*`
<li>1</li>
<li>-1</li>
<li>2</li>
<li>3</li>
`*/
}
缩减数组
if(1){
.reduce() 方法
let numbers=[1,2,3,4,5,6];
let sum=numbers.reduce(function(sum,cur){
return sum+cur;
});
console.log(sum);
//21
}
函数表达式与函数声明
if(1){
function SuperCar(){
console.log("Tesla");
}
let tesla=function(){
console.log("Tesla");
}
}
深入函数参数
if(1){
使用arguments
let sum=function(a,b){
let sum=0;
for(let i of arguments){
sum+=i;
}
return sum;
}
console.log(sum(1,2,3,4,5));
//输出:15
余下操作符
sum=function(none,...args){
return args.reduce(function(sum,cur){
return sum+cur;
});
}
console.log(sum(99,11,1,1));
//输出: 13
参数默认值
sum=function(a=1,b=1){
return a+b;
}
console.log(sum());//输出: 2
}
getters and setters 取存器
if(1){
let obj={
count:0,
data:"",
get num(){
return num;
},
set num(el){
this.data=el;
this.count+=1;
}
}
obj.num=1;
obj.num=2;
console.log(obj.count);//输出 2
}
异常
if(1){
try{
throw new Error("new Error");
}catch(err){
}finally{
}
}
this
this指向对象本身