Javastrict

1，什么是Javastrict

1.1，概述

Javastrict是一门世界上最流行的脚本语言

1.2，历史

ECMAScript它可以理解为是Javastrict的一个标志

开发环境 ----- 线上环境， 版本不一致

2，快速入门

2.1，引入Javastrict

1，内部标签

    <script>
        alert('hello word')
    </script>

2，外部引入

script.js

alert('hello word')

<script src="JavaScript/script.js"></script>

2.2,基本语法入门

<!-- ！Javastrict严格区分大小写-->
    <script>
        //1,定义变量   变量类型  变量名  = 变量值；
        var score = 71;
        //条件控制
        if(score>60 && score<70 ){
            alert("60~70")
        }else if (score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }
        //console.log(score) 在浏览器的控制台打印变量 == System.out.println()
    </script>

2.3，数据类型

数值 ，文本 ， 图形 ， 音频 视频 。。。

number

Javastrict不区分小数和整数， number

字符串

‘abc’ "abc“

布尔值

true false

逻辑运算

&& || !

比较运算符

=

== 类型不一样 数值一样 结果也会为true

=== 绝对相等

null 和 undefined

• null 空

• undefined 未定义

数组

Java 的数值中必须是相同类型的对象 ~ ，Javastrict中不需要这样！

var arr = [1,2,3,4,'hello',null,true]

对象

对象是大括号，数组是中括号`~

每个属性之间用逗号隔开，最后一个不用

var person ={
    name:"lisa",
    age:4,
    tags:['js','java','med','...']
}

2.4，严格检查模式

<!-- 前提：IDEA 需要设置支持 ES6 语法
'use  strict';严格检查模式，预防Javastrict的随意性导向性导致产生的一些问题
必须写在Javastrict 的第一行！
局部变量建议使用let去定义~
-->
    <script>
        'use strict';
        // 全局变量
        let i = 1;
        //ES6  let
    </script>

3，数据类型

3.1，字符串

1，正常字符串我们使用 单引号，或者双引号包裹

2，转义字符

\t
\n
\'
\u4e2d  
"\x41"'

3，多行字符串编写

  //tab 上面  单点号
  var msg =
          `hello
          word
          你好`

4，模板字符串

'use  strict'
let name = "lisa";
let age = 5;
let msa = `你好 ,${name}`

5，字符串长度

console.log(str.length)

6，字符串不可变

var student ='lisa';
student[0] = 1;   
console.log(student);//lisa

7，大小写转换

console.log(student.toUpperCase()) //注 这里是方法
//LISA

8，查看某个字符的下标 student.indexOf(‘a’)

9，截取某个位置之后(或者之间)的字符 student.substring(1)

3.2，数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,56,3];//通过下标取值和赋值
console.log(arr[0]);
arr[0] = 3;
console.log(arr[0]);

1，长度

arr.length : 如果给arr.length赋值，数组大小就会发生变化~ 如果赋值太小，元素就会丢失

2，indexOf，通过元素获得下标索引

arr.lindexOf(2)
1

3，slice（）根据下标截取Array的一部分，并且返回一个新数组，类似于String中的substring

4，push() pop() 尾部

push:    压入尾部
pop:    弹出尾部一个元素

5，unshift(), shift() 头部

unshift ： 压入到头部
 shift    弹出头部的一个元素

6，排序 sort()

arr.sort()

7,元素反转 ；

arr.reverse()

8,concat（）

arr = [1,2,3]
(3) [1, 2, 3]
arr.concat(["a","b","c"])
(6) [1, 2, 3, "a", "b", "c"]
arr
(3) [1, 2, 3]

concat（）没有修改数组，只是会返回一个新数组

9，连接符join

arr.join(’—’) 在数组元素中添加连接符

3.3，对象

若干个键值对

var 对象名 ={
      属性名： 属性值，
      }

var person ={
    name:"lisa",
    age: 3,
    email:"23112@qq.com"
};

js对象中，{…}表示一个对象，键值对描述对象 多个属性之间用逗号隔开，最后一个属性之后不加符号。

1，对象赋值

person.name = "tome"
"tome"
person.name
"tome"

2，使用一个不存在的对象 不会报错！undefined

3，动态的删减属性，添加（直接赋值）

delete person.age
true
person.haha="lis"
"lis"

4，判断属性值是否在这个对象中！

'name' in person
true
//继承
'toString'in person
true

5，判断一个对象是否自身拥有某个属性hasOwnProperty(‘toString’)

person.hasOwnProperty('name')
true
person.hasOwnProperty('toString')
false

3.4，流程控制

if。。。。

while、、、

for、、、、

forEach循环

var arr = [1,2,3,4,56,3];//通过下标取值和赋值
arr.forEach(function (value) {
    console.log(value)

});

for … in…

for (var num in arr){  //num 获得为元素下标
    console.log(arr[num])
}

3.5，Map和 Set

map

var map = new Map([['tom',100],['jack',323]]);
var name =map.get('jack');//通过key获得value
map.set('admin',123);
console.log(name);
//控制台
map
Map(3) {"tom" => 100, "jack" => 323, "admin" => 123}

set :无序不重复的集合

var set = new Set([1,2,3,4,5,4,4,5,2]);
console.log(set);
set.add(6);
set.delete(1); //删除
console.log(set.has(2));//true  是否包含某个元素

3.6，iterator

1，通过 for …of for …in 遍历数组

var arr = [2,4,5,6];
for (lat x of arr){
    console.log(x)
}
for (lat num in arr){
    console.log(arr[num])
}

2，遍历Map

var map = new Map([["tom",100],["lisa",90],["jack",98]]);
for (let x of map){
    console.log(x)
}

3，遍历set

var set = new Set([1,2,3,4,5,4,4,5,2]);
for (let y of set){
    console.log(y)
}

4，函数

4.1，定义函数

绝对值函数

定义方式一

function abs(x) {
    if (x>=0){
        return x;
    }else{
        return -x;
    }
}
//abs(4)
4

一旦执行到return 代表函数接住，返回结果‘

定义方式二

var  abs = function(x){
   if (x>=0){
        return x;
    }else{
        return -x;
    }
}

function（x）{…}这是一个匿名函数。但是可以把结果赋值给abs 从而调用函数！

假设不存在参数，

function abs(x) {
    //如果无参数，手动抛出异常
    if (typeof x!== 'number'){
        throw 'not a number';
    }
    if (x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments

arguments是一个js免费赠送的关键词

代表传递进来的所有参数，是一个数组！

function abs(x) {
    console.log("x=>"+x);
    for (var i = 0; i <arguments.length ; i++) {
        console.log(arguments[i]);
    }
    if (x>=0){
        return x;
    }else{
        return -x;
    }
}

rrest

function aaa(a,b,c,...rest) {
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest 参数只能写在最后面，必须用 … 标识

4.2，变量作用域

在Javastrict中，var定义变量实际是有作用域的。

假设在函数体中声明，在函数体外不可以使用（闭包）

function yu() {
    var x = 1;
    x = x + 1;
}
x = x + 2;//x is not defined

两个函数使用相同变量名，在函数内部就不冲突

function yu() {
    var x = 1;
    x = x + 1;
}
function pq() {
    var x = 1;
    x = x + 1;
}

内部函数调用外部函数成员

function yu() {
    var x = 1;
    x = x + 1;
    function pq() {
        var y = x+ 1;//x  （内部函数）可以调用外部函数成员 反之不行
    }
}

内部函数变量和外部函数重名！

function yu() {
    var x = 1;
    function pq() {
        var x = 'a';
        console.log('inner'+x); inner a
    }
    pq();
    console.log('outer'+x); outer1
}
yu();

函数查找变量从自身函数查找，由内向外，外部存在重名变量，屏蔽外部，使用内部。

提示变量作用域

function yu() {
    var x = 'x' + x;
    console.log(x);//xundefined
    var y = 'y';
    }
yu();

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

可以把所有的变量放到前面赋值，便于代码维护

//var a ,c ,v

全局变量

var x = 1;//全局变量，放前面
function f() {
    console.log(x)
}
function f1() {
}

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);

alert()这个函数本身也是一个window变量

局部作用域let

function f() {
    for (var i = 0; i <10 ; i++) {
        console.log(i
    }
    console.log(i+1);//i出了f 作用域还可以使用  var
}

let关键字，es6

function f() {
    for (let i = 0; i <10 ; i++) {
        console.log(i
    }
    console.log(i+1);//i  is not defined
}

常量 const

es6之前，怎么定义常量：只有全部用大写字母的变量就是常量；建议不要修改这样的值

var PI = '3.14';
console.log(PI);
PI = '213';//可以改变这个值
console.log(PI);

ES6之后const

const P = '3.12';
console.log(P);
P = '32';//不可修改

4.3，方法

定义方法

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

var aa = {
    name:'lisa',
    bitrh:2000,
    //方法
    age: function () {
    //今年- 出生年月
        var now = new Date().getFullYear();
        return now - this.bitrh;
    }
};
aa.age();

this是无法指向的，默认指向调用它的那个对象

apply

 function age () {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}
var aa = {
    name:'lisa',
    bitrh:2000,
};
 age.apply(aa,[]);//this 指向了aa 参数为空

在js 中可以通过apply控制this的指向。

5，内部对象

5.1，Date

基本使用

'use strict';
var now = new Date(); // 现在时间
now.getFullYear();    // 年
now.getMonth();       // 月
now.getDate();        // 日
now.getDay();         //  星期几
now.getHours();        //  时
now.getMinutes();     //  分
now.getSeconds();      //  秒

now.getTime();// 时间戳 全世界统一 ·970 1~1 0:00:00 毫秒数

转换

now = new Date(15343256635)

5.2，JSON

什么是json

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

在Javastrict一切皆为对象，任何js支持的类型都可以用JOSN 表示，

格式：

• 对象用{}
• 数组用 【】
• 所有键值对 用key: value

JSON字符串和js对象的转换

<script>
    var user = {
        name:"lisa",
        age:3,
        sex:"女"
    };
    //将对象转换为JSON字符串
    var jsonUser = JSON.stringify(user)
    //将JSON字符串转换为对象
    var obj = JSON.parse('{"name":"lisa","age":3,"sex":"女"}')
</script>

5.3，Ajax

原生的js写法 xhr异步请求

jQuery 封装好的方法 $("#name").ajax("")

axios 请求

面对对象编程

6.1，什么是面向对象

Javastrict相对于java，c# … 面向对象；有些区别

• 类：模板
• 对象：具体的实例

原型

<script>
    var student = {
        name:"lisa",
        age:3,
        run:function () {
            console.log(this.name+"run...")
        }
    };
    var xiaoming = {
        name:"xiaoming"
    };
    xiaoming.__proto__ = student;
    var bird={
        fly:function () {
            console.log(this.name + "fly...")
        }
    };
    //xiaoming的原型是student
    xiaoming.__proto__ = bird;

</script>

class继承

'class’关键字ES6之后引入

1，定义一个类，属性，方法

<script>
//ES6之后
    //定义一个学生类
    class Student{
        constructor(name) {
            this.name= name;
        }
        hello(){
            alert('hello')
        }
    }
    var xiaoming = new Student("xiaoming")
    xiaoming,hello()

</script>

2,继承

<script>
//ES6之后
    //定义一个学生类
    class Student{
        constructor(name) {
            this.name= name;
        }
        hello(){
            alert('hello')
        }
    }
    //继承
    class xiao extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        mrgrade(){
            alert('我是xaio,')
    }
    }
    var xiaoming = new Student("xiaoming")

</script>

后面其他的没有总结。。。