ES5/String

目前ES5作为国际标准JavaScript版本

严格模式（了解）

我们都知道 js 是一个相对不很严谨的语言
而且开发的时候，一些代码也不是很严格要求
而严格模式就是对开发的时候写的一些内容做了要求

开启严格模式

想开启严格模式，直接在代码最开始的位置写上字符串 use strict

<script>
    // 全局开启
	'use strtic'
	
	// 局部开启 建议
	function foo(){
        "use strict"
        
    }
	// 下面代码书写就要按照严格模式来书写
</script>

严格模式的规则

声明变量必须有 var 关键字，未经声明的变量，不允许直接赋值
```
'use strtic'

var num = 100
num2 = 200 // 这个就会报错
```
- 之前了解过，在声明变量的时候，如果没有 var 关键字，那么按照作用域的规则会自动定义成全局变量
- 严格模式下不可以，会报错
函数的行参不可以重复
```
'use strtic'

function fn(p1, p1) {} // 直接就会报错
```
- 在非严格模式下，函数两个行参一样，是不会报错的，只不过就是相当于在函数内部只有一个变量了
- 但是在严格模式下会报错
声明式函数调用的时候函数内部没有 this
```
'use strtic'

function fn() {
  console.log(this) // undefined
}
fn()
```
- 本身，全局声明式函数在调用的时候，函数内部的 this 是指向 window 的
- this没必要指向window
- 在严格模式下，是没有 this 的，this会被赋值为undefined

ES5 中常见的数组常用方法

之前我们讲过的数组常用方法都是 ES3 的方法
今天来说一些 ES5 中的方法

indexOf

indexOf 用来找到数组中某一项的索引
语法： indexOf(你要找的数组中的项)
```
var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(3)

console.log(index) // 2
```
- 我们要找的是数组中值为 3 的那一项
- 返回的就是值为 3 的那一项在该数组中的索引

如果你要找的内容在数组中没有，那么就会返回 -1

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(10)

console.log(index) // -1

你要找的值在数组中不存在，那么就会返回 -1

forEach

和 for 循环一个作用，就是用来遍历数组的

语法：arr.forEach(function (item, index, arr) {})

forEach参数函数调用的次数：和数组项数一致
作为遍历方法核心的意义在于取出数组之中所有的数据
作为参数的函数可以接受一些形参，形参是由封装的功能进行传递的

var arr = [1, 2, 3]

// 使用 forEach 遍历数组
arr.forEach(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})

//实现forEach的封装：
function forEach(arr,fn){
    for(var i = 0;i<arr.length;i++){
        fn(arr[i],i,arr);
    }
}
forEach(arr,function(item,index){
    console.log(item,index);
})

forEach() 的时候传递的那个函数，会根据数组的长度执行
数组的长度是多少，这个函数就会执行多少回

操作数组的；迭代器：基于原有数据的更新

map

和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

返回一个新的数组
新数组里面承载的数据就是遍历时函数返回的数据
map参数也是一个函数
map参数函数的形参和forEach 一样

var arr = [1, 2, 3]

// 使用 map 遍历数组
var newArr = arr.map(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item + 10
});

console.log(newArr) // [11, 12, 13]

var salary_list = [ 28000 , 29000 , 3000 , 8000 , 15000];
// 迭代器的高级用法：
// - join(); 数组变成字符串
var html = "";
var new_salary_string = salary_list.map(function(item){
    return "<h1>xxx的薪资为"+item+"</h1>"
}).join("");


// 封装map
function map(arr,fn){
    //map是有返回值的
    var res = [];
    for(var i=0;i<arr.length;i++){
        var a = fn(arr[i],i,arr);
        res.push(a);
    }
    return res;
}

var res = map(salary_list,function(item,index){
    return item*1.2
})

filter

和 map 的使用方式类似，按照我们的条件来筛选数组
把原始数组中满足条件的筛选出来
返回值组成一个新的数组返回，新的数组之中是我们根据条件筛选的数据

我们会对数组之中的每一项数据添加一个逻辑，如果函数的返回值为true，那么就把这条数据加入到新数组之中

var arr = [1, 2, 3]// 使用 filter 过滤数组var newArr = arr.filter(function (item, index, arr) {  // item 就是数组中的每一项  // index 就是数组的索引  // arr 就是原始数组  return item > 1})console.log(newArr) // [2, 3]//filter配合商品对象的使用//filter 封装;function filter(arr,fn){    var res = [];    for(var i=0 ; i<arr.length;i++){        // 根据函数的返回值决定是否将这项数据放入到新数组之中        if(fn(arr[i],i,arr)){            res.push(arr[i]);        }    }    return res;}

我们设置的条件就是 > 1
返回的新数组就会是原始数组中所有 > 1 的项

reduce：归并;

归：归纳；

并：合并；

求和

var arr = [1,2,3,4,5,6,7];    var res = arr.reduce(function(acc,cur,index,src)){                     /*                     	acc    累加器                     	- 第一次执行时，就是reduce的第二个参数                     	cur    当前值                     	index  当前索引                     	src    源数组                     */                     return acc+cur;                     },0);//reduce 的第二个参数是在第一次调用函数时给函数prev参数赋值的数据console.log(res);var arr = [1,2,3,4,5,6,7];//reduce的第二个参数可以省略var res = arr.reduce(function(acc,cur,index,src)){  /*    acc    累加器    - 第一次执行时，如果reduce没有传递第二个参数，那么prev就是数组的第一项数据    - 此时的cur就代表顺延向后的一个数据   */ 	  return acc+cur;      });

创建字符串（了解）

我们创建字符串也分为两种方法 字面量 和 构造函数
字面量：
```
var str = 'hello'
```
构造函数创建
- 构造函数创建出来的字符串是对象类型
- JavaScript之中任意类型都可以用对象表达
  - 这种方式表达字符串类型，不建议使用
```
var str = new String('hello')
```

ASCII 字符集（了解）

我们都知道，计算机只能存储 0101010 这样的二进制数字
那么我们的 a ~ z / A ~ Z / `` / @ /… 之类的内容也有由二进制数字组成的
我们可以简单的理解为， a ~ z / A ~ Z / `` / @ /… 之类的内容都有一个自己的编号，然后在计算机存储的时候，是存储的这些编号，我们看的时候，也是通过这些编号在解析成我们要看到的内容给我们看到

上面的就是 ASCII 对照表，我们只需要知道他是这么存储的就好

unicode 编码

我们看到了，ASCII 只有这 128 个字符的编码结构
但是因为 ASCII 出现的比较早，而且是美国发明的，早起时候这些内容就够用了
因为存储一些英文的内容，传递一些英文的文章什么的都够用了
那么对于这个世界来说肯定是不够用的
因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储
所以就出现了 unicode 编码，也叫（万国码，统一码）
unicode 对照表就是一个和 ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多
Unicode最常见的表现方式：FFFF 四位数的十六进制编码
而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照 unicode 编码转换成数字进行存储
我们的 UTF-8 就是一种 8 位的unicode字符集

字符串的常用方法

我们操作字符串，也有一堆的方法来帮助我们操作
字符串和数组有一个一样的地方，也是按照索引来排列的

charAt

charAt(索引) 是找到字符串中指定索引位置的内容返回
```
var str = 'Jack'// 使用 charAt 找到字符串中的某一个内容var index = str.charAt(2)console.log(index) // c
```
- 因为字符串也是按照索引进行排列的，也是同样从 0 开始
- 所以索引 2 的位置就是 c
如果没有对应的索引，那么就会返回空字符串
```
var str = 'Jack'// 使用 charAt 找到字符串中的某一个内容var index = str.charAt(10)console.log(index) // ''
```
- 这个字符串根本没有索引 10 的位置
- 所以就会返回一个空字符串 ''

charCodeAt

charCodeAt(索引) 就是返回对应索引位置的 unicode 编码
```
var str = 'Jack'// 使用 charAt 找到字符串中的某一个内容var index = str.charCodeAt(0)console.log(index) // 74
```
- 因为 J 在 unicode 对照表里面存储的是 74，所以就会返回 74

indexOf

indexOf 就是按照字符找到对应的索引
```
var str = 'Jack'// 使用 indexOf 找到对应的索引var index = str.indexOf('J')console.log(index) // 0
```
- 因为字符 J 在字符串 Jack 中的索引位置是 0
- 所以会返回 0

substring、slice截取一部分字符

substring 是用来截取字符串使用的
语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引
```
var str = 'hello'//         01234// 使用 substring 截取字符串var newStr = str.substring(1, 3)console.log(newStr) // el
```
- 从索引 1 开始，到索引 3 截止，包含前面的索引不包含后面的索引
- 所以返回的是 el
subString和slice的负数处理不同：
- slice是从后往前数
- subString 从0开始

substr（不建议使用）

substr 也是用来截取字符串的
语法：substr(从哪个索引开始，截取多少个)
```
var str = 'hello'//         01234// 使用 substr 截取字符串var newStr = str.substr(1, 3)console.log(newStr) // ell
```
- 这个方法和 substring 不一样的是，第二个参数是截取多少个
- 从索引 1 开始，截取 3 个，所以得到的是 ell

split(); 把字符串转换为数组

split参数表示以谁为间隔，同时split也会删除间隔的字符

var str5 = "hello world";console.log( str5.split("") );console.log( str5.split("o") );

replace：替换

替换一部分字符；
返回新的字符串，不是改变原来的字符串

var str8 = "hello wrold";console.log( str8.replace( "l" , "*") );

toLowerCase 和 toUpperCase

这两个方法分别使用用来给字符串转成小写字母和大写字母的

var str = hello// 使用 toUpperCase 转换成大写var upper = str.toUpperCase()console.log(upper) // HELLO// 使用 toLowerCase 转换成小写var lower = upper.toLowerCase()console.log(lower) // hello

padStart(字符必须有多少位，如果不够位数用这个字符补齐);

ES8的api，谨慎使用

var code =  str3.charCodeAt( 0 ).toString(16);code = code.padStart( 4 ,"0" );console.log( code );

以对象为容器实现统计字符串中每个字符的个数

没有这个属性的时候：结构创建
有了这个属性的时候：结构数据改变

var obj = {};// in：判断属性是否存在于对象之中；for(var i=0;i<str.length;i++){    if(str[i] in obj){        // 如果存在就让计数自增        obj[str[i]]++;    }else{        // 如果不存在，创建新的结果        obj[str[i]]=1;    }}console.log(obj);// 把创建好的对象展示在页面上for(var letter in obj){    document.write(letter + "有" + obj[letter] + "个");    document.write("</br>");}

字符串渲染页面

根据对象/数组，拼接成我们需要的符合html结构的字符串，这种行为称之为页面渲染
找到需要的数据：
1. 抓数据；
2. 自己写数据；
对象/数组 => 拼接html字符串，放入到页面上；
获取数据的结构：
- 对象套着数组
规范的页面渲染模式：
- 先布局
- 再去把数据进行转换

var list = [                  {                        "courseId": 1113,                        "image": "https://image.gogoup.com/20201030/1604065076527.jpg",                        "name": "设计师版真心话大盘点",                        "type": 7,                        "url": "https://www.gogoup.com/member/GMTExMw==?utm_source=zcool&utm_medium=index&utm_campaign=homepage_course&utm_content=1113&utm_term=lb"                  },                  {                        "courseId": 1377,                        "image": "https://image.gogoup.com/20210728/1627436489830.jpg",                        "name": "C4D+AE动态视觉综合提升班",                        "type": 9,                        "url": "https://www.gogoup.com/course/GMTM3Nw==?utm_source=zcool&utm_medium=index&utm_campaign=homepage_course&utm_content=1377&utm_term=lb"                  },                  {                        "courseId": 1494,                        "image": "https://image.gogoup.com/20210721/1626861847105.jpg",                        "name": "产品摄影&商业精修全能班",                        "type": 9,                        "url": "https://www.gogoup.com/course/GMTQ5NA==?utm_source=zcool&utm_medium=index&utm_campaign=homepage_course&utm_content=1494&utm_term=lb"                  },                  {                        "courseId": 1512,                        "image": "https://image.gogoup.com/20210722/1626939313230.jpg",                        "name": "实用商业插画全能班(录播精选+直播）",                        "type": 9,                        "url": "https://www.gogoup.com/course/GMTUxMg==?utm_source=zcool&utm_medium=index&utm_campaign=homepage_course&utm_content=1512&utm_term=lb"                  },                  {                        "courseId": 1184,                        "image": "https://image.gogoup.com/20210616/1623831575766.png",                        "name": "UI设计进阶班(即将停售)",                        "type": 9,                        "url": "https://www.gogoup.com/course/GMTE4NA==?utm_source=zcool&utm_medium=index&utm_campaign=homepage_course&utm_content=1184&utm_term=lb"                  }            ]            // - 规范的页面渲染模式 :             // 1. 先布局;             // 2. 再去把数据进行转换;            function render(){                  // 把list数据拼接成符合结构规则的字符串;                   var html = "<div class='container'>";                  for(var i = 0 ; i < list.length ; i ++){                        html += '<div class="box">' +                                     '<img src="'+ list[i].image+'" alt="">' +                                    '<p>'+ list[i].name +'</p>' +                               '</div>'                  }                  html += "</div>"                  document.write(html)            }            render();

JavaScript-字符串

ES5/String

严格模式（了解）

开启严格模式

严格模式的规则

ES5 中常见的数组常用方法

indexOf

forEach

操作数组的；迭代器：基于原有数据的更新

map

filter

reduce：归并;

创建字符串（了解）

ASCII 字符集（了解）

unicode 编码

字符串的常用方法

charAt

charCodeAt

indexOf

substring、slice截取一部分字符

substr（不建议使用）

split(); 把字符串转换为数组

replace：替换

toLowerCase 和 toUpperCase

padStart(字符必须有多少位，如果不够位数用这个字符补齐);

以对象为容器实现统计字符串中每个字符的个数

字符串渲染页面

推荐阅读